从Web前端优化网站性能

从web前端优化网站性能。

1. 减少http请求数

一个完整的请求都需要经过dns存址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个漫长而复杂的过程。资源上由于每个请求都要携带数据，因此每个请求都需要占用带宽。另外，由于进行并发请求的请求数是有上限的，因此请求数多了以后，浏览器需要分批进行请求，因此会增加用户的等待时间，会给用户造成站点速度慢这样一个印象，即使可能用户能看到的第一屏的资源都已经请求完了，但是浏览器的进度条会一直存在。

减少http请求数的主要途径包括：

（1）从设计实现层面简化页面

如果你的页面想百度首页那样简单，那么接下来的规则基本上都用不着了。

（2）合理设置http缓存

缓存可以大大减少第二次访问时的请求数，但是如果是f5刷新的话，请求数一样。

怎样才算合理设置？能缓存越多越好，能缓存越久越好。例如，很少变化的图片资源可以直接通过http header中的expires设置一个很长的过期头；变化不频繁而又可能会变的资源可以使用last-modified来做请求验证。尽可能的让资源能够在缓存中待得更久。

（3）资源合并与压缩

如果可以的话，尽可能的将外部的脚本、样本进行合并，多个合为一个。另外，css、javascript、image都可以用相应的工具进行压缩，压缩后往往能省下不少空间。

（4）css sprites

合并css图片，减少请求数的有一个好办法。

（5）inline images

使用data：url scheme的方式将图片嵌入到页面或者css中，如果不考虑资源管理上的问题，不失为一个好办法。如果是嵌入页面的话换来的是增大页面的体积，而无法利用浏览器缓存。使用在css中的图片更为理想一些。

（6）lazy load images

使页面刚加载的时候只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。

2. 将css文件放在head头，js脚本放在页面信息后面

外链脚本会在加载时阻塞其他资源。

3. 异步执行inline脚本（保证脚本在页面内容后面加载）

inline脚本在执行的时候一样会阻塞并发请求。除此之外，由于浏览器在页面处理方面是单线程的，当inline脚本在页面渲染之前执行时，页面的渲染工作则会被推迟。

因此，建议将执行时间较长的inline脚本进行异步执行，例如使用settimeout或者html5中的web worker。

4. lazy load javascript

（1）利用min版js框架

（2）yui，最初只加载核心模块，其他模块可以等到需要使用的时候才加载。

5. 将css放在head中

使页面在开始渲染之前先加载css资源

6. 异步请求callback

7. 减少不必要的http挑转

8. 避免重复的资源请求

9. 合并css属性值

如border-style: solid;

border-width:1px;

border-color:red;

变成border: 1px solid red;

10. 为文件头指定expires或者cache-control