前端性能优化总结

前端性能优化总结

前端优化的目的

从用户角度：优化能够让页面加载更快，对用户的操作响应更快，增强体验
从服务器角度：优化能够减少页面请求数，节约资源，

具体方法：

1、页面内容优化

• 减少http请求次数
• 减少DNS查询次数
• 避免页面跳转
• 缓存ajax
• 延迟加载（一般为图片懒加载技术多用）
• 预加载
• 减少DOM元素数量
• 减少iframe数量
• 避免404

2、CSS优化

• 将样式表置顶（可以防止浏览器还未加载或解析css样式就开始渲染页面）
• 避免css表达式
• 用link代替@import（link会被同时加载，而@import方式需要等页面加载完毕后再加载）
• 避免使用filters
• css问价合并与压缩

3、js代码优化

• 将脚本置底（将脚本内容在页面信息内容加载后再加载）
• 使用外部JavaScript和css文件
• 去除重复脚本，避免重复的资源请求
• 减少dom访问（修改和访问dom元素会造成页面的重排和重绘，循环对dom操作更是减慢页面加载速度）
• js文件合并和压缩

4、图片优化

• 优化图片大小
• 尽量使用css sprite（精灵图也叫雪碧图）
• 不要在html中缩放图片
• 使用小且可缓存的favicon.ico

5、减少cookie传输

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

6、浏览器端使用缓存

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

7、服务器端使用压缩

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