性能优化

参考

前言

在项目开发过程中，任何一个细节都有可能影响网站的访问速度，如果不了解性能优化知识，很多不利网站访问速度的因素会形成累加，从而严重影响网站的性能，导致网站访问速度变慢，用户体验低下，最终导致用户流失。

目标

让你的网站访问速度飞起来，性能体验留住你的客户。让你面试披荆斩棘，收获各大厂心仪offer，废话不多说，直接开整。

优化方案

• 感知性能优化
  • loading
  • 骨架屏
• HTML优化
  • 压缩 HTML
  • 删除不必要的注释
  • 删除不必要的属性
  • 使用语义化标签
  • 减少iframe数量
  • 削减DOM数量和层级数量
  • 减少 HTTP 请求次数
  • 减少重排重绘
• JavaScript优化
  • javascript脚本放到页面底部
  • 将javascript和css从外部引入
  • 删除重复的脚本
  • 减少DOM访问
  • 节流与防抖
  • 合理的ajax恳求
  • 长列表虚拟滚动优化
  • 代码结构的优化
• Css优化
  • 尽量少用@import
  • 避免！important，可以选择其他选择器
• 图片优化
• webpack构建优化
• 资源加载优化
• 浏览器缓存策略
• 服务器优化

性能测试网站推荐：

• 36全球网站性能测试(强烈推荐)
• WebPage Test
• WebPage Analyzer
• GT Matrix
• Pingdom

感知性能优化