varfn1=function(){this.foo=function(){
console.log(11111)}}let f1 =newfn1()varfn2=function(){}
fn2.prototype.foo=function(){
console.log(1111)}let f2 =newfn2()// Jsperf中查看运算速度
避开闭包陷阱
闭包特点
外部具有指向内部的引用
在‘外’部作用域访问‘内’部作用域的数据
闭包
闭包是一种强大的语法
闭包使用不当很容易出现内存泄漏
不要为了闭包而闭包
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>闭包陷阱</title></head><body><buttonid="btn">btn</button><script>// function foo() {// var el = document.getElementById('btn')// el.onclick = function () {// console.log(el.id)// }// }// foo()// 闭包优化functionfoo(){var el = document.getElementById('btn')
el.onclick=function(){
console.log(el)
console.log(el, el.id)}
el =null}foo()</script></body></html>
避免属性访问方法使用
JavaScript中的面向对象
JS不需要属性的访问方法, 所有属性都是外部可见的
书用属性访问方法只会增加一层重定义, 没有访问的控制力
functionPerson(){this.name ='Person'this.age =19this.getAge=function(){returnthis.age
}}const p1 =newPerson()const a = p2.getAge()functionPerson1(){this.name ='Person'this.age =19}const p2 =newPerson1()const b = p2.age
// Jsperf上查看运行速度
For循环优化 length提取
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>For循环优化</title></head><body><pclass="btn"></p><pclass="btn"></p><pclass="btn"></p><pclass="btn"></p><pclass="btn"></p><pclass="btn"></p><pclass="btn"></p><pclass="btn"></p><pclass="btn"></p><pclass="btn"></p><script>var aBtns = document.getElementsByClassName('btn')for(var i =0; i < aBtns.length; i++){
console.log(i)}for(var i =0, len = aBtns.length; i < len; i++){
console.log(i)}// Jsperf上查看运行速度</script></body></html>
采用最优循环方式
// 采用最优循环方式const arr =newArray(1,2,3,4,5)
arr.forEach(function(item){
console.log(item)})for(var i = arr.length; i; i--){
console.log(arr[i])}for(var i in arr){
console.log(arr[i])}// Jsperf中查看运行速度
节点添加优化
节点添加操作必然会有回流和重绘
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>优化节点添加</title></head><body><script>for(var i =0; i <100; i++){var oP = document.createElement('p')
oP.innerHTML = i
document.body.appendChild(oP)}const fragEle = document.createDocumentFragment()for(var i =0; i <100; i++){var oP = document.createElement('p')
oP.innerHTML = i
fragEle.appendChild(oP)}
document.body.appendChild(fragEle)// Jsperf 查看运行速度</script></body></html>
克隆优化节点操作
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>克隆优化节点操作</title></head><body><pid="box1">old</p><script>// 创建新节点时 : 先clone一个已有的节点, 再在clone节点上作修改for(var i =0; i<5; i++){var oP = document.createElement("p")
oP.innerHTML = i
document.body.appendChild(oP)}var oldP = document.getElementById('box1')for(var i =0; i<5; i++){var newP = oldP.cloneNode(false)
newP.innerHTML = i
document.body.appendChild(newP)}// Jsperf 查看运行速度</script></body></html>
直接量替换Object操作
var a =[1,2,3]var a1 =newArray(3)
a1[0]=1
a1[1]=2
a1[2]=3// Jsperf中查看运算速度
JavaScript性能提升2 空间换时间 或者 时间换空间
JSBench的使用(JSBench.me)
堆栈中代码执行流程
let a =10functionfoo(b){let a =2functionbaz(c){
console.log(a+b+c)}return baz
}let fn =foo(2)fn(3)//=> 7 存在闭包 导致函数foo作用域没有被释放 // 减少判断层级
// var name = 'foo'// function foo(){// name = 'foo666'//全局的name变量// function baz(){// var age = 39// console.log(age)// console.log(name)// }// baz()// }// foo()var name ='foo'functionfoo(){var name ='foo666'//全局的name变量functionbaz(){var age =39
console.log(age)
console.log(name)}baz()}foo()
// let test = () => {// let obj = new Object()// obj.name = 'liuchao'// obj.age = 39// obj.slogan = '我为前端而活'// return obj// }// let test = () => {// let obj = {// name : 'liuchao',// age : 39,// slogan : '我为前端而活'// }// return obj// }// console.log(test())// ----------------------var str1 ='我为前端而活'var str2 =newString('我为前端而活')
console.log(str1)
console.log(str2)
减少循环体活动
// var test = () => {// var i // var arr = ['liuchao', 39, '我为前端而活']// for( i =0;i<arr.length;i++){// console.log(arr[i])// }// }// var test = () => {// var i // var arr = ['liuchao', 39, '我为前端而活']// var len = arr.length// for( i =0;i<len;i++){// console.log(arr[i])// }// }vartest=()=>{var arr =['liuchao',39,'我为前端而活']var len = arr.length
while(len--){
console.log(arr[len])}}test()
减少声明及语句数–词法分析消耗时间
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>减少声明及语句数-词法分析消耗时间</title></head><body><divid="box"style="width: 100px;height: 200px;"></div><script>var oBox = document.getElementById('box')// var test = function (ele){// let w = ele.offsetWidth// let h = ele.offsetHeight// return w * h// }// var test = function (ele){// return ele.offsetWidth * ele.offsetHeight// }// console.log(test(oBox))// var test = () => {// var name = 'liucaho'// var age = 39// var slogan = '我为前端而活'// return name + age + slogan// }vartest=()=>{var name ='liucaho',
age =39,
slogan ='我为前端而活'return name + age + slogan
}
console.log(test())</script></body></html>
606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
