【问题】前端页面的性能优化

一. 优化的必要性

现在页面越来越复杂，用户要求越来越高，因而页面的性能优化也变的重要起来。

二、优化手段

1. 交互优化

• 减少短时间内的请求次数
  一次请求就会占用一个通道，相等时间内使用的通道越少，速度也就会越快。
• 减小每次请求的数据量
  数据量越小，意味着传输速度更快。
• 使用本地缓存，不重复请求。

2. 渲染优化

• 合并文件，减少资源数量
  • 合并 css 文件和 js 文件，减少数量，一次加载完成。
  • 多个 icon 图片使用一整张， 而不是很多张。
• 控制资源体积
  • 控制图片体积
    图片最好跟 DOM元素的大小一致，不要进行缩放。
  • 加载时使用压缩后css 文件和 js 文件，而不是开发文件
    减少文件中不必要的空格换行，注释等；优化变量等。
  • 及时清理无用的代码和变量
    一些不再使用方法，要及时清理。
• js 文件资源加载优先级控制
  • css文件在 head 引入，script 文件在 body 尾部引入。
  • 依赖关系强设置defer，依赖关系不强设置 async。
• 减少重排重绘
  • 减少页面DOM操作
  • 修改样式时使用替换 class 来改变样式
• 按需加载
  • 所有组件不需要一次性加载完，根据需要去加载当前的。

3. 操作优化

• 防抖和节流

三、浏览器渲染过程

• 解析HTML生成DOM树。
• 解析CSS生成CSS-DOM规则树。
• 解析JS，操作 DOM 树和 CSS-DOM 规则树。
• 将DOM树与CSS-DOM规则树合并在一起生成渲染树。
• 遍历渲染树开始布局，计算每个节点的位置大小信息。
• 浏览器将所有图层的数据发送给GPU，GPU将图层合成并显示在屏幕上。

四、指标

• 白屏时间
  指浏览器发起请求到开始显示第一个页面元素的时间。
• 首屏时间（FirstScreen Time）
  指用户看到第一屏，即整个网页顶部大小为当前窗口的区域，显示完整的时间。
• 整页时间（Page Load Time）
  指页面所有资源都加载完成并呈现出来所花的时间，这个就是load事件发生的时间。