深层前端性能优化

我把前端性能优化分为四个层面：网络通信、资源加载、代码优化、交互优化

网络通信

http1.1协议优化：
多域名：css/js一个域名；图片一个域名；接口一个域名；底层逻辑是在http1.1协议下一个tcp链接只能建立4-8个请求。多域名能提供并发请求的可能性
雪碧图：把小图片合并在一张图上；底层逻辑其实也是减少请求
合并小文件： 这个和雪碧图是一个道理
http2.0协议优化：
上面针对http1.1的优化都不管用了；他和http1.1的区别是：
http1.1: 以文件形式进行传输；http2.0以二进制方式进行传输；
http2.0是以祯和流进行传输，他没有tcp的链接数的限制，可以同时发起N个请求。
http2.0会压缩首部字段/服务端推送
http缓存：cache-control:max-age()

资源加载

API请求
（1）使用promise并发请求
（2）取消重复的请求（比如tab切换）
（3）浏览器缓存api接口，比如5分钟以内再次访问接口都走缓存
（4）如有必要可以使用serverce worker(pwa)
静态资源加载
（1）走cdn,开启负载均衡
（2）动态加载（用到的时候再加载）
（3）引用资源的时候开启预加载/预解析（preload/preFetch）
（4） js资源可以使用defer，在浏览器解析渲染页面的时候并行下载js但是不执行
图片文件
（1）图片选择优先顺序：webp -> jpg(看格式) -> png
（2）图片使用渐进式加载（先模糊后清晰）；一点一点显示的加载方式因为用户思维角度已经放弃
（3）图片的大小尽量和显示时的大小尽量一致
代码优化
css优化：
少用通配符和标签选择器：选择器是从右往左解析的
less嵌套层级不要太深
写通用css

JS优化

使用预先执行模式：不同环境下取不同的配置，可以使用立即执行，而不是用的使用再去走函数然后执行js.
适当使用代理模式，比如查找本地存储数据的时候，可以用map代理一下。因为map访问速度很快
能用css3做动画的地方就不要使用js。一定要使用也尽量使用requestAnimationFrame
使用switch代替if esle；使用for of代替for in和for循环
不要再render里写三目运算符/函数，因为这样写会让里面的代码每次都重新渲染
模块代码的解藕
交互优化
使用骨架屏组件
或者lazy/Suspense

性能检测工具

webPageTest
lightHouse
audits

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！