前端优化简述

应用优化涉及各个方面，前端优化只是冰山一角。有人说：“离开系统的性能瓶颈的前端优化都是扯蛋”，我觉得，我们各司其职，做好前端本职工作就好，不要好高骛远。以下是本人百度面试后整理的一下关于前端优化的内容

优化目的

• 用户角度：页面加载更快、操作响应更快、体验更好
• 服务端角度：减少请求数、减小请求带宽

优化方法

a. 页面优化

• HTTP请求数

• 从设计实现层面简化页面

• 合理设置HTTP缓存

  • 资源合并与压缩(example：CSS Sprites)
  • Inline Images（将图片嵌入到页面或style文件）
  • Lazy Load Images
  • 避免重复的资源请求

• 资源的无阻塞加载

• CSS放在HEAD中

• JavaScript置底

  • Lazy Load Javascript（example：AMD）

b. 代码优化

• DOM操作优化

• 减少DOM操作，减少Reflow和Repaint

• HTML Collection（类数组集合。并不是一个静态的结果，表示的仅是特定的查询，每次访问时会重新执行查询。需要遍历 HTML Collection时，将它转为数组再访问，以提高性能。）

• JavaScript

• 减少作用域链查找（example：缓存全局变量）

• 慎用 with、eval、Function

• 减少闭包的使用（易内存浪费，不仅仅是常驻内存，重要的是，使用不当会造成无效内存的产生）

• 直接量、局部变量的使用（对象属性以及数组的访问需要更大的开销）

• 减少字符串拼接+使用

• CSS选择符优化

• 减少层级，多用class（浏览器解析CSS是从右往左）

• 资源优化

• 图片格式的选择（非透明大图尽量不用png、PS保存图片为web格式且勾选连续选项）

• HTML结构优化

• 使用HTML5 DOCTYPE

• 标签闭合、结构分离

• Boolean 属性不需要赋值，如果存在则为True（example：checked、selected）

• 语义化、标签统一整洁

• 减少文本和元素混合，并作为另一元素的子元素

• 避免使用"</br ></hr>"标签