简介
spash 是一个用于生成预渲染网页的 npm 包，它基于 Headless Chrome 技术实现，在不需要浏览器情况下，生成与浏览器渲染结果一致的预渲染网页。它的应用场景很广泛，比如前端 SEO、动态页面正常抓取等等。
安装
我们可以使用 npm 安装 spash ：
npm install spash
安装后，我们就可以在项目中引用它了。
基本用法
spash 可以通过 API 来调用，最基本的用法是：
-- -------------------- ---- ------- ----- ----- - ----------------- ------- ---- ---------------------------- ----- ----- -------------- -- - ------------------ -------------- -- - ------------------- ---
这里我们向 spash 传递了两个参数，第一个参数是 url，代表需要渲染的网页链接；第二个参数是 wait，代表等待时间，也就是 spash 等待页面加载完全的时间。
这样，我们就可以得到页面的 html 原始代码，包括 AJAX 和 JavaScript 添加的内容。
更多配置
除了上述基本用法，我们还可以通过 spash 完成更多预渲染网页的功能。
1. 代理
在使用 spash 过程中，我们可以在请求的地址后添加代理，在代码中添加以下代码实现代理：
-- -------------------- ---- ------- ----- ----- - ----------------- ------- ---- ---------------------------- ------ ------------------------------------------------- -------------- -- - ------------------ -------------- -- - ------------------- ---
2. 渲染模式
我们可以使用不同的渲染模式来获取不同的页面大小，以及各种 js 库定义的路由，这里列举了三种模式：
渲染 HTML
-- -------------------- ---- ------- ----- ----- - ----------------- ------- ---- ---------------------------- ----------- ------- -------------- -- - ------------------ -------------- -- - ------------------- ---
这种模式渲染出的 HTML 将没有 DOM 对象的 JavaScript 附加。
渲染 JPEG
-- -------------------- ---- ------- ----- ----- - ----------------- ------- ---- ---------------------------- ----------- ------- ------------ --- ------ ---- ------- ---- -------------------- -- - ------------------------------- -------------- -- - ------------------- ---
使用这种模式可以通过生成 JPEG 图片拿到页面的渲染结果。其中，width 和 height 是图片的宽和高，jpegQuality 可以控制图片的质量。
渲染 PNG
-- -------------------- ---- ------- ----- ----- - ----------------- ------- ---- ---------------------------- ----------- ------ ------ ---- ------- ---- ------------------- -- - ------------------------------ -------------- -- - ------------------- ---
使用这种模式可以通过生成 PNG 图片拿到页面渲染结果。
3. 启用 JavaScript
默认情况下，spash 不会执行页面中 JavaScript 代码。如果需要执行，我们可以通过以下设置启用：
-- -------------------- ---- ------- ----- ----- - ----------------- ------- ---- ---------------------------- ----------- ----- -------------- -- - ------------------ -------------- -- - ------------------- ---
这时候，spash 将会执行页面中的 JavaScript 代码并获取最终结果。
实际应用
以上就是 spash 的常规使用方法，我们可以根据实际情况进行配置。同时，为了更好的实际应用效果，我们需要对一些细节进行考虑：
1. 页面优化
spash 预渲染网页的结果，通常是要放在实际网站前面，所以我们需要进行页面优化，提高性能。我们可以从以下几个方面进行优化：
- 减少图片数量和大小
- 压缩 CSS 和 JavaScript
- 减少 HTTP 请求
这些方法不仅可以提高页面性能，还有助于提高 SEO 搜索排名。
2. 开启缓存
预渲染网页的场景中，通常网页中的内容是基本稳定的，所以我们可以开启缓存功能，减少重复渲染带来的负载。你可以使用像 Memcashed 或者 Redis 等缓存组件，将渲染结果存储在缓存中，并在下次请求时读取缓存，提高页面响应能力。
总结
本文介绍了 spash 的基本使用方法以及更多实际应用场景中的细节优化。使用 spash 可以帮助我们更好的进行前端 SEO、动态页面正常抓取等等，同时可以从以上场景中学到更多细节优化的方法，提高网页性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006707e8ccae46eb111ef11