页面优化

---恢复内容开始---

做页面优化的心得和体会

1,避免使用eval和function

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

2,减少作用域链查找(还需要减少闭包的作用)

如果在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量,并在遍历结束后再重写那个变量,这一点对全局变量尤其重要,因为全局变量处于作用域链的最顶端,访问时的查找次数是最多的。 
低效率的写法

var  a = 1;

 function myCallback(info){

 for( var i = 100000; i--;){//每次访问 globalVar 都需要查找到作用域链最顶端,本例中需要访问 100000 次

 a += i;

 }

 }

高效率写法

var globalVar = 1;
function myCallback(info){
//局部变量缓存全局变量
var localVar = globalVar;
for( var i = 100000; i--;){
//访问局部变量是最快的
localVar += i;
}
//本例中只需要访问 2次全局变量
在函数中只需要将 globalVar中内容的值赋给localVar 中
globalVar = localVar;

3,字符串拼接

在 Javascript中使用”+”号来拼接字符串效率是比较低的,因为每次运行都会开辟新的内存并生成新的字符串变量,然后将拼接结果赋值给新变量。与之相比更为高效的做法是使用数组的 join方法,即将需要拼接的字符串放在数组中最后调用其 join方法得到结果。不过由于使用数组也有一定的开销,因此当需要拼接的字符串较多的时候可以考虑用此方法。

4,css优化(如果公司的项目可以联网可以使用cdn)

在大多数人的观念中,都觉得浏览器对 CSS选择符的解析式从左往右进行的,例如 
#toc A { color: #444; }这样一个选择符,如果是从右往左解析则效率会很高,因为第一个 ID选择基本上就把查找的范围限定了,但实际上浏览器对选择符的解析是从右往左进行的。如上面的选择符,浏览器必须遍历查找每一个 A标签的祖先节点,效率并不像之前想象的那样高。根据浏览器的这一行为特点,在写选择符的时候需要注意很多事项,有兴趣的童鞋可以去了解一下

---恢复内容结束---

原文地址:https://www.cnblogs.com/caixiufang/p/10832847.html