前端加载性能优化总结

目录

一、图片优化

1、图片选择

2、图片转base64

3、雪碧图 && Web Font

4、图片延迟加载

5、缩略图 && 响应式图像

二、HTML结构优化

三、CSS、js优化

四、网络和服务端优化

一、图片优化

1、图片选择

格式	使用场景	压缩插件
JPEG	颜色丰富的图，不支持透明度，适合图片展示。	jpegtran
PNG	体积较大、但是支持透明度，适合边缘清晰，纯色或者大块相同颜色，例如背景图片	jdf-png-native || node-pngquant-native
GIF	每个像素只有8bit，不适合色彩丰富的图，但是可做动效。	gifsicle
Webp	不适合色彩比较丰富的图像，适合图形额半透明图像（谷歌浏览器）

2、图片转base64

将图片转成base64，随着html或者css请求到本地，减少一些http请求。

3、雪碧图 && Web Font

雪碧图：将一些小的图标合在一张图片上 使用偏移来获取图标，减少请求。

Web Font：css 伪元素 ::before ::after自定义生成图标。

4、图片延迟加载

1）使用统一占位符、低质量的占位符（可使用lqip、sqip插件生成）、holder.js占位等，等真实的图片加载后，再替换掉占位符（可使用lazyload插件）

2）占位后懒加载、可视范围再加载

5、缩略图 && 响应式图像

缩略图：根据不同的网络环境请求不同大小的图片，可以通过url传递不同的参数来实现

响应式图像：根据窗口尺寸来显示不同尺寸的图片，实现如下

1）CSS3 @media

2）img的scrset sizes参数

3）<picture>标签

4）js控制
 

二、HTML结构优化

1. 将CSS放在head中优先请求

   1）CSS的加载不会阻塞dom树的解析，渲染树的生成依赖css树，因此需要提前加载

2. 将script放在body底部去请求

   1）script的请求会阻断dom树的解析，因为dom树的解析是一步一步的，因此放到最后去加载，防止阻断dom解析过程

三、CSS、js优化

1. 压缩源文件

   1）减少请求的文件体积

2. 将css和js进行一些合理合并，减少http的请求

   1）浏览器有并发限制，最多可以并发6个请求

3. 动画执行优先使用CSS，其次使用js，使用js是尽量使用requestAnimationFrame

   1）CSS3动画的性能要高于JS，

         因为CSS3会启动GPU硬件加速

         如果使用transform、opacity（will-change、translateZ(0)）提升为合成层。

         合成层有自己的渲染上下文，并由GPU处理，当需要重绘是只重绘自己层内元素，不会重绘整个页面。

   2）requestAnimationFrame执行动画，比setTimeout会好一些。

         2-1）由系统来决定回调函数的执行，不需要关系屏幕的刷新频率。2、当页面最小化时会停止执行。3、自带节流，防止不必要的渲染

         2-2）事件循环队列保证不了执行时机

   3）也可以使用cavnas实现动画，避免直接操作dom来实现动画，导致页面不停回流和重绘。

4. 模块优化处理

   1）模块通过路由管理，提供懒加载能力。

   2）将组件封装时默认提供懒加载能力。

   3）首页及分析长页面，只在可视范围参与轮询。串行和并行控制，做到并发次数小于6(浏览器de)。

四、网络和服务端优化

1）dns缓存

2）浏览器缓存

      2-1）通过请求头Cache-Control，ETag等将静态资源进行缓存。nginx配置为expires 1h; 

      2-2）部署cdn

3）服务端缓存

      3-1）redis、EHCache、memcached等二级缓存