WEB前端性能优化之一—

WEB前端性能优化之一——网页级优化

1、减少Http请求

　　http请求是指从客户端到服务器端的请求消息。其中包含对html、css、js、图片资源以及交互数据处理内容等。在前端性能网页级优化中较少http请求是非常重要的一块，每当我们提到性能优化，首当其冲的就是http请求。都说要减少 HTTP请求，那请求多了到底会怎么样呢 ?首先，每个请求都是有成本的，既包含时间成本也包含资源成本。一个完整的请求都需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而复杂的过程。时间成本就是用户需要看到或者 “感受” 到这个资源是必须要等待这个过程结束的，资源上由于每个请求都需要携带数据，因此每个请求都需要占用带宽。因此请求数多了以后，浏览器需要分批进行请求，因此会增加用户的等待时间，会给用户造成站点速度慢这样一个印象。80%的终端用户响应时间花在了前台。其中，大部分时间都用于下载页面中的各种组件——图像、样式表、脚本、Flash等等。因此，减少组件的数量就能够减少呈现页面所需的HTTP请求数量。这正是加速网页显示的关键所在。

　　减少http请求的途径有哪些？

　（1）从设计层面简化页面

　　　　审查你的页面的每条http请求是否是必须的，每一条http请求都有可能延迟你的页面打开时间。保持页面简洁、减少资源的使用时最直接的。

　　（2）资源合并与压缩

　　　　当我们完成一个页面时都会有一些外部引用的脚本、样式文件，如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。对于CSS、Javascript文件可以进行压缩减少文件的体积，达到减少下载所用时间。

　　（3）CSS Sprites

　　　　CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。使用方法很简单通过background: url(../img/***) no-repeat -26px -14px;设置图片的具体所在位置。

　　（4）小图标内嵌在CSS中

　　　　这种方法是利用base64在线解码将图片转换成base64直接内嵌在CSS中。具体代码如下：

.demoImg{ 
       background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL....");
 }

　　　　其优点是：减少了对图片的请求。

　　　　其缺点是：增加了样式的代码量，更改图片样式比较困难。

2、延迟加载（分批次加载HTTP请求）

　　当http请求已经无法再减少时，我们接下来需要审视页面整体的http请求有没有优化空间，我们的目的是：加快首屏的显示速度。在这里就可以考虑我们的延迟加载了。使用延迟加载前首先需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟加载的集合中。

　　（1）Lazy Load Image（懒加载）

　　　　延迟加载最具有代表性的就是Lazy Load Image（懒加载）

　　　　懒加载并不一定能减少HTTP请求数，但是却能在某些条件下或者页面刚加载时减少HTTP请求数。对于图片而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。这样一来，假如用户只对第一屏的内容感兴趣时，那剩余的图片请求就都节省了。

 1 <!DOCTYPE>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title> 风信子丶</title>
 6     <style>
 7         img a,img{border:0px;}
 8         div{ margin-bottom:10px;}
 9     </style>
10 </head>
11 <body>
12 <img src="image/hh.jpg" /><br />
13 <div><a href="#"><img src="image/ff.gif" data-original="image/hh.jpg"></a></div>
14 <div><a href="#"><img src="image/ff.gif" data-original="image/hh.jpg"></a></div>
15 <div><a href="#"><img src="image/ff.gif" data-original="image/hh.jpg"></a></div>
16 <div><a href="#"><img src="image/ff.gif" data-original="image/hh.jpg"></a></div>
17 <div><a href="#"><img src="image/ff.gif" data-original="image/hh.jpg"></a></div>
18 <div><a href="#"><img src="image/ff.gif" data-original="image/hh.jpg"></a></div>
19 <div><a href="#"><img src="image/ff.gif" data-original="image/hh.jpg"></a></div>
20 <div><a href="#"><img src="image/ff.gif" data-original="image/hh.jpg"></a></div>
21 <div><a href="#"><img src="image/ff.gif" data-original="image/hh.jpg"></a></div>
22 <div><a href="#"><img src="image/ff.gif" data-original="image/hh.jpg"></a></div>
23 </body>
24 <script type="text/javascript" src="js/jquery-1.12.0.js"></script>
25 <script type="text/javascript" src="js/LazyLoad.js"></script>
26 <script type="text/javascript" charset="utf-8">
27     $(function() {
28         $("img").lazyload({
29             placeholder : "image/ff.gif",
30             effect: "fadeIn"
31         });
32     });
33 </script>
34 </html>

　　你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片. 并且需要将真实图片的 URL 设置到 data-original 属性. 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.

　　（2）用Javascript动态加载Jquery、css文件

　　　　下面为关键部位代码：　

 1 var dynamicLoading ={
 2     css:function(path){if(!path || path.length ===0){thrownewError('argument "path" is required !');}var head = document.getElementsByTagName('head')[0];var link = document.createElement('link');
 3         link.href = path;
 4         link.rel ='stylesheet';
 5         link.type ='text/css';
 6         head.appendChild(link);},
 7     js:function(path){if(!path || path.length ===0){thrownewError('argument "path" is required !');}var head = document.getElementsByTagName('head')[0];var script = document.createElement('script');
 8         script.src = path;
 9         script.type ='text/javascript';
10         head.appendChild(script);}}
11 //动态加载 CSS 文件
12 dynamicLoading.css("test.css");//动态加载 JS 文件
13 dynamicLoading.js("test.js");

　　　　利用动态添加Jquery、css文件可以缓解http请求实现延迟加载作用。

3、尽量脚本置底

　　脚本在加载时会阻塞其他资源。

　　例如在脚本加载完成之前，它后面的图片、样式以及其他脚本都处于阻塞状态，直到脚本加载完成后才会开始加载。如果将脚本放在比较靠前的位置，则会影响整个页面的加载速度从而影响用户体验。最简单可依赖的方法就是将脚本尽可能的往后挪，减少对并发下载的影响。

4、异步执行内嵌脚本

　　inline脚本对性能的影响与外部脚本相比，是有过之而无不及。首页，与外部脚本一样，inline脚本在执行的时候一样会阻塞并发请求，除此之外，由于浏览器在页面处理方面是单线程的，当inline脚本在页面渲染之前执行时，页面的渲染工作则会被推迟。简而言之，inline脚本在执行的时候，页面处于空白状态。鉴于以上两点原因，建议将执行时间较长的inline脚本异步执行，异步的方式有很多种，例如使用script元素的defer属性(存在兼容性问题和其他一些问题，例如不能使用document.write)、使用setTimeout，此外，在HTML5中引入了Web Workers的机制，恰恰可以解决此类问题。

5、避免404

　　404我们都不陌生，代表服务器没有找到资源，我们要特别要注意404的情况不要在我们提供的网页资源上，客户端发送一个请求但是服务器却返回一个无用的结果，时间浪费掉了。更糟糕的是我们网页中需要加载一个外部脚本，结果返回一个404，不仅阻塞了其他脚本下载，下载回来的内容(404)客户端还会将其当成Javascript去解析。

6、减少不必要的HTTP跳转

　　对于以目录形式访问的HTTP链接，很多人都会忽略链接最后是否带’/’，假如你的服务器对此是区别对待的话，那么你也需要注意，这其中很可能隐藏了301跳转，增加了多余请求。具体参见下图，其中第一个链接是以无’/’结尾的方式访问的，于是服务器有了一次跳转。