应用优化涉及各个方面，前端优化只是冰山一角。有人说：“离开系统的性能瓶颈的前端优化都是扯蛋”，我觉得，我们各司其职，做好前端本职工作就好，不要好高骛远。以下是本人百度面试后整理的一下关于前端优化的内容
优化目的
- 用户角度：页面加载更快、操作响应更快、体验更好
- 服务端角度：减少请求数、减小请求带宽
优化方法
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>"标签
