What is MIP
MIP (Mobile Instant Pages - Mobile Web Accelerator) is a set of open technical standards applied to mobile web pages. By providing MIP-HTML specifications, MIP-JS operating environment and MIP-Cache page caching system, mobile web pages are accelerated.
MIP is mainly organized into three parts:
- MIP HTML
- MIP JS
- MIP Cache
MIP HTML has formulated a new specification based on the basic tags in HTML. By restricting the use of some basic tags or extending functions, HTML can display richer content; MIP JS can ensure the rapid rendering of MIP HTML pages; MIP Cache is used for Implement caching of MIP pages to further improve page performance.
1. MIP HTML
MIP HTML is extended based on the basic HTML specification. The following is a simple MIP HTML code example:
<!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 There are two types of tags in the HTML specification, one is HTML regular tags, and the other is MIP tags. MIP tags are also called MIP HTML components. Using them instead of regular HTML tags can greatly improve page performance.
For example, the mip-img tag allows images to be loaded only when needed, reducing page rendering time and saving user traffic.
Read
2. MIP JS
MIP JS is used to manage the loading of resources and supports the use of the above MIP tags, thereby ensuring fast rendering of the page and improving all aspects of the page. performance.
MIP JS The most significant advantage is that it can load all external resources asynchronously, and the entire page rendering process will not be blocked by certain elements in the page, thereby improving the page rendering speed.
In addition, MIP JS also covers technical features such as sandboxing of all iframes, calculating page element layout in advance before resources are loaded, and disabling slow css selectors.
3. MIP Cache
MIP Cache is a proxy-based CDN (Content Delivery Network) caching system that can be used to cache all pages referenced by Baidu or from MIP page clicked by Baidu related services. When a user accesses a MIP page, the request will first be sent to the CDN server. If the page exists, it will be returned from the CDN. If the page does not exist on the CDN, a third-party server will be requested. At the same time, the MIP Cache server will cache the page on the CDN. When using MIP Cache, all static files and external resources required by the MIP page will be cached on the CDN (except videos), and the resource links in the page will be converted into relative addresses, which greatly improves the page rendering speed. . Each MIP page will be bound to a verification system. When the page is rendered, this verifier can directly output page errors in the browser console; and as the code logic changes, it can demonstrate its impact on page performance and user experience. Impact.
Read
