改善用户体验，web前段性能优化

改善用户体验，web前段性能优化

• 页面级优化

  • 减少http请求数
    
    • 避免资源重复请求（坏请求，无意义的请求）
    • 合并css与js文件（减少http请求次数）
    • 使用css精灵图 （减少图片请求次数）
    • Lazy Load Javascript/images(懒加载，在需要的时候在加载)
    • 合理设置HTTP缓存
    • 从设计实现界面简化页面
  • 将外部脚本置底

  • 异步执行inline脚本（资源内嵌插件，将代码内嵌进html）

  • 将CSS放在HEAD中

  • 异步请求Callback
  • 减少不必要的HTTP跳转

• 代码级优化

  • 避免css @import语句，会阻塞 浏览器的并行加载
  • 优化脚本js和样式表css的顺序
  • 处理小文件比如小的js css文件写入到html中
  • 减少dom数量
  • 慎用document.write：会阻塞浏览器的渲染
  • 使用浏览器文档碎片createDocumentFragment（可以减少操作dom的次数，从而减少渲染次数，提高页面性能）