web前端加载优化-减少HTTP请求 (细节与办法)

时间:2020-12-08 14:44:27

减少HTTP请求。

因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个。a) 合并CSS、JavaScript;b) 合并小图片,使用雪碧图(CSS SPRITE)

    1. Css与js的压缩合并可以使用在线工具
    2. a.

http://tool.oschina.net/jscompress/

      b.

https://tool.lu/js

    2.合并小图片,雪碧图;

借用图片处理工如:美图秀秀,ps等

web前端加载优化-减少HTTP请求 (细节与办法)

将多张小图片合成后的使用办法;

.test {background:url(../images/test-css_sprite.jpg) no-repeat 0px -262px ; }  /*向下移262px   (0,0)  ->  (0,-262)    */

Code: https://github.com/Thinkia/Page_Optimization/blob/master/Optimization_html/Loading/test-css_sprite.html

Demo:

https://thinkia.github.io/Page_Optimization/Optimization_html/Loading/test-css_sprite.html

web前端加载优化-减少HTTP请求 (细节与办法)