25-页面性能：如何系统地优化页面？_For_vip_user_0011
需积分: 0 140 浏览量
2022-08-04
13:11:59
上传
评论
收藏 761KB PDF 举报
25-⻚⾯性能：如何系统地优化⻚⾯？25-⻚⾯性能：如何系统地优化⻚⾯？
在前⾯⼏篇⽂章中，我们分析了⻚⾯加载和DOM⽣成，讨论了JavaScript和CSS是如何影响到DOM⽣成的，
还结合渲染流⽔线来讲解了分层和合成机制，同时在这些⽂章⾥⾯，我们还穿插说明了很多优化⻚⾯性能的
最佳实践策略。通过这些知识点的学习，相信你已经知道渲染引擎是怎么绘制出帧的，不过之前我们介绍的
内容⽐较零碎、⽐较散，那么今天我们就来将这些内容系统性地串起来。
那么怎么才能把这些知识点串起来呢？我的思路是从如何系统优化⻚⾯速度的⻆度来切⼊。
这⾥我们所谈论的⻚⾯优化，其实就是要让⻚⾯更快地显⽰和响应这⾥我们所谈论的⻚⾯优化，其实就是要让⻚⾯更快地显⽰和响应。由于⼀个⻚⾯在它不同的阶段，所侧重
的关注点是不⼀样的，所以如果我们要讨论⻚⾯优化，就要分析⼀个⻚⾯⽣存周期的不同阶段。
通常⼀个⻚⾯有三个阶段：加载阶段、交互阶段和关闭阶段加载阶段、交互阶段和关闭阶段。
这⾥我们需要重点关注加载阶段和交互阶段重点关注加载阶段和交互阶段，因为影响到我们体验的因素主要都在这两个阶段，下⾯我们就
来逐个详细分析下。
加载阶段加载阶段
我们先来分析如何系统优化加载阶段中的⻚⾯，还是先看⼀个典型的渲染流⽔线，如下图所⽰：
加载阶段渲染流⽔线
观察上⾯这个渲染流⽔线，你能分析出来有哪些因素影响了⻚⾯加载速度吗？下⾯我们就先来分析下这个问
题。
通过前⾯⽂章的讲解，你应该已经知道了并⾮所有的资源都会阻塞⻚⾯的⾸次绘制，⽐如图⽚、⾳频、视频
等⽂件就不会阻塞⻚⾯的⾸次渲染；⽽JavaScript、⾸次请求的HTML资源⽂件、CSS⽂件是会阻塞⾸次渲
加载阶段，是指从发出请求到渲染出完整⻚⾯的过程，影响到这个阶段的主要因素有⽹络和JavaScript脚
本。
交互阶段，主要是从⻚⾯加载完成到⽤⼾交互的整合过程，影响到这个阶段的主要因素是JavaScript脚
本。
关闭阶段，主要是⽤⼾发出关闭指令后⻚⾯所做的⼀些清理操作。
评论0