怎么优化h5的性能

优化方案

资源加载

1.首屏加载：在1s内内容加载完毕，loading进度条消失；

2.延时加载：先加载屏幕可视范围内的资源，其他的在之后通过网络加载；

3.滚屏加载：一种常见的动态无刷新数据加载方法，

4.响应式加载：在分辨率不同的手机上使用不同的css，加载不同的图片资源；

5.第三方资源异步加载：引用第三方资源时，要充分考虑他们的性能影响，使用异步加载，防止其加载影响页面的加载；

6.Loading进度条：在加载时间较长时，一点要有进度条，让客户有一种‘期盼感’；

7.图片的使用：常用的有webp、jpg、png，webp最小但是存在兼容问题，png显示比jpg好但是其格式图片很大，并且人的肉眼分不出jpg和png，所以优先使用jpg；对于一些小的图片可以合并作为css spirit使用，减少向服务器发送请求的次数；使用字体图标来代替某些图片。

域名/服务器部署

1.资源缓存：合理设置资源过期时间，对于一些静态不需要改变的资源可以将其过期时间设置长一些；

2.分域名部署：将静态资源、动态资源放在不同的域名下，这样当静态资源请求时，不会带上动态资源的域名所设置的cookie头部信息；

3.减少cookie：尽量减少cookie头部信息，从而减少流量和带宽。

代码资源：

1.尽量合并js、css文件，减少请求次数；

2.外连js、css+缓存机制，避免刷新时再次加载这段代码；

3.压缩html、js、css代码；

4.css和js的位置；

代码规范：

1.避免空的src；

2.避免css表达式；

3.避免style；