web 性能优化方法

怎么才能提高web性能？

一、尽量减少 HTTP 请求

1、合并脚本跟样式文件，如可以把多个CSS 文件合成一个，把多个 JS 文件合成一个。
2、CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位,把多个图片合成一个图片。

二、使用浏览器缓存

样式表放在顶部、脚本文件放在底部、避免css表达式、把脚本的样式表放在外部、移除重复脚本

三、使用压缩组件

在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效减少通信传输的数据量。如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。文本文件的压缩效率可达到80%以上，因此HTML、CSS、javascript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力，在通信带宽良好，而服务器资源不足的情况下要权衡考虑。

四、图片、JS的预载入

预载入图像最简单的方法是在 JavaScript 中实例化一个新 Image() 对象，然后将需要载入的图像的 URL 作为参数传入。

function preLoadImg(url) {

var img = new Image();

img.src = url;

}

可以在登录页面预载入JS和图片

五、将脚本放在底部

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

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

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

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

要综合考虑情况。

六、将样式文件放在页面顶部

如果样式表任在加载，构建呈现树就是一种浪费，样式文件放在页面底部可能会出现两种情况：

1、 白屏

2、 无样式内容的闪烁

七、使用外部的JS和CSS

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

八、精简代码

从代码中移除不必要的字符以减少其大小，

九、优化网络连接

网络连接的优化主要有三个规则：使用CDN加速、减少DNS查找、避免重定向

CDN：CDN是地理上分布的web server的集合，用于更高效地发布内容。通常基于网络远近来选择给具体用户服务的web server。 这缩短了资源的传输响应时间，有效提高web性能。

DNS：DNS用于映射主机名和IP地址，一般一次解析需要20～120毫秒。

重定向：将一个URL重新路由到另一个URL。重定向功能是通过301和302这两个HTTP状态码完成的。