스크립트가 "preload"/ "modulepreload"로로드되면 어떻게됩니까?

Sep 06 2020

모듈 작업자의 web.dev에 대한 매우 흥미로운 기사가 있습니다. https://web.dev/module-workers/ 작업자를 미리로드 된 모듈로로드 할 수있는 기능이 있습니다. 즉, 작업자를 미리로드 할 수 있고 심지어 미리 구문 분석하고 종속성을 미리 가져올 수 있습니다 (https://web.dev/module-workers/#preload-workers-with-modulepreload).

내가 맞다면 Web-Workers뿐만 아니라 미리로드 모듈로로드 할 수 있습니다. 이것은 모든 js 스크립트, 글꼴, css 등에 적용됩니다.

<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">

이 말 하는 귀찮게 나에게 많이이 문서에서는 :

미리로드 된 모듈은 주 스레드와 모듈 작업자 모두에서 사용할 수도 있습니다. 이는 두 컨텍스트 모두에서 가져온 모듈에 유용합니다. 또는 모듈이 메인 스레드 또는 워커에서 사용되는지 여부를 미리 알 수없는 경우에 유용합니다.

이것은 모듈 로딩이 파싱 된 코드도 캐시한다는 것을 의미합니까? 즉, import 문을 사용하여 포함하면 메인 스레드와 워커에서 사용되는 모듈이 다시 파싱되지 않음을 의미합니까?

그러나 이것은 우리가 어떤 영역 (메인 스레드, 작업자 스레드)에서 모듈을 가져올 때마다 독립적으로 가져 오기를 실행 한 다음 나중에는 자체 영역에서 파싱 된 캐시 된 인스턴스를 참조합니다.

저자가 정확히 무엇을 설명하려고하는지 정말 혼란 스럽습니다. 그리고 그것을 어떻게 구현할 수 있습니까?

관련 기사: https://developers.google.com/web/updates/2017/12/modulepreload#does_preloading_modules_help_performance

답변

Kaiido Sep 12 2020 at 10:28

이 기사가 그 아이디어를 어디서 얻었는지 확실하지 않지만 사양을 읽으면

미리로드 된 모듈은 주 스레드와 모듈 작업자 모두에서 사용할 수도 있습니다.

사양을 확인하면 링크 알고리즘에 대한 modulepreload링크 된 리소스 알고리즘을 가져와 처리하는 것은 5 단계 에서 수행합니다.

보자 설정 개체 할 link요소의 노드 문서의 관련 설정 객체 .

이 설정의 목적은 다음에서 전달되는 11 단계 로 modulepreload 모듈 스크립트 그래프 인출 자체가 호출 알고리즘, 단일 모듈 스크립트를 인출 과 의 하위 링크 페치 - 궁극적 또한 호출 단일 모듈 스크립트 페치 - 같은 연결 프로그램을 설정 개체 .

이 설정 객체 는 모듈 맵 이있는 곳 이며이 모듈 맵 은 동일한 모듈 (캐시)을 여러 번 요청하지 않도록 단일 모듈 스크립트 를 가져 오는 데 사용됩니다 .

하자 moduleMap가 될 모듈 맵 설정 개체 의 모듈지도 .

moduleMap [url] 이 "fetching"인 경우 해당 항목의 값이 변경 될 때까지 병렬로 기다린 다음 네트워킹 작업 소스에서 작업을 대기열에 추가하여 다음 단계를 계속 실행합니다.

경우 moduleMap [URL]가 존재 비동기 적으로이 알고리즘을 완료 moduleMap [URL] , 및 반환.

이 알고리즘 은 모듈 스크립트를 생성 하지만 아직 실행하지는 않는다는 점에 유의해야합니다 .

따라서 modulepreload링크가 링크 된 리소스를 가져올뿐만 아니라 모든 하위 리소스를 가져오고 이러한 각 리소스에 대한 모듈 스크립트 를 준비 하는 것을 볼 수 있습니다. 이는이 기사가 달리 주장하는 내용과 많이 일치합니다.

그러나 이것은 문제가있는 인용문에 관한 결론을 내리기에 충분하지 않습니다.

우리는 링크가 사용 했던 동일한 문서의 객체 설정 을 전달 하는 워커 알고리즘을 실행하는 워커 알고리즘을 호출 할 전용 Workers 생성자 에 대한 사양을 확인해야합니다. 이번에는 " 외부 설정 "이라고합니다.modulepreload

이 작업의 8 단계 에서 작업자 알고리즘을 실행하면 다음을 요청합니다.

영역 실행 컨텍스트 및 외부 설정 을 사용하여 작업자 환경 설정 개체 를 설정 하고 내부 설정 이 결과가되도록합니다.

그리고 작업자 환경 설정 개체 알고리즘을 설정 하면 문서의 외부 설정 만 사용 하여 inherited origin내부 값과 새 설정 개체 의 top-level origin속성을 설정합니다 .

이 새로운 설정은 객체 의 모듈지도 입니다 그 중 하나 전역 범위 "입니다, 처음에 비어 ".

작업자의 환경 설정 개체 는 외부 설정 에서 모듈 맵 을 상속하지 않습니다 .

노동자가 자신이 전화 할 때 그래서 하나의 모듈 스크립트를 가져 와 의 후손 및 링크 가져 오기 의 일부로 알고리즘을 모듈 노동자 스크립트 그래프를 가져 , 하나 개의 모듈이지도 는 확인합니다 것은 그 자체입니다 내부 설정 의 모듈지도 , 거기 링크가 생성 한 모듈 스크립트를 찾을 수 없습니다 modulepreload.

따라서 스펙을 읽음으로써 modulepreload링크는 모듈 작업자에게만 도움 이된다고 말하고 싶습니다 . HTTP 캐시 는 이미 그래프의 모든 파일을 다운로드했을 것입니다. 이러한 모듈을 Worker에서만 사용 하려는 경우 문서 쪽에서 모듈 스크립트 를 준비하는 것은 실제로 역효과 prefetch를 낼 수 있으며, 간단한 링크가 더 효과적 일 수 있습니다. 단 하나의 링크를 만들어야한다는 점을 제외하면 하위 자원.

Dolly Sep 16 2020 at 23:59

Kaiido 자세한 답변 감사합니다. 매우 도움이됩니다.

나는 또한이 문제가있는 인용문에 대해 많은 것을 검색 한 다음 그들이 내용을 업데이트 할 수 있다면 web.dev 에서 문제를 시작했습니다 . 이슈를 추적 할 수 있습니다.

JS Engine의 가장 무거운 작업 중 하나는 코드를 구문 분석 / 컴파일 ( What is Parse / Compile )하는 것이며 웹 페이지와 상호 작용하는 시간에 중요한 역할을하며 TTI를 개선 할 수있는 방법이 많습니다. 사용자가 필요로하는 코드 ( 웹팩에 의한 코드 분할 , 청크 등 ..), 축소, 트리 쉐이킹, http-caching , 모듈-작업자 등 ... 그리고 사전로드 를 잊지 마세요.

예압의 실제 정의 :

사전로드를 사용할 수있는 기본 방법은 늦게 발견 된 리소스를 조기에로드하는 것입니다. 대부분의 마크 업 기반 리소스는 브라우저의 프리 로더에 의해 상당히 일찍 발견되지만 모든 리소스가 마크 업 기반은 아닙니다. 일부 리소스는 CSS와 JavaScript에 숨겨져 있으며 브라우저는 이미 상당히 늦을 때까지 리소스가 필요할 것임을 알 수 없습니다. 따라서 대부분의 경우 이러한 리소스는 첫 번째 렌더링, 텍스트 렌더링 또는 페이지의 중요한 부분로드를 지연시킵니다.

요컨대 :

리소스 (준비 + 컴파일)가 필요하다는 것을 알고 있지만 아직 실행하고 싶지 않기 때문에 다운로드하십시오.

앞서 스크립트를 실행하려는 지점에 삽입하면 브라우저는 스크립트를 실행하기 전에 다운로드해야합니다 (참고 : 브라우저는 코드를 실행하기 전에 많은 작업을 수행해야 함). 동안. 그러나 Preload는 이것을 해결합니다.

저자가 나중에 평가하기 위해 링크 rel = "modulepreload"태그를 사용하여 미리로드 된 모듈 (실행하지 않음 + 컴파일 된 바이트 코드가 캐시 됨)을 설명하려고합니다 (재 컴파일은 건너 뛸 수 있음).