web前端性能优化

一、页面内容优化

1.减少http请求次数
2.减少DNS查询次数
3.避免页面跳转
4.缓存ajax
5.延迟加载
6.预加载
7.减少dom元素数量
8.减少iframe数量
9.避免404

二、css优化

1.将样式表置顶
2.用link代替@import
3.避免使用filters
4.css文件合并压缩

三、js代码优化

1.将脚本置底
2.使用外部js文件和css文件
3.去除重复脚本，避免重复的资源请求
4.减少dom访问（修改和访问DOM元素会造成页面的重绘和重排，循环对DOM操作更是减慢页面加载速度）
5.js文件合并与压缩

四、图片优化

1.优化图片大小
2.尽量使用精灵图
3.不要再html中缩放图片
4.使用小且可缓存的favicon.ico(即Favorites Icon的缩写，顾名思义，便是其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站)

五、减少cookie传输

cookie包含在每次请求和响应中。太大的cookie会严重影响数据传输

六、浏览器端使用缓存

css、js、图片这些静态资源文件的更新频率都比较低，而这些文件又几乎是每次http请求都需要的，如果将这些文件缓存在浏览器中，可以极好的改善性能。
用法：通过设置HTTP头中的Cache-control和expires属性，可设定浏览器缓存，缓存时间可以是天也可以是月。

七、服务器端使用压缩

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