종결 사망(Qwik 어떻게 해결)

우리의 강연에서 우리는 세계에 Qwik을 소개했다.그 게시물에서 우리는 많은 세부 사항을 훑어보았고, 우리는 잠시 후에 상세하게 토론하겠다고 약속했다.Qwik과 그 배후의 디자인 결정에 대해 논의하기 전에 우리(업계)가 어떻게 오늘날의 수준에 도달했는지 이해하는 것이 중요하다.현재 이 세대의 틀에는 어떤 가설이 그들이 제때에 상호작용 점수를 얻는 것을 방해합니까?현재 세대의 틀의 한계를 이해함으로써 Qwik의 디자인 결정은 언뜻 보면 놀랄 수 있는 이유를 더 잘 이해할 수 있다.

우리 얘기 좀 하자.

TTI(또는 상호 작용) 측정은 탐색에서 URL 및 페이지로 이동하는 시간을 측정합니다.응답 사이트의 모양새를 만들려면 SSR(서버측 렌더링)을 사용해야 합니다.그 사고방식은 사이트를 사용자에게 신속하게 보여주고 무엇을 눌러야 할지 결정할 때 프로그램은 자동으로 모든 탐지기를 시작하고 설치할 것이다.따라서 TTI는 실제로 프레임에 DOM 탐지기를 설치하는 데 걸리는 시간을 가늠하는 지표다.

위의 그림에서 우리는 안내에서 상호작용까지의 시간에 대해 흥미를 느낀다.인터랙티브에서 시작하여 뒤로 나아가 틀이 목표를 실현하는 데 필요한 모든 것을 이해하자.

프레임워크는 탐지기의 위치를 찾아야 한다.그러나 이 프레임워크는 이런 정보를 쉽게 얻지 못한다.탐지기는 템플릿에 있습니다 described.

사실 나는 embedded가 described.보다 더 좋다고 생각한다. 정보는 삽입된 것이다. 왜냐하면 프레임워크가 쉽게 얻을 수 없기 때문이다.프레임워크는 템플릿을 실행해야만 탐지기 클립에 도착할 수 있습니다.

템플릿을 실행하려면 템플릿을 다운로드해야 합니다.다운로드한 템플릿에는 더 많은 코드를 다운로드해야 하는 가져오기가 포함되어 있습니다.템플릿의 하위 템플릿을 다운로드해야 합니다.

우리는 템플릿이 있지만 청중을 찾지 못했다.템플릿 실행 상태와 템플릿 실행 상태를 병합합니다.상태가 없으면 프레임워크에서 템플릿을 실행할 수 없습니다. 이것은 탐지기에 접근할 수 없다는 것을 의미합니다.

클라이언트에서 다운로드하거나 상태를 계산해야 합니다.계산은 통상적으로 더 많은 코드를 다운로드해야만 상태를 계산할 수 있다는 것을 의미한다.

모든 코드를 다운로드하면 프레임워크는 상태를 계산하고 상태를 템플릿에 입력한 다음 탐지기의 클립을 가져와 DOM에 이 클립을 설치할 수 있다.
상호작용 상태로 들어가려면 많은 일을 해야 한다.현재의 모든 세대의 틀은 이렇게 일한다.마지막으로 대부분의 프로그램을 다운로드하고 실행해야 프레임워크가 탐지기를 찾아 설치할 수 있다는 뜻이다.

클로즈업에 대해서 얘기를 해볼게요.

위에서 기술한 핵심 문제는 코드를 다운로드하려면 대량의 대역폭이 필요하고 프레임워크는 대량의 CPU 시간이 있어야만 감청기를 찾을 수 있으며 이렇게 하면 페이지가 상호작용할 수 있다는 것이다.그러나 우리는 클립이 코드와 데이터에서 닫힌 것을 잊어버렸다.이것은 매우 편리한 속성이며, 또한 우리가 클로즈업을 좋아하는 이유이기도 하다.그러나 이것은 모든 클립 데이터와 코드가 클립을 만들 때 사용할 수 있어야 하며, 클립을 실행할 때 게으름 피우지 않고 사용할 수 있어야 한다는 것을 의미한다.
JSX 시스템에도 같은 템플릿 문제가 있습니다(다른 템플릿을 보십시오):

import {addToCart} from './cart';

function MyBuyButton(props) {
  const [cost] = useState(...);
  return (
    Price: {cost}
    <button onclick={() => addToCart()}>
      Add to cart
    </button>
  );
}

우리가 필요로 하는 상호작용은 청중이 어디에 있는지 아는 것이다.위의 예에서 이러한 정보는 템플릿과 얽혀서 페이지의 모든 템플릿을 다운로드하고 실행하지 않으면 추출하기 어렵다.
한 페이지에 수백 개의 사건 탐지기가 있을 수 있지만, 그 중 절대 다수는 영원히 실행되지 않을 것이다.왜 우리는 코드를 다운로드하고 가능한 내용을 위해 클립을 만드는 데 시간을 들여야 합니까? 필요할 때 클립을 만들지 않고?

문을 닫고 수레를 만들다

폐쇄는 값싼 것이고 곳곳에 있다.그런데 얘네가 싸요?네, 아니에요. 네, 실행할 때 아주 싸게 만들 수 있어요.그러나 그것들은 코드를 닫았기 때문에 다른 방식보다 더 빨리 다운로드해야 하기 때문에 매우 비싸다.그리고 나무가 흔들리는 것을 막을 수 있기 때문에 매우 비싸다.그래서 우리는'폐관자수'라고 부르는 경우가 있다.클립은 DOM에 설치되어 있으며, 영원히 실행되지 않을 가능성이 높은 코드를 닫는 데 사용된다.
페이지의 구매 버튼은 매우 복잡해서 클릭이 매우 적다.그러나 바이어 단추는 클로즈업이 이렇게 하기 때문에 그와 관련된 모든 코드를 다운로드하도록 강요한다.

Qwik로 탐지기 HTML 서열화

위에서, 나는 폐쇄가 숨겨진 비용이 있을 수 있다는 것을 지적하려고 했다.이런 비용은 코드를 급히 다운로드하는 형식으로 나온다.이 때문에 클로즈업은 만들기 어려워서 사용자와 인터랙티브 사이트 사이에 존재한다.
Qwik은 가능한 한 탐지기 생성을 지연시키기를 원합니다.Qwik은 이러한 목표를 달성하기 위해 다음과 같은 임차인을 보유하고 있다.

모니터는 HTML로 서열화할 수 있어야 한다.

사용자가 감청기와 상호작용을 한 후에야 감청기가 코드를 닫는다.

이 작업이 실제로 어떻게 이루어지는지 살펴보겠습니다.

<button on:click=”MyComponent_click”>Click me!</button>

그런 다음 파일에서: MyComponent_click.ts

export default function () {
  alert('Clicked');
}

위에 코드 좀 봐.SSR은 렌더링 중에 탐지기의 위치를 발견했습니다.SSR은 이 정보를 버리지 않고 탐색기를 HTML로 서열화합니다.현재 클라이언트는 모니터가 어디에 있는지 확인하기 위해 템플릿을 재방송할 필요가 없다.대신 Qwik은 다음과 같은 방법을 사용합니다.

페이지에 qwikloader.js를 설치합니다.1KB 미만이며 실행 시간은 1ms 미만입니다.매우 작기 때문에 서버의 왕복 시간을 절약할 수 있도록 HTML에 삽입하는 것이 가장 좋다.

qwikloader.js는 전역 이벤트 처리 프로그램을 등록하고 거품 기능을 이용하여 모든 사건을 한 번에 정탐할 수 있다.addEventListener 더 적은 수의 전화 = > 더 빠른 상호 작용 시간

결과:

템플릿을 다운로드하지 않아도 탐지기를 찾을 수 있다.탐지기는 HTML로 속성으로 서열화됩니다.

검색 탐지기는 템플릿을 실행할 필요가 없습니다.

실행 템플릿은 다운로드할 필요가 없습니다.

모든 코드는 현재 타성으로 사용자와 탐지기가 상호작용할 때만 다운로드할 수 있다.

Qwik은 현재 세대 프레임워크의 안내 과정을 단축하고 전역 이벤트 감청기로 대체했다.가장 좋은 점은 프로그램의 크기와 무관하다는 것이다.프로그램이 아무리 크더라도, 그것은 항상 탐지기 하나뿐이다.다운로드할 부트 코드는 HTML에서 모든 정보가 서열화되어 있으므로 응용 프로그램의 복잡성과 관계없이 일정합니다.
한마디로 Qwik의 배후 이념은 회복할 수 있다는 것이다.서버가 중단된 곳에서부터 시작하여 클라이언트에서 1KB만 실행하면 됩니다.응용 프로그램이 아무리 거대하고 복잡해져도 이 코드들은 변하지 않을 것이다.앞으로 몇 주 동안 Qwik이 어떻게 독립적으로 회복, 관리 상태와 구성 요소를 보여주는지 알아보겠습니다. 그러니 계속 주목해 주십시오!
우리는 Qwik의 미래와 그것이 시작된 용례에 대해 매우 흥분했다.

입어보세요StackBlitz

성광대로github.com/builderio/qwik

계속 따라와.

대화Discord

연결builder.io