h5 极致移动web端性能优化

1,073 阅读1分钟

1、压缩html、css、js 使用Brotli 比Gzip 压缩效果更好,更快。

chrome 下 Response Header content-encoding: br

2、使用rollup 打包公共基础代码比webpack 体积更小。

3、内嵌js 一定要放在link css 加载的前面,防止js 阻塞css。

4、使用框架代码和polyfill 文件可以直接引用script 标签不必打包到webpack中,利用缓存。

5、使用静态域名js、css/img突破同域名并发限制请求,并可以请求资源没带cookie 请求。

6、多使用UI自定义组件,少使用其他第三方UI组件,定义基础公共方法,如请求,缓存、工具验证模块,避免打包导致体积过大。

7、使用阿里nginx 模块 nginx-http-concat 做到多文件合并一次请求 如 

   <script type="text/javascript" src="/static/??vue/2.5.2/index.js,js/1.0.0/polyfill/index.js" crossorigin=anonymous></script>

8、图片使用webp和图片可以根据尺寸返回。

9、使用serviceWorker 离线缓存。

10、使用 css -webkit-touch-action: manipulation;touch-action: manipulation; 来解决300ms延迟 替代fastClick.js。

11、使用懒加载技术优化图片加载。

12、使用https 和http 2.0 加载网页,使用tcp多路复用,网页更加安全。

13、preload/prefetch/dns-prefetch 预加载、下一个页面加载、dns预解析。

14、async/defer延迟脚本加载或异步加载。

15、避免浏览器dom引起大量的重排和绘流。

16、使用svg 代替icon sprite 雪碧图。

17、使用节流和防抖来控制频繁的操作。

18、服务器端配置 Cache-Control max-age=2592000。

19、利用localStorage 缓存接口数据,根据时间半小时/1天,减少服务器请求,定时清理。

20、定制ui组件库,不使用第三方ui库