web前端的性能优化

1.尽可能的去减少HTTP的请求

如对图片的压缩，多张图片合并成sprit图；js文件合并与压缩；css文件合并与压缩；

另外，使用RequireJs的r.js来合并依赖的文件打包成一个文件，也是特别优的方法。

2.使用CDN（内容分发网络）

解决网络拥堵现象，就是在离你最近的地方，放置一台性能好链接顺畅的副本服务器，让你能够以最近的距离，最快的速度获取资源

3.添加Expire/Cache-Control

3.1 如果Appache开启了expire模块，当服务器向Appache请求资源的时候，Appache向服务器返回资源的时候，同时会返回一个expire的http头。而expire头的内容是一个时间值，值就是资源在本地的过期时间、存在本地。在本笃缓存阶段，找到一个对应的资源值，当前时间还没超过资源的过期时间，就直接使用这一个资源，不会发送http请求。

3.2 Cache-Control是http协议中常用的头部之一。顾名思义，他是负责控制页面的缓存机制，如果该头部指示缓存，缓存的内容也会存在本地，操作流程和expire相似，但也有不同的地方，cache-contro有更多的选项，而且也有更多的处理方式。简单的说，服务器发送请求的时候，会添加一个时间值，本机就会根据这个时间值来判断是否要去重新获取资源

4.启用Gzip压缩

什么是Gzip压缩，Gzip的思想就是把文件先放在服务器先压缩一下，然后再传输，这样就可以显著的减少文件传输的大小。传送过后，浏览器就会对压缩过的文件进行解压缩，目前，所有的浏览器都能很好的支持Gzip压缩。使用Gzip的好处就是将文件的体积变小。比如，将一个原始的79KB的JS文件进行压缩后可以变成25KB的原始Gzip文件，再对这个文件进行Gzip压缩就变成15KB大小了，大大减小了文件的体积。在提升文件传输速度的时候起了至关重要的作用。

5.将css放在页面最上面

css是层叠样式表，就是说后面的可以把前面的样式覆盖，级别高的样式可以覆盖级别低的样式。在IE下，把样式放在页面底部的问题是，在于它禁止了网页内容的顺序显示，所以在低网速的情况下，用户在打开网页的第一时候，看到的是空白的显示。而在FireFox下，虽然这样做不会阻止样式的显示，但页面会出现闪烁的问题。为了避免上述的空白和闪烁的问题，我们应该讲css文件样式放在页面最上面。

6.将script放在最下面

首先我们来了解文件的加载顺序，先读取html标签，然后进入读取head和meta并解析，再读取title内容显示网页标题。然后是读取style加载样式并解析样式，读取link加载并解析外部样式表。然后是渲染DOM结构，再读取script加载外部脚本文件并且解析，最后是执行外部脚本。

7.避免在css中使用Expressions

什么是CSS Expression，俗称CSS表达式。CSS Expression在页面显示和缩放、页面滚动、移动鼠标时都要重新的计算样式的值，就是在不停的repiant，严重影响用户的体验

8.把JS和CSS放到外部文件

有很多争议，单独提取或写在页面，可以灵活运用。单独引用：提高了js和css的复用性，减少了页面的体积，提高了js和css的可维护性；写在页面：减少页面请求，提升页面渲染速度。写在页面内的情况：单页应用，不经常被访问到，或是脚本和样式很少。

9.减少DNS查询

这算一个比较底层的行为了，那么如何减少DNS查询呢。当我们访问一个网址时，比如域名www.baidu.com，这个时候服务器会将这个网址对应到比如127.0.0.1这样计算机可以识别的IP地址，然后服务器根据这个IP地址进行DNS查询，将查询到的地址内容返回给域名。查询过程是需要消耗大概20ms的时间，这期间浏览器是一片空白，所以我们要对这个过程进行缓存。浏览器的缓存---IE：DNS的缓存时间为30分钟，FF和chrome都均为60秒。缓存时间长的时候，会减少DNS的重复查找，这样可以节省时间；而缓存时间短的时候，可以及时的检测网站服务器的变化，保证正确性。缓存时间的长短就各有利弊了。这个时候我们得考虑单域和多域的情况，单域的情况时，我们可以将html/img/js都放在同一个域名下，而多域的情况时，我们应该讲三者分开放。比如html放在www.a.com下，img和js和css这些资源可以单独放在img.a.com下。在多域的时候，采用几个域名，这也是我们需要考虑的事情。

10.压缩js和css

js和css最小化，加快文件的加载速度。建议在项目正式的上线前，将js和css都进行压缩，并对各文件加上时间戳防止缓存，这样可以使线上版本是最轻量级的，可以大幅的提升网站的性能。

11.避免重定向

什么是重定向，其实就是用户的原始请求被重新转向到了其他请求。301 moved permanently 指用户请求的资源被移动到了另外的网址，表示的是永久的重定向。 302 Found 用户请求的资源被找到了，但不在原来的位置，表示的临时重定向。这些重定向对用户可能没有很大的影响，但对搜索引擎，它会不定期的对资源进行扫描，比如蜘蛛爬网。301会比较智能，输入旧网址就会自动跳转到新网址，而对于302，则会先找到旧王寨，再从旧网址跳转到新网址。

那么为什么需要去避免重定向。因为这样可以减少浏览器的请求次数。当用户输入www.a.com时，浏览器会向a.com服务器请求资源，然后在通过a.com重定向到b.com服务器去请求资源，再通过a.com服务器向浏览器返回新地址b.com，然后浏览器又要去b.com请求资源。

12.移除重复脚本

重复的脚本会造成结果的错乱。

13.配置实体标签（Entity Tag）

ETag实体标签属于HTTP协议，它受web服务支持。它是使用特殊的字符串来标示某个资源。即浏览器向服务器请求某个资源，服务器收到后进行判断，发现请求的资源浏览器端已经有了，返回给浏览器这个标示告诉它使用浏览器端自己的资源就可以了。这样可以减轻服务器的很多负担。

14.使用ajax缓存

能够在不重新加载页面的情况下就可以刷新页面局部的内容，实现分批加载，局部更新。post和get两种请求，post是每次都执行，成功返回200，请求的内容不被缓存。get是对同一个地址簿重复执行，成功返回304，它请求的资源可以被缓存。他们的区别是：get方式请求会把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到；而post请求是通过HTTP POST机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到action属性所指的url地址，用户是看不到这个过程的。get传送的数据小，一般不大于2kb，而post请求传送的数据一般不受限制，但理论上是会根据服务器的不同来区别。get请求的安全性较低，post请求的安全性较高。