Headless Chrome:服务端渲染JS站点的一个方案【上篇】【翻译】介绍Headless Chrome 预渲染页面

原文链接:https://developers.google.com/web/tools/puppeteer/articles/ssr

注:由于英文水平有限,没有逐字翻译,可以选择直接阅读原文

tips:Headless浏览器完全可以作为服务端渲染的一个替代方案,在服务端转化js 站点为静态html页面;在webserver 上运行Headless 浏览器完全可以预渲染现代js 模式的应用,增加响应速度,对SEO也更加友好

本篇涉及到的技术展示了如何通过Google Headless 框架(puppteer)向一个Express web server 添加服务端渲染能力,对应用对友好的是,基本上不需要修改任何代码;所有的工作基本都有puppteer承担,通过简单的几行代码你就可以在服务端渲染几乎所有页面。

下面是将要涉及到的一小段代码:

 1 import puppeteer from 'puppeteer';
 2 
 3 async function ssr(url) {
 4   const browser = await puppeteer.launch({headless: true});
 5   const page = await browser.newPage();
 6   await page.goto(url, {waitUntil: 'networkidle0'});
 7   const html = await page.content(); // 页面的html内容
 8   await browser.close();
 9   return html;
10 }

注意:本篇文章代码基于es modules,需要node 8.5+ 并开启--experimental-modules

介绍

      如果你需要seo,你登录进来阅读这篇文章无外乎两种原因:第一,你已创建了一个web 应用,但是它没有被搜索引擎索引到,你的应用可能是一个SPA、PWA应用。或者其实技术栈创建的应用,实际上你使用的技术栈也无关重要;重要的是,你花费了大量的时间创建了很棒应用,但是用户却无法发现它。第二,你可能是从其它网站注意到服务端渲染能提高一定的性能。你在这可以可以收获如何减少javascript 启动成本以及如何提高首屏渲染。

tips:一些框架如(Preact)已经支持服务端渲染了,如果你使用的框架有服务端渲染的解决方案,那么坚持使用就好了,没有必要引入一个新的工具。

爬取现代web应用

    搜索引擎主要是爬取静态html标签来工作,但是现代的web 应用已经进化的比较复杂了。基于Javascript的应用,内容对网络爬虫来说是透明的,因为其内容多是在客户端通过js渲染的。一些爬虫比如google的爬虫也开始变得聪明了,google的爬虫使用Chrome41 执行Javascript 来得到最终页面,但是这种方案还是不太成熟、完美。比如,比如一些ES6的新特性在旧的浏览器中还是会引起Js error的。对于其他的搜索引擎,鬼知道他们怎么做的?O(∩_∩)O哈!

Headless Chrome 预渲染页面

    所有爬虫都理解HTML,所以我们需要解决的是如何执行JS,来生成HTML。如果我告诉你有这样一个工具,你觉得如何?

  1.    这个工具知道如何运行所有类型的Javascript,然后产出静态的html
  2.    这个工具随着web添加新特性会持续更新
  3.    修改少量设置不需要修改任何代码,你可以快速把这个工具应用到已有应用之上

听起来很不错吧?这个工具就是浏览器!

Headless Chrome 不关心使用什么库、框架、或者工具链;它早饭吃进去Javascript,午饭就会吐出来静态的HTML。当然我们希望会比这个过程快很多--Eric

如果你使用Node,Puppteer是一种比较简单的方式来操作headless Chrome.它提供的API 是一个客户端应用支持服务端渲染功能。下面是一个简单的例子。

1.JS应用

我们以一个通过js动态生成HTML的动态页面的例子开始:

public/index.html

 1 <html>
 2 <body>
 3   <div id="container">
 4     <!-- Populated by the JS below. -->
 5   </div>
 6 </body>
 7 <script>
 8 function renderPosts(posts, container) {
 9   const html = posts.reduce((html, post) => {
10     return `${html}
11       <li class="post">
12         <h2>${post.title}</h2>
13         <div class="summary">${post.summary}</div>
14         <p>${post.content}</p>
15       </li>`;
16   }, '');
17 
18   // CAREFUL: assumes html is sanitized.
19   container.innerHTML = `<ul id="posts">${html}</ul>`;
20 }
21 
22 (async() => {
23   const container = document.querySelector('#container');
24   const posts = await fetch('/posts').then(resp => resp.json());
25   renderPosts(posts, container);
26 })();
27 </script>
28 </html>

2.SSR (Server Side Render)方法

接下来,简单实现一下ssr方法

ssr.mjs

import puppeteer from 'puppeteer';

//内存缓存,key:url value:html内容
const RENDER_CACHE = new Map();

async function ssr(url) {
  if (RENDER_CACHE.has(url)) {
    return {html: RENDER_CACHE.get(url), ttRenderMs: 0};
  }

  const start = Date.now();

  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  try {
    // networkidle0 waits 500ms 没有其他请求时.
    // The page's JS has likely produced markup by this point, but wait longer
    // if your site lazy loads, etc.
    await page.goto(url, {waitUntil: 'networkidle0'});
    await page.waitForSelector('#posts'); //等待并确认 #posts 已经存在于dom中,如果已经存在,则立即执行.
  } catch (err) {
    console.error(err);
    throw new Error('page.goto/waitForSelector timed out.');
  }

  const html = await page.content(); // 被序列化后的HTML内容
  await browser.close();

  const ttRenderMs = Date.now() - start;
  console.info(`Headless rendered page in: ${ttRenderMs}ms`);

  RENDER_CACHE.set(url, html); // cache rendered page.

  return {html, ttRenderMs};
}

export {ssr as default};

主要代码逻辑:

  1. 添加缓存。缓存渲染后的HTML是提高响应的最有效方法,当你再次请求的时候,避免再次运行headless chrome。后续会讨论其他方面的优化。
  2. 对页面加载超时添加异常处理
  3. 调用page.waitForSelector('#posts')方法,确保id为posts的元素在后续操作之前已经存在于DOM中(有多中waitForxxx方法)
  4. 添加计量统计,计算Headless渲染页面时间

3.WebServer 端代码

最后,通过一个Express server 把所有内容联系到一起。哎直接看代码吧,代码中加了注释。

server.mjs

import express from 'express';
import ssr from './ssr.mjs';

const app = express();

app.get('/', async (req, res, next) => {
//调用上面写好的ssr方法,传入url,通过headless chrome 渲染完毕后把渲染结果返回
  const {html, ttRenderMs} = await ssr(`${req.protocol}://${req.get('host')}/index.html`);
  // Add Server-Timing! See https://w3c.github.io/server-timing/.
  res.set('Server-Timing', `Prerender;dur=${ttRenderMs};desc="Headless render time (ms)"`);
  return res.status(200).send(html); // Serve prerendered page as response.
});

app.listen(8080, () => console.log('Server started. Press Ctrl+C to quit'));

那么,得到的响应HTML应该是这样的:

<html>
<body>
  <div id="container">
    <ul id="posts">
      <li class="post">
        <h2>Title 1</h2>
        <div class="summary">Summary 1</div>
        <p>post content 1</p>
      </li>
      <li class="post">
        <h2>Title 2</h2>
        <div class="summary">Summary 2</div>
        <p>post content 2</p>
      </li>
      ...
    </ul>
  </div>
</body>
<script>
...
</script>
</html>

上篇结束,后续中篇 和 下篇 请继续关注

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏晓晨的专栏

ABP从入门到精通(3):aspnet-zero-core 使用Redis缓存

1032
来自专栏云飞学编程

Python爬虫之懒人专用!批量下载免费音乐不求人

推荐下小编的Python学习群542110741,不管你是小白还是大牛,小编我都欢迎,不定期分享干货,包括小编自己整理的一份2018最新的Python和0基础入...

1063
来自专栏前端杂货铺

Nodejs cluster模块深入探究

由表及里 HTTP服务器用于响应来自客户端的请求,当客户端请求数逐渐增大时服务端的处理机制有多种,如tomcat的多线程、nginx的事件循环等。而对于nod...

41110
来自专栏云飞学编程

Python学习,爬虫不一定非要抓数据,也可以做自己喜欢的应用程序

最近各种负面消息,对爬虫er来说,并不是很友好,当然这个是对于从业者来说的,对像我这样的正在学习python的个人来说,python爬虫的学习只需要保持以下几点...

1203
来自专栏网络

玩转 React 服务器端渲染

【编者按】React 生态提供了很多选择方案,这里我们选用 Redux 和 react-router 来做说 React 提供了两个方法renderToStri...

2228
来自专栏Jack-Cui

Python3网络爬虫(十一):爬虫黑科技之让你的爬虫程序更像人类用户的行为(代理IP池等)

运行平台: Windows Python版本: Python3.x IDE: Sublime text3 1 前言     近期,有些朋友问我一些关于...

5037
来自专栏IT派

Python开发者必知的13个Python GUI库

Python是一种高级编程语言,它用于通用编程,由Guido van Rossum 在1991年首次发布。Python 的设计着重于代码的可读性。

1115
来自专栏云飞学编程

Python学习,爬虫不一定非要抓数据,也可以做自己喜欢的应用程序

最近各种负面消息,对爬虫er来说,并不是很友好,当然这个是对于从业者来说的,对像我这样的正在学习python的个人来说,python爬虫的学习只需要保持以下几点...

1072
来自专栏ImportSource

MartinFowler告诉你大数据架构师必备的NoSQL技能-版本戳(上)

-许多NoSQL数据库的批评者老说NoSQL数据库不支持事务。 ? 事务是一个有用的工具,他可以帮助编程者解决一致性的问题。然而,NoSQL的推崇者并不担心这个...

3438
来自专栏服务端技术杂谈

系统性能指标

之后我们可以设置这个指标作为监控阈值,保证方法调用消耗时间少于这个值,如果超过此值,则报警。

923

扫码关注云+社区