关键渲染路径
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
优化关键渲染路径是指优先显示与当前用户操作相关的内容。
要提供快速的网络体验,浏览器需要做大量的工作。大部分此类工作对我们这些 Web 开发者不可见:我们编写标记,屏幕上就会显示出漂亮的页面。但浏览器到底是如何使用我们的 HTML、CSS 和 JavaScript 在屏幕上渲染像素的呢?
优化性能的关键在于了解从接收 HTML、CSS 和 JavaScript 字节到将这些字节转换为渲染的像素所需的处理之间的这些中间步骤中会发生的情况 - 这就是关键渲染路径。
通过优化关键呈现路径,我们可以显著缩短首次呈现网页所用的时间。此外,了解关键渲染路径还可以为构建高性能交互式应用打下基础。交互式更新过程也是一样的,只是在连续循环中完成,理想情况下是每秒 60 帧!
但首先,我们要简要介绍一下浏览器如何显示一个简单的页面。
其他资源
反馈
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2014-03-31。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"没有我需要的信息"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"太复杂/步骤太多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"内容需要更新"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻译问题"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/代码问题"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"易于理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"解决了我的问题"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{
"lastModified": "最后更新时间 (UTC):2014-03-31。",
"confidential": False
}