前端优化三大方案

最新推荐文章于 2025-10-24 10:26:25 发布

原创

最新推荐文章于 2025-10-24 10:26:25 发布 · 490 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #前端优化 #JS #JavaScript

本文介绍了前端性能优化的三大方案：1) 减少HTTP请求次数和传输报文大小，包括CSS SPRITE、字体图标、图片懒加载等技术；2) 设置缓存、预处理和长连接，如使用HTTP2、建立长连接、本地存储等；3) 代码优化，如减少闭包使用、避免iframe、使用事件委托等。这些都是前端开发中提高页面加载速度和用户体验的关键措施。

一、减少 HTTP 的请求次数和传输报文的大小

1、CSS SPRITE（雪碧图、图片精灵）技术

2、使用字体图标（ICON FONT）或者 SVG 等矢量图

    1.会减少 HTTP 请求次数或者减少请求内容的大小
    2.渲染更快：因为他们是基于代码渲染的，而对于位图（png/jpg/gif）是需要先把图片编码再渲染
    3.不容易失真变形
    4.也可以使用 webp 格式图片，这种格式要小一些（但是需要服务器端支持这种格式的请求处理）

3、图片懒加载（延迟加载）技术

    1.在第一次加载时候不给真实地址、图片，提高了第一次渲染页面的速度
    2.当页面加载完，把出现在用户视野区域中的图片做真实加载，没有出现的先不加载（节约流量，也能减少对服务器的请求压力） 
    3.对于数据我们也尽可能分批加载（不要一次请求过多的数据，例如分页技术）

4、音视频文件取消预加载（preload='none'），增加第一次渲染页面的速度

5、客户端和服务器端的数据传输尽可能基于 JSON 格式完成，因为XML 格式比 JSON 格式要大一些（还可以基于二进制编码或者文件流格式，这种格式比文件传输好很多）

6、把页面中的 CSS/JS/图片等文件进行合并压缩

    合并：争取 CSS 和 JS 都只导入一个（webpack 可以实现自动合并压缩） 
    压缩：基于 webpack 可以压缩、对于图片自己找工具先压缩、还可以使用服务器的 GZIP 压缩

7、使用图片地图

    对于多次调取使用的图片（尤其是背景图），我们尽可能把它提取成为公共的样式，而不是每一次重新设置 background

8、图片可以使用 BASE64码

    优点：用 BASE64

最低0.47元/天解锁文章