前端优化

行业内建议的前端优化项目主要包括：

1.减少HTTP请求(合并请求)

2.使用CDN数据加速(各地独立的内容分发机制)

CDN加速简单的来说，就是把原服务器上数据复制到其他服务器上，用户访问时，那台服务器近访问到的就是那台服务器上的数据。CDN加速优点是成本低，速度快。适合访问量比较大的网站

3.使用动态或者静态压缩技术，并且压缩JS或者HTML等文本格式中的字符数，来减少网络消耗(使用单字母来定义JS变量、去除多余的空格和格式字符，或者使用JS压缩工具来减少JS长度)

4.将样式表CSS存在页面顶部

实际上：将样式表放在文档底部会导致在浏览器中阻止内容的逐步呈现。为避免当样式变化时重绘页面中的元素，浏览器会阻塞内容逐步呈现。将样式表放在顶部对于 加载页面所需的实际时间没有太多影响，它影响更多的是浏览器对这些组件顺序的反应。实际上，用户感觉缓慢的页面反而是可视化组建加载得更快的页面。在浏览 器和用户等待位于底部的样式表时，浏览器会延迟显示任何可视化组件。这将产生我们所谓的白屏。

5.JS脚本存放在页面底部

6.避免CSS表达式

7.使用外部的JavaScript和CSS

8.减少DNS查询

9.对JavaScript进行一定的精简

10.避免重定向

11.移除重复的脚本

12.配置Etag标签

Etag^[1]URL的Entity Tag，用于标示URL对象是否改变，区分不同语言和Session等等。具体内部含义是使服务器控制的，就像Cookie那样。

聪明的服务器开发者会把ETags和GET请求的“If-None-Match”头一起使用，这样可利用客户端（例如浏览器）的缓存。因为服务器首先产生ETag，服务器可在稍后使用它来判断页面是否已经被修改。本质上，客户端通过将该记号传回服务器要求服务器验证其（客户端）缓存。

其过程如下：

客户端请求一个页面（A）。 服务器返回页面A，并在给A加上一个ETag。 客户端展现该页面，并将页面连同ETag一起缓存。 客户再次请求页面A，并将上次请求时服务器返回的ETag一起传递给服务器。 服务器检查该ETag，并判断出该页面自上次客户端请求之后还未被修改，直接返回响应304（未修改——Not Modified）和一个空的响应体。

13.使用Ajax可缓存

14.添加Expires或cashe-control头

15.利用flash并行处理

16.使用Get Ajax请求

17.延迟载入组件

18.预加载组件

19.减少DOM元素的数目

20.切分组件到过个域

21.最小化iframes的数量

22.避免http 404错误

23.减少Cookie大小

24.针对Web组件使用域名无关性的Cookie

25.减少DOM访问

26.优化事件处理程序

27.使用<link>而不是@import

28.避免使用Filter

29.优化图像