Headless Chrome：服务端渲染JS站点的一个方案【中篇】【翻译】

接上篇

防止重新渲染

其实说不对客户端代码做任何修改是忽悠人的。在我们的Express 应用中，通过Puppteer加载页面，提供给客户端响应，但是这个过程是有一些问题的。

js脚本在服务端的Headless Chrome 中执行过一次，但是等浏览器拿到真正的结果后，并不会阻止js再次执行，所以这种情况下js会执行两次（客户端一次，服务端一次）

针对我们的例子，我们可以简单的修复一下，我们需要告诉页面，需要的html已经生成了，不需要再次生成了，所以我们可以简单的检测<ul id="posts"> 是否在初始化时已存在，如果存在，说明在服务端已经渲染OK，没有必要重新渲染了。代码简单修改如下：

public/index.html

 <html>

 <body>

   <div id="container">

     <!-- Populated by JS (below) or by prerendering (server). Either way,

          #container gets populated with the posts markup:

       <ul id="posts">...</ul>

     -->

   </div>

 </body>

 <script>

 ...

 (async() => {

   const container = document.querySelector('#container');

   // Posts markup is already in DOM if we're seeing a SSR'd.

   // Don't re-hydrate the posts here on the client.

   const PRE_RENDERED = container.querySelector('#posts');

 //只有dom不存在时，才会在客户端渲染

   if (!PRE_RENDERED) {

     const posts = await fetch('/posts').then(resp => resp.json());

     renderPosts(posts, container);

   }

 })();

 </script>

 </html>

优化

除了缓存预渲染后的结果之外，其实有很多有趣优化方案通过ssr（）。有些优化方案是比较容易看到成效的，有的则需要细致的思考才能看到成效，这主要根据应用页面的类型以及应用的复杂度而定。

终止非必须请求

当前，整个页面（以及页面中的所有资源）都是在无头chrome中无条件加载。然后，我们实际上只关注两件事儿：

1.渲染后的Html 标签

2.能够生成标签的js请求

所以不构建Dom结果的网络请求都是浪费网络资源。比如图片、字体文件、样式文件和媒体资并不实际参与构建HTML。样式只是完整或者布局DOM，但是并不会显示的创建它，所以我们应该告诉浏览器忽略掉这些资源！这样做我们可以很大程度的节省带宽提升预渲染的时间，尤其对于包含了大量资源的页面。

Devtools协议支持一个强大的特性，叫做网络拦截，这种机制可以让我们在浏览器真正发起请求之前修改请求对象。Puppteer通过开启page.setRequestInterception(true)并设置page对象的请求事件，来启用网络拦截机制。它允许我们终止对某种资源的请求，放行我们允许的请求。

ssr.mjs

 async function ssr(url) {

   ...

   const page = await browser.newPage();

   // 1. 启用网络拦截器.

   await page.setRequestInterception(true);

   page.on('request', req => {

     // 2.终止掉对不构建DOM的资源请求    // (images, stylesheets, media).

     const whitelist = ['document', 'script', 'xhr', 'fetch'];

     if (!whitelist.includes(req.resourceType())) {

       return req.abort();

     }

     // 3. 其他请求正常放行

     req.continue();

   });

   await page.goto(url, {waitUntil: 'networkidle0'});

   const html = await page.content(); // serialized HTML of page DOM.

   await browser.close();

   return {html};

 }

内联资源文件内容

通常情况下，我们使用构建工具（如gulp等）在构建时直接把js、css等内联到页面中。这样中可以提升通过减少http请求来提升页面初始化性能。

除了使用构建工具外，我们也可以使用浏览器做同样的工作，我们可以使用Puppteer操作页面DOM，内联styles、Javascript以及其他你想在预渲染之前内联进去的资源。

这个列子展示了如果通过拦截响应对象，把本地css资源内联到page的style标签中：

import urlModule from 'url';

const URL = urlModule.URL;

async function ssr(url) {

  ...

  const stylesheetContents = {};

  // 1. Stash the responses of local stylesheets.

  page.on('response', async resp => {

    const responseUrl = resp.url();

    const sameOrigin = new URL(responseUrl).origin === new URL(url).origin;

    const isStylesheet = resp.request().resourceType() === 'stylesheet';

//对和页面同一个域名的styles 暂存

    if (sameOrigin && isStylesheet) {

      stylesheetContents[responseUrl] = await resp.text();

    }

  });

  // 2. Load page as normal, waiting for network requests to be idle.

  await page.goto(url, {waitUntil: 'networkidle0'});

  // 3. Inline the CSS.

  // Replace stylesheets in the page with their equivalent <style>.

  await page.$$eval('link[rel="stylesheet"]', (links, content) => {

    links.forEach(link => {

      const cssText = content[link.href];

      if (cssText) {

        const style = document.createElement('style');

        style.textContent = cssText;

        link.replaceWith(style);

      }

    });

  }, stylesheetContents);

  // 4. Get updated serialized HTML of page.

  const html = await page.content();

  await browser.close();

  return {html};

}

对上述代码做一下简单说明：

1、使用page.on("response") 事件监听网络响应。

2、拦击对本地css资源的响应并暂存

3、找到所有link标签，替换为style标签，并设置textContent 为上一步暂存的内容。

自动最小化资源

另外一招你可以使用网络拦截器的是响应内容

比如，举个例子来说，那你想在你的app中压缩css资源，但是你同时希望在开发阶段不做任何压缩。那么这时你也可以通过在Puppteer在预渲染阶段重写响应内容，具体如下代码：

 import fs from 'fs';

 async function ssr(url) {

   ...

   // 1. Intercept network requests.

   await page.setRequestInterception(true);

   page.on('request', req => {

     // 2. If request is for styles.css, respond with the minified version.

     if (req.url().endsWith('styles.css')) {

       return req.respond({

         status: 200,

         contentType: 'text/css',

         body: fs.readFileSync('./public/styles.min.css', 'utf-8')

       });

     }

     ...

     req.continue();

   });

   ...

   const html = await page.content();

   await browser.close();

   return {html};

 }

这里主要是使用request.respond方法，可直接查看接口说明文档https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#requestrespondresponse

复用当个Chrome实例

每次预渲染都启动一个browser实例会有很大的服务器负担，所以更好的方法是，渲染不同页面的时候或者说启动不同渲染器的时候使用同一个实例，这样能很大的程度的节省服务端的资源，增加预渲染的速度。

Puppteer可以通过调用Puppteer.connect(url) 来连接到一个已经存在的实例，进而避免创建新的实例。为了保持一个长期运行的browser实例，我们可以修改我们的代码，把启动chrome的代码从ssr（）移动到Express Server入口文件中：

server.mjs

import express from 'express';

import puppeteer from 'puppeteer';

import ssr from './ssr.mjs';

let browserWSEndpoint = null;

const app = express();

app.get('/', async (req, res, next) => {

  if (!browserWSEndpoint) {

    const browser = await puppeteer.launch();

    browserWSEndpoint = await browser.wsEndpoint();

  }

  const url = `${req.protocol}://${req.get('host')}/index.html`;

  const {html} = await ssr(url, browserWSEndpoint);

  return res.status(200).send(html);

});

ssr.mjs

import puppeteer from 'puppeteer';

/**

 * @param {string} url URL to prerender.

 * @param {string} browserWSEndpoint Optional remote debugging URL. If

 *     provided, Puppeteer's reconnects to the browser instance. Otherwise,

 *     a new browser instance is launched.

 */

async function ssr(url, browserWSEndpoint) {

  ...

  console.info('Connecting to existing Chrome instance.');

  const browser = await puppeteer.connect({browserWSEndpoint});

  const page = await browser.newPage();

  ...

  await page.close(); // Close the page we opened here (not the browser).

  return {html};

}

中篇结束，下篇为最终篇（定时跑预渲染例子&其它注意事项）请持续关注

我的博客即将搬运同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=1v8oi9k363vog