前端性能优化

[wangning0]

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能 页面优化

页面卡顿解决方案

链接1 FPS 表示帧率 jank 因为refolw和repaint导致的大面积失帧

60fps是动画播放比较理想比较基础的要求，如果帧率小于60HZ那么就会觉得页面卡顿

渲染流程：

Javascript > Style > Layout > Paint > Composite

JavaScript：JavaScript实现动画效果，DOM元素操作等。 Style（计算样式）：确定每个DOM元素应该应用什么CSS规则。 Layout（布局）：计算每个DOM元素在最终屏幕上显示的大小和位置。由于web页面的元素布局是相对的，所以其中任意一个元素的位置发生变化，都会联动的引起其他元素发生变化，这个过程叫reflow。 Paint（绘制）：在多个层上绘制DOM元素的的文字、颜色、图像、边框和阴影等。 Composite（渲染层合并）：按照合理的顺序合并图层然后显示到屏幕上。

首先用js做逻辑处理，还触发了样式变化，style把应用的样式规则计算好之后，把影响到的页面元素重新布局，叫做Layout，再把它画到内存的一个画布里面，paint成了像素，最后把画布刷到屏幕上去，叫做Composite，形成一帧

可以通过Chrome控制台的timeline进行分析（勾选jsprofile paint来分析掉帧）

requestAnimationFrame

很多显示器的显示频率在16.7ms（也就是60fps），如果在刷新间隔之间发生了其他绘制请求，会导致所有第三帧的丢失，继而导致动画断续显示，所以setTimeout的定时器推荐最小使用16.7ms的原因。

requestAnimationFrame就是为了这个而出现的，它所做的事情很简单，跟着浏览器的绘制走，如果浏览设备绘制间隔是16.7ms，那我就在这个间隔绘制，如果是10ms，我就10ms绘制。就不会存在过度绘制的问题，动画不会掉帧

每次重绘的时候都会通知requestAnimationFrame

优点 链接2

统一向下的兼容策略 CSS3动画不能应用所有属性 CSS3支持的动画效果有限

优化手段

链接4

• 如果十分的js执行十分的耗时，那么可以把函数拆分代码段，分别在连续的帧里面执行，js在渲染每一帧之前都会调用requestAnimationFrame(传入一个函数的参数让他去执行)

• 尽量减少Layout

• 简化DOM结构，因为DOM结构越复杂时，需要重绘的元素也就越多，所以DOM应该保持简单

• 减少页面的重绘和重排

• 将某些耗时的操作放到空闲的时候去做(requestAnimationFrame setTimeout)

• 优化JavaScript的执行效率

  尽量使用requestAnimationFrame 把耗时长的JavaScript代码放到Web Workers中去做

• 降低样式计算的范围和复杂度

  降低样式选择器的复杂度 减少需要执行样式计算的元素个数

• 优先使用渲染层合并属性、控制层数量

  使用transform/opacity实现动画效果

• 对用户输入事件的处理函数去抖动（移动设备）

• 避免大规模、复杂的布局

  尽可能避免触发布局 使用flexbox替代老的布局模型 避免强制同步布局事件的发生 避免连续的强制同步布局发生

• 简化绘制的复杂度、减少绘制区域

优化网页加载速度

链接3

网页加载过程大致：

• 解析HTML结构
• 加载外部脚本和样式表文件
• 解析并执行脚本代码 // 部分脚本会阻塞页面的加载
• DOM树构建完成 //DOMContentLoaded事件
• 加载图片等外部文件
• 页面加载完毕 //load事件

减少请求数量和时间

将小图标合并成sprite图或者iconfont字体文件 用base64减少不必要的网络请求 图片延迟加载 JS/CSS按需打包（是预编译发生的事情，保证只打包当前页面相关的逻辑） 延迟加载第三方的统计资源 基于域名解析DNS的优化建议：1、在页面中制定预取域名<link rel="dns-prefetch" href="...">2、大数据分析，推测用户可能点击的链接，提前预取3、减少页面中的域名数量，可以直接减少DNS的请求

减小请求大小

JS/CSS/HTML压缩 gzip压缩 JS/CSS按需加载（运行时发生的事情，保证只加载当前页面第一时间使用到的逻辑。） 图片压缩，jpg优化 webp优化 & srcset优化

请求加速

使用HTTP2技术，多路复用、Header头部压缩 使用CDN网络分发更快获取静态资源 对于资源加载，优化建议是：利用缓存机制，缓存常用且短时间内不会变高的资源，或给资源设置过期时间

强调 DOMContentLoader DOM树构建完成 DOM的onload事件，DOM树构建完成且网页依赖的资源都加载完了