【前端性能优化方法】网站前端性能优化减少HTTP请求数

时间:2019-01-25  来源:安全和优化  阅读:

 减少HTTP请求数对seo/seo.html" target="_blank">网站优化来说是非常重要的,过多的HTTP请求不仅会让用户等待时间变长,而且还会加重服务器的负担。减少HTTP请求主要有以下技术手段。
    ①图片映射,利用HTML的Map标签将一张图片对应不同链接。
    ②CSS sprite,国内又叫CSS精灵,或者融图。是将若干个图片融到一张大图中,以减少HTTP请求。
    ③静态资源合并,将css和javascript等静态资源合并到一个文件并进行压缩。
    ④静态资源缓存,用户访问一次后不再请求静态资源

1.图片映射
    图片映射,就是HTML的热图,指带有可点击区域的一张图片。如下所示代码(来自w3school),将一幅图分割成三个不同的点击区域。

Planets

 
 
 

    图片映射的好处显而易见,如果不适用图片映射的话,你至少得切割成三张图,浏览器分三次请求。

2.CSS sprite
    CSS sprite又叫css精灵,是将多张小图融合到一张大图,从而减少HTTP请求数量的方式,比如最常见的各种分享按钮(新浪微博、QQ空间、腾讯微博、人人网等),如果每个按钮都是一张单独的图片,那十几个SNS网站就得十几个小图标,而如果采用CSS sprite,则可以将这十几个图标融为一张图,仅需一次网络请求。这是CSS sprite最明显的好处。
    CSS sprite的原理是利用CSS的background-image、background-repeat、background-position这几个属性的组合进行背景定位,background-position可以用x、y值精确的定位出背景图片的位置。

3.静态资源合并压缩
    通常情况下我们会写很多css和js代码,而为了便于维护我们可能会将不同的功能模块写入不同的css/js文件,在发布之前我们可以将这些文件合并成一个css或js文件,并对这个文件压缩,这样浏览器请求只需要一次即可加载完所有的css/js文件。当然如果这些文件应用场景差异很大,你也就没必要将他们合并到一个文件。
    合并压缩你可以使用Yahoo的YUI compressor或者Google的Closure Compiler。

4.对静态资源文件进行缓存
    这个好处显而易见,就不用多说了,最好对静态资源采用不同的域名和HTTP服务器,并且对静态资源设置浏览器缓存为永久(足够长时间,比如淘宝图片CDN就是10年过期),设置方法为给HTTP头设置过期时间,比如nginx服务器可以这样设置:

location ~* .(ico|gif|bmp|jpg|jpeg|png|swf|js|css|mp3) {            
root    /data/www/static;            
expires max;
}

    当然,设置静态资源过期也要根据自身的情况,我一般的做法是全部设置为永久缓存。然后每次更新图片或动画都不会用原路径,而是重新生成新的路径。每次css和js更新后加入时间戳,比如http://xxcdn.cn/xx/xx/xx.js?t=20131209


先看百度实例,打开百度我们查看源码 大家会发现所有的css,js都写在了一个页面,如果我们使用站长工具查会发现百度图片,js缓存是永久的了,这个大家会明白为什么吗,还有我们发现在图片中百度这样定了

js代码如下全写在一起了

<script>setTimeout(function(){var s = document.createElement("script");s.charset="utf-8";s.src="http://s1.bdstatic.com/r/www/cache/static/global/js/popup_a3186328.js";document.body.appendChild(s);},0);</script><script>(function(){var C=G("lm").getElementsByTagName("A");for(var B=0,A=C.length;B

在css中也发现全写在了页面中了并且重点是图片直接如下

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAMAAACuX0YVAAAABlBMVEVnpv85i/9PO5r4AAAAD0lEQVR42gEEAPv/AAAAAQAFAAIros7PAAAAAElFTkSuQmCC);

这个我们放在html会发现是一张图片了,这也是一种办法了。

【前端性能优化方法】网站前端性能优化减少HTTP请求数

http://m.bbyears.com/asp/47529.html

推荐访问:前端性能优化面试题 web前端性能优化
相关阅读 猜你喜欢
本类排行 本类最新