前端性能优化：文件优化

最新推荐文章于 2025-06-13 11:31:53 发布

小码哥・Martin

最新推荐文章于 2025-06-13 11:31:53 发布

阅读量104

点赞数

分类专栏：性能优化文章标签：前端性能优化

本文链接：https://blog.csdn.net/php_martin/article/details/125873781

版权

性能优化专栏收录该内容

11 篇文章

订阅专栏

本文探讨了图片优化的方法，包括减少像素点和颜色、利用CSS替代修饰图片、按需加载裁剪图片、使用base64和雪碧图。同时介绍了其他文件优化策略，如正确放置CSS文件、利用CDN、选择合适的图片格式（如WebP和SVG）、智能使用JS以及考虑Webworker提升性能。此外，还提到了CDN的使用技巧以避免不必要的Cookie传输。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文件优化

图片优化

对于如何优化图片，有 2 个思路

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

图片加载优化

不用图片。很多时候会使用到很多修饰类图片，其实这类修饰图片完全可以用 CSS 去代替。
对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片
小图使用 base64格式
将多个图标文件整合到一张图片中（雪碧图）
选择正确的图片格式：
- 对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量，缺点就是兼容性并不好
- 小图使用 PNG，其实对于大部分图标这类图片，完全可以使用 SVG 代替
- 照片使用 JPEG

其他文件优化

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