前端性能优化常见方式

1.资源的合并与压缩

原理：减少http请求，减小请求资源的大小

方式：html，css，js压缩，文件的合并，gzip压缩

压缩工具;在线压缩，html-minifier ，后端模板引擎渲染压缩  ，css-clean，uglifyjs2，百度fis

注意：文件合并存在缺点，首屏渲染问题，缓存失效问题

（比如合并的源文件有一个改了，整个要重新请求）

文件合并压缩原理图

2.图片的优化

jpg有损压缩，压缩率高，不支持透明—— 大部分不需要透明图片的业务场景

png支持透明，浏览器兼容好—— 大部分需要透明图片的业务场景

webp压缩程度更好，在ios webview有兼容性问题—— 安卓全部

svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景—— 图片样式相对简单的业务场景

常见优化方式：css雪碧图（优缺点）、Image inline、使用SVG进行矢量图的绘制、使用iconfont解决icon问题、使用webp格式图片

3.css、js的加载与执行

css head中阻塞页面的渲染

ucss阻塞js的执行

ucss不阻塞外部脚本的加载

直接引入的js阻塞页面的渲染

js不阻塞资源的加载

js顺序执行，阻塞后续js逻辑的执行

优化方式：

css 样式表置顶

用 link 代替 import

js 脚本置底

合理使用 js 的异步加载能力（defer，async）

4.懒加载和预加载

懒加载：电商，新闻等等。通过监听滚动事件触发

预加载：比如说展示的h5，抽奖盘。静态资源提前请求，然后之后从缓存中取。第三方库：preload.js

5.重绘与回流

回流

重绘

优化方式：（浏览器图层概念）

6.浏览器存储

localstorage、cookie、sessionstorage、indexdb

pwa和service worker

7.利用缓存