Web前端性能优化总结

目录

Canvas性能优化实践

动画性能优化

DOM操作优化

HTML和CSS性能优化

善用防抖与节流：

Web Worker进行复杂运算。

善用缓存

WebSocket、SSE、HTTP2进行服务端推送。

优化网络

性能分析工具

---

Web前端性能优化可以从很多方面描述，从首屏加载到用户交互，从HTML到JS，从静态画面到动画，从网络获取资源到缓存等，本文选择了笔者平常会考虑到的一些性能优化角度进行了描述。

 

Canvas性能优化实践

    1.场景：有一张大的静态背景图

优化方式：使用CSS直接绘制一幅静态的背景图，而使用Canvas来绘制。

优化原理：在用户交互时，避免了需要重复使用Canvas来绘制大的静态背景图。

    2.场景：有特别多的Canvas元素需要绘画，而且元素需要的刷新频率不一样（可以理解为用户交互频率或者动画更新频率）。

优化方式：使用多个Canvas绘画多个图层，根据元素的需要的刷新频率分配到不同的图层中。

优化原理：一些动态的元素（即频繁刷新的元素）的需要频繁刷新，而如果将静态元素与动态元素放到同一图层，则会引起不必要的更新，同时为了让动态元素不影响静态元素，会有许多复杂的且不必要的运算。

    3.场景：绘制复杂的元素。

优化方式①： 避免频繁多次调用Canvas的绘图方法（fill、stroke、fillRect、strokeRect等）

优化原理①： 调用绘图方法带来的开销以及上下文切换开销的性能损耗是挺大的。当绘制复杂的元素时，一般建议先用使用lineTo, moveTo方法将轨迹全部描述清楚，最后再调用以此绘图方法。

优化方式②：将一些复杂的重复元素预先在一个离屏的Canvas上绘制好（离屏就是指不在屏幕上展示的），之后等要用到这个元素了，就从这个Canvas上将渲染好的数据拿过来，直接渲染到屏幕上。

优化原理②：减少了重复生成一个复杂图像的过程的性能开销。

    4.场景：对Canvas元素绘画坐标的精度要求不高时（不要求小数点）

优化方式：使用整形坐标来代替浮点型坐标。

优化原理：在使用浮点型坐标绘制图像时，浏览器为了达到抗锯齿的效果，会有额外的性能开销。

    5.场景： 用户交互导致需要频繁刷新的时候（比如拖拽移动元素）。

优化方式：可以采取局部更新的策略，就是只更新由于用户交互而导致更新的那部分Canvas区域。

优化原理：减少了Canvas整张画布更新所带来的性能损耗。

 

动画性能优化

方式：使用window.requestAnimationFrame() 来绘制动画，而不是使用setInterval。同时记得在销毁的时候要调用一下cancelAnimationFrame()。

原因：使用requestAnimationFrame的时候可以让动画的刷新频率跟着浏览器的屏幕刷新频率走，这样就不容易引起丢帧和卡顿现象。同时requestAnimationFrame还可以有CPU节能的功能，当页面未激活的时候，由于该页面显示上不会跟着屏幕定时刷新，因此也不会触发动画，可以进行CPU节能。最后  requestAnimationFrame 还有函数节流