页面性能分析与优化



页面的生命周期

通常一个页面有三个阶段:加载阶段、交互阶段和关闭阶段

  • 加载阶段,是指从发出请求到渲染出完整页面的过程,影响到这个阶段的主要因素有网络和 JavaScript 脚本。
  • 交互阶段,主要是从页面加载完成到用户交互的整个过程,影响到这个阶段的主要因素是 JavaScript 脚本。
  • 关闭阶段,主要是用户发出关闭指令后页面所做的一些清理操作。

加载阶段

交互阶段

优化方式

  1. 在加载阶段:

    (1)优化关键资源的加载速度;(可以压缩 CSS 和 JavaScript 资源,移除 HTML、CSS、JavaScript 文件中一些注释内容,也可以通过前面讲的取消 CSS 或者 JavaScript 中关键资源的方式。)

    (2)减少关键资源的个数;(将 JavaScript 和 CSS 改成内联的形式,如果 JavaScript 代码没有 DOM 或者 CSSOM 的操作,则可以改成 async 或者 defer 属性;同样对于 CSS,如果不是在构建页面之前加载的,则可以添加媒体取消阻止显现的标志。当 JavaScript 标签加上了 async 或者 defer、CSSlink 属性之前加上了取消阻止显现的标志后,它们就变成了非关键资源了。)

    (3)降低关键资源的 RTT 次数。(可以通过减少关键资源的个数和减少关键资源的大小搭配来实现。除此之外,还可以使用 CDN 来减少每次 RTT 时长。)

  2. 在交互阶段:尽量减少一帧的生成时间。

    (1)可以通过减少单次 JavaScript 的执行时间;(一种是将一次执行的函数分解为多个任务,使得每次的执行时间不要过久,另一种是采用 Web Workers。)

    (2)避免强制同步布局;

    (3)避免布局抖动;

    (4)尽量采用 CSS 的合成动画;

    (5)避免频繁的垃圾回收等方式来减少一帧生成的时长。


参考

  1. 页面性能:如何系统优化页面

文章作者: elegantlee
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 elegantlee !
评论
  目录