前端性能优化

页面加载出现缓慢问题可分为两部分：网络问题、渲染问题

先看浏览器从输入url到显示的过程：

• 域名解析 –>
• 发起TCP的3次握手 –>
• 建立TCP连接后发起http请求 –>
• 服务器响应http请求，浏览器得到html代码–>
• 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） –>
• 浏览器对页面进行渲染呈现给用户
• ->TCP的4次挥手

1. 域名解析
   减少DNS查找
   这里涉及到一个域名解析的过程：
   我之前总结过的一篇记不住系列——DNS解析
   可以得知，得到一个域名后，浏览器优先查找浏览器缓存，所以充分利用浏览器缓存，减少主机名的数量也可以减少DNS查找的数量。
2. TCP的3次握手
3. 客户端发起http请求
   网络问题
4. 服务端响应http请求
5. 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等）

- 白屏
   解决：将样式表放在头部
- JS阻塞渲染
	解决：`<script>`标签放在最后引入
- 图片过多，却一次性加载
 	 解决：图片懒加载
 - 图片过大
	 解决：更改图片格式/尺寸
 - 发送请求次数过多
	对于资源请求：将多个图片合并（精灵图）， js、css文件合并，减少请求次数
	对于存储：使用cdn/设置变量保存之前返回的数据

其中

Javascript代码的优化

(1). DOM

减少dom操作，避免回流和重绘

(2). 慎用 with（不会）

with(obj){ p = 1}; 代码块的行为实际上是修改了代码块中的执行环境 ，将obj放在了其作用域链的最前端，在 with代码块中访问非局部变量是都是先从 obj上开始查找，如果没有再依次按作用域链向上查找，因此使用 with相当于增加了作用域链长度。而每次查找作用域链都是要消耗时间的，过长的作用域链会导致查找性能下降。
　　因此，除非你能肯定在 with代码中只访问 obj中的属性，否则慎用 with，替代的可以使用局部变量缓存需要访问的属性。

(3). 避免使用 eval和 Function

每次 eval 或Function 构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢 100倍以上。
　　eval 函数效率特别低，由于事先无法知晓传给 eval 的字符串中的内容，eval在其上下文中解释要处理的代码，也就是说编译器无法优化上下文，因此只能有浏览器在运行时解释代码。这对性能影响很大。
　　Function 构造函数比 eval略好，因为使用此代码不会影响周围代码 ;但其速度仍很慢。
　　此外，使用 eval和 Function也不利于Javascript 压缩工具执行压缩。

(4). 减少作用域链查找

减少闭包的使用；
若要多次访问（遍历等），先将全局变量保存在局部变量中，使用完毕再给全局变量赋回原来的值。

(5). 数据访问

当出现以下情况时，建议将数据放入局部变量：
　　a. 对任何对象属性的访问超过 1次
　　b. 对任何数组成员的访问次数超过 1次
　　另外，还应当尽可能的减少对对象以及数组深度查找。
　　
(6). 字符串拼接
当需要拼接的字符串较多的时候，使用数组的 join方法。

参考博客：web页面加载速度缓慢，如何优化？