JavaScript에서 배경 작업을 예약하는 방법

JavaScript는 한 번에 하나의 작업 만 수행 할 수있는 차단 언어로, 장기 실행 스크립트가 브라우저를 응답하지 않도록 할 수 있습니다. 그러나 사용자 경험에 직접 영향을 미치지 않으면 서 덜 중요한 배경 작업을 실행할 수 있습니다.

는 브라우저가 유휴 상태 일 때 의 기능과 유사 할 때 불필요한 작업을 예약 할 수있는 API입니다. 브라우저가 유휴 상태가 아닌 경우에도 작업이 설정된 시간 범위 내에서 실행되도록 시간 초과 옵션과 함께 사용할 수 있습니다.
는 브라우저 지원이 제한된 실험적 기능이며 예측할 수없는 시간을 수행하거나 약속 작업을 해결하는 데 적합하지 않습니다. 지원되지 않는 브라우저 또는 DOM에 직접 액세스 해야하는 작업의 경우 웹 작업자 또는
• 와 같은 대안을 사용할 수 있습니다. requestIdleCallback requestAnimationFrame JavaScript의 다른 모든 것을 잊어 버리면 항상 이것을 기억하십시오. 마법의 처리 마법사가 브라우저 작업을한다고 상상해보십시오. HTML 렌더링, 메뉴 명령에 응답, 화면의 그리기, 마우스 클릭 처리 또는 JavaScript 기능 실행에 관계 없이이 모든 것은 단일 스프라이트로 처리됩니다. 우리 대부분과 마찬가지로 엘프는 한 번에 한 가지만 할 수 있습니다. 우리가 엘프들에게 많은 작업을 던지면 큰 할 일 목록에 추가되어 순서대로 처리됩니다. 스프라이트가 스크립트 태그가 발생하거나 JavaScript 함수를 실행해야 할 때 다른 모든 것은 중지됩니다. 추가 이벤트 또는 렌더링이 처리되기 직전에 코드 (필요한 경우)가 다운로드 및 실행됩니다. 스크립트는 무엇이든 할 수 있기 때문에 필요합니다. 더 많은 코드를로드하고, 각 DOM 요소를 삭제하고, 다른 URL로 리디렉션하는 등. 둘 이상의 스프라이트가 있더라도 첫 번째 스프라이트가 코드를 처리 할 때 다른 스프라이트가 작동을 중단해야합니다. 이것은 차단입니다. 그렇기 때문에 장기 실행 스크립트로 인해 브라우저가 응답하지 않습니다. 코드가 위젯 및 이벤트 처리기를 초기화하기 때문에 일반적으로 JavaScript가 가능한 빨리 실행되기를 원합니다. 그러나 다음과 같은 사용자 경험에 직접 영향을 미치지 않는 덜 중요한 백엔드 작업이 있습니다.
  레코드 분석 데이터
  • 소셜 네트워크로 데이터를 보내십시오 (또는 57 "공유"버튼 추가 프리 페치 내용 전처리 또는 사전 렌더링 html
  이는 시간이 지남에 대한 작업이 아니지만 페이지를 응답하기 위해서는 사용자가 컨텐츠를 스크롤하거나 상호 작용할 때 실행되지 않아야합니다. 한 가지 옵션은 웹 작업자를 사용하는 것입니다. 웹 워커는 별도의 스레드에서 동시에 코드를 실행할 수 있습니다. 이것은 프리 페치 및 처리를위한 훌륭한 선택이지만 DOM의 직접 액세스 또는 업데이트를 허용하지 않습니다. 자신의 스크립트에서는 이것을 피할 수 있지만 Google 웹 로그 분석과 같은 타사 스크립트에는 필요하지 않다고 보장 할 수는 없습니다. 또 다른 가능성은 , 예를 들어
  • 입니다. 브라우저는 즉시 실행 된 다른 작업이 완료된 후
  함수를 실행합니다. 실제로, 그것은 할 일 목록의 맨 아래에 배치됩니다. 불행히도, 처리 요구 사항에 관계없이 기능을 호출합니다.

  는 브라우저 호흡의 순간 동안 비 필수 백엔드 작업을 예약하도록 설계된 새로운 API입니다. setTimeout를 상기시켜줍니다. setTimeout(doSomething, 1);는 다음 리피트하기 전에 애니메이션을 업데이트하기 위해 함수를 호출합니다. 에 대한 자세한 내용은 다음과 같이 읽을 수 있습니다. 우리는 그것이 doSomething() :

  처럼 지원하는지 여부를 확인할 수 있습니다.

  는 예를 들어 시간 초과 (밀리 초)를 사용하여 옵션 객체 매개 변수를 지정할 수도 있습니다. requestIdleCallback 이렇게하면 브라우저가 유휴 상태인지 여부에 관계없이 기능이 처음 3 초 안에 호출되도록합니다. 함수를 한 번만 호출하고 다음 속성으로 마감일 객체를 전달하십시오.

  - 옵션 타임 아웃 트리거가 true로 설정된 경우 true requestIdleCallback로 설정 requestAnimationFrame - 실행 파일의 나머지 밀리 초를 반환하는 함수 requestAnimationFrame 귀하의 작업에는 50 밀리 초 이하의 실행 시간이 할당됩니다. 이 한도를 초과하는 작업을 중지하지는 않지만 추가 처리를 예약하기 위해 다시

  를 호출하는 것이 좋습니다. 여러 작업을 순서대로 수행하는 간단한 예제를 작성하겠습니다. 작업은 기능 참조로 배열에 저장됩니다.

  에서 수행해서는 안되는 동작? requestIdleCallback Paul Lewis 가이 주제에 대한 블로그 게시물에서 지적한 것처럼,

  에서 수행하는 작업은 작은 조각으로 나뉩니다. 예측할 수없는 실행 시간 (예 :

  if ('requestIdleCallback' in window) {
    // requestIdleCallback 受支持
    requestIdleCallback(backgroundTask);
  } else {
    // 不支持 - 执行其他操作
    setTimeout(backgroundTask1, 1);
    setTimeout(backgroundTask2, 1);
    setTimeout(backgroundTask3, 1);
  }

  로그인 후 복사

  로그인 후 복사
  콜백을 사용하여 가장 잘 수행되는 DOM 운영 등)이있는 것은 아무것도 작동하지 않습니다. 더 이상 시간이 남아 있지 않더라도 유휴 콜백이 완료된 직후 콜백이 실행되므로 약속을 해결 (또는 거부)해야합니다.

  <<> 브라우저 지원 <🎜 🎜> requestIdleCallback <<>는 실험적 특징이며 사양이 여전히 변경되고 있으므로 API 변경을 할 때 놀라지 마십시오. Chrome 47에서 지원됩니다… 이것은 2015 년 말까지 제공되어야합니다. 오페라도 곧이 기능을 얻을 수 있습니다. Microsoft와 Mozilla는 모두 API 사용을 고려하고 있으며 유망한 것 같습니다. 애플은 평소와 같이 뉴스가 없다. 오늘 시도해 보려면 가장 좋은 방법은 Chrome Canary (전자만큼 좋지는 않지만 최신 쿨 기능을 가지고있는 Chrome의 업데이트 된 버전)를 사용하는 것입니다. Paul Lewis (위에서 언급 한)는 간단한

  shim을 만듭니다. 이것은 API에 대한 설명을 구현하지만 브라우저 유휴 감지 동작을 시뮬레이션 할 수있는 폴리 필드는 아닙니다. 위의 예와 같이

  를 사용하는 방법을 사용하지만 객체 감지 및 코드 포킹없이 API를 사용하려는 경우 좋은 옵션입니다. 오늘날 지원이 제한되어 있지만 requestIdleCallback는 웹 성능을 극대화하는 데 도움이되는 흥미로운 도구 일 수 있습니다. 그러나 당신은 어떻게 생각하십니까? 아래의 의견 섹션에서 귀하의 생각을 듣고 싶습니다. requestIdleCallback JavaScript (FAQ)의 백엔드 작업 예약시 FAQ JavaScript의 배경 작업 API는 무엇입니까? setTimeout JavaScript의 배경 작업 API는 기본 스레드가 유휴 상태이더라도 배경에서 실행되는 작업을 예약 할 수있는 강력한 도구입니다. 이 API는 메인 스레드를 차단하지 않고 이러한 작업을 수행 할 수없고 잠재적으로 사용자 경험이 나빠질 수 있기 때문에 많은 컴퓨팅 또는 네트워크 요청이 필요한 작업에 특히 적합합니다. 백엔드 작업 API는 최신 브라우저에서 제공하는 더 큰 웹 API의 일부이며 기존 <🎜 🎜> 또는 requestIdleCallback 메소드보다 백엔드 작업을 처리하는보다 효율적이고 성능 지향적 인 방법을 제공합니다.

  배경 작업 api는 <🎜

  및 <🎜 🎜>와 어떻게 다릅니 까?

  <🎜 🎜>

  및

  기능은 JavaScript의 전통적인 방법으로 특정 지연 후 또는 정기적 인 간격으로 작업을 예약하는 데 사용됩니다. 그러나 이러한 접근법은 특히 성능 측면에서 몇 가지 한계가 있습니다. 그들은 메인 스레드에서 실행되므로 완료하는 데 너무 오래 걸리면 다른 작업을 차단할 수 있으며 사용자 경험이 나빠질 수 있습니다. 반면에, 백그라운드 작업 API는 기본 스레드와 별개의 백그라운드에서 작업을 실행합니다. 즉, 기본 스레드의 성능에 영향을 미치지 않으면 서보다 집중적 인 작업을 처리 할 수 ​​있습니다. setTimeout 모든 브라우저에서 백그라운드 작업 API를 사용할 수 있습니까? setInterval 백엔드 작업 API는 최신 브라우저에서 제공하는 웹 API에 비교적 새로 추가되었으므로 모든 브라우저에서 지원되지 않을 수 있습니다. 프로젝트에서 API를 사용할 계획이라면 항상 사용하려는 API의 현재 지원 수준을 확인하는 것이 가장 좋습니다. 같은 웹 사이트는 다른 브라우저에서 다양한 API의 지원 수준에 대한 최신 정보를 제공 할 수 있습니다.

  배경 작업 API를 사용하여 백그라운드에서 실행되는 작업을 예약하는 방법은 무엇입니까?

  배경 작업 API를 사용하여 작업을 예약하려면

  메소드를 사용할 수 있습니다. 이 메소드는 콜백 함수를 첫 번째 매개 변수로 사용하며 브라우저가 유휴 상태 일 때 실행됩니다. 기본 예는 다음과 같습니다.

  requestIdleCallback 예정된 배경 작업을 취소하는 방법은 무엇입니까?

  메소드를 사용하여 예약 된 배경 작업을 취소 해야하는 경우

  if ('requestIdleCallback' in window) {
    // requestIdleCallback 受支持
    requestIdleCallback(backgroundTask);
  } else {
    // 不支持 - 执行其他操作
    setTimeout(backgroundTask1, 1);
    setTimeout(backgroundTask2, 1);
    setTimeout(backgroundTask3, 1);
  }

  로그인 후 복사

  로그인 후 복사
  메소드를 사용할 수 있습니다. 이 메소드는 ID를

  에 의해 매개 변수로 반환합니다. 예는 다음과 같습니다.

  requestIdleCallback에서 타임 아웃 옵션의 사용은 무엇입니까? cancelIdleCallback requestIdleCallback의 시간 초과 옵션은 최대 시간을 지정합니다 (밀리 초) 브라우저는 유휴 상태가 아니더라도 콜백을 실행하기 전에 대기해야합니다. 배경 작업이 특정 기간 내에 실행 해야하는 경우 유용합니다.

  배경 작업에서 오류를 처리하는 방법은 무엇입니까?

  requestIdleCallback(backgroundTask, { timeout: 3000 });

  로그인 후 복사
  백그라운드 작업의 오류 처리 배경 작업 API를 사용하여 예정된 작업 API는 다른 JavaScript 코드의 오류를 처리하는 것과 유사합니다. 시도/캐치 블록을 사용하여 작업 실행 중에 발생하는 오류를 포착 할 수 있습니다. 예는 다음과 같습니다.

  node.js에서 백그라운드 작업 API를 사용할 수 있습니까? requestIdleCallback 백엔드 작업 API는 최신 브라우저에서 제공하는 웹 API의 일부이므로 기본적으로 node.js에서 사용할 수 없습니다. 그러나 Node.js에서 작업자 스레드 또는 자식 프로세스 사용과 같은 배경 작업을 실행하는 다른 방법이 있습니다.

  Promise 또는 Async/Await과 함께 배경 작업 API를 사용할 수 있습니까?

  배경 작업 API는 약속을 반환하지 않으므로 Async/Await과 함께 직접 사용할 수 없습니다. 그러나 비동기 컨텍스트에서 사용해야하는 경우 약속으로 requestIdleCallback 메소드를 랩핑 할 수 있습니다. 예는 다음과 같습니다.

  백엔드 작업 API의 일부 사용 사례는 무엇입니까?

  배경 작업 API는 기본 스레드를 차단하지 않고도 이러한 작업을 실행할 수 있으므로 많은 계산 또는 네트워크 요청이 필요한 작업에 유용합니다. 사용 사례의 일부 예에는 API의 데이터를 가져오고 처리하거나 복잡한 계산 수행 또는 사용자 상호 작용에 따라 UI 업데이트가 포함될 수 있습니다.

위 내용은 JavaScript에서 배경 작업을 예약하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!