jsbench
优化方式
慎用全局变量
- 全局变量位于全局作用域,在局部作用域中需要逐层向上查找
- 全局变量在全局执行上下文中,会一直存在于作用域栈,直到程序结束才能被GC算法回收
- 局部执行上下文中出现同名变量,则会污染全局变量
缓存全局变量
在原型对象上添加附加方法
避开闭包陷阱
<body>
<button id="btn" class="btn">click</button>
<script>
function click(){
let btn = document.getElementById("btn")
btn.onclick = function(){
console.log(btn)
}
}
click()
</script>
</body>
修改为:
<body>
<button id="btn" class="btn">click</button>
<script>
function click(){
let btn = document.getElementById("btn")
btn.onclick = function(){
console.log(btn)
}
btn = null
}
click()
</script>
</body>
for循环优化
几种循环的时间花销比较
文档碎片优化节点添加
//before
for(let i = 0;i<5;++i){
let span = document.createElement("span")
span.innerHTML = i
document.body.appendChild(span)
}
//after
let fag = document.createDocumentFragment()
for(let i = 0;i<5;++i){
let span = document.createElement("span")
span.innerHTML = i;
fag.appendChild(span)
}
document.body.appendChild(fag)
克隆优化节点
<span id="sp">sx</span>
<script>
//before
for(let i = 0;i<5;++i){
let span = document.createElement("span")
span.innerHTML = i
document.body.appendChild(span)
}
//after
let sp = document.getElementById("sp")
console.log(sp)
for (let index = 0; index < 5; index++) {
let span = sp.cloneNode(false)
span.innerHTML = index
document.body.appendChild(span)
}
</script>
直接量替换new object操作
//before
let arr = new Array()
arr[0] = 0;
arr[1] = 1;
arr[2] = 2;
//after
let arr = [1,2,3]
减少层级判断
//判断是否是18岁的小明
//before
function judgeMing(name,age){
if(name==='小明'){
if(age === 18){
console.log('正确')
}
else {
console.log('错误')
}
}
else {
console.log('错误')
}
}
//after
function judgeMing(name,age){
if(name!=="小明"|| age!==18)
console.log('错误')
else {
console.log('正确')
}
}
减少作用域链查找层级
//before
let name = 'sx'
function foo(){
let getName = ()=>{
console.log(name)
}
}
//after
let name = 'sx'
function foo(){
let name = 'sx2'
let getName = ()=>{
console.log(name)
}
}
采用事件绑定
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
function show(){
console.log('sx')
}
//before
let item = document.getElementsByTagName("li")
for(let i of item){
i.onclick = show
}
//after
let ul = document.getElementsByTagName("ul")
ul[0].addEventListener('click',show,true)
</script>