发布时间:2018年8月17日
本指南从上下文中 بررسی了 PageSpeed Insights 规则:优化关键渲染路径时应注意什么,以及原因。
消除渲染阻塞的 JavaScript 和 CSS
为了实现最快的首次渲染时间,请尽可能减少并消除页面上的关键资源数量,最大限度地减少下载的关键字节数,并优化关键路径长度。
优化 JavaScript 的使用
默认情况下,JavaScript 资源会阻止解析器,除非标记为 async
或使用特殊的 JavaScript 代码段添加。阻止解析器的 JavaScript 会强制浏览器等待 CSSOM,并暂停 DOM 的构建,这反过来可能会显著延迟首次渲染的时间。
首选异步 JavaScript 资源
异步资源会解除对文档解析器的阻止,并允许浏览器避免在执行脚本之前阻止 CSSOM。通常,如果脚本可以使用 async
属性,则也意味着它对于首次渲染不是必不可少的。考虑在初始渲染后异步加载脚本。
避免同步服务器调用
使用 navigator.sendBeacon()
方法来限制 unload
处理程序中 XMLHttpRequests 发送的数据。由于许多浏览器都要求此类请求是同步的,因此它们可能会减慢页面过渡速度,有时会非常明显。以下代码显示了如何在 pagehide
处理程序而不是 unload
处理程序中使用 navigator.sendBeacon()
将数据发送到服务器。
<script>
function() {
window.addEventListener('pagehide', logData, false);
function logData() {
navigator.sendBeacon(
'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop',
'Sent by a beacon!');
}
}();
</script>
fetch()
方法提供了一种更好的异步请求数据的方式。fetch()
使用 Promise 而不是多个事件处理程序来处理响应。与 XMLHttpRequest 的响应不同,fetch()
响应是一个流对象。这意味着对 json()
的调用也会返回 Promise。
<script>
fetch('./api/some.json')
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data);
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
</script>
fetch()
方法还可以处理 POST 请求。
<script>
fetch(url, {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'foo=bar&lorem=ipsum'
}).then(function() { // Additional code });
</script>
延迟解析 JavaScript
为了最大限度地减少浏览器渲染页面所需执行的工作量,请延迟任何对于构建初始渲染的可见内容而言非必要的脚本。
避免长时间运行的 JavaScript
长时间运行的 JavaScript 会阻止浏览器构建 DOM、CSSOM 和渲染页面,因此请延迟到稍后执行对于首次渲染非必要的任何初始化逻辑。如果需要运行长时间的初始化序列,请考虑将其拆分为多个阶段,以便浏览器可以在其间处理其他事件。
优化 CSS 的使用
CSS 是构建渲染树所必需的,并且 JavaScript 通常在页面初始构建期间会阻止 CSS。确保任何非必要的 CSS 都标记为非关键(例如,打印和其他媒体查询),并确保关键 CSS 的数量以及交付它的时间尽可能小。
将 CSS 放在文档头部
在 HTML 文档中尽早指定所有 CSS 资源,以便浏览器可以尽快发现 <link>
标记并调度 CSS 请求。
避免 CSS 导入
CSS 导入 (@import
) 指令使一个样式表能够从另一个样式表文件中导入规则。但是,请避免使用这些指令,因为它们会将额外的往返引入关键路径:只有在收到并解析了包含 @import
规则的 CSS 样式表之后,才会发现导入的 CSS 资源。
内联渲染阻塞 CSS
为了获得最佳性能,您可能需要考虑将关键 CSS 直接内联到 HTML 文档中。这消除了关键路径中的额外往返,如果正确完成,可以实现“一次往返”的关键路径长度,其中只有 HTML 是阻塞资源。