H5前端优化

---恢复内容开始---

用户打开网页最满意在1-5S,等待过长,会导致用户流失。

1.减少HTTP请求

手机浏览器同时响应请求为4个(Android支持4个,IOS支持6个),所以首次加载同时请求数不能超过4个。

a)合并CSS、javascript

2.缓存

使用缓存可以减少向服务器的请求数,节省加载时间,所以所有静态资源都要在服务器端设置缓存,并且尽量使用长Cache(长Cache资源可使用时间戳)

a)缓存一切可缓存的资源

b)使用长Cache(使用时间戳更新Cache)

c)使用外联式引用CSS、javascript

3.压缩HTML、CSS、javascript

a)压缩(多余的空格、换行符和缩进)

b)启用GZIP

4.无阻塞

CSS放在页面头部并使用Link的方式引入,避免在HTML中写style,javascript放在页面尾部或使用异步方式加载。

5.使用首屏加载

尽量针对首屏的快速显示做优化

6.压缩图片

图片是最占流量的资源,使用时选择合适的尺寸(基于手机屏幕一般长宽)、格式(jpg)、大小(不超过1014KB)

7.减少Cookie

8.避免重定向

9.异步加载第三方资源

10.渲染优化

HTML使用Viewport

Viewport可以加速页面的渲染,请使用以下代码:

 <meta name=”viewport” content=”width=device-width, initial-scale=1″>
限定目的,能使人生变得简洁。
原文地址:https://www.cnblogs.com/lx07/p/10478007.html