性能优化的几大原则

核心思想：尽量让首屏的有意义的内容尽早展现，非首屏的信息延迟或按需加载。

1、能不加载就不要加载

1.去除不需要的js，例如 gio.js,growingIO公司已经不续费

bi_params = {
…
disableGIO: true
};

2. 跟端相关的jssdk按需加载，只有在相应的端才加载对应的端的sdk的js，例如微信sdk

其他端的js也是，支付宝，百度小程序，app codova.js
3. passport.js ？根据是否需要登陆按需进行加载
4. 非首屏图片懒加载，包括轮播图非首张图片
5. 非首屏模块（这里指的是vue组件）按需加载或者滚动加载
6、利用浏览器本地缓存机制，长期缓存不变的资源，对需要修改的资源短期缓存+条件查询机制，避免不必要的网络请求
7、利用端的存储能力（App的内置）或H5的本地存储能力（LocalStorage等）缓存长期使用的资源，避免网络请求
2、能少加载就少加载
资源压缩，HTML/CSS/JS/图片/video 压缩
线上这几个js还没压缩
https://user.daojia.com/js/djpassport.js
https://static-fe-cdn.daojia.com/isdfe/coupon2.0/src/ordercoupon/common.js?v=1.0.0
乾坤袋的各组件的js需要压缩

2. 图片压缩，支持webp的端用webp的格式

3. 资源大小要控制，首屏的图片控制在150k以下，html，首屏依赖的css和js文件控制在14.6k以下

4、资源打包时不要都打在一个bundle里，应该按需和异步加载分拆成多个bundle

3、如果非要加载，能提前加载或请求就提前
dns-prefetch 域名预解析
资源预加载，能 preload就preload，首屏图片preload（如果有pageData能拿到首屏图片），注意html中已经引用的js和css和图片就不需要preload了，浏览器自己会提前请求
首屏展示需要的数据最好在pageData里面，不需要发请求
首屏的数据尽量一个接口返回，不要依赖多个接口的请求

4、尽可能压缩资源的加载时间，能短就短
1、减少请求数

建立TCP连接需要时间
释放TCP连接需要时间
连接数越多，服务器的负载越大，服务器能处理的请求数会下降
SSL建立连接需要时间
Keep alive
BASE64编码小图片
2、缩短资源传输的路径

使用CDN
动态CDN加速（ESI等，CDN高速通道）
3、减少冗余的信息

使用HTTP2，减少冗余的http头的传输，头部压缩和多路复用
单独不设置cookie的域名来存放静态资源

5、按照浏览器渲染机制来写代码
页面的布局最好一开始就固定或者通过占位元素进行占位，避免首屏渲染过程，反复重排和重绘
外联的css之前最好不要放外联的js，可以放内联的js，因为外联的js会阻塞外联的css的解析生成CSSOM对象
页面元素尽量初始化的时候，占位，不要等资源回来之后页面再重新布局
接口合并也是，因为多个请求返回要多次触发xhr的load 事件的回调，进而进行多次的渲染，而每一次接口返回对应的回调不一定能得到立即执
js,css,html代码优化，老生常谈