浏览器的渲染:过程与原理
内容说明
本⽂不是关于浏览器渲染的底层原理或前端优化具体细节的讲解,⽽是关于
浏览器对⻚⾯的渲染——这⼀过程的描述及其背后原理的解释。这是因为前
端优化是⼀个⾮常庞⼤且零散的知识集合,⼀篇⽂章如果要写优化的具体⽅
法恐怕只能做⼀些有限的列举。
然⽽,如果了解清楚浏览器的渲染过程、渲染原理,其实就掌握了指导原
则。根据优化原则,可以实现出⽆数种具体的优化⽅案,各种预编译、预加
载、资源合并、按需加载⽅案都是针对浏览器渲染习惯的优化。
关键渲染路径
提到⻚⾯渲染,有⼏个相关度⾮常⾼的概念,最重要的是关键渲染路径,其
他⼏个概念都可以从它展开,下⾯稍作说明。
关键渲染路径(Critical Rendering Path)是指与当前⽤户操作有关的内
容。例如⽤户刚刚打开⼀个⻚⾯,⾸屏的显⽰就是当前⽤户操作相关的内
容,具体就是浏览器收到 HTML、CSS 和 JavaScript 等资源并对其进⾏处
理从⽽渲染出 Web ⻚⾯。
了解浏览器渲染的过程与原理,很⼤程度上是为了优化关键渲染路径,但优
化应该是针对具体问题的解决⽅案,所以优化没有⼀定之规。例如为了保障
⾸屏内容的最快速显⽰,通常会提到渐进式⻚⾯渲染,但是为了渐进式⻚⾯
渲染,就需要做资源的拆分,那么以什么粒度拆分、要不要拆分,不同⻚
⾯、不同场景策略不同。具体⽅案的确定既要考虑体验问题,也要考虑⼯程
问题。
浏览器渲染⻚⾯的过程
从耗时的⾓度,浏览器请求、加载、渲染⼀个⻚⾯,时间花在下⾯五件事情
上:
1. DNS 查询
2. TCP 连接