Web性能优化：What? Why? How?

为何要进步web功用？

Web功用黄金准则：只要10%~20%的最终用户呼应时刻花在了下载html文档上，其他的80%~90%时刻花在了下载页面组件上。

　　web功用关于用户体会有及其重要的影响，依据闻名的`2-5-8`准则：

• 当用户在2秒以内得到呼应，会感受体系的呼应十分快
• 当用户在2-5秒以内得到呼应，会感受体系的呼应速度还能够
• 当用户在5-8秒以内得到呼应，会感受体系的呼应十分慢，但还能够接受
• 当用户在8秒以后都没有得到呼应，会感受体系糟透了，乃至体系现已挂掉；要么打开竞争对手的网站，要么从头发起第2次恳求

　　凡事都需求研讨，经过科学的研讨咱们就能够找到事物的发展规律。这儿要谢谢yahoo的工程师总结的14条前端优化法则，使得咱们能够站在伟人的膀子上。《高功用网站建造》这本书中的14条优化准则，总结起来首要是以下个方面的优化：

1. 削减HTTP恳求
2. 页面内部优化
3. 启用缓存
4. 削减下载量
5. 网络衔接上的优化

为何削减HTTP恳求能够进步Web功用？

　　要回答这个疑问，咱们就要了解当浏览器向效劳器发送一个http恳求知道获取数据都阅历哪些进程：

　　敞开一个衔接（tcp/ip的三次握手进程） -》 发送恳求 -》 等候（网络推迟跟效劳器的处理时刻）-》 下载数据

　　咱们看一下baidu首页中的http恳求在各期间消耗的时刻，上面不相同的色彩代表下图中的不相同期间

　　能够看到除了图像以外，其他大多数http恳求的事件花在了树立衔接与等候期间。

　　http协议树立在TIC/IP协议之上，在TCP/IP协议中，TCP协议供给牢靠的衔接效劳，选用三次握手树立一个衔接。 简略来说三次握手即是一个身份承认的进程：

　　（首次握手：主机A发送位码为syn＝1,随机发作seq number=1234567的数据包到效劳器，主机B由SYN=1知道，A恳求树立联机；）

晴儿：你是潇哥哥吗，我是晴儿

　　（第2次握手：主机B收到恳求后要承认联机信息，向A发送ack number=(主机A的seq+1),syn=1,ack=1,随机发作seq=7654321的包）

潇剑：这货是谁，一箫一剑走江湖，黄色别墅下一句是什么？

　　（第三次握手：主机A收到后检查ack number是不是准确，即首次发送的seq number+1,以及位码ack是不是为1，若准确，主机A会再发送ack number=(主机B的seq+1),ack=1，主机B收到后承认seq值与ack=1则衔接树立成功。）

晴儿：这首诗。。。你真的是潇哥哥，一萧一剑走江湖，千古情愁酒一回。。。

潇剑：晴儿，你真的是晴儿。。。。

（啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪。。。。。。。。。。。。）

　　言归正传，这个进程也是需求消耗时刻的，在baidu首页找到一个极点的比方：

　　而等候的时刻通326电影网常也大于内容下载的时刻，这儿相同找到一个极点比方：

　　由此咱们能够得出结论：一个http恳求绝大多数的时刻消耗在了树立衔接跟等候的时刻，优化的办法是削减http恳求。

怎么进步web功用？

　　1、削减HTTP恳求

　　通常来说要削减http恳求通常从两个方面下手：削减图像的恳求、削减脚本文件与款式表的恳求

　　图像的削减通常有两种方法：css sprites、内联图像、IconFont。

　　CSS Sprites：将多张图像兼并成一幅独自的图像，运用css的background-position特点，将html元素的布景图像放到sprites 图像中的期望方位上。运用这项技能的附加长处是他下降了下载量，兼并后的图像比别离的图像和更小，由于它下降了图像本身的开支（色彩表、格局信息等等）。实践项目中css sprites是一项体力活，由于开发进程中需求对这张大图进行保护（增加、削减图像），张鑫旭同学的文章中有介绍怎么管理sprites图像能够作为参考（这儿）。假如需求在页面中为布景、衔接、导航栏供给大量的图像，css sprites肯定是一种优异的处理计划（洁净的标签、较少的图像、较短的呼应时刻）。

　　内联图像：经过运用data:URL形式能够再页面中包含图像而无需任何额定的恳求。缺陷即是IE8以下的浏览器不支撑这种方法，而IE8在数据巨细上有约束，只能支撑23kb以内的数据。关于较小的图像来说能够直接内联到web页面中，但关于大图像内联到页面里会致使页面变大，聪明的做法是运用css，将内联的图像作为布景运用，并放到外部款式表中，这意味着数据能够缓存在款式表内部。运用外部款式表尽管增加了一个http恳求，但款式能够被浏览器缓存，得到额定的收获。别的一点需求留意：base64是有损紧缩。

　　IconFont：图标字体，这是这些年新盛行的一种以字体替代图像的技能。它能够习惯任何分辨率而不会呈现图像含糊疑问，与图像比较它具有更小的容量，更高的灵活性（像字性喜剧体相同能够设置图标巨细、色彩、透明度、hover状况、回转等），IE8以上的浏览器都支撑该技能。在运用IconFont之前，你首要要断定你选则的字体库是不是是收费。详细内容能够参考这篇文章：图标字体化浅谈

　　削减脚本与款式表的恳求首要准则即是兼并。在实践开发中咱们遵循模块化的准则将代码涣散到许多小文件中，依照软件开发的准则这是完全准确的，但关于上线页面来说，每一个文件都会发作一个http恳求，严重影响功用。和css sprites相同，将这些小文件兼并到一个文件中，能够削减http恳求的数量并缩短最终用户呼应时刻。在兼并进程中咱们还需求运用东西精简（移除不必要的字符以减小文件巨细减缩下载时刻）和混杂（除了移除不必要字符外，还会改写源代码，比方函数和变量名运用更短的标量名）Javascript代码。关于选用AMD或CMD进行模块化开发的同学，在兼并进程中通常会将依靠的其他模块打包到一个文件中，而模板html通常以字符串的方法内联到Javascript文件中。目前最常用的前端构建东西即是glup，这儿有一篇开端运用的文章：前端 | gulp 打包 require.js 模块依靠

　　

　　2、页面内部优化

　　关于页面内部优化首要方向：款式表放在顶部、脚本文件放在底部、防止css表达式、把脚本的款式表放在外部、移除重复脚本

　　关怀功用的工程师都期望页面能否赶快的展示在用户面前，关于页面中许多内容的页面咱们都期望内容能够逐渐加载，为用户供给可视化回馈。而将款式表放在底部会致使浏览器阻挠内容逐渐呈现。为防止当页面变化时重绘页面元素，浏览器会堵塞页面呈现，直到款式表解析结束（详细内容能够检查我的这篇博客）。所以假如将款式表放在顶部并不会削减资本的加载时刻，它削减的是页面的呈现时刻。小米主页从前犯过这么的过错：

　　将款式表放在底部会堵塞页面的逐渐呈现，而将script文件放在页面顶部相同会堵塞页面的逐渐呈现。script元素会堵塞后续内容的解析，由于script中能够同过document.write来更改页面。处理的办法即是将script标签放在页面底部。这么既能够让内容逐渐呈现，也能够进步下载的并行度。假如咱们断定不需求document.write那能够为script标签加上326影视asyn特点（Ie中要加上defer）进步并行下载度。

　　CSS表达式是ie支撑的能够用来动态更改css特点的一种方法，咱们不需求了解太多，她的书写方法如下，一旦在产品中发现expression关键字就要彻底消除。

　　

　　运用外部脚本和款式这一条，我想但凡有点经历的工程师都会这么干。

　　移除重复脚本：这条说的首要是防止在页面中多次参加同一份Javascript代码，假如咱们的开发中有依靠管理的方法比方AMD、CMD，根本不会呈现这种状况。

　　3、启用缓存

　　关于缓存的运用这儿介绍两套计划：expires/If-Modified-Since、Cache-Control/Etag；前者是HTTP1.0中的缓存计划，后者是HTTP1.1中缓存计划，若http头部中一同呈现二者，后者的优先级更高。

　　If-modified-since的方法通常被称为条件Get。浏览器缓存中保留了一个文件的副本，但需求向效劳器问询此副本是不是可用。If-Modified-Since是浏览器将最终修正时刻发送给效劳器，效劳器相应头中Last-Modified进行比照；若If-Modified-Since <= Last-Modified 则浏览器读取本地副本。此时呼应状况为304 Not Modified, 并不在发送呼应体。

　　Expries：尽管运用条件GET和304呼应能够节省时刻，但浏览器跟效劳器端仍然要发送一次恳求进行承认。经过清晰设置副本的过期时刻能够防止条件GET。当浏览器发现呼应头中的expires时，会将过期时刻和文件一同保留到缓存中去。在过期之前一向从缓存中读取。expires头运用一个特定的时刻来指定缓存的有用期，他恳求浏览器与效劳器时刻完全一致。并且一旦过期，效劳器端配置中需求从头设顶一个过期时刻。

　　ETag（实体标签）：是效劳器用于检查浏览器缓存有用性的一种机制。ETag在HTTP1.1中引进，ETag是仅有标识了一个组件的一个特定版别的字符串。仅有的格局约束是这个字符串有必要运用双引号。假如浏览器要验证一个组件是不是有用他会运用If-None-Match将etag字符串传送给效劳器。假如ETag是匹配的，效劳器端会回来304.（假如实体数据需求依据User-Agent或Accept-Language来改动时，ETag供给了更高的灵活性）。关于运用效劳器集群的网站来说，从一台效劳器到另一台效劳器，ETag通常是无法匹配的。这是ETag的疑问。并且即便一同运用If-Modified-Since和If-None-Match也并不能到达预期作用。处理办法老是有的：自定义Etag格局

　　

　　Cache-Control：HTTP1.1引进了来替代Expires，它运用max-age指令来指定副本被缓存多久，该指令以秒为单位定义了一个更新窗，组件从被恳求开端到现在的秒数小于设定值，则一向运用副本。防止了一次http恳求。比较Expries，Cache-Control指令供给了更细粒度的操控。详细内容请看大额同学的文章：透过浏览器看HTTP缓存

　　4、削减下载量

　　削减下载量最有用的方法即是敞开gzip紧缩，gzip是GNU开发的一种免费格局。紧缩组件经过减小http呼应的巨细来加快呼应速度。HTTP1.1经过运用Accept-Encoding来标识支撑的紧缩，假如效劳器看到这个标识，会运用恳求头中的一种方法来紧缩呼应。并经过Content-Encoding来告诉web客户端。许多网站会紧缩html文件，实践上包含xml跟json在内的任何文本都能够紧缩，但图像和pdf不应该紧缩。依据经历通常能够对大于1kb或2kb的文件进行紧缩。紧缩通常能将呼应的数据量削减70%。紧缩的本钱在于：效劳器需求消耗额定的cpu进行紧缩，客户端需求解紧缩。所以需求在cpu的消耗和数据块的巨细之间进行取舍。

　　5、优化网络衔接

　　网络衔接的优化首要有三个规矩：运用CDN加快、削减DNS查找、防止重定向

　　CDN：CDN是地理上散布的web server的调集，用于更高效地发布内容。通常依据网络远近期选择给详细用户效劳的web server。 这缩短了资本的传输呼应时刻，有用进步web功用。

　　DNS用于映射主机名和IP地址，通常一次解析需求20～120毫秒。浏览器会首要依据页面的主机名进行域名解析，在有ISP回来成果之前页面不会加载任何内容，所以削减DNS查找能够有用下降等候时刻。为到达更高的功用，DNS解析通常被多等级地缓存，如由ISP或局域网保护的caching server，本地机器操作体系的缓存（如windows上的DNS Client Service），浏览器。IE的缺省DNS缓存时刻为30分钟，Firefox的缺省缓冲时刻是1分钟。 咱们能做的是尽量削减一个页面的主机名，但要在浏览器最大并行下载数跟dns查找之间做权衡。依据yahoo的研讨，最好将主机名操控在2-4个内。

　　重定向：将一个URL从头路由到另一个URL。重定向功用是经过301和302这两个HTTP状况码完成的，如： 
　　　HTTP/1.1 301 Moved Permanently 
　　　Location: http://example.com/newuri 
　　　Content-Type: text/html 

　　浏览器主动重定向恳求到Location指定的URL上，重定向的首要疑问是下降了用户体会。 种最消耗资本、常常发作而很简略被忽视的重定向是URL的最终短少/，致使主动发作结束斜线的原因是，浏览器在进行get恳求是有必要指定一些途径；假如没有途径它就会简略的运用文档根。（主机短少结束斜线是不会发作重定向：http://www.baidu.com）短少结束斜线发作重定向是许多web效劳器的默许行动。需求在效劳器端设置方可消除。以下图像是豆瓣的一个url恳求：