性能优化

性能优化主要分为七大部分:

1. 内容部分

2. css部分

3. 服务器部分

4. JavaScript部分

5. cookie部分

6. Mobile部分

7. Image部分

内容部分

（一）尽量减少HTTP请求次数

原理：由于页面内容过多导致页面加载速度很慢，因为每个资源的加载都是一个HTTP请求，而每个HTTP请求都需要一定的时间，
所以如果我们想办法减少HTTP请求次数，这样即可保持页面内容的丰富，又可提高页面访问速度。

举例：
1、雪碧图，将多张图片合并为一个图片文件，然后通过调整背景图片的位置来显示我们想要的部分，这样就将多次请求变为一次请求。
2、内联图像：使用data:URL scheme 的方法将图像转换为base64格式数据，然后将之放到样式表（可缓存）中（注意不是页面html中），
这样既可以减少HTTP请求又可以避免增加页面文件的大小

（二）减少DNS查找次数（缓存DNS查找）

原理：因为DNS域名系统每次讲域名解析为ip地址是需要时间的，一般为20ms到120ms，而且此过程浏览器什么也做不了，
所以如果我们缓存DNS查找就可以消去第一次解析后的再次解析时间，提高页面的访问速度。

实现：我们使用一个特性的缓存服务器来缓存DNS查找。

（三）避免页面跳转

原理：在用户和HTML文档之间增加一个跳转，会拖延页面所有元素的显示，因为在HTML文件被加载前任何文件都不会被下载，这样大大降低用户体验。
所以我们要尽量避免页面跳转，如果有必须跳转页面的需求，我们也要尽量减少使用标签刷新和JavaScript实现的跳转，
而最好的方法是使用标准的3XX HTTP状态代码实现跳转，因为我们可以指定头选项Expires或Cache-Control来指定缓存，从而确保“后退”按钮可以正确使用。

（四）缓存Ajax

原理： Ajax是一个无刷新更新页面数据的革命，因为其可以异步请求数据并反馈给用户。
但是Ajax的请求仍然是需要时间的，这也就导致Ajax并不一定能够’即时’返回我们用户想要数据。
所以我们可以缓存Ajax的响应，之后再次需要同样数据即可从缓存提取。

实现：在Ajax请求的头选项添加Expires或者Cache-Control

（五）推迟加载内容（懒加载 / 按需加载）

原理：这样一种情况，如果一个页面要呈现的内容有很多，加载需要很长时间，远远超过了用户的耐心等待上限。
那么我们可以内容分为两部分，分别为呈现页面必须加载的和可以稍后加载的，
所以我们可以先加载必须加载，至于可以稍后加载的则在满足一定条件时再加载，即’按需加载’，这样大大提高了页面呈现速度。

实例：瀑布流，像那些蘑菇街之类的网站要呈现很多很多图片，他们就是运用瀑布流或者说是懒加载，
初始仅仅加载呈现一部分图片，然后当滚动条块滚动到底部时，再次请求加载呈现一部分，依次循环此过程
如果用户没有向下滚动，那么下面的图片就永远不用加载，大点提高了性能。

（六）预加载

原理：预加载和懒加载正好相反，预加载是在浏览器空闲时将未来可能用到的资源请求过来，然后需要使用该资源的时候就可以直接使用，而无需再请求，大大提高访问速度。
三种方法：
1、无条件预加载：当触发onload事件后，直接加载额外的页面内容。
2、有条件预记载：根据用户操作来判断用户下面可能去的页面，然后预加载该页面内容。
3、有预期的加载：载入重新设计的页面使用预加载，因为对页面重新设计，导致用户对旧站点具有完整的缓存，而对新站点却没有任何缓存。
所以我们可以利用旧站的空闲时间来预加载一部分新站内容，从而加快新站的访问速度。

（七）减少DOM数量：

原理：页面DOM元素数量越多，我们使用JavaScript循环遍历DOM的效率就越慢，所以我们可以尽量减少那些没用的标签。

（八）根据域名划分页面内容：

原理：将页面内容划分为若干部分，然后分别放到不同的域名下（域名数量在2到4之间，因为DNS查找也需要时间），
这样就可以最大限度的实现平行加载，大大提高页面加载速度。

（九）使iframe的数量最小：

原理：因为iframe即便内容为空，加载也需要时间，而且iframe会阻止页面加载，没有语意。
所以我们要尽量减少iframe的使用，提高页面加载呈现速度。

（十）避免出现404错误:

原理：HTTP请求是很消耗时间的，而使用HTTP请求获取一个任何用处的响应，无论对用户还是服务器（当然还有我们，哈）都是毫无好处的，
比如404资源不存在，此次请求就是毫无意义的，所以我们要尽量避免发出与此类似的HTTP请求。

总结：

HTTP相关的：减少HTTP请求次数、避免HTTP请求出现404
页面呈现： 懒加载、预加载、根据域名划分加载
缓存相关：减少DNS查找次数、缓存Ajax
其他： 避免页面跳转、减少DOM元素数量、是iframe的数量最小

css部分

（一）样式表置于顶部：
原理:把样式表放到head部分优先dom解析，可以使页面有序呈现，提高用户体验。
而将样式表放到下面，浏览器会先解析dom渲染，然后遇到css文件，结果导致重绘重排，然后之前的工作白做了，这样用户体验是很差的。

（二）避免使用css表达式：
原理：IE从第五版本开始支持css表达式，即动态设置css属性值，如下例子每隔一小时变化一次颜色：

看起来很强大，但其有很大限制和性能问题：
限制：仅仅IE5及以上版本可用，在其他浏览器无法用。
性能问题： css表达式的计算频率过于频繁，经测试，一次简单的移动鼠标操作，该计算就达到10000次以上，这对页面性能影响多大啊。

（三）用link代替@import：
原理：因为@import在IE中具有次数限制和性能问题。
次数限制：@import在IE中最多使用31次
性能问题：@import在IE中是等dom解析完毕后才加载之，相当于放到最后的link
所以还是使用link即可。

（四）避免使用滤镜：
原理：IE6及以下对于png图片是无法通过opacity设置为全透明的，最多为半透明，为此IE增加了滤镜来解决此问题，
但使用滤镜后当浏览器加载图片它会终止内容的呈现并且冻结浏览器，在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支。
所以由于PNG8格式图片能在IE中很好的工作，所以用PNG8格式图片替代滤镜即可。

总结：:)

服务器部分

（一）使用内容分发网络
原理：内容分发网站（Content Delivery Network，CDN）是由一系列分散到各个不同地理位置的web服务器组成的，它提高了网站内容的传输速度，
用来向用户传输内容的服务器主要是根据和用户在网络上的靠近程度来指定的。例如拥有最少网络跳数和响应速度最快的服务器会被选定。

(二)为文件头指定expires或Catch-Control
原理：浏览器（和代理）使用缓存来减少HTTP请求的大小和次数以加快页面访问速度；
而Web服务器在HTTP响应中使用Expires文件头来告诉客户端内容需要缓存多长时间。
1. 对于静态内容：设置文件头过期时间Expires的值为”Never expire”（永不过期）。
2. 对于静态内容：使用恰当的Cache-Control文件头来帮助浏览器进行有条件的请求。

(三)Gzip文件压缩
原理： 终端带宽、互联网提供者、对等交换点的靠近程度等都不是网站开发者所能决定的，但是通过减小HTTP响应的大小可以节省HTTP响应时间。
实现：HTTP请求中有个Accept-Encoding报文头，我们可以通过这个设置压缩格式,然后服务器通过Content-Encoding的值来告诉客户端最终的压缩格式。
常见的压缩格式有：Gzip、deflate。其中Gzip目前最流行也最有效。而deflate稍次。
设置如下：Accept-Encoding: gzip, deflate;返回如下：Content-Encoding: gzip;

（四）尽早刷新输出缓冲
原理：当用户请求一个页面，在请求未响应的这段时间，浏览器处于等待空闲状态，这段时间一般为200ms到500ms。
而输出缓冲就是先将后台处理的一部分html文件输出给浏览器，此时浏览器渲染输出部分，而后台处理剩余HTML页面。
输出缓冲应用最好的地方就是在/之后，因为一般head部分容易生成，而且一般包含了css和JavaScript文件。

（五）使用GET来完成Ajax请求
原理：ajax请求中POST方法过程分两步，首先发送文件头，然后才发送数据。
而GET方法仅仅发送一个TCP包，但IE中url最大长度为2k，如果发送的数据大小超过2k就不能使用GET了。
实现：一般，获取数据使用’GET’方法，而发送数据使用’POST’。

（六）避免空的图像来源
原理：如果我们设置img的src为空串，会导致浏览器再次向服务器发出请求。
此处省略几行，不太理解，等理解再补充

总结：

服务器方面实践接触太少，所以很多都是模模糊糊的，总之先把懂点的记下来吧。

JavaScript部分

（一）将js脚本置于页面底部
原理：我们知道js脚本加载时会阻塞其他内容的加载，导致页面呈现变慢。
如果我们将js脚本置于页面底部，那么是在dom都解析完毕了，再加载js文件，这就变相的取消了js阻塞的影响。
当然如果js脚本中具有dom操作，那么将其放到页面底部就不合适了，要看具体情况具体选择了。

（二）使用外部JavaScrip和css
原理：无论内置还是外部都是具有各自的优缺点：
内置css和JavaScript文件：减少HTTP请求次数，但增加了HTMLL文档大小，且在每次请求中都会随HTML文档重新下载。
外部css和JavaScript文件：增加了HTTP请求次数，但HTML文章较小，最主要一点是第一次下载后可以被缓存，之后的请求不用随HTML文档重新下载。
总的来说再结合实际，使用外部文件可以提高页面速度。
最好的方案是在首此加载更新中内置css和JavaScript，在页面下载完成后动态下载外部文件。

（三）削减JavaScript和css
原理：优化代码减小其体积主要有两种方法，精简和混淆
精简：去除代码中不必要的字行减小文件大小从而节省下载时间。精简可以缩小原来代码体积的21%。
混淆：另一种优化源代码的方法，比精简复杂一些，且在混淆的过程更容易产生问题。混淆可以缩小代码体积的25%。尽管混淆效果更好，但对于JavaScript来说精简风险更小一些。
即便是用Gzip压缩过的脚本和样式文件，精简这些文件仍然可以节省5%以上的空间。

（四）减少DOM操作
原理：每次DOM操作都会引起页面的reflow和repiant，所以应尽量减少DOM的操作，以提高性能。

（五）事件委托
原理：如果我们在页面中添加了过多的事件，可能导致页面反应迟钝，因为事件可能被频繁的触发。
而我们使用事件委托就可以大大减少绑定的事件，如一个ul下有50个li，我们仅仅在ul上绑定一次事件即可，而不需傻傻的绑定50个事件。

cookie部分

（一）减小Cookie体积
原理：使用cookie可以保存很多信息，从而减少请求次数，但是Cookie是报文上一个属性，每次数据数据交互发送报文都要附带Cookie，
所以如果Cookie体积过大，会增加HTTP的响应时间，这也是和H5中localStorage本地存储的区别。
实现：
1、去除不必要的Cookie
2、设置合理的Cookie过期事件。

(二)针对Web组件使用域名无关的Cookie
原理：对静态组件的Cookie读取是一种浪费，使用另一个无Cookie的域名来存放静态组件是一个好方法，或者也可以在Cookie中只存放带www的域名。
。。。。？？？

Mobile部分

（一）保持单个内容小于25k
原理：因为iPhone不能缓存大于25k的文件，指的是解压缩后的大小，单纯Gzip压缩可能达不到要求，所以要配合精简。

（二）把页面打包成复合文本
原理：减少文件数目，从而减少HTTP请求次数。

Image部分

（一）雪碧图CSS Spirite
原理：将多张图片合并为一张图片，减少图片请求次数。

（二）不要在HTML中缩放图片
原理：使用合适大小的图片，而不要请求大尺寸图片，然后设置宽高压缩图片，因为大图片体积大，请求所需事件自然也就长些。

参考来源

微信公众号：渡一DuYi