background_javascript 팁에서 JavaScript 예약 작업을 실행하는 방법

JavaScript에 대해 알고 있는 모든 것을 잊어버리더라도 결코 잊지 못할 것입니다. JavaScript는 차단하고 있습니다.

브라우저의 정상적인 작동을 담당하는 마법 엘프가 브라우저에 살고 있다고 상상해 보세요. HTML 렌더링, 메뉴 명령 응답, 화면 렌더링, 마우스 클릭 처리, JavaScript 기능 실행 등 모든 것이 단일 엘프에 의해 처리됩니다. 너무 바빠서 한 번에 한 가지 일만 처리할 수 있습니다. 동시에 여러 가지 작업을 주면 긴 할 일 목록을 만들어 순서대로 완료합니다.

사람들은 구성요소와 이벤트 핸들러를 초기화하는 JavaScript가 최대한 빨리 실행되기를 원하는 경우가 많습니다. 그러나 다음과 같이 덜 중요한 일부 백그라운드 작업은 사용자 경험에 직접적인 영향을 미치지 않습니다.

기록통계

소셜 네트워크로 데이터 보내기(또는 '공유' 버튼 추가)

사전 로드된 콘텐츠

HTML 사전 처리 또는 사전 렌더링

타이밍이 엄격하지는 않지만 페이지의 응답성을 유지하기 위해 사용자가 페이지를 스크롤하거나 콘텐츠와 상호 작용할 때까지 실행되지 않습니다.

한 가지 옵션은 독립적인 스레드에서 동시에 코드를 실행할 수 있는 Web Workers입니다. 사전 로드 및 사전 처리에 적합하지만 DOM에 직접 액세스하거나 업데이트할 수는 없습니다. 자신의 코드로 이 문제를 해결할 수 있지만 Google Analytics와 같은 제3자 스크립트에 이 문제가 전혀 필요하지 않을 것이라는 보장은 없습니다.

또 다른 옵션은 setTimeout(doSomething, 1);과 같은 setTimeout입니다. 다른 즉각적인 작업이 실행되면 브라우저는 doSomething() 함수를 실행합니다. 실제로는 할 일 목록의 맨 아래로 밀렸습니다. 불행하게도 이 함수는 처리 요구 사항에 관계없이 호출됩니다.

#requestIdleCallback

requestIdleCallback은 브라우저가 잠시 휴식을 취할 때 덜 중요한 백그라운드 예약 작업을 수행하는 데 사용되는 새로운 API입니다. 이는 필연적으로 다음 다시 그리기 전에 애니메이션을 업데이트하는 함수를 실행하는 requestAnimationFrame을 연상시킵니다. 자세한 내용을 알고 싶다면 여기를 클릭하세요. requestAnimationFrame을 사용하여 간단한 애니메이션을 만드세요.

requestIdleCallback 기능 모니터링:

if ('requestIdleCallback' in window) {
 // requestIdleCallback supported
 requestIdleCallback(backgroundTask);
}
else {
 // no support - do something else
 setTimeout(backgroundTask1, 1);
 setTimeout(backgroundTask2, 1);
 setTimeout(backgroundTask3, 1);
}

시간 초과와 같은 구성 매개변수 개체를 지정할 수도 있습니다.

requestIdleCallback(backgroundTask, { timeout: 3000; }); 

브라우저가 유휴 상태인지 여부에 관계없이 3초 이내에 함수가 호출되는지 확인하세요.

최종 객체가 다음 매개변수를 전달하면 requestIdleCallback은 콜백을 한 번만 실행합니다.

didTimeout - 선택적 시간 초과가 발생하면 true로 설정
timeRemaining()—— 함수는 작업을 실행하는 데 남은 밀리초 수를 반환합니다.
timeRemaining()은 작업 실행에 최대 50ms를 할당합니다. 이 제한을 초과하면 작업이 중지되지 않습니다. 그러나 추가 처리를 준비하려면 requestIdleCallback을 다시 호출하는 것이 가장 좋습니다.

여러 작업을 순차적으로 실행하는 간단한 예제를 만들어 보겠습니다. 작업의 함수 참조는 배열에 저장됩니다:

//待执行的函数数组
var task = [
  background1,
  background2,
  background3
];
if ('requestIdleCallback' in window) {
 //支持 requestIdleCallback
 requestIdleCallback(backgroundTask);
}
else {
 //不支持 —— 立刻执行所有任务
 while (task.length) {
  setTimeout(task.shift(), 1);
 }
}
//requestIdleCallback 回调函数
function backgroundTask(deadline) {
 //如果存在，执行下一个任务
 while (deadline.timeRemaining() > 0 && task.length > 0) {
  task.shift()();
 }
 //需要的话，安排进一步任务
 if (task.length > 0) {
  requestIdleCallback(backgroundTask);
 }
}

#requestIdleCallback 사이에 하면 안되는 것은 무엇인가요?

Paul Lewis는 자신의 기사에서 requestIdleCallback으로 수행되는 작업을 작은 조각으로 나누어야 한다고 언급했습니다. 예측할 수 없는 시간 상황(DOM 운영 등, requestAnimationFrame 콜백을 사용하는 것이 더 좋음)에는 적합하지 않습니다. 또한 Promise를 해결(또는 거부)할 때 주의하세요. 더 이상 남은 시간이 없더라도 유휴 콜백이 완료된 후 즉시 콜백 함수가 실행됩니다.

#requestIdleCallback 브라우저 지원

requestIdleCallback은 실험적인 기능이므로 사양이 여전히 불안정하며 API 변경이 발생하는 것은 놀라운 일이 아닙니다. Chrome 47이 지원됩니다. 2015년 말 이전에 사용 가능해야 합니다. 오페라도 따라야 한다. Microsoft와 Mozilla는 API가 Promise를 지원해야 하는지 여부를 고려하고 있습니다. 늘 그렇듯 애플은 비관적이다.

Paul Lewis(위에서 언급)는 브라우저의 유휴 모니터링 동작을 시뮬레이션할 수 있지만 폴리필(shim과 폴리필의 차이)이 아닌 간단한 requestIdleCallback shim을 작성했습니다.

requestIdleCallback 심 코드는 다음과 같습니다.

/*!
 * Copyright Google Inc. All rights reserved.
 *
 * Licensed under the Apache License, Version . (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing
 * permissions and limitations under the License.
 */
/*
 * @see https://developers.google.com/web/updates///using-requestidlecallback
 */
window.requestIdleCallback = window.requestIdleCallback ||
 function (cb) {
  var start = Date.now();
  return setTimeout(function () {
   cb({
    didTimeout: false,
    timeRemaining: function () {
     return Math.max(, - (Date.now() - start));
    }
   });
  }, );
 }
window.cancelIdleCallback = window.cancelIdleCallback ||
 function (id) {
  clearTimeout(id);
 }

ps: 예약된 작업을 실행하는 방법

1. GPEDIT.MSC를 실행하세요

2. 컴퓨터 구성을 선택하세요

--- Windows 설정
> ​​​​—지역 전략
​​​​​—-사용자 권한 할당
오른쪽의 네트워크에서 이 컴퓨터에 액세스
를 두 번 클릭합니다. 목록에 필요한 사용자 이름을 추가합니다.

3. --- 보안 설정

---안전한 선택

서버 운영자가 작업을 예약하도록 허용
을 켜세요.

4.------지역 전략

--- 일괄 작업으로 로그인

목록에 필요한 사용자 이름을 추가합니다.

5.------지역 전략

--- 위임 시 컴퓨터와 사용자를 신뢰할 수 있도록 허용

목록에 필요한 사용자 이름을 추가합니다.
관리자 사용자인 것이 가장 좋습니다.

작업 계획을 시작할 수 없는 경우 프롬프트 코드: 0X80041315

해결책: 두 가지 가능성이 있습니다. 하나는 시스템의 "작업 스케줄러" 서비스가 시작되지 않은 것입니다. 작업 중에 "services.msc"를 입력하여 "작업 스케줄러" 서비스가 "이미"로 설정되어 있는지 확인할 수 있습니다. "비활성화"인 경우 두 번 클릭하여 시작 유형을 "자동"으로 변경하고 예약된 작업을 재설정하여 실행하세요.

현재 계정이 자동 로그인으로 설정되어 있고 로그인 비밀번호가 비어 있는 경우 XP Professional Edition에서는 "gpedit.msc"를 실행하여 작업 계획이 제때에 실행되지 않을 수도 있습니다. 그룹 정책 편집: "컴퓨터" 구성→Windows 설정→보안 설정→로컬 컴퓨터 정책→보안 옵션"을 확장하고 오른쪽의 "계정: 암호가 비어 있는 로컬 계정은 콘솔 로그인만 허용" 항목을 두 번 클릭한 다음 "를 선택합니다. 비활성화됨' 팝업 대화 상자에 표시됩니다.