JS 执行层优化

最新推荐文章于 2023-05-04 23:57:40 发布

进阶__前端

最新推荐文章于 2023-05-04 23:57:40 发布

阅读量106

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_38074118/article/details/111479708

版权

javascript 专栏收录该内容

50 篇文章 3 订阅

订阅专栏

JSBench 的使用

堆栈中的JS执行过程

 let a = 10;
function foo(b) {
    let a=2;
    function  baz(c) {
       console.log(a + b +c)        
    }
    return baz
}

let fn = foo(2)
fn(3)  // 7

减少判断层级

// function  doSomething(part,chaapter) {
//     const parts= [1,2,3,4,5,67,8,9];
//     if(part){
//        if(parts.includes(part)){
//            console.log("有")
//             if(chaapter>5){
//               console.log('要管理员')
//             }
//        }
//     }else{
//         console.log('没有')
//     }
// }
// doSomething(3,6)


function  doSomething(part,chaapter) {
    const parts= [1,2,3,4,5,67,8,9];
    if(!part){ return  console.log('没有')}
       
    if(!parts.includes(part)){return}
        console.log("有")
    if(chaapter>5){
        console.log('要管理员')
    }
    
}
doSomething(3,6)  // 执行快，减少了执行的代码

减少作用域链查找层级

// var name = 'zce'
// function foo() {
//     name = 'zce22222'
//     function baz() {
//         var age = 38;
//         console.log(age) //38
//         console.log(name) //zce22222
//     }
//     baz()
// }

// foo() 内存占用的少


var name = 'zce'
function foo() {
    var name = 'zce22222' 
    function baz() {
        var age = 38;
        console.log(age) //38
        console.log(name) //zce22222
    }
    baz()
}

foo() //新开辟了内存空间，执行快

减少数据读取次数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="skip" class="skip"></div>
</body>
</html>

<script>
    var box = document.getElementById('skip')
    function hasEle(ele,cls){
        return ele.className == cls //需要在对象中查找属性
    }

    function hasEle(ele,cls){
        var clsName = ele.className //会有缓存，但是消耗空间
        return clsName == cls
    }
    console.log(hasEle(box,"skip"))
</script>

字面量与构造式

let test = () =>{
    let obj = new Object()
    obj.name = 'zce'
    obj.age = 38
    obj.slogan = '前端牛批'
    return obj
}

let test = () =>{ //快
    let obj={
        name:'zce',
        age: 38 
    }
    return obj
}
console.log(test())


var  str1 = 'sadadasdasds' //是个字符串，快
var  str2 = new String('sadadasdasds') //是个对象形式，占用空间大

console.log(str1)
console.log(str2)

减少循环体活动

let test = () =>{
    var i 
    var arr = [1,2,3,4,5]
    for(i=0;i<arr.length;i++){
        console.log(arr[i])
    }
}
let test = () =>{
    var i 
    var arr = [1,2,3,4,5]
    var len = arr.length
    // for(i=0;i<len;i++){
    //     console.log(arr[i])
    // }
    while(len--){
        console.log(arr[len])
    }
}

减少性能及语句数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="box" style="width: 100px;height: 100px;"></div>
</body>
</html>

<script>
  var oBox =document.getElementById('box')
  var test = (ele) =>{
    let w = ele.offsetWidth
    let h = ele.offsetHeight
    return w*h
  }
  var test = (ele) =>{
    return ele.offsetWidth*  ele.offsetHeight
  }

  console.log(test(oBox))
</script>

惰性函数与性能

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="btn">点击</button>

</body>
</html>

<script>
  var oBtn =document.getElementById("btn")
  function foo(){
    console.log(this);
  }
  // function addEvent(obj,type,fn){
  //   if(obj.addEventListener){
  //     obj.addEventListener(type,fn,false)
  //   }else if(obj.attachEvent){
  //     obj.attachEvent('on'+type,fn)
  //   }else{
  //     obj['on'+type] = fn
  //   }
  // }
  function addEvent(obj,type,fn){
    if(obj.addEventListener){
      addEvent= obj.addEventListener(type,fn,false)
    }else if(obj.attachEvent){
      addEvent= obj.attachEvent('on'+type,fn)
    }else{
      addEvent= obj['on'+type] = fn
    }
    return addEvent
  }

  addEvent(oBtn,"click",foo)
</script>

采用事件绑定
多采用事件委托，采用父元素托管，达到性能优化

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul id="ul">
    <li>zzz</li>
    <li>qqqq</li>
    <li>sssss</li>
  </ul>

</body>
</html>

<script>
  var list = document.querySelector('li')
  // function showTxt(ev){
  //   console.log(ev.target.innerHTML)
  // }
  // for(let item of list){
  //   item.onClick = showTxt
  // }

  var  oul = document.getElementById('ul')
  oul.addEventListener('click',showTxt,true  )
  function showTxt(ev){
    var obj = ev.target
    if(obj.nodeName.toLowerCase()==="li"){
      console.log(obj.innerHTML)
    }
  }
</script>

进阶__前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 执行层优化

JSBench 的使用堆栈中的JS执行过程 let a = 10;function foo(b) { let a=2; function baz(c) { console.log(a + b +c) } return baz}let fn = foo(2)fn(3) // 7减少判断层级// function doSomething(part,chaapter) {// const parts= [1,2,3,
复制链接

扫一扫

专栏目录