Study 9, JS 성능 코드 최적화 개요

JS 성능 테스트 : Benchmark.js를 기반으로 http://jsperf.com/으로 완료

기본적으로 수학적 통계 및 분석을 위해 많은 수의 실행 샘플 수집

명령:

1) Github로 로그인

2) 개인 정보 입력 (선택 사항)

3) 자세한 테스트 케이스 정보 (제목, 슬러그) 입력

4) 코드 작성 준비 (일반적으로 DOM 작업에 사용됨)

5) 필요한 설정 및 해체 코드 입력

6) 테스트 코드 스 니펫 작성

1.주의해서 전역 변수를 사용하십시오.

전역 변수를주의해서 사용하는 이유

1. 전역 변수는 모든 범위의 최상위 인 전역 실행 컨텍스트에서 정의됩니다.

2. 전역 실행 컨텍스트는 프로그램이 종료 될 때까지 항상 컨텍스트 실행 스택에 존재합니다.

3. 같은 이름의 변수가 로컬 범위에 나타나면 전역을 가리거나 오염시킵니다.

둘째, 캐시 전역 변수

사용 중에 피할 수없는 로컬 변수 캐시

셋째, 프로토 타입 객체를 통해 추가 메소드 추가

let fn1 = function () {
    this.foo = function () {
        console.log(11111)
    }
}

let f1 = new fn1()


let fn2 = function () {}
fn2.prototype.foo = function () {
    console.log(11111)
}

let f2 = new fn2()

프로토 타입 객체의 새 인스턴스 객체에 필요한 메서드

넷, 폐쇄 함정을 피하십시오

1. 폐쇄 기능 :

1) 외부는 내부를 참조합니다.

2) 외부 범위의 내부 범위 데이터에 액세스

2. 폐쇄 정보 :

1) 클로저는 강력한 구문입니다.

2) 클로저를 부적절하게 사용하면 콘텐츠가 유출되기 쉽습니다.

3) 폐쇄를 위해 폐쇄하지 마십시오.

3 、 ex : function foo () {

let el = document.getElementById ( "btn");

el.onclick = function () {

console.log (el.id)

}

el = null // 클로저 트랩 해결;

}

다섯, 속성 액세스 방법을 사용하지 마십시오

function Person() {
    this.name = 'icoder'
    this.age = 18
    this.getAge = function () {
        return this.age
    }
}

const p1 = new Person()
const a = p1.getAge()

function Person() {
    this.name = 'icoder'
    this.age = 18
}
const p2 = new Person()
const b = p2.age

1. JS에는 속성 액세스 방법이 필요하지 않으며 모든 속성은 외부에서 볼 수 있습니다.

2. 속성 액세스 방법을 사용하면 액세스 제어없이 정의 계층 만 추가됩니다.

Six, For 루프 최적화

let arrList = []
arrList[10000] = 'icoder'

for (let i = 0; i < arrList.length; i++) {
    console.log(arrList[i])
}

for (let i = arrList.length; i; i--) {
    console.log(arrList[i])
}

일곱, 최적의 순환 방식 채택

forEach ()가 최고이고, 두 번째로, for ... in이 최악입니다.

8. 문서 조각화 최적화 노드 추가

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>优化节点添加</title>
</head>
<body>
  <script>

    for (let i = 0; i < 10; i++) {
      let oP = document.createElement('p')
      oP.innerHTML = i 
      document.body.appendChild(oP)
    }

    const fragEle = document.createDocumentFragment()  //创建一个文档碎片
    for (let i = 0; i < 10; i++) {
      let oP = document.createElement('p')
      oP.innerHTML = i 
      fragEle.appendChild(oP)
    }

    document.body.appendChild(fragEle)

  </script>
</body>
</html>

9, 클론 최적화 노드 운영

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>克隆优化节点操作</title>
</head>
<body>
  <p id="box1">old</p>

  <script>

    for (let i = 0; i < 3; i++) {
      let oP = document.createElement('p')
      oP.innerHTML = i 
      document.body.appendChild(oP)
    }

    let oldP = document.getElementById('box1')
    for (let i = 0; i < 3; i++) {
      let newP = oldP.cloneNode(false) //这里传入false表示只克隆当前节点，true为克隆当前以及其所有子节点。
      newP.innerHTML = i 
      document.body.appendChild(newP)
    }

  </script>

</body>
</html>

10. 새로운 Object code-04 / app07.html의 리터럴 대체

let a1 = [1, 2, 3]

let a2 = new Array(1,2,3)

let a3 = new Array(3)
a3[0] = 1
a3[1] = 2
a3[2] = 3

Study 9, JS 성능 코드 최적화 개요

추천