前言
在现代 web 开发中，前端性能优化显得尤为重要。而网站渲染的速度是影响体验的一个重要方面。相信很多人会发现，使用搜索引擎（谷歌、百度等）搜索时，网页往往能够瞬间展示出来，甚至在访问慢的情况下也不会显得卡顿。这是因为搜索引擎对于网页的渲染做了很多处理，其中一个重要的处理方式就是预渲染。这里介绍一下 bot-prerender 这个 npm 包，它能帮助我们实现网站预渲染的功能。
什么是预渲染
预渲染，指的是在页面加载之前，将页面渲染出来，然后将其呈现给用户。这个渲染过程一般发生在服务端，然后将这个已经经过渲染的页面返回给客户端。这种方式的好处在于，可以避免客户端在加载页面时，还需要经历一次渲染，从而带来更好的用户体验。还有一个好处是，搜索引擎可以直接拿到已经经过渲染的页面，这样可以更好的理解页面结构，从而更准确地收录网站内容。
bot-prerender 的使用
bot-prerender 是一个 node.js 模块，可以用于服务端渲染，只需要在启动服务的时候将中间件添加到 Koa 或者 Express 应用程序中即可。
安装
npm install bot-prerender --save
配置
配置很简单，只需要在启动服务的时候将中间件添加到 Koa 应用程序中即可。下面是一个简单的例子。
-- -------------------- ---- ------- ----- --- - --------------- ----- ----- - ---------------------- ----- - ------------ - - ------------------------- ----- --- - --- ------ ---------------------- -- --- --- ----------------------- - ------------- -----------------
配置项
targetUserAgent：指定需要预渲染的用户代理。如果为Googlebot或者Baiduspider等搜索引擎的爬虫，就需要进行预渲染，否则不需要预渲染。所以这个参数一般填写搜索引擎爬虫的名称，如下：
botPrerender({
targetUserAgent: 'Googlebot'
})renderingOptions：这个参数用来配置预渲染的行为，它是一个对象，具体的配置内容如下：renderAfterDocumentEvent：在触发指定事件之后，进行预渲染。这可以被用来等待页面的异步请求。默认为render-event。timeout：设置超时时间，单位是毫秒。如果设置为 0，就会一直等待直到预渲染完成。默认为 30 秒。proxyUrl：如果要使用代理，就可以设置这个参数。接受一个字符串类型的代理地址。waitForTimeout：等待指定的时间，然后开始渲染。这个参数会覆盖renderAfterDocumentEvent的设置。默认为不等待。waitForSelector：等待指定的选择器，然后开始渲染。这个参数会覆盖renderAfterDocumentEvent的设置。默认为不等待。disableConsole：是否禁用控制台输出。默认为false。
这些选项可以以对象的形式传递给 botPrerender 函数，如下：
-- -------------------- ---- -------
--------------
----------------- -
------------------------- ------------------
-------- ------
--------- ------------------------
--------------- -----
---------------- --------------
--------------- -----
-
--示例代码
下面是一个完整的例子，我们在服务端使用 bot-prerender 进行预渲染，当使用搜索引擎爬虫访问该网站时，就可以看到已经经过渲染的页面了。
-- -------------------- ---- -------
----- --- - ---------------
----- ----- - ----------------------
----- - ------------ - - -------------------------
----- --- - --- ------
----------------------
---------------- ------------
----------------- -
------------------------- ------------------------
-------- ------
-
---
----------------------- - -------------
-----------------结论
渲染性能是一个网站体验的重要组成部分，使用预渲染可以极大地优化网站的性能。bot-prerender 这个 npm 包提供了一种快速简便的方式实现网站预渲染。虽然这个方案只在搜索引擎爬虫访问时才能实现预渲染，但对于大多数使用搜索引擎的用户来说，已经足够了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cbe81e8991b448e633f