性能优化

1.前端渲染

• 代码体积：按需加载、封装组件、合并逻辑、公共方法
• 重排：减少 dom 访问修改
• 重绘：

2.网路传输

• 体积
  • 压缩代码：gzip、cookie、代码空格变量压缩
• 距离
  • cdn
  • 缓存
• 数量
  • 代码合并

3.后端处理

• 缓存：强制缓存、协商缓存

4.开发阶段

• webpack:热模块加载、babel、dllplugin

5.打包阶段

• webpack:happyPack、treeShaking
• nginx:

content 方面

• 减少 HTTP 请求:合并文件、CSS 精灵、inlineImage
• 减少 DNS 查询:DNS 缓存、将资源分布到恰当数量的主机名 - 减少 DOM 元素数量

css 方面

• 将样式表放到页面顶部
• 不使用 CSS 表达式
• 使用 不使用 @import

Javascript 方面

• 将脚本放到页面底部
• 将 javascript 和 css 从外部引入 - 压缩 javascript 和 css
• 删除不需要的脚本

图片方面

• 优化图片:根据实际颜色需要选择色深、压缩 - 优化 css 精灵
• 不要在 HTML 中拉伸图片