web 页面性能优化

web 页面性能优化

性能优化在视觉上有两个阶段:

1. 加载阶段,能够快速的看到页面(首屏渲染时间);
2. 交互阶段,能够快速响应操作(动画效果,接口返回速度等)

加载阶段

加载阶段，是指从发出请求到渲染出完整⻚⾯的过程，影响到这个阶段的主要因素有⽹络和JavaScript脚本。
网络决定资源的下载速度,javascript脚本阻塞dom解析,css脚本不阻塞dom解析(但是如果是放在head的话会阻
塞渲染)

优化策略

• 减少资源的大小,可以通过webpack打包优化工具,压缩代码,去除注释空格等;
• 如果资源很少可以把资源内联到html中;
• 传输过程可以开启gzip压缩;
• cdn加速;
• 请求资源个数多的可以开启http2传输协议,增加一次性请求资源的数量和传输速度;
• 如果JavaScript代 码没有DOM或者CSSOM的操作，则可以改成sync或者defer属性；
  使⽤async标志的脚本⽂件⼀旦加载完成,会⽴即执⾏;⽽使⽤了defer标记的脚本⽂件，需要等到DOMContentLoaded事件之后执⾏。
  同样对于CSS，如果不是在构建⻚⾯之前加载的,可以把资源放在html底部

交互阶段

交互阶段，主要是从⻚⾯加载完成到⽤⼾交互的整合过程，影响到这个阶段的主要因素是JavaScript脚本,次要原因有重绘->重排->合成

布局信息修改(大小,间距,布局方式等)–>重排
非布局信息修改(颜色,透明度) --> 重绘
通过CSS实现⼀些变形、渐变、动画等特效 -->合成

效率:合成>重绘>重排

优化⽅案:原则就是让单个帧的⽣成速度变快

1. 减少javascript脚本执行时间

• ⼀种是将⼀次执⾏的函数分解为多个任务，使得每次的执⾏时间不要过久。
• 另⼀种是采⽤Web Workers。你可以把Web Workers当作主线程之外的⼀个线程，在Web Workers中是可 以执⾏JavaScript脚本的，不过Web Workers中没有DOM、CSSOM环境，这意味着在Web Workers中是⽆法通过JavaScript来访问DOM的，所以我们可以把⼀些和DOM操作⽆关且耗时的任务放到Web Workers中去执⾏
• 如果不考虑兼容性可以调用requestIdleCallback这个api可以在浏览器空闲时执行代码,可以把大于一帧运行时间的js放到里面去运行,让用户看不出来卡顿

2. 避免强制同步布局

正常情况,js在对dom进行添加删除的工作时,会开启一个新的任务去执行布局工作
但是如果js中在不断在添加dom后获取新添加的dom的属性,那么就会触发强制同步布局

3. 合理利用css合成动画

css 动画不会被js阻塞,如果能提前知道对某个元素执⾏动画操作，那就最好将其标记为will-change，这是告诉渲染引擎需 要将该元素单独⽣成⼀个图层

4. 避免频繁的垃圾回收

垃圾回收会阻塞