현지 스토리지 및 기타 범인에 의한 DOM 차단을 피하는 방법-JS 튜토리얼-php.cn

How to Avoid DOM Blocking by localStorage and Other Culprits 키 포인트

Computing, DOM 업데이트, LocalStorage 또는 IndexedDB 블록을 사용하여 데이터 저장 및 검색과 같은 JavaScript 작업 동기화 DOM 업데이트 및 프론트 엔드 성능에 영향을 미칩니다. 웹 작업자는 장기 실행 프로세스를 처리하는 데 사용될 수 있습니다. 기본 브라우저 응용 프로그램은 배경 스크립트를 시작하고 메시지 이벤트를 사용하여 통신 할 수 있지만 DOM 또는 LocalStorage에 직접 액세스 할 수 없습니다.

하드웨어로드 된 CSS 애니메이션은 자체 레이어로 실행되므로 애니메이션의 부드러움을 향상시키고 대부분의 최신 브라우저에 의해 차단되지 않습니다.

메모리 스토리지는 디스크 기반 스토리지 메커니즘보다 더 빠른 데이터 업데이트를 제공합니다. 메모리 객체를 사용하여 성능을 향상시키고 편리 할 때 데이터를 영구적으로 저장하는 것이 좋습니다.

브라우저 및 Node.js와 같은 실행중인 환경에서 JavaScript 프로그램은 단일 스레드에서 실행됩니다. 브라우저 탭에서 코드가 실행되면 메뉴 명령, 다운로드, 렌더링, 돔 업데이트 및 GIF 애니메이션과 같은 다른 모든 작업 중지됩니다.

사용자는 처리가 작은 블록으로 빠르게 진행되므로 사용자는 거의 알지 못합니다. 예를 들어, 버튼을 클릭하고, 이벤트 던지기, 함수 실행, 계산 수행 및 DOM 업데이트. 완료되면 브라우저는 큐에서 다음 항목을 자유롭게 처리 할 수 있습니다.

JavaScript 코드는 AJAX 요청이있을 때마다 어떤 일이 발생하기를 기다릴 수 없습니다. 따라서 JavaScript Code는 이벤트 및 콜백을 사용하여 작동합니다. 작동이 완료된 후 브라우저 또는 운영 체제 수준 프로세스를 지시하고 결과가 준비된 후 특정 기능을 호출합니다.

다음 예에서 버튼 클릭 이벤트가 발생하면 CSS 클래스에 애니메이션을하는 핸들러 기능이 실행됩니다. 애니메이션이 완료되면 익명 콜백이 클래스를 삭제합니다.

ES2015는 약속을 제공하고, ES2017은 인코딩을 단순화하기 위해 비동기/기다리고 있지만 표면 아래에서 콜백을 사용합니다. 자세한 내용은 "현대 JS의 프로세스 제어"를 참조하십시오.

방해 요인

불행히도, 일부 JavaScript 작업은 항상 다음을 포함하여 동기화됩니다.

계산을 실행하십시오

업데이트 dom LocalStorage 또는 IndexedDB를 사용하여 데이터를 저장하고 검색합니다.

다음 예제는 CSS 애니메이션을 사용하여 움직임과 JavaScript를 사용하여 사지를 흔드는 침입자를 보여줍니다. 오른쪽의 이미지는 기본 애니메이션 GIF입니다. 기본 100,000 SessionStorage 작업을 사용하여 "쓰기"버튼을 클릭하십시오 : [Codepen Sample Link -Codepen Embed Code를 여기에 삽입해야합니다] 이 작업 중에 DOM 업데이트가 차단됩니다. 대부분의 브라우저에서 침입자는 멈추거나 붙어 있습니다. 애니메이션 GIF의 특정 애니메이션이 일시 중지됩니다. 느린 장치는 "스크립트 비 응답"경고를 표시 할 수 있습니다.

이것은 복잡한 예이지만 기본 작업이 프론트 엔드 성능에 어떤 영향을 미치는지 보여줍니다.

웹 작업자

// 单击按钮时引发事件
document.getElementById('clickme').addEventListener('click', handleClick);

// 处理按钮单击事件
function handleClick(e) {

  // 获取要设置动画的元素
  let sprite = document.getElementById('sprite');
  if (!sprite) return;

  // 动画结束时删除“animate”类
  sprite.addEventListener('animationend', () => {
    sprite.classList.remove('animate');
  });

  // 添加“animate”类
  sprite.classList.add('animate');
}

로그인 후 복사

<🎜 🎜> 장기적인 프로세스를위한 한 가지 솔루션은 웹 작업자입니다. 이를 통해 기본 브라우저 응용 프로그램은 백그라운드 스크립트를 시작하고 메시지 이벤트를 사용하여 통신 할 수 있습니다. 예를 들면 :

웹 워커 스크립트 : <🎜 🎜>

// 单击按钮时引发事件
document.getElementById('clickme').addEventListener('click', handleClick);

// 处理按钮单击事件
function handleClick(e) {

  // 获取要设置动画的元素
  let sprite = document.getElementById('sprite');
  if (!sprite) return;

  // 动画结束时删除“animate”类
  sprite.addEventListener('animationend', () => {
    sprite.classList.remove('animate');
  });

  // 添加“animate”类
  sprite.classList.add('animate');
}

로그인 후 복사

근로자는 복잡한 스레드 작업을 시뮬레이션하기 위해 다른 작업자를 생성 할 수도 있습니다. 그러나 작업자의 기능은 의도적으로 제한되어 있으며 작업자

는 DOM 또는 LocalStorage에 직접 액세스 할 수 없습니다 (그렇게하면 실제로는 다중 스레드 JavaScript가 브라우저의 안정성을 방해합니다). 따라서 모든 메시지는 문자열로 전송되므로 JSON 인코딩 된 객체를 통과 할 수 있지만 DOM 노드를 전달할 수는 없습니다.

작업자는 특정 창 속성, WebSocket 및 IndexDB에 액세스 할 수 있지만 위에 표시된 예제를 개선하지는 않습니다. 대부분의 경우 작업자는 광선 추적, 이미지 처리, 비트 코인 채굴 등과 같은 장기 계산에 사용됩니다.

// main.js
// 是否支持 Web Workers？
if (!window.Worker) return;

// 启动 Web Worker 脚本
let myWorker = new Worker('myworker.js');

// 从 myWorker 接收消息
myWorker.onmessage = e => {
  console.log('myworker sent:', e.data);
}

// 向 myWorker 发送消息
myWorker.postMessage('hello');

로그인 후 복사

<..> (node.js는 웹 작업자와 유사하지만 다른 언어로 작성된 실행 파일을 실행할 수있는 옵션이있는 아동 프로세스를 제공합니다.)

하드웨어 가속도 애니메이션 대부분의 최신 브라우저는 자체 레이어에서 실행되는 하드웨어에 액세스 된 CSS 애니메이션을 차단하지 않습니다. 기본적으로 위의 예는 왼쪽 여백을 변경하여 침입자를 이동시킵니다. 이 속성 및 왼쪽 및 너비와 같은 유사한 속성으로 인해 브라우저는 각 애니메이션 단계에서 전체 문서를 다시 스트림하고 다시 드러내게합니다.

변환 및/또는 불투명도 특성을 사용할 때 동물 효율성이 더 효율적입니다. 이들은 실제로 요소를 별도의 조성층에 넣어 GPU가 개별적으로 애니메이션 할 수 있도록합니다.

"하드웨어 가속"확인란을 클릭하면 애니메이션이 즉시 더 부드럽게됩니다. 이제 다른 SessionStorage Write를 사용해보십시오. JavaScript에 의해 제어되기 때문에 사지 움직임은 여전히 일시 중지됩니다.

메모리 저장소

메모리에서 객체 업데이트는 디스크에 작성된 스토리지 메커니즘을 사용하는 것보다 훨씬 빠릅니다. 위의 예에서 객체 저장 유형을 선택하고 쓰기를 클릭하십시오. 결과는 다르지만 동등한 SessionStorage 작업보다 약 10 배 빠릅니다.

메모리는 휘발성입니다. 탭을 닫거나 탐색을 떠나면 모든 데이터가 손실됩니다. 좋은 트레이드 오프는 메모리 객체를 사용하여 성능을 향상시킨 다음 편리 할 때 데이터를 영구적으로 저장하는 것입니다. 게임 또는 단일 페이지 응용 프로그램에는보다 복잡한 옵션이 필요할 수 있습니다. 예를 들어, 데이터가 저장된 시점 : 일정 시간 동안 사용자 활동 (마우스, 터치 또는 키보드 이벤트) 없음 백그라운드에서 게임 일시 정지 또는 응용 프로그램 태그 (페이지 가시성 API 참조) 자연스럽게 일시 정지가 있습니다. 선수 사망, 레벨 완료, 홈 화면 사이의 이동 등

웹 성능

웹 성능은 뜨거운 주제입니다. 개발자는 브라우저 제한에 의해 덜 제한적이며 사용자는 빠른 운영 체제와 같은 응용 프로그램 성능을 기대합니다.

가능한 한 거의 처리하지 않으면 DOM은 눈에 띄게 차단되지 않습니다. 다행히도 장기 실행 작업을 피할 수없는 몇 가지 옵션이 있습니다.

사용자와 고객은 속도 최적화를 눈치 채지 못할 수도 있지만 응용 프로그램이 속도가 느려질 때 항상 불평합니다!

DOM 차단에 대한 FAQS (FAQ)

DOM 차단이란 무엇이며 왜 문제입니까? DOM 차단은 브라우저가 스크립트가로드를 완료하기를 기다리고 있기 때문에 웹 페이지를 렌더링 할 수 없음을 의미합니다. 이렇게하면 웹 페이지의로드 속도가 크게 줄어들어 사용자 경험이 나빠집니다. 브라우저는 HTML 태그를 구문 분석하여 DOM 트리를 구축해야합니다. 이 과정에서 스크립트가 발생하면 계속 중지하고 실행해야합니다. 스크립트가 DOM 트리 구조를 변경할 수 있고 브라우저는 최신 뷰를 갖도록해야하기 때문입니다. DOM 차단을 피하는 방법은 무엇입니까?

DOM 차단을 피하는 방법에는 여러 가지가 있습니다. 가장 효과적인 방법 중 하나는 비동기로드 스크립트를 사용하는 것입니다. 즉, 스크립트가 백그라운드에로드되는 반면 나머지 페이지는 계속로드됩니다. 또 다른 접근법은 스크립트를 연기하는 것입니다. 즉, HTML 문서가 완전히 구문 분석 된 후에 만 실행됩니다. 마지막으로, 스크립트를 HTML 문서의 하단으로 이동하여 마지막로드 된 컨텐츠가되도록 할 수도 있습니다.

동기 스크립트와 비동기 스크립트의 차이점은 무엇입니까?

동기 스크립트는 완전히로드 및 실행 될 때까지 DOM 구성을 차단합니다. 즉, 스크립트가 오랫동안로드되면 전체 웹 페이지를 지연시킵니다. 반면, 비동기 스크립트는 DOM 구성을 차단하지 않습니다. 배경에로드하고 DOM이 완전히 구축되지 않더라도 준비되면 실행할 수 있습니다.

스크립트 태그의"연기 "속성은 무엇입니까?

스크립트 태그의 "지연"속성은 HTML 문서가 완전히 구문 분석 된 후 스크립트를 실행해야 함을 나타내는 데 사용됩니다. 이는 스크립트가 DOM 구성을 차단하지 않으므로 웹 페이지로드 시간을 가속화합니다. 그러나 이것은 또한 DOM을 구성 할 때 스크립트가 준비되지 않을 수 있음을 의미하므로 DOM 구조를 변경하지 않는 스크립트에서만 사용할 수 있습니다.

스크립트를 HTML 문서의 맨 아래로 옮기는 것이 어떻게 도움이됩니까?

HTML 문서의 하단으로 스크립트를 이동하면 마지막으로로드 된 컨텐츠를 보장합니다. 이것은 스크립트가로드를 완료하기를 기다리지 않고 나머지 웹 페이지를 렌더링 할 수 있음을 의미합니다. 그러나이 방법은 DOM을 구성 할 때 준비되지 않을 수 있기 때문에 DOM 구조를 변경하지 않는 스크립트와 함께 만 사용할 수 있습니다.

스크립트 태그의"비동기 "속성은 무엇입니까?

스크립트 태그의 "비동기"속성은 스크립트에 비동기로로드되어야 함을 나타내는 데 사용됩니다. 즉, 스크립트가 백그라운드에로드되는 반면 웹 페이지의 나머지 부분은 계속로드됩니다. DOM이 완전히 구축되지 않더라도 준비되면 즉시 스크립트를 실행할 수 있습니다. 이것은 웹 페이지 로딩 시간을 크게 향상시킬 수 있지만 DOM 구조를 변경하지 않는 스크립트에만 사용할 수 있습니다.