Headless Chrome:服务端渲染JS站点的一个方案【中篇】【翻译】防止重新渲染优化

接上篇

防止重新渲染

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

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

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

public/index.html

 1 <html>
 2 <body>
 3   <div id="container">
 4     <!-- Populated by JS (below) or by prerendering (server). Either way,
 5          #container gets populated with the posts markup:
 6       <ul id="posts">...</ul>
 7     -->
 8   </div>
 9 </body>
10 <script>
11 ...
12 (async() => {
13   const container = document.querySelector('#container');
14 
15   // Posts markup is already in DOM if we're seeing a SSR'd.
16   // Don't re-hydrate the posts here on the client.
17   const PRE_RENDERED = container.querySelector('#posts');
18 //只有dom不存在时,才会在客户端渲染
19   if (!PRE_RENDERED) {
20     const posts = await fetch('/posts').then(resp => resp.json());
21     renderPosts(posts, container);
22   }
23 })();
24 </script>
25 </html>

优化

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

终止非必须请求

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

1.渲染后的Html 标签

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

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

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

ssr.mjs

 1 async function ssr(url) {
 2   ...
 3   const page = await browser.newPage();
 4 
 5   // 1. 启用网络拦截器.
 6   await page.setRequestInterception(true);
 7 
 8   page.on('request', req => {
 9     // 2.终止掉对不构建DOM的资源请求    // (images, stylesheets, media).
10     const whitelist = ['document', 'script', 'xhr', 'fetch'];
11     if (!whitelist.includes(req.resourceType())) {
12       return req.abort();
13     }
14 
15     // 3. 其他请求正常放行
16     req.continue();
17   });
18 
19   await page.goto(url, {waitUntil: 'networkidle0'});
20   const html = await page.content(); // serialized HTML of page DOM.
21   await browser.close();
22 
23   return {html};
24 }

内联资源文件内容

通常情况下,我们使用构建工具(如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在预渲染阶段重写响应内容,具体如下代码:

 1 import fs from 'fs';
 2 
 3 async function ssr(url) {
 4   ...
 5 
 6   // 1. Intercept network requests.
 7   await page.setRequestInterception(true);
 8 
 9   page.on('request', req => {
10     // 2. If request is for styles.css, respond with the minified version.
11     if (req.url().endsWith('styles.css')) {
12       return req.respond({
13         status: 200,
14         contentType: 'text/css',
15         body: fs.readFileSync('./public/styles.min.css', 'utf-8')
16       });
17     }
18     ...
19 
20     req.continue();
21   });
22   ...
23 
24   const html = await page.content();
25   await browser.close();
26 
27   return {html};
28 }

这里主要是使用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};
}

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏君赏技术博客

HQ移动20170218期周报

1. Duplicate interface definition for class 错误

982
来自专栏SHERlocked93的前端小站

Vue 使用中的小技巧

在vue的使用过程中会遇到各种场景,当普通使用时觉得没什么,但是或许优化一下可以更高效更优美的进行开发。下面有一些我在日常开发的时候用到的小技巧,在下将不定期更...

2102
来自专栏GopherCoder

『No20: Golang 爬虫上手指南』

使用上面两个函数,不管是遇到的请求是Get 或者是 Post 都可以获取到网页源代码,唯一需要注意的可能是Post 请求需要正确的传递参数给请求。

831
来自专栏ionic3+

【Appetite】ionic3实录(七)次页实现及分析解决问题【上】

在src/app/assets/data目录创建dessert-slides.json文件并添加如下内容作为轮播图的数据源:

1125
来自专栏彭湖湾的编程世界

【javascript】原生js更改css样式的两种方式

下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1;css表达式...

1898
来自专栏QQ音乐技术团队的专栏

使用 Jest 进行前端单元测试

目前 Jest 已经在 Facebook 开源的 React, React Native 等前端项目中被做为标配测试框架。下面简单介绍一些 Jest 比较有用的...

7809
来自专栏小白安全

XSS跨站脚本攻击的原理分析与解剖

《xss攻击手法》一开始在互联网上资料并不多(都是现成的代码,没有从基础的开始),直到刺的《白帽子讲WEB安全》和cn4rry的《XSS跨站脚本攻击剖析与防...

3085
来自专栏不知的专栏

反-反爬虫:用几行代码写出和人类一样的动态爬虫

本文将从 Phantomjs 动态爬虫介绍起,用3行代码傻瓜式完成基于 Casper 的动态爬虫来绕过对抗策略获取页面数据。

1.2K1
来自专栏CSDN技术头条

前端知识点总结——Vue

作用:将表达式执行的结果 输出当调用元素的 innerHTML 中;还可以将数据绑定到视图。

1082
来自专栏python学习之旅

python appium笔记(二):元素定位

#这里的示例是用android来说明的,xpath应该是通用的,resource-id不太清楚,没配过IOS的环境

1791

扫码关注云+社区