前端文件优化

一、图片优化

计算图片大小

对于一张100*100像素的图片来说，图像上有 10000 个像素点，如果每个像素的值是 RGBA 存储的话，那么也就是说每个像素有 4 个通道，每个通道 1 个字节（8 位 = 1个字 节），所以该图⽚⼤小⼤概为 39KB（10000 * 1 * 4 / 1024）。

但是在实际项⽬中，⼀张图片可能并不需要使⽤那么多颜色去显示，我们可以通过减少每个像素的调色板来相应缩小图⽚的⼤小。

优化图片思路

• 减少像素点
• 减少像素的能够显示的颜色

二、图片加载优化

1. 不⽤图⽚。很多时候会使⽤到很多修饰类，其实这类修饰图⽚完全可以⽤ CSS 去代替。
2. 对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。⼀般图⽚都⽤ CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图⽚。
3. ⼩图使⽤ base64 格式
4. 将多个图标⽂件整合到⼀张图⽚中（雪碧图）

5. 选择正确的图片格式：

•    对于能够显示 WebP 格式的浏览器尽量使⽤ WebP 格式。因为 WebP 格式具有更好 的图像数据压缩算法，能带来更⼩的图⽚体积，⽽且拥有⾁眼识别⽆差异的图像质 量，缺点就是兼容性并不好
• ⼩图使⽤ PNG，其实对于⼤部分图标这类图⽚，完全可以使⽤ SVG 代替
• 照⽚使⽤ JPEG

三、其他文件优化

• CSS ⽂件放在 head 中
• 服务端开启⽂件压缩功能
• 将 script 标签放在 body 底部，因为 JS ⽂件执⾏会阻塞渲染。当然也可以把 script 标签放在任意位置然后加上 defer ，表示该⽂件会并⾏下载，但是会放到 HTML 解析完成后顺序执⾏。对于没有任何依赖的 JS ⽂件可以加上 async ，表示加载 和渲染后续⽂档元素的过程将和 JS ⽂件的加载与执⾏并⾏⽆序进⾏。
• 执⾏ JS 代码过⻓会卡住渲染，对于需要很多时间计算的代码可以考虑使⽤ Webworker 。 Webworker 可以让我们另开⼀个线程执⾏脚本⽽不影响渲染。

四、CDN

静态资源尽量使⽤ CDN 加载，由于浏览器对于单个域名有并发请求上限，可以考虑使⽤多个 CDN 域名。对于 CDN 加载静态资源需要注意 CDN 域名要与主站不同，否则每次请求都会带上主站的 Cookie。