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.利用缓存
