介绍 Web 性能优化的常用手段

一、页面内容优化

减少http请求次数

减少DNS查询次数

懒加载（一般用在图片多的页面中，滚动时才加载）

预加载

减少DOM元素数量

二、css优化

将样式表置顶将 （CSS放在 HEAD中，防止浏览器有可能还未下载和解析到 CSS就已经开始渲染页面）

避免css表达式

用link代替@import

避免使用filters

css文件合并与压缩

三、js代码优化

将脚本置底（将脚本内容在页面信息内容加载后再加载）

使用外部javascript和css文件

去除重复脚本，避免重复的资源请求

减少DOM访问（修改和访问DOM元素会造成页面的重绘和重排，循环对DOM操作更是减慢页面加载速度）

js文件合并与压缩

四、图片优化

优化图片大小

尽量使用css sprite（精灵图也叫雪碧图）

不要在html中缩放图片

使用小且可缓存的favicon.ico

五、减少Cookie传输

Cookie包含在每次请求和响应中，太大的Cookie会严重影响数据传输，因此哪些数据需要写入Cookie需要慎重考虑，尽量减少Cookie中传输的数据量。

六、浏览器端使用缓存

CSS、JavaScript、Logo、图标这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次HTTP请求都需要的，如果将这些文件缓存在浏览器中，可以极好地改善性能。

用法：通过设置HTTP头中的Cache-Control和Expires属性，可设定浏览器缓存，缓存时间可以是数天，甚至是数月。

七、服务器端使用压缩

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