前端性能优化
前端性能优化 一、减少 HTTP的请求次数和报文的大小 css sprite (雪碧图、图片精灵)技术 使用字体图标或者 svg 等矢量图 • 减少HTTP请求次数或者减少请求内容的大小 • 渲染更快:因为他们是基于代码渲染的,而对于位图(png / jpg / gif)是需要把图片编码再渲染 • 不容易失真变形 • 也可以使用 webp 格式图片,这种格式要小一些,但是需要服务器端支持这种格式的请求处理 图片懒加载(延迟加载)技术 • 第一次加载页面的时候不去请求真实的图片,提高第一次渲染页面的速度 • 当页面加载完,把出现再用户视野区域中的图片做真实加载,没有出现的先不加载(节约流量,也能减少对服务器的请求压力) • 对于数据我们也尽可能分批加载(不要一次请求过多的数据,例如分页技术) 音视频文件取消预加载(preload = ‘none’),这样可以增加第一次渲染页面的速度,当需要播放时侯再加载 客户端和服务器端的数据传输尽可能基于 json 格式完成,xml 格式比 json 格式要大一些;还可以基于二进制编码或者文件流格式,这种格式比文件格式快很多 把页面中的 css / js 图片等文件进行合并压缩 • 合并:争取 css 和 js 都只导入一个,(webpack 可以实现自动合并压缩) • 压缩:基于 webpack 可以压缩,对于图片自己找工具压缩