MIP 가속 원리


이 문서에서는 MIP 페이지의 가속 원리를 자세히 설명합니다.

신중하게 설계된 JavaScript

비대해진 클라이언트 측 스크립트를 제거하기 위해 MIP 파일은 JavaScript에 크게 의존하는 일부 기능에 대해 사용자 정의 JavaScript를 허용하지 않습니다. 광고, 통계 및 상호 작용 등) MIP는 구현을 위해 MIP 런타임과 호환되는 캡슐화된 구성 요소를 제공합니다.

JavaScript 인용 원칙:

  • 현재 MIP는 사용자가 JavaScript를 사용자 정의하는 것을 허용하지 않으며 보안과 성능을 보장하기 위해 MIP 구성 요소 형태로 도입되어야 합니다.

  • mip-iframe을 참조하여 일부를 소개할 수 있습니다. 풍부한 상호 작용 기능을 통해 성능에 가장 큰 영향을 미치는 document.write를 사용해도 메인 페이지 렌더링에 영향을 미치지 않습니다.

  • MIP 구성 요소는 오픈 소스이므로 개발자가 기능 구성 요소를 사용자 정의할 수 있으며, 프로젝트 다양한 요구 사항에 맞게 다양한 구성 요소를 계속 제공할 예정입니다

모든 정적 리소스는 크기로 표시해야 합니다

페이지 개발 중에 리소스의 너비와 높이가 설정되지 않는 경우가 많습니다. 특히 광고를 사용하거나 호출을 통해 삽입할 경우에는 더욱 그렇습니다. `document.write() . 리소스 크기를 결정할 수 없기 때문에 페이지를 반복적으로 다시 그려야 하는 경우가 많습니다.

이제 MIP에서는 모든 리소스(광고, 사진, 오디오 및 비디오)에 크기를 표시해야 합니다. 리소스가 실제로 로드되면 모든 리소스 크기를 즉시 추론하고 페이지 레이아웃을 계산하는 데 신속하게 사용할 수 있습니다. 잦은 페이지 레이아웃 업데이트로 인해 사용자의 읽기 환경에 영향을 주지 않고 로드 리소스가 원활하게 표시됩니다.

페이지 렌더링을 방지하는 메커니즘은 허용되지 않습니다.

개발자의 모든 사용자 정의 스크립트는 mip-ad, mip-iframe 등과 같은 MIP 태그를 사용하여 MIP에 피드백되어야 합니다. 이러한 방법은 페이지 렌더링과 레이아웃을 차단하지 않습니다. 페이지.

외부 리소스 로딩 제어

MIP 런타임은 효율성을 보장하기 위해 외부 리소스 로딩을 제어하여 사용자가 읽고 싶은 콘텐츠가 최대한 빨리 화면에 나타나도록 합니다.

대화형 기능의 캡슐화

MIP는 웹 페이지가 사용자에게 직접적이고 간단한 경험을 제공할 수 있다고 주장하지만 이것이 MIP가 페이지의 생동감과 관심을 제한한다는 의미는 아닙니다. MIP 런타임은 고도로 최적화된 캡슐화된 JavaScript를 제공하므로 개발자는 복잡한 대화형 기능을 구현하는 데 너무 많은 노력을 투자할 필요가 없습니다.

인라인 CSS

css만 로드되도록 허용하면 페이지 렌더링이 방지됩니다. 인라인 CSS는 클라이언트 오버헤드를 줄일 수 있습니다.

GPU 가속 애니메이션만 허용됩니다.

MIP에서는 애니메이션 효과를 완성하는 데 변환과 불투명도만 사용할 수 있습니다. GPU에서 애니메이션을 실행할 수 있는 경우 렌더링 레이어 병합만 트리거됩니다.

MIP 캐시

MIP의 또 다른 중요한 의미는 웹마스터가 웹 페이지 속도를 높이는 데 도움이 될 수 있다는 것입니다. Baidu는 Baidu CDN에서 MIP 웹 페이지를 캐시합니다. MIP 캐싱은 MIP 표준을 준수하는 한 사용할 수 있습니다.

개방적이고 지속적으로 업데이트됩니다.

MIP는 오픈 소스 프로젝트이며 모든 표준은 고정되어 있지 않습니다. 우리는 계속해서 최적화할 것이며 여러분의 참여를 기대하겠습니다!