1、资源(js、css)合并与压缩，减少http请求
1)在线工具压缩
2)构建工具压缩
2、图片优化
1)png8、png24、png32之间的区别
2)图片格式
jpg 图片有损压缩，不支持透明，适用于不需要透明图片的场景
webp 只适用于安卓，ios上有兼容性问题
svg 矢量图，比png小，适用于需要简单的矢量图的场景
png 支持透明，适用于需要大量透明图片的场景
3)雪碧图，将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分 www.spritecow.com
优点：
将多张图片合并到一张图片中，可以减小图片的总大小
将多张图片合并到一张图片后，只需一次网络请求就可以将所需的资源全部下载，减小建立连接的消耗，在移动端尤为明显
显示雪碧图的条件：
需要一个设置好宽和高的容器
需要设置background-position的值（默认为（0，0），也就是图片的左上角），即移动图片到自己想要的图标位置。
4)Image inline (一般8kb以下的图片用，根据业务场景权衡)
<img alt="Embedded Image" src="data:image/png;base64,/9j/4AAQSkZ..." />
优点:
减少http请求次数
缺点:
会使总体资源变大
浏览器不会缓存内联图片资源
兼容性较差，只支持ie8以上浏览器
超过1000kb的图片，base64编码会使图片大小增大，导致网页整体下载速度减慢
5)图片压缩
通过工具压缩图片 https://tinypng.com/
通过转换图片格式压缩图片（比如：png-->webp） https://zhitu.isux.us/
通过构建工具压缩图片
2、css和js的装载与执行
1)HTML页面加载渲染的过程
2)css阻塞
css head中阻塞页面的渲染
css阻塞js的执行
css不阻塞外部脚本的加载
3)js阻塞
直接引入的js阻塞页面的渲染
js不阻塞资源的加载
js顺序执行，阻塞后续js逻辑的执行
3、懒加载和预加载
1)懒加载
<img src="" lazyload="true" data-original="http://img/1.png" />
当图片进入可视区域时去请求资源
需要去监听scroll事件，在scroll事件的回调中，去判断懒加载的图片是否进入可是区域
2)预加载
通过img标签实现 <img src="http://img/1.png" display="none" />
通过js的image对象实现
通过XMLHttpRequest实现 （存在跨域问题）
通过preload.js库实现
4、重绘与回流
避免使用触发重绘、回流的CSS属性 （比如，用translate替代top；用opacity替代visibility）
将重绘、回流的范围限制在单独的图层之内
来源：oschina
链接：https://my.oschina.net/u/3785845/blog/3063487