web 性能提升（将持续更新……）

网友投稿 262 2022-11-05

web 性能提升（将持续更新……）

尽量减少文档大小

不添加不必要的容器

使用时加载

不使用图片

img 标签或 background-image 样式通过路径/网址来引用图片时，都会产生 请求，用以下不使用图片的方案，便能通过减少将图片转换为Base64编码的数据

适用场景：单次使用的小图片

很多网站都提供了转换功能，如：​​​URL 数据作为 img 标签的 src 值即可。

缺点：

浏览器无法再缓存图片（当需要在页面中多次引用同一张图片时，不得不在多处粘贴代码并且占用传输带宽），同时增大了样式文件体积。移动设备上将Base64编码转化为图片物料也是需要设备的计算成本的，需要“加载”时间。

方案2. 使用CSS绘图

较少 HTTP 请求

将请求进行合并，减少请求数量

id="test">

页面的宽度不足600px时。虽然图片元素随父容器#test被隐藏而不可见，但实际上图片请求仍然被发出。

更快的样式选择器

​​getElementsByClassName​​​的OPS更高（几乎是​​querySelectorAll​​​的800倍），效率更好。 使用类名进行选择时，请优先使用 ​​​getElementsByClassName​​

let elements = Array.prototype.slice.call( document.getElementsByClassName ? document.getElementsByClassName(lazyElementClassName) : document.querySelectorAll('.' + lazyElementClassName) );

此处为兼容性写法：IE8不支持document.getElementsByClassName，所有的浏览器都支持document.querySelectorAll

使用 requestAnimationFrame 提升 web 性能

​

能使用CSS实现的功能勿用JavaScript

JavaScript脚本的运行成本是很高的！

借助后端的力量

服务端渲染媒体查询改为后端通过判断用户设备浏览器的user-agent，精确返回该设备所需要的前端代码和相关资源。后端对图片、音频、视频进行实时压缩

性能测试工具

想查看不同浏览器（甚至低版本IE）的资源加载情况，可以使用Dynatrace的dynaTrace Ajax；想实际测试页面在不同设备上的情况，可以使用BrowserStack服务；想更细致地分析底层网络请求情况，可以使用CloudShark；想了解用户的用户体验，可以使用​​WebPagetest​​。

更多技术

欢迎大家留言共创，将持续更新哦！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。