前端优化方案

前端优化方案

页面级别的优化

• 减少 http 请求数量
  • 页面设计简单
  • 合理的http缓存
  • 资源合并与压缩（多个css 、js合并为一个css 、 js）
  • css sprites（合并 css 图片）
  • inline images
  • 图片懒加载
  • 外部脚本置底（body 末尾）
  • inline 脚本异步执行（置底）
  • 脚本懒加载（lazy load javascript）
  • 将css放在 head 中
  • 减少不必要的 http 跳转

对于以目录形式访问的 HTTP链接，很多人都会忽略链接最后是否带 ’/’，假如你的服务器对此是区别对待的话，那么你也需要注意，这其中很可能隐藏了 301跳转，增加了多余请求。具体参见下图，其中第一个链接是以无 ’/'结尾的方式访问的，于是服务器有了一次跳转。

---

• 代码级别的优化
  • 减少 DOM 操作 （dom 元素的crud 都很耗性能）
  • 慎用 with
  • 避免使用 eval 和 Function （运行速度很慢）
  • 减少作用域链的查找（比如在循环中遇到了非本作用域的变量需要先将其转化为局部变量，待循环结束之后在返还回去）
  • 数据访问（主要是对象和数组尽量放到局部变量，而不是直接去操作对象数组，还应该减少深度查找）
  • css 选择符
  • 图片压缩
  • 完整的前端优化还应该包括很多其他的途径，例如 CDN、 Gzip、多域名、无 Cookie服务器等等

有则改之无则加勉

2020.06.13 16点21分