性能优化与面向对象
2017-11-11 本文已影响0人
形象代言人
每一日你所付出的代价都比前一日高,因为你的生命又消短了一天,所以每一日你都要更积极。今天太宝贵,不应该为酸苦的忧虑和辛涩的悔恨所销蚀,抬起下巴,抓住今天,它不再回来。
Happy起来.jpg
一、性能优化
a.稳定
b.扩展
c.性能
d.网络性能
e.执行性能
1、网络性能
第三方工具
Chrome NetWork
需要经验支撑分析。
Firefox YSLow
http://yslow.org/
插件版
必须先安装 Firebug
进入YSLow官网
点击Firefox
点击Add to Firefox
一定要在选项中把自动运行勾选
a、网络性能优化
1.减少http请求
1个文件=一次连接+一次请求+一次等待+一次响应
100个文件=100连接+100请求+100等待+100响应
合并文件
2.合并文件
a).减少http请求
b).让资源更小
4KB一个单位,不足4KB按照4KB算
3.压缩代码
让文件更小
4.使用CDN加速
5.使用GZIP压缩
6.使用DNS
7.懒加载
更多搜索:雅虎军规
2、执行性能
1.尽量不使用全局变量
2.尽量少使用闭包
3.减少DOM操作
4.少使用定时器
5.尽量使用正则操作字符串
6.尽量不使用属性
7.尽量使用CSS3
8.减少DOM操作
9.尽量不使用定时器
10.尽量不使用属性
var len = arr.length;
for(var i=0;i<len;i++){
}
二、面向对象(OOP)
不知道原理,但是不影响使用。
1、对象由什么组成?
属性——特征
方法——行为
a、什么是属性
变量和属性一样。
属性是属于某个对象的。
变量是自由的。
b、什么是方法
函数和方法一样。
方法是属于某个对象的。
函数是自由的。
2、创建一个类
(1)Person类
function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
}
Person.prototype.showName = function(){
return this.name;
};
Person.prototype.showAge = function(){
return this.age;
};
Person.prototype.showGender = function(){
return this.gender;
};
3、this是什么?
不看定义,只看调用,方法是谁的,this就是谁
优先级
高
new Object
定时器 window
方法、事件 对象本身
正常调用 window\undefind
低
只管一层、只看最后一次调用
4、面向对象三大特性:
封装 抽
继承 子继承父.父类有的,子类一定有。子类有的,父类不一定有。父类改变,子类跟着变。
多态 多种状态、多重继承
继承
属性
方法
Person 人类
属性
name age gender
方法
showName() showAge() showGender()
Worker 工人类
属性
name age gender job
方法
showName() showAge() showGender() showJob()
矫正this指向
fn.call(this指向谁,arg1,arg2....);
或者
fn.apply(this指向谁,[arg1,arg2,arg3...]);
属性继承
function 子类(a,b){
父类.call(this,a,b);
或者
父类.apply(this,arguments);
}
方法继承
a).
子类.prototype = 父类.prototype;
问题:
子类的私有方法,父类也有。
原因:
引用。
b).
for(var key in 父类.prototype){
子类.prototype[key] = 父类.prototype[key];
}
问题:
子类的实例,不属于父类
c).
子类.prototpye = new 父类();
瑕疵:
子类实例.constructor 等于父类
d).
子类.prototype = new 父类();
子类.prototype.constructor = 子类;