为何要提高web性能？
Web性能黄金准则听博久网络解说Web性能优化
当用户在2秒以内得到响应，会感觉系统的响应飞快 当用户在2-5秒之内得到响应，会感觉系统的响应速度还可以当用户在5-8秒之内得到响应，会感觉系统的响应很慢，但还可以同意当用户在8秒之后都没得到响应，会感觉系统糟透了，甚至系统已经挂掉；要么打开角逐对手的网站，要么重新发起第二次请求。
任何事都需要研究，通过科学的研究大家就能找到事物的进步规律。这里要感谢工程师概要的14条前端优化法则，使得大家可以站在巨人的肩膀上。《高性能网站制作》这本书中的14条优化原则，概要起来主如果以下个方面的优化听博久网络解说Web性能优化
开启一个链接（tcp/ip的三次握手过程） -> 发送请求 -> 等待（互联网延迟跟服务器的处置时间） -> 下载数据
大家看一下百度首页中的http请求在各阶段耗费的时间，上面不一样的颜色代表下图中的不同阶段
可以看到除去图片以外，其余大多数http请求的事件花在了打造连接与等待阶段。
http协议打造在TIC/IP协议之上，在TCP/IP协议中，TCP协议提供靠谱的连接服务，使用三次握手打造一个连接。简单来讲三次握手就是一个身份确认的过程听博久网络解说Web性能优化主机A发送位码为syn＝1,随机产生seq number=1234567的数据包到服务器，主机B由SYN=1了解，A需要打造联机；）
（第二次握手听博久网络解说Web性能优化主机A收到后检查ack number是不是正确，即首次发送的seq number+1,与位码ack是不是为1，若正确，主机A会再发送acknumber=(主机B的seq+1),ack=1，主机B收到后确认seq值与ack=1则连接打造成功。）
言归正传，这个过程也是需要消耗时间的，在百度首页找到一个极端的例子听博久网络解说Web性能优化
由此大家可以得出结论听博久网络解说Web性能优化降低图片的请求、降低脚本文件与样式表的请求
图片的降低一般有两种方法听博久网络解说Web性能优化将多张图片合并成一幅单独的图片，用css的background-position属性，将html元素的背景图片放到sprites图片中的期望地方上。用这项技术的附加优点是他减少了下载量，合并后的图片比离别的图片和更小，由于它减少了图片自己的开销（颜色表、格式信息等等）。实质项目中csssprites是一项体力活，由于开发过程中需要对这张大图进行维护（添加、降低图片），张鑫旭同学的文章中有介绍怎么样管理sprites图片可以作为参考（这里）。假如需要在页面中为背景、链接、导航栏提供很多的图片，csssprites肯定是一种出色的解决方法（干净的标签、较少的图片、较短的响应时间）。
内联图片听博久网络解说Web性能优化base64是有损压缩。
IconFont听博久网络解说Web性能优化图标字体化浅析
降低脚本与样式表的请求主要原则就是合并。在实质开发中大家遵循模块化的原则将代码分散到很多小文件中，根据软件开发的原则这是完全正确的，但对于上线页面来讲，每个文件都会产生一个http请求，严重干扰性能。和csssprites一样，将这类小文件合并到一个文件中，可以降低http请求的数目并缩短最后用户响应时间。在合并过程中大家还需要用工具精简（移除非必须的字符以减小文件大小缩减下载时间）和混淆（除去移除非必要字符外，还会改写源码，譬如函数和变量名用更短的标量名）Javascript代码。对于使用AMD或CMD进行模块化开发的同学，在合并过程中一般会将依靠的其他模块打包到一个文件中，而模板html一般以字符串的方法内联到Javascript文件中。现在最常见的前端构建工具就是glup，这里有一篇初步应用的文章听博久网络解说Web性能优化样式表放在顶部、脚本文件放在底部、防止css表达式、把脚本的样式表放在外部、移除重复脚本
关性情能的工程师都期望页面能否尽快的展示在用户面前，对于页面中不少内容的页面大家都期望内容可以逐步加载，为用户提供可视化回报。而将样式表放在底部会致使浏览器阻止内容逐步呈现。为防止当页面变化时重绘页面元素，浏览器会阻塞页面呈现，直到样式表分析完毕（详细内容可以查询我的这篇博客）。所以假如将样式表放在顶部并不会降低资源的加载时间，它降低的是页面的呈现时间。小米主页过去犯过如此的错误听博久网络解说Web性能优化这条说的主如果防止在页面中多次加入同一份Javascript代码，假如大家的开发中有依靠管理的方法譬如AMD、CMD，基本不会出现这样的情况。
3、启用缓存
关于缓存的用法这里介绍两套策略听博久网络解说Web性能优化虽然用条件GET和304响应可以节省时间，但浏览器跟服务器端仍然要发送一次请求进行确认。通过明确设置副本的过期时间可以防止条件GET。当浏览器发现响应头中的expires时，会将过期时间和文件一块保存到缓存中去。在过期之前一直从缓存中读取。expires头用一个特定的时间来指定缓存的有效期，他需要浏览器与服务器时间完全一致。而且一旦过期，服务器端配置中需要重新设顶一个过期时间。
ETag（实体标签）听博久网络解说Web性能优化自概念Etag格式
Cache-Control听博久网络解说Web性能优化透过浏览器看HTTP缓存
4、降低下载量
降低下载量效果最好的方法就是开启gzip压缩，gzip是GNU开发的一种免费格式。压缩组件通过减小http响应的大小来加快响应速度。HTTP1.1通过用Accept-Encoding来标识支持的压缩，假如服务器看到这个标识，会用请求头中的一种方法来压缩响应。并通过Content-Encoding来公告web推广客户端。不少网站会压缩html文件，事实上包含xml跟json在内的任何文本都可以压缩，但图片和pdf不应该压缩。依据经验一般可以对大于1kb或2kb的文件进行压缩。压缩一般能将响应的数据量降低70%。压缩的本钱在于听博久网络解说Web性能优化用CDN加速、降低DNS查找、防止重定向
CDN听博久网络解说Web性能优化将一个URL重新路由到另一个URL。重定向功能是通过301和302这两个HTTP状况码完成的，如听博久网络解说Web性能优化
这14条优化规则在非常长的一段时间里发挥着要紧用途，伴随技术的进步，单单这十四条原则已经不可以够满足前端性能优化。
推荐名字听博久网络解说Web性能优化
