基於headless-chrome的通用服務端渲染方案

chrome-render

基於Headless chrome的高性能，通用服務器渲染，可在服務器中渲染任何SPA（瀏覽器中的渲染數據）以進行SEO或其餘優化。

使用

1. 從npm安裝它 npm i chrome-render
2. new a ChromeRender then use it to render a web page, a ChromeRender means a chrome.

const ChromeRender = require('chrome-render');
// ChromeRender.new() return a Promise, you can use async function in this way:
// const chromeRender = await ChromeRender.new(); 
ChromeRender.new({}).then(async(chromeRender)=>{
    const htmlString = await chromeRender.render({
       url: 'http://qq.com',
    });
});  
複製代碼

一個chromeRender實例能夠調用render多時間和併發的高頻率使用狀況。 chromeRender將一個選項卡池管理爲render多頁併發。

3. 在再也不須要chromeRender以後，您應該調用await chromeRender.destroyRender()kill chrome add釋放全部資源。

API

ChromeRender.new() 方法支持選項：

• maxTab：numbermax chrome chrome將打開以渲染頁面，默認值是無限制，maxTab用於避免過多的chrome致使chrome崩潰。ChromeRender將建立一個選項卡輪詢以重用選項卡，以提升性能並減小資源，由於chrome中的打開和關閉選項卡須要時間，例如數據庫鏈接輪詢。
• chromeRunnerOptions：object與chrome-runner的選項相同，能夠配置chrome的啓動選項，詳細信息請參閱chrome-runner的選項

chromeRender.render() 方法支持選項：

• url：string是必填項，網頁的URL
• cookies：object {cookieName:cookieValue}是一個可選參數。在請求網頁時設置HTTP cookie
• headers：object {headerName:headerValue}是一個可選參數。在請求網頁時添加HTTP標頭
• useReady：boolean是否window.isPageReady=1已準備好用於通知chrome-render頁面。默認爲false chrome-render使用，domContentEventFired由於頁面已準備就緒。
• script：string是一個可選參數。注入腳本源以評估頁面什麼時候加載
• renderTimeout：number以毫秒爲單位，render()若是html字符串以後沒法解析，則會引起錯誤renderTimeout，默認值爲5000ms。
• deviceMetricsOverride：object爲響應型網站覆蓋設備屏幕尺寸的值，詳細用法請參見此處
• clearTab：boolean若是true渲染chrome實例以後將導航about:blank到可用資源。默認值爲true。設置爲false渲染同一網站時可能會提升頁面加載速度。

chrome-render的全部請求都將帶有HTTP標頭 x-chrome-render:${version} 學習下來 受益不淺

手動艾特做者 @浩麟 大佬