尽量减少文档大小
- 不添加不必要的容器
使用时加载
- 图片懒加载
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="">
缺点：
- 浏览器无法再缓存图片（当需要在页面中多次引用同一张图片时，不得不在多处粘贴代码并且占用传输带宽），同时增大了样式文件体积。
- 移动设备上将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; } }
页面的宽度不足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 性能
https://blog.csdn.net/weixin_41192489/article/details/126247756
能使用CSS实现的功能勿用JavaScript
JavaScript脚本的运行成本是很高的！
借助后端的力量
- 服务端渲染
- 媒体查询改为后端通过判断用户设备浏览器的user-agent，精确返回该设备所需要的前端代码和相关资源。
- 后端对图片、音频、视频进行实时压缩
性能测试工具
- 想查看不同浏览器（甚至低版本IE）的资源加载情况，可以使用Dynatrace的dynaTrace Ajax；
- 想实际测试页面在不同设备上的情况，可以使用BrowserStack服务；
- 想更细致地分析底层网络请求情况，可以使用CloudShark；
- 想了解用户的用户体验，可以使用WebPagetest。
更多技术
欢迎大家留言共创，将持续更新哦！
