MIP란?
MIP(Mobile Instant Pages - Mobile Web Accelerator)는 모바일 웹페이지에 적용되는 개방형 기술 표준 집합입니다. MIP-HTML 사양, MIP-JS 운영 환경 및 MIP-Cache 페이지 캐싱 시스템을 제공하여 모바일 웹 페이지를 가속화합니다.
MIP는 주로 세 부분으로 구성됩니다.
- MIP HTML
- MIP JS
- MIP Cache
MIP HTML은 일부 기본 태그의 사용 제한이나 기능을 통해 HTML의 기본 태그를 기반으로 새로운 사양을 공식화했습니다. 태그 확장을 통해 HTML은 더욱 풍부한 콘텐츠를 표시할 수 있습니다. MIP JS는 MIP HTML 페이지의 빠른 렌더링을 보장하여 MIP 페이지를 캐시함으로써 페이지 성능을 더욱 향상시킵니다.
1. MIP HTML
MIP HTML은 기본 HTML 사양을 기반으로 확장되었습니다. 다음은 간단한 MIP HTML 코드 예입니다.
<!DOCTYPE html>
<html mip>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css">
<link rel="canonical" href="https://www.mipengine.org/">
<!-- noscript 标签是为了在不支持script的环境下快速的展现 mip 页面，推荐使用 -->
<noscript>
<style mip-officialrelease>
body {
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
</head>
<body>Hello World!</body>
<script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script>
</html>MIP HTML 사양에는 두 가지 유형의 태그가 있으며 하나는 HTML 일반입니다. 태그이고 다른 하나는 MIP 태그입니다. MIP 태그는 MIP HTML 구성 요소라고도 하며 일반 HTML 태그 대신 이를 사용하면 페이지 성능이 크게 향상됩니다.
예를 들어 mip-img 태그를 사용하면 필요할 때만 이미지를 로드할 수 있으므로 페이지 렌더링 시간이 줄어들고 사용자 트래픽이 절약됩니다.
자세한 내용은
2. MIP JS
MIP JS는 리소스 로딩을 관리하고 위의 MIP 태그 사용을 지원하여 페이지의 빠른 렌더링을 보장하고 페이지의 모든 측면의 성능을 향상시킵니다.
MIP JS 가장 큰 장점은 모든 외부 리소스를 비동기적으로 로드할 수 있으며 전체 페이지 렌더링 프로세스가 페이지의 특정 요소에 의해 차단되지 않아 페이지 렌더링 속도가 향상된다는 것입니다.
또한 MIP JS에서는 모든 iframe의 샌드박싱, 리소스가 로드되기 전에 페이지 요소 레이아웃을 미리 계산하고 느린 CSS 선택기를 비활성화하는 등의 기술적 기능도 다룹니다.
3. MIP Cache
MIP Cache는 Baidu 관련 페이지에서 참조하거나 Baidu 관련 서비스에서 클릭한 모든 MIP 페이지를 캐시하는 데 사용할 수 있는 프록시 기반 CDN(Content Delivery Network) 캐싱 시스템입니다. 사용자가 MIP 페이지에 액세스하면 요청이 먼저 CDN 서버로 전송됩니다. 페이지가 있으면 CDN에서 페이지가 반환됩니다. CDN에 없으면 타사 서버가 요청됩니다. . 동시에 MIP 캐시 서버는 CDN의 페이지를 캐시합니다. MIP 캐시를 사용하면 MIP 페이지에 필요한 모든 정적 파일과 외부 리소스가 CDN에 캐시되고(비디오 제외) 페이지의 리소스 링크가 상대 주소로 변환되어 페이지 렌더링 속도가 크게 향상됩니다. 각 MIP 페이지는 확인 시스템에 바인딩됩니다. 페이지가 렌더링되면 이 확인자는 브라우저 콘솔에 페이지 오류를 직접 출력할 수 있으며, 코드 논리가 변경되면 페이지 성능과 사용자 경험에 미치는 영향을 보여줄 수 있습니다.
자세한 내용은
