基于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} 学习下来 受益匪浅

手动艾特作者 @浩麟 大佬