一、垃圾回收
垃圾回收机制:
内存泄漏
垃圾回收/生命周期
局部变量:生命周期很短,函数执行完毕之后就会被回收
全局变量:生命周期很长,当页面关闭之后才被回收
闭包:有三种情况:
1.子函数还在用的时候,父函数中的局部变量就不会被回收
exp:
function show(){
var a = 12;
}
调用前 没有a
show(); 调用中 有a
调用后 没有a(用过后被回收)
2.子函数还在用的时候,父函数中的局部变量都不会被回收,系统分不出哪个要用到,所以都不会回收
exp1:
function show(){
var a = 12;
document.onclick = function(){
alert(a);
};
}
调用前 没有a
show(); 调用中 有a
调用后 有a(不会回收)
exp2:
function show(){
var a = 12;
document.onclick = function(){
alert(a);
};
}
调用前 没有a,没有b
show(); 调用中 有a,有b
调用后 有a,有b(都不会回收)
3.子函数还在用的时候,整条作用域链上的变量都不会被回收
exp:
var a = 12;
function show(){
var b = 5;
function show2(){
var c = 3;
document.onclick = function(){
alert(b);
};
}
show2();
}
show();
作用域链:先在当前函数中找,找不到会一直往父级找,知道找到全局
综上所述:为了提高性能,全局变量尽量少用,因为它生命周期太长,局部变量用过后被回收能提高内存和性能
二、性能优化
重要性优先级:
1.稳定性(一个网站必须保证自己的稳定性)
2.扩展性(扩展性能还要好)
3.性能优化
性能优化分为两种:
1.网络性能(第一重要)
2.执行性能(其次)
1、网络性能
网络性能检测的方式:
1.在Chrome下:
F12 ==> NetWork (弊端:需要经验才能分析出来)
2.在Firefox下:
(1) 插件版(首选推荐):
a)必须先安装好Firebug
b)进入YSLow官网(YSLow.org)==> 点击firefox ==> 点击Add to Firefox(谨记:一定要在附件中的YSLow的选项把自动运行点开再重启浏览器)
(2) 书签版:
a)进入YSLow官网 ==> 点击install ==> 往下滑找到大按钮,把它拖到书签栏位置再重启浏览器
b)书签版的不能检测https协议的网站,带有s的网站都是超安全网站
网络性能优化:
可以在雅虎军规上参考,这里列举一些常用的
1.减少http请求
每外链一个js或css文件都需要执行以下过程:
1个文件=1次连接+1次请求+1次等待+1次响应
如果链接多个文件的话就要重复执行很多次上面的过程,那么就会影响网络性能,尽可能的合并文件
2.合并文件
a)可以减少http请求
b)可以让资源更小
电脑上的文件存储方式是以4KB为一个单位进行存储的,如果不足4KB的也按照4KB进行存储,如果是5KB就会用8KB的空间进行存储,如果把多个文件的内容放在一个文件中,那么就会减少了不必要花费的空间
3.压缩代码
让文件更小
4.使用CDN加速(一般和财务有关系,因为需要另外购买服务器,多个服务器一个工作就会达到加速的效果)
5.使用GZIP压缩
6.使用DNS
7.懒加载
2、执行性能
执行性能优化:
1.尽量不使用全局变量(不能够达到垃圾回收的效果)
2.尽量少使用闭包(不能够达到垃圾回收的效果)
3.减少DOM操作
4.少使用定时器(定时器一直在运行中会影响性能,除非不看他的时候让他停止)
5.尽量使用正则操作字符串
6.尽量不使用属性
7.尽量使用CSS3(因为css2的样式都是改变结构需要重绘重排的,而css3只是改变了视觉上的变化。本身的结构并没有 改变)
exp:
var str = '';
str+='abc';
str+='bcd';
str+='cde';
var arr = [];
arr.push('abc');
arr.push('bcd');
arr.push('cde');
var str = arr.join('');
以上是两种方式来操作字符串的,第二种性能更好,因为字符串本身是不可更改的,用数组更好
字符串操作小知识:$.trim() 去掉首位空格
三、this的指向问题
JavaScript的高能:
1.***千万不要看定义,只看调用
2.方法是谁的,this就是谁
3.优先级(由高到低):
new object
定时器 window
方法、事件 对象本身
正常调用 window/undefined
4.只管当前层一层
5.只看最后一次调用,谁最后一次调用的this指的就是谁
案例:
var arr = [1,2,3];
arr.show = function(){
alert(this);
};
// arr.show(); array
document.onclick=arr.show;
// document.onclick(); document
var show = document.onclick;
// show(); window
// setTimeout(show,1000); window
// setTimeout(document.onclick,1000); window
// setTimeout(arr.show,1000); window
// new show(); object
// new arr.show(); object
// new document.onclick(); object
等一下(๑•ั็ω•็ั๑),我还有最后一句话:
我爱你,
也想把这个世界上所有的快乐都与你共享,
哪怕被你折磨的遍体鳞伤,
再见...
网友评论