常见前端性能优化的35种方法总结

Posted 2023-02-20 大唐荣华

1. 使用分子域名加载资源

2. 使用较近的CDN或dns预解析

3. 使用高性能传输方式或方法，http2,quic,gzip…

4. 减少http请求的数量，合并公共资源、使用雪碧图、合并代码块、按需加载资源

5. 减少传输总量或加快传输速度

6. 优化图片的加载展示策略，根据网络状况加载图片、图片格式优化、图片展示位置优化

7. 减少cookie体积

8. 使用更有效的缓存策略，keep-alive,expiration,max-age…

9. 使用良好的页面布局

10. 合理安排路由策略

11. 减少反复操作dom

12. 减少重绘和重排

13. 异步加载资源

14. 公用css类

15. 使用GPU渲染初始动画和图层的合成

16. 高效的js代码

17. 使用防抖和节流对UI进行优化

18. 使用web worker加载资源

19. 减少301 302

20. 试试缓存数据的方法localStorage/sessionStorage/indexedDB

21. 无阻塞加载js，减少并发下载或请求

22. 减少插件中的多语言版本内容

23. 减少布局上的颠簸，减少对临近元素的影响

24. 减少同时的动画

25. 制定弱网精简策略

26. 针对设备制定精简策略

27. 减少页面图层

28. js、css命名尽量简短

29. 减少js全局查找

30. 减少循环和循环嵌套以减少js执行时间

31. 减少事件绑定

32. 组件提取、样式提取、函数提取

33. 按照页面变更频率安排资源

34. 减少iframe

35. 注意页面大小，特别是canvas的大小和占用内存

原作者：Yestodorrow
链接：https://juejin.cn/post/7101249167183822878
来源：稀土掘金