路径)优化中谈浏览器渲染原理"/>
从CRP(关键渲染路径)优化中谈浏览器渲染原理
前言：
- 该文中涉及的一切问题，只在页面首次渲染条件下讨论，因后续产生的DOM和CSSOM的更新及布局绘制不在本文范围内；
- 本文参考Google的Critical Rendering Path部分，做了选择性的摘录，以及自己的思考和总结，若对原文感兴趣的可以点击前往。如有表述不当的地方，还请指出
1. CRP
CRP，即critical rendering path的缩写，中文译文关键渲染路径。具体是什么呢？
浏览器从收到 HTML、CSS 和 JavaScript 字节到对其进行必需的处理，从而将它们转变成渲染的像素这一过程中有一些中间步骤，这些必要的步骤，就是CRP。
注意：
CRP的起点发生在新页面，为从服务器获得HTML文件的那一刻；故以下几项和CRP没有半毛钱全系: 通过控制台添加节点、hover, active等使样式发生变化、用JS写成的交互性渲染操作之类的操作。
CRP的终点是完成浏览器内像素的渲染，但之后的工作不属于CRP： 例如 1. 不会对页面的初始渲染产生影响的js代码的运行；2. 与服务器进行的后续数据传输；3. 甚至不符合当前的媒体查询条件的CSS文件的加载（因为这些样式对当前来说是不起作用的，不符合“必需”要求）；
问题来了，凭什么说例子中的几项不在CRP中，即：如何判别某一事项不会影响页面的初次渲染成像呢？那就需要谈及浏览器的渲染流程。
2. 浏览器的渲染原理
2.1 对象模型（OM）的构建
2.1.1 文档对象模型（DOM）
虽然家喻户晓，但还是说一下吧：
<html><head><meta name="viewport" content="width=device-width,initial-scale=1"><link href="style.css" rel="stylesheet"><title>Critical Path</title></head><body><p>Hello <span>web performance</span> students!</p><div><img src="awesome-photo.jpg"></更多推荐
从CRP(关键渲染路径)优化中谈浏览器渲染原理
发布评论