优化总结

WEB前台的优化规则 一、尽量减少 HTTP 请求

有几种常见的方法能切实减少 HTTP 请求：

1、 合并脚本跟样式文件，如可以把多个 CSS 文件合成一个，把多个 JS 文件合成一个。

2、 CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位,把多个图片合成一个图片。

二.使用浏览器缓存

   在用户浏览网站的不同页面时，很多内容是重复的，比如相同的JS、CSS、图片等。如果我们能够建议甚至强制浏览器在本地缓存这些文件，将大大降低页面产生的流量，从而降低页面载入时间。

根据服务器端的响应header，一个文件对浏览器而言，有几级不同的缓存状态。

1、服务器端告诉浏览器不要缓存此文件，每次都到服务器上更新文件。

2、服务器端没有给浏览器任何指示。

3、在上次传输中，服务器给浏览器发送了Last-Modified或Etag数据，再次浏览时浏览器将提交这些数据到服务器，验证本地版本是否最新的，如果为最新的则服务器返回304代码，告诉浏览器直接使用本地版本，否则下载新版本。一般来说，有且只有静态文件，服务器端才会给出这些数据。

4、服务器强制要求浏览器缓存文件，并设置了过期时间。在缓存未到期之前，浏览器将直接使用本地缓存文件，不会与服务器端产生任何通信。

   我们要做的是尽量强制浏览器到第四种状态，特别是对于JS、CSS、图片等变动较少的文件。

三.将脚本放在底部

脚本放在顶部带来的问题，

1、 使用脚本时，对于位于脚本以下的内容，逐步呈现将被阻塞

2、 在下载脚本时会阻塞并行下载

放在底部可能会出现JS错误问题，当脚本没加载进来，用户就触发脚本事件。

要综合考虑情况。

四.使用外部的JS和CSS

将内联的JS和CSS做成外部的JS、CSS。减少重复下载内联的JS和CSS。