JavaScript 성능 최적화 방법 소개(예제 포함)

이 글은 JavaScript 성능 최적화 방법을 소개합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

이 기사는 주로 "고성능 Javascript"를 읽은 후 유용한 최적화 솔루션을 기록하고 내 경험을 모두와 공유하고 싶습니다.

# 🎜🎜##🎜 🎜#Javascript 로드 및 실행

우리 모두 알고 있듯이 브라우저가 DOM 트리를 구문 분석할 때 스크립트 태그를 구문 분석할 때 다른 모든 항목을 차단합니다. js 파일이 다운로드되어 구문 분석되고 실행됩니다. 따라서 이때 브라우저는 차단됩니다. 스크립트 태그가 헤드에 배치되면 js 파일이 로드되어 실행되기 전에 사용자는 빈 페이지만 볼 수 있습니다. 이 사용자 경험은 특히 나쁠 것입니다. 이와 관련하여 일반적으로 사용되는 방법은 다음과 같습니다.

모든 ​​스크립트 태그를 본문 하단에 배치합니다. 이렇게 하면 js 파일이 마지막에 로드되고 실행됩니다. . 먼저 사용자에게 페이지를 표시합니다. 그러나 페이지의 첫 번째 화면 렌더링이 일부 js 파일에 따라 달라지는지 먼저 알아야 합니다. 그렇다면 js 파일의 이 부분을 헤드에 배치해야 합니다.
다음과 같이 defer를 사용하세요. defer를 사용하면 브라우저는 태그를 구문 분석할 때 해당 js 파일을 다운로드하지만 즉시 실행하지 않고, 대신 이러한 js 파일을 실행하기 전에 DOM이 구문 분석될 때까지 기다립니다. 따라서 브라우저가 차단되지 않습니다.

• <script src="test.js" type="text/javascript" defer></script>

js 파일의 동적 로딩 이러한 방식으로 페이지가 로드된 후 필요한 코드를 로드할 수 있습니다. js 파일의 온디맨드 로딩도 이런 방식으로 구현될 수 있습니다. 예를 들어, 현재는 webpack이 vue-router/react-router와 결합되어 온디맨드 로딩을 ​​달성하는 것이 더 일반적입니다. 특정 경로에 액세스됩니다. 구체적인 방법은
1입니다. 다음 코드를 통해 스크립트 태그를 동적으로 삽입하여 스크립트를 로드합니다.

  function loadScript(url, callback) {
    const script = document.createElement('script')；
    script.type = 'text/javascript';
    // 处理IE
    if (script.readyState) {
      script.onreadystatechange = function () {
        if (script.readyState === 'loaded' || script.readyState === 'complete') {
          script.onreadystatechange = null;
          callback();
        }
      }
    } else {
      // 处理其他浏览器的情况
      script.onload = function () {
        callback();
      }
    }
    script.src = url;
    document.body.append(script);
  }

  // 动态加载js
  loadScript('file.js', function () {
    console.log('加载完成');
  })

2 . xhr 방법을 통해 js 파일을 로드하지만 이 방법을 사용하면 도메인 간 문제가 발생할 수 있습니다. 예는 다음과 같습니다:

  const xhr = new XMLHttpRequest();
  xhr.open('get', 'file.js');
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.text = xhr.responseText;
        document.body.append(script);
      }
    }
  }

3. 여러 js 파일을 하나로 병합하고 압축합니다. 이유: 현재 대부분의 브라우저는 이미 js 파일의 병렬 다운로드를 지원하지만 동시 다운로드 수에는 여전히 특정 제한이 있으며(브라우저에 따라 일부 브라우저는 4개만 다운로드할 수 있음) 각 js 파일은 추가 http 연결을 사용하면 25KB 파일 4개를 로드하는 것이 100KB 파일 1개를 로드하는 것보다 시간이 더 걸립니다. 따라서 여러 js 파일을 하나로 병합하고 코드를 압축하는 것이 가장 좋습니다.

javascript 범위

함수가 실행될 때 실행 컨텍스트가 생성됩니다. 이 실행 컨텍스트는 함수가 실행될 때의 환경을 정의합니다. 함수 실행이 완료되면 실행 컨텍스트가 삭제됩니다. 따라서 동일한 함수를 여러 번 호출하면 여러 실행 컨텍스트가 생성됩니다. 각 실행 컨텍스트에는 자체 범위 체인이 있습니다. 함수의 첫 번째 범위는 함수 내부의 변수입니다. 함수 실행 중에 변수가 발견될 때마다 함수의 범위 체인을 검색하여 일치하는 첫 번째 변수를 찾습니다. 먼저 함수 내부의 변수를 검색한 다음 범위 체인을 따라 계층별로 검색합니다. 따라서

가장 바깥쪽 변수(전역변수)에 접근하게 되면 내부 변수에 직접 접근하는 것에 비해 성능 손실이 상대적으로 커집니다

. 따라서 자주 사용되는 전역 변수 참조를 로컬 변수 에 저장할 수 있습니다.

const a = 5;
function outter () {
  const a = 2;
  function inner () {
    const b = 2;
    console.log(b); // 2
    console.log(a); // 2
  }
  inner();
}

객체 읽기

JavaScript에는 주로 리터럴, 지역 변수, 배열 요소 및 객체의 네 가지 유형이 있습니다. 리터럴과 지역 변수에 액세스하는 것이 가장 빠른 반면, 배열 요소와 객체 멤버에 액세스하는 것은 상대적으로 느립니다. 범위 체인과 마찬가지로 객체 멤버에 액세스할 때 검색은 프로토타입 체인에서 수행됩니다. 따라서 검색된 멤버가 프로토타입 체인 내에서 너무 깊다면 접근 속도가 느려질 수 있습니다. 따라서

객체 멤버의 조회 수와 중첩 깊이

를 최대한 줄여야 합니다. 예를 들어 다음 코드는

  // 进行两次对象成员查找
  function hasEitherClass(element, className1, className2) {
    return element.className === className1 || element.className === className2;
  }
  // 优化，如果该变量不会改变，则可以使用局部变量保存查找的内容
  function hasEitherClass(element, className1, className2) {
    const currentClassName = element.className;
    return currentClassName === className1 || currentClassName === className2;
  }

DOM 작업 최적화

DOM 작업 수를 최소화하고 javascript를 사용하여 최대한 처리합니다. , 가능한 한 많이 사용하십시오. 로컬 변수를 사용하여 DOM 노드를 저장하십시오. 예를 들어, 다음 코드는

•   // 优化前，在每次循环的时候，都要获取id为t的节点，并且设置它的innerHTML
    function innerHTMLLoop () {
      for (let count = 0; count < 15000; count++) {
        document.getElementById('t').innerHTML += 'a';
      }
    }
    // 优化后，
    function innerHTMLLoop () {
      const tNode = document.getElemenById('t');
      const insertHtml = '';
      for (let count = 0; count < 15000; count++) {
        insertHtml += 'a';
      }
      tNode.innerHtml += insertHtml;
    }

리플로우를 줄이고 리플로우를 최대한 많이 수행하는 데 비용이 많이 들 수 있습니다. 따라서 재배치 및 재병합 횟수를 줄이기 위해 Dom의 스타일을 수정하려는 경우에는 다음과 같은 최적화를 수행할 수 있습니다
1. , 우리는 재배치 및 재병합 횟수를 줄이기 위해 모든 수정 사항을 가능한 한 많이 병합하고 한 번에 처리해야 합니다.

  // 优化前
  const el = document.getElementById('test');
  el.style.borderLeft = '1px';
  el.style.borderRight = '2px';
  el.style.padding = '5px';

  // 优化后,一次性修改样式，这样可以将三次重排减少到一次重排
  const el = document.getElementById('test');
  el.style.cssText += '; border-left: 1px ;border-right: 2px; padding: 5px;'

2.当我们要批量修改DOM节点的时候，我们可以将DOM节点隐藏掉，然后进行一系列的修改操作，之后再将其设置为可见，这样就可以最多只进行两次重排。具体的方法如下：

  // 未优化前
  const ele = document.getElementById('test');
  // 一系列dom修改操作

  // 优化方案一，将要修改的节点设置为不显示，之后对它进行修改，修改完成后再显示该节点，从而只需要两次重排
  const ele = document.getElementById('test');
  ele.style.display = 'none';
  // 一系列dom修改操作
  ele.style.display = 'block';

  // 优化方案二，首先创建一个文档片段(documentFragment),然后对该片段进行修改，之后将文档片段插入到文档中,只有最后将文档片段插入文档的时候会引起重排，因此只会触发一次重排。。
  const fragment = document.createDocumentFragment();
  const ele = document.getElementById('test');
  // 一系列dom修改操作
  ele.appendChild(fragment);

3.使用事件委托：事件委托就是将目标节点的事件移到父节点来处理，由于浏览器冒泡的特点，当目标节点触发了该事件的时候，父节点也会触发该事件。因此，由父节点来负责监听和处理该事件。

那么，它的优点在哪里呢？假设你有一个列表，里面每一个列表项都需要绑定相同的事件，而这个列表可能会频繁的插入和删除。如果按照平常的方法，你只能给每一个列表项都绑定一个事件处理器，并且，每当插入新的列表项的时候，你也需要为新的列表项注册新的事件处理器。这样的话，如果列表项很大的话，就会导致有特别多的事件处理器，造成极大的性能问题。而通过事件委托，我们只需要在列表项的父节点监听这个事件，由它来统一处理就可以了。这样，对于新增的列表项也不需要做额外的处理。而且事件委托的用法其实也很简单：

function handleClick(target) {
  // 点击列表项的处理事件
}
function delegate (e) {
  // 判断目标对象是否为列表项
  if (e.target.nodeName === 'LI') {
    handleClick(e.target);
  }
}
const parent = document.getElementById('parent');
parent.addEventListener('click', delegate);

위 내용은 JavaScript 성능 최적화 방법 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!