브라우저가 다른 성능 결과 인 Smashing Magazine을 생성하는 이유
나는 Debugbear의 Matt Zeunert와 대화를 나누고 있었고, 그 과정에서 그는이 일을 부적절하게 언급했습니다. 단단한 모드 브라우저가 리소스를 가져오고 우선 순위를 정하는 방법을 설명 할 때. 나는 그가 무슨 말을하는지 알았지 만 궁극적으로 물어봐야했던 것처럼 고개를 끄덕였다. 도대체는 “꽉”모드는 무엇입니까?
내가 돌아온 것은 두 개의 유물이었다. 그중 하나는 Akamai 웹 공연 전문가 Robin Marx의 다음과 같은 비디오입니다.
다른 아티팩트는 2015 년 Patrick Meenan이 원래 게시 한 Google 문서이지만 최근 2023 년 11 월에 다소 업데이트되었습니다. Patrick의 블로그는 2014 년부터 비활성화되어 있으므로 검토 할 Google 문서에 대한 링크를 드러냅니다.
그것이 내가 가진 전부이며 웹에서 웹에서 찾을 수있는 것은 웹 작동 방식에 큰 영향을 미치는 Tight Mode라는이 제품에 대해 찾을 수있는 것입니다. Robin은 그의 프레젠테이션에서 정보가 부족하다는 것을 인정했으며, 그의 대화에서 1 인칭 연구의 양은 주목할 만하고 다른 브라우저가 다른 우선 순위를 가진 다른 자원을 어떻게 다른 자원을 가져 오는지 설명하고 설명하기 때문에 전화 할 가치가 있습니다. 주제에 대한 자료가 부족하다는 점을 감안할 때, 나는 Robin의 연구와 Patrick의 업데이트 된 기사에서 빼앗아 갈 수있는 것을 공유하기로 결정했습니다.
두 단계 중 첫 번째입니다
Patrick의 원래 출판 날짜가 2015 년에 떨어지고 있다는 사실은 우리 가이 시점에서 대략 10 년 된 것에 대해 이야기하고 있다는 사실에 놀라운 일이 아닙니다. 출판물에 대한 2023 업데이트는 이미 “웹 시절”에서는 이미 상당히 오래되었지만, 그것을 찾아 보려고 할 때는 여전히 타이트한 모드는 없습니다.
그렇다면 단단한 모드를 어떻게 정의합니까? 이것이 Patrick이 설명하는 방식입니다.
“크롬은 자원을 2 단계로로드합니다. “타이트 모드”는 초기 단계 및 제약 조건입니다 [sic] 신체가 문서에 부착 될 때까지 우선 순위가 낮은 리소스를로드합니다 (본질적으로 머리의 스크립트가 실행 된 후).”
– Patrick Meenan
그래서 우리는 Chrome이 네트워크에서 리소스를 가져 오기 위해 사용하는이 두 부분 프로세스를 가지고 있으며 첫 번째 부분은 “우선 순위가 낮은 리소스”가 아닌 모든 것에 초점을 맞추고 있습니다. 우리는 브라우저에 어떤 리소스를 알리는 방법이 있습니다 우리 스크롤에서 뷰포트에 입력 할 때 자원을 비동기로로드하는 페치 우선 순위 API 및 게으른로드 기술의 형태로 우선 순위가 낮다고 생각합니다. 그러나 Tight Mode에는 먼저로드 할 리소스를 결정하는 자체 방법이 있습니다.
단단한 모드는 리소스를 구별하여 높은 우선 순위와 중간 우선 순위로 표시된 모든 것을 취합니다. 다른 모든 것은 제약을 받고 외부에 남겨져 있으며, 신체가 문서에 단단히 붙어있을 때까지 보면 차단 스크립트가 실행되었음을 알 수 있습니다. 그 시점에서 두 번째 로딩 단계에서 우선 순위가 낮은 자원이 문에서 허용됩니다.
그것에 큰 경고가 있지만 우리는 거기에 갈 것입니다. 주목해야 할 중요한 점은 …
크롬과 사파리는 단단한 모드를 시행합니다
예, Chrome과 Safari는 백그라운드에서 작동하는 단단한 모드의 작동 형태를 가지고 있습니다. 마지막 이미지는 Chrome의 단단한 모드를 보여줍니다. Safari의 다음을보고 두 가지를 비교해 봅시다.
그것을 봐! Safari는 Chrome과 마찬가지로 초기 Fetch에서 우선 순위가 높은 리소스를 차별하지만 두 브라우저간에 상당히 다른 로딩 동작을 얻습니다. Safari가 Chrome이 허용하는 중간 우선 순위로 표시된 처음 5 개의 PNG 이미지를 제외하는 방식에 주목하십시오. 다시 말해, Safari는 정확히 동일한 HTML로 작업하더라도 모든 우선 순위가 높은 품목을로드 할 때까지 모든 우선 순위 및 저 우선 순위 자원이 줄을 서서 기다립니다. Chrome이 마지막 이미지에서 볼 수 있듯이 Chrome은 타이트한 모드에서 우선 순위가 높은 리소스를 제외한 마지막 이미지에서 볼 수 있듯이 Safari의 행동이 가장 의미가 있다고 말할 수 있습니다. 우리가 갈 수있는 약간의 톰 풀리가 분명히 있습니다.
이 모든 것에서 Firefox는 어디에 있습니까? 페이지에서 리소스의 우선 순위를 평가할 때는 추가 강화 조치가 필요하지 않습니다. 우리는 이것을 자원을 가져오고로드하기위한 “고전적인”폭포 접근법이라고 생각할 수 있습니다.
크롬과 사파리는 단단한 모드를 다르게 트리거합니다
로빈은 그의 대화에서 하루처럼 이것을 분명히합니다. Chrome과 Safari는 모두 단단한 모드 지지자이지만 다음과 같이 설명 할 수있는 다른 상황에서 트리거됩니다.
| 크롬 | 원정 여행 | |
|---|---|---|
| 단단한 모드가 트리거되었습니다 | JS를 차단하는 동안 |
While blocking JS or CSS anywhere is busy. |
Notice that Chrome only looks at the document when prioritizing resources, and only when it involves JavaScript. Safari, meanwhile, also looks at JavaScript, but CSS as well, and anywhere those things might be located in the document — regardless of whether it’s in the or . That helps explain why Chrome excludes images marked as High priority in Figure 2 from its Tight Mode implementation — it only cares about JavaScript in this context.
So, even if Chrome encounters a script file with fetchpriority="high" 문서 본문에서 파일은 “높은”우선 순위로 간주되지 않으며 나머지 항목 후에로드됩니다. 한편 사파리는 영광입니다 fetchpriority 문서의 어느 곳에서나. 이것은 Chrome이 테이블에 두 개의 스크립트를 남겨 두는 이유를 설명하는 데 도움이되므로 그림 2에서 Safari는 단단한 모드에서로드하는 것처럼 보입니다.
사파리가 그 과정에서 이상한 일을하지 않는다고 말하는 것은 아닙니다. 다음 마크 업이 주어지면 :
… Safari가 두 개의 우선 순위가 낮은 스크립트를 지연시킬 것으로 예상 할 수 있습니다. until the five images in the are downloaded. But that’s not the case. Instead, Safari loads those two scripts during its version of Tight Mode.
Chrome And Safari Exceptions
I mentioned earlier that Low-priority resources are loaded in during the second phase of loading after Tight Mode has been completed. But I also mentioned that there’s a big caveat to that behavior. Let’s touch on that now.
According to Patrick’s article, we know that Tight Mode is “the initial phase and constraints loading lower-priority resources until the body is attached to the document (essentially, after all blocking scripts in the head have been executed).” But there’s a second part to that definition that I left out:
“In tight mode, low-priority resources are only loaded if there are less than two in-flight requests at the time that they are discovered.”
A-ha! So, there is a way for low-priority resources to load in Tight Mode. It’s when there are less than two “in-flight” requests happening when they’re detected.
Wait, what does “in-flight” even mean?
That’s what’s meant by less than two High- or Medium-priority items being requested. Robin demonstrates this by comparing Chrome to Safari under the same conditions, where there are only two High-priority scripts and ten regular images in the mix:
Safari가 가장 간단한 접근 방식이기 때문에 먼저 무엇을하는지 살펴 보겠습니다.
그것에 대해 까다로운 것은 없습니다. 우선 순위가 높은 두 스크립트가 먼저 다운로드되고 10 개의 이미지가 바로 흐릅니다. 이제 크롬을 보자 :
예상대로 우선 순위가 높은 두 개의 우선 스크립트가 먼저로드되었습니다. 그러나 Chrome은 처음 5 개의 이미지를 중간 우선 순위로 결정한 다음 최우선 순위가 낮은 마지막 5 개의 이미지를 제외합니다. 무엇. 그만큼. 도대체.
그 이유는 고귀한 것입니다. Chrome은 아마도 가장 큰 콘텐츠 페인트 (LCP)가 종종 해당 이미지 중 하나가되고 Chrome이 해당 논리의 일부를 자동으로 처리하면 웹이 전체적으로 더 빠르게 진행될 것이기 때문에 처음 5 개의 이미지를로드하려고합니다. 다시 말하지만, 그것은 100% 정확하지 않더라도 고귀한 추론입니다. 그러나 그것은 물이 진흙 투성이이며, 우선 순위가 높은 시민으로 취급되는 중간 및 우선 순위가 낮은 품목을 볼 때 타이트한 모드를 이해하는 것이 훨씬 더 어려워집니다.
Muddier조차도 Chrome 은이 차별 과정에서 최대 두 개의 중간 우선 순위 자원 만 받아 들인 것으로 보입니다. 나머지는 우선 순위가 낮습니다.
그것이 우리가“2 개의 기내 요청 미만”이 의미하는 바입니다. Chrome이 하나 또는 두 개의 항목 만 단단한 모드로 들어가는 것을 본다면 처음 5 개의 비 임계 이미지까지 자동으로 우선 순위를 정합니다. LCP 최적화 노력으로.
사실, 사파리는 비슷한 일을하지만 다른 맥락에서. 기내 요청이 2 개 미만인 경우 우선 순위가 낮은 항목을 수락하는 대신, 단단한 모드에서 중간 및 낮은 우선 순위를 모두 허용하며 문서의 어느 곳에서나 어디에서나 허용됩니다. or not. The exception is any asynchronous or deferred script because, as we saw earlier, those get loaded right away anyway.
How To Manipulate Tight Mode
This might make for a great follow-up article, but this is where I’ll refer you directly to Robin’s video because his first-person research is worth consuming directly. But here’s the gist:
- We have these high-level features that can help influence priority, including resource hints (i.e.,
preload그리고preconnect), 우선 순위 API를 가져 오십시오그리고 게으른로드 기술. - 우리는 표시 할 수 있습니다
fetchpriority="high"그리고fetchpriority="low"항목에.
- 사용
fetchpriority="high"단단한 모드에 포함 된 소스에서 항목을 낮출 수있는 한 가지 방법입니다. 사용fetchpriority="low단단한 모드에서 제외 된 소스에서 항목을 더 높이게 할 수있는 한 가지 방법입니다. - Chrome의 경우 이것은 이미지, 비동기/지연된 스크립트 및 스크립트의 바닥에있는 스크립트에서 작동합니다.
. - 사파리의 경우 이미지에서만 작동합니다.
다시, 28:32 마커 주위에 시작하는 전체 이야기에 대한 Robin의 이야기를보십시오.
꽉… 모드입니다
웹 주위에 타이트한 모드에 대한 정보가 거의 없다는 것은 나에게 Bonkers입니다. 나는 Chrome 개발자 나 비슷한 곳에서 이와 같은 것이 어딘가에서 잘 문서화 될 것으로 기대하지만, 우리가 가진 모든 것은 가벼운 Google 문서와 3 개의 주요 브라우저 중 2 개가 리소스를 가져오고 우선 순위를 정하는 방법에 대한 철저한 프리젠 테이션입니다. 게시하거나 찾은 추가 정보가 있는지 알려주십시오. 토론에 포함시키고 싶습니다.
(YK)
Post Comment