从开始慢慢总结优化

我们在面试中前端优化是经常被问到的，所以我们应该从开始学习的时候就总结一些前端的优化方法：什么是前端优化呢？
我们前端要做的就是用户角度来考虑：页面加载更快、操作响应更快、体验更好
在这就是从服务端角度考虑：减少请求数、减小请求带宽
下面就简述一些优化方法的骨架，以后慢慢的往骨架里注入血液；

优化方法

页面优化

• HTTP请求数
  资源合并与压缩，比如把多个css文件或js文件合成一个；
  CSS Sprites 利用CSS background 相关元素进行背景图绝对定位；
  DNS缓存、将资源分布到恰当数量的主机名，平衡 并行下载和 DNS查询 ;
• 从设计实现层面简化页面
• 合理设置HTTP缓存
  Ajax页面缓存是ajax处理数据时对一些重复相同数据进行一个缓存操作，这种设计使客户端对一些静态页面内容的请求，比如图片，css文件，js脚本等，变得更加快捷，提高了页面的响应速度，也节省了网络通信资源;
• Lazy Load Images（图片懒加载）
• 避免重复的资源请求
• 资源的无阻塞加载
• CSS放在HEAD中
  浏览器能够有针对性的对HTML页面从上到下进行解析和渲染；
• JavaScript置底
• Lazy Load Javascript（example：AMD）

代码优化

• 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>"标签

总结一下：

这篇我们只是补充完善了图片优化；以后我们在慢慢的补充一些骨架，往骨架里面注入血液；如果需要的话可以复制到你的笔记中，一起总结补充；