javaScript 性能优化(学习笔记)

2021-08-30  本文已影响0人  A_走在冷风中

内容概要

内存管理介绍

JavaScript中的内存管理

JavaScript中的垃圾

JavaScript中的可达对象

GC算法介绍

GC定义与作用
GC里面的垃圾是什么
function func () {
  name = 'lagou'
  return `${name} is a coder`
}
func()

function func () {
  name = 'lagou'
  return `${name} is a coder`
}
func()
GC算法是什么
常见的GC算法

认识V8

垃圾回收策略
V8中常用的GC算法
V8回收新生代对象
V8回收老年代对象
细节对比

PerFormance 工具介绍

为什么使用PerFormance
PerFormance使用步骤
内存问题的外在表现
界定内存问题的标准
内存监控的几种方式
什么是分离DOM
为什么确定频繁的垃圾回收

V8引擎执行工作流程

性能优化

事件委托:

循环添加事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>循环添加事件</title>
</head>

<body>
  <button index='1'>按钮1</button>
  <button index='2'>按钮2</button>
  <button index='3'>按钮3</button>
  <script src="./index.js"></script>
</body>

</html>

index.js

var aButtons = document.querySelectorAll('button')

// 基础
for (var i = 0; i < aButtons.length; i++) {
  aButtons[i].onclick = function () {
    console.log(`当前索引值为${i}`)
  }
}

//事件委托
document.body.onclick = function (ev) {
  var target = ev.target,
    targetDom = target.tagName
  if (targetDom === 'BUTTON') {
    var index = target.getAttribute('index')
    console.log(`当前点击的是第 ${index} 个`)
  }
}
变量局部化:
//普通
var i, str = ""
function packageDom() {
  for (i = 0; i < 1000; i++) {
    str += i
  }
}
packageDom()

//变量局部化
function packageDom() {
  let str = ''
  for (let i = 0; i < 1000; i++) {
    str += i
  }
}

packageDom()
减少层级访问:
缓存数据:
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>缓存数据</title>
</head>

<body>
  <div id="skip" class="skip"></div>
  <script>
    // 缓存数据：对于需要多次使用的数据进行提前保存，后续进行使用

    var oBox = document.getElementById('skip')

    // 假设在当前的函数体当中需要对 className 的值进行多次使用，那么我们就可以将它提前缓存起来
    function hasClassName(ele, cls) {
      console.log(ele.className)
      return ele.className == cls
    }
    console.log(hasClassName(oBox, 'skip'))


    function hasClassName(ele, cls) {
      var clsName = ele.className
      console.log(clsName)
      return clsName == cls
    }
    console.log(hasClassName(oBox, 'skip'))

    /*
      01 减少声明和语句数（词法 语法）
      02 缓存数据（作用域链查找变快）
    */

  </script>
</body>

</html>
防抖:
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>防抖函数实现</title>
</head>

<body>
  <button id="btn">点击</button>
  <script>
    var oBtn = document.getElementById('btn')
    // oBtn.onclick = function () {
    //   console.log('点击了')
    // }

    /** 
     * handle 最终需要执行的事件监听
     * wait 事件触发之后多久开始执行
     * immediate 控制执行第一次还是最后一次，false 执行最后一次
    */
    function myDebounce(handle, wait, immediate) {

      // 参数类型判断及默认值处理
      if (typeof handle !== 'function') throw new Error('handle must be an function')
      if (typeof wait === 'undefined') wait = 300
      if (typeof wait === 'boolean') {
        immediate = wait
        wait = 300
      }
      if (typeof immediate !== 'boolean') immediate = false

      // 所谓的防抖效果我们想要实现的就是有一个 ”人“ 可以管理 handle 的执行次数
      // 如果我们想要执行最后一次，那就意味着无论我们当前点击了多少次，前面的N-1次都无用
      let timer = null
      return function proxy(...args) {
        let self = this,
          init = immediate && !timer
        clearTimeout(timer)
        timer = setTimeout(() => {
          timer = null
          !immediate ? handle.call(self, ...args) : null
        }, wait)

        // 如果当前传递进来的是 true 就表示我们需要立即执行
        // 如果想要实现只在第一次执行，那么可以添加上 timer 为 null 做为判断
        // 因为只要 timer 为 Null 就意味着没有第二次....点击
        init ? handle.call(self, ...args) : null
      }

    }

    // 定义事件执行函数
    function btnClick(ev) {
      console.log('点击了1111', this, ev)
    }

    // 当我们执行了按钮点击之后就会执行...返回的 proxy
    oBtn.onclick = myDebounce(btnClick, 200, false)
    // oBtn.onclick = btnClick()  // this ev

  </script>
</body>

</html>
节流:
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>节流函数实现</title>
  <style>
    body {
      height: 5000px;
    }
  </style>
</head>

<body>
  <script>
    // 节流：我们这里的节流指的就是在自定义的一段时间内让事件进行触发

    function myThrottle(handle, wait) {
      if (typeof handle !== 'function') throw new Error('handle must be an function')
      if (typeof wait === 'undefined') wait = 400

      let previous = 0  // 定义变量记录上一次执行时的时间 
      let timer = null  // 用它来管理定时器

      return function proxy(...args) {
        let now = new Date() // 定义变量记录当前次执行的时刻时间点
        let self = this
        let interval = wait - (now - previous)

        if (interval <= 0) {
          // 此时就说明是一个非高频次操作，可以执行 handle 
          clearTimeout(timer)
          timer = null
          handle.call(self, ...args)
          previous = new Date()
        } else if (!timer) {
          // 当我们发现当前系统中有一个定时器了，就意味着我们不需要再开启定时器
          // 此时就说明这次的操作发生在了我们定义的频次时间范围内，那就不应该执行 handle
          // 这个时候我们就可以自定义一个定时器，让 handle 在 interval 之后去执行 
          timer = setTimeout(() => {
            clearTimeout(timer) // 这个操作只是将系统中的定时器清除了，但是 timer 中的值还在
            timer = null
            handle.call(self, ...args)
            previous = new Date()
          }, interval)
        }
      }

    }

    // 定义滚动事件监听
    function scrollFn() {
      console.log('滚动了')
    }

    // window.onscroll = scrollFn
    window.onscroll = myThrottle(scrollFn, 600)
  </script>
</body>

</html>
上一篇 下一篇

猜你喜欢

热点阅读