前端网页优化总结

前端网页优化总结

页面内容

• 减少HTTP请求数

  合并要请求的文件

• 减少DNS查询

  把资源分布到2个域名上，最多不超过4个
  用户输入URL后，浏览器首先要查询域名对应的服务器IP地址
  一般要耗费20-120毫秒时间，DNS查询完成之前，
  浏览器无法从服务器下载任何数据
  基于性能考虑，ISP,局域网，操作系统，浏览器
  都会有相应的DNS缓存机制

• 避免重定向

  客户端收到服务器的重定向响应后，会根据响应头中的Location的地址再次发送请求。重定向会影响到用户体验，尤其是在多次重定向时，用户在一段时间看不到内容，只看到浏览器的进度条刷新
  常见解决：URL末尾加/

• 缓存Ajax请求

  缓存响应结果 添加Expires 或者 Cache-Control响应头

• 延迟加载
  非首屏使用的数据、样式、脚本、图片等.
  用户交互时才会显示的内容

• 预先加载

• 减少dom元素数量

  多使用伪元素
  减少表格布局使用
  计算页面中的DOM元素数量：
  控制台中输入：document.getElementsByTagName("*").length

• 划分内容到不同域名

  静态资源与动态资源分开存放

• 减少iframe使用

  iframe优点：
  可以用来加载速度较慢的第三方资源
  可以用作安全沙箱
  可以并行下载脚本
  缺点：
  加载代价昂贵
  阻塞页面load时间出发
  缺乏语义

• 避免404错误

服务器

• 使用CDN
• 添加Expires 或Cache-Control 响应头
• 启用Gzip
• 配置Etag
• 尽早输出缓冲
• Ajax使用GET方法
• 避免图片src为空

Cookie

• 减少Cookie大小

  Cookie通过HTTP头在服务器和浏览器之间来回传送。减少cookie大小可以降低其对响应速度的影响

• 静态资源使用无Cookie域名

  放在使用二级域名或专门域名的无Cookie服务器上，降低cookie传送造成的流量浪费，提高响应速度

CSS

• 把样式表放在head中

• 不要使用CSS表达式

• 使用 替代 @import

  对于IE某些版本@import的行为和放在页面底部一样

JS

• 把脚本放在页面底部
• 使用外部 js 和 css 并压缩
• 移除重复脚本
• 减少DOM操作
• 使用高效事件处理

图片

• 优化图片

  参考工具：
  https://github.com/imagemin/imagemin
  https://imageoptim.com/mac
  http://www.queness.com/post/2507/most-effective-method-to-reduce-and-optimize-png-images
  https://www.smashingmagazine.com/2009/07/clever-png-optimization-techniques/

• 优化css sprite

• 不要再html中缩放图片

• 使用体积小可缓存的favicon.ico

移动端

• 保持单个文件小于25KB
• 打包内容为分段（multipart）文档

参考链接：http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/