尽量减少文档大小

• 不添加不必要的容器

使用时加载

• 图片懒加载
  https://blog.csdn.net/weixin_41192489/article/details/126263221
• 视频先用一张带播放按钮的图片显示，待点击播放时，才加载视频
  

不使用图片

img 标签或 background-image 样式通过路径/网址来引用图片时，都会产生 http 请求，用以下不使用图片的方案，便能通过减少http请求来提升页面渲染性能。

方案1. 将图片转换为Base64编码的数据

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

很多网站都提供了转换功能，如：
http://tu.chacuo.net/imagetodataurl/

上传图片后，复制图片的 URL 数据作为 img 标签的 src 值即可。

<img src="data:image……省略具体图片的URL代码……" alt="">
1

缺点：

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

方案2. 使用CSS绘图

https://blog.csdn.net/weixin_41192489/article/details/126133834

较少 HTTP 请求

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

http请求耗时的地方有：域名跳转、DNS查找、TCP链接初始化、从缓存中查询等

• 来自10个不同域名的请求所花费的时间多于来自5个不同域名请求所花费的时间
• 自5个不同域名请求所花费的时间又多于来自5个相同域名的请求所花费的时间
• 来自5个相同域名请求所花费的时间多余来自单个（将5个请求图片合并为一个图片）文件所需要花费的时间

减少传输代价的常见技术手段有：

• 使用CDN
• 利用浏览器缓存
• 使用CSS精灵（CSSSprites）
• 使用Gzip压缩
• 使用图标字体减少实体图片的请求数
• 使用数据URI替代图片
  ……

你不知道的性能消耗

隐藏图片的加载

<div id="test">  
<img src="images/test.png" alt="" />  
div>  

@media all and (max-width: 600px) {  
    #test {   
        display:none;   
    }  
}
1
2
3
4
5
6
7
8
9

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

更快的样式选择器

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

let elements = Array.prototype.slice.call(  
    document.getElementsByClassName  
    ? document.getElementsByClassName(lazyElementClassName)  
    : document.querySelectorAll('.' + lazyElementClassName)  
);
1
2
3
4
5

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

使用 requestAnimationFrame 提升 web 性能

https://blog.csdn.net/weixin_41192489/article/details/126247756

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

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

借助后端的力量

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

性能测试工具

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

更多技术

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