Web 前端性能优化

Posted 2020-07-28

本文列举了最常见的3个性能问题

TOP1：图片尺寸远大于坑位尺寸

这将造成两个问题：

1）浏览器进行前端渲染时会压缩图片尺寸，消耗性能。

2）图片尺寸过大造成流量浪费，增加了资源下载时间。

该问题可通过pageSpeed插件能检测到：

TOP2：背景图片未优化

目前会场页面顶部一般由一张前景图片和一张背景图片组成，背景图片比前景图片更宽，但高度相同，背景图片比前景图片宽的部分的图案正好与前景图片契合。可以理解为前景图片就是将背景图片裁剪掉两边一定的宽度。（一般优化前的背景图片200KB以上，前景图片100KB以内。）

这里的背景图片很明显有优化空间，它不需要显示中间前景图片部分，可以把中间部分改为纯色以压缩图片体积。如下图，如下修改后因为前景图片覆盖了背景图片，所有背景图片的中间去掉的部分不受影响，并且背景图片可以压缩到50KB以内。

TOP3:非首屏图片没有懒加载

为了提高页面性能，一般会对非首屏的图片做懒加载（可能会对第二屏做延迟加载），如果非首屏图片未实现懒加载，将会响应页面首屏的打开速度。

这个问题用chrome或者firefox的F12就能观察到。