百度MIP移動頁面加速——不只是CDN

MIP 是用 CDN 做加速的么?準確答案是:是,但不只是。
MIP 全稱 Mobile Instant Pages,移動網頁加速器,是百度提出的頁面加速解決方案。MIP 從前端渲染和頁面網絡傳輸兩方面進行優化,杜絕頁面渲染中的阻塞問題,提升頁面展現速度。

頁面渲染耗時與 MIP 加速原則

頁面渲染耗時主要分為以下三類:DNS 解析耗時,網絡傳輸耗時,瀏覽器渲染重繪耗時
MIP 加速的基本原理就是減少各個步驟的耗時:

為減少 DNS 解析,MIP-Cache 將靜態文件以相對路徑儲存在百度 CDN 中;
為減少網絡傳輸耗時,MIP-JS 控制靜態資源的按需加載,MIP-Cache 系統優先從 CDN 讀取文件;
為減少瀏覽器渲染重繪耗時,MIP-HTML 對<img>,<video>等造成瀏覽器重繪的標簽進行了封裝控制。 下文將對 MIP 的三大組成部分 MIP-HTML, MIP-JS, MIP-Cache 進行詳細介紹。

MIP-HTML 組件加速原理

MIP-HTML 規范中有兩類標簽,一類是 HTML 常規標簽,另一類是 MIP 標簽(MIP-HTML 組件)。在 MIP 規范中,類似<img>等會引起瀏覽器重繪的標簽應被替換成<mip-img>, 利用懶加載和按需加載提高頁面的渲染速度。

MIP-HTML 除了對瀏覽器原生標簽的封裝,還有一類自定義交互組件。比如圖片輪播組件,表單組件,分享組件等。這些組件依賴 MIP-JS 和自身腳本即可運行,不需要引用第三方庫。引用 MIP 自定義組件的而好處在于,頁面開發時無需引入 jquery,bootstrap 等體積龐大的庫,減少頁面發送的網絡請求及傳輸時間,加快網頁的傳輸和渲染。

MIP-JS 加速原理

MIP-JS 是 MIP 的運行環境,接管了 MIP 頁的生命周期,腳本加載及頁面渲染。具體來說,MIP-JS 包括基礎類引入(AMD),內置組件加載(mip-img),外置組件管理(組件 css 插入)以及組件布局管理(解決布局兼容性問題)。

MIP-JS 選擇使用精簡的基礎類,盡量減少網絡傳輸時間;內置優秀的組件,在不阻塞瀏覽器渲染的前提下提供最好的交互體驗;提供組件布局管理,預先為組件設定寬高,避免組件加載后的瀏覽器重布局。

MIP-Cache 緩存加速原理

MIP-Cache 通過 CDN(Content Delivery Network) 服務器緩存靜態 MIP 頁面。當用戶訪問 MIP 頁面時,請求首先會發到 CDN 服務器,如果頁面存在,則從 CDN 直接返回靜態頁面;如果頁面不存在,則會請求第三方服務器。返回的頁面的同時加入 MIP-Cache。

在使用 MIP-Cache 時,MIP 頁面引用的所有靜態文件和外部資源都會被替換成相對地址,緩存到 CDN 上。盡可能減少了 DNS 解析時間和網絡請求時間。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/535939.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/535939.shtml
英文地址,請注明出處:http://en.pswp.cn/news/535939.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

JAVA知識基礎(二):基本語法

本篇主要介紹JAVA的運算符、循環結構以及條件結構。 1、JAVA運算符 計算機的最基本用途之一就是執行數學運算&#xff0c;作為一門計算機語言的Java也提供了一套豐富的運算符來操縱變量。 JAVA運算符可以大致概括為幾類&#xff1a;算術運算符、關系運算符、位運算符、邏輯運…

JAVA知識基礎(三):修飾符

JAVA中根據修飾對象的不同可以分為類修飾符、方法修飾符、變量修飾符三類&#xff0c;其中每種修飾符又可以單獨分成兩類&#xff1a;訪問修飾符和非訪問修飾符。為了便于理解&#xff0c;本文以訪問和非訪問的角度展開。 1、訪問修飾符 訪問修飾符有四個&#xff1a;public、…

百度推出新技術 MIP,網頁加載更快,廣告呢?

MIP 項目在 2016 年年初正式發布&#xff0c;幫助移動頁面加速&#xff08;原理&#xff09;。內測數據表明&#xff0c;MIP 頁面在 1s 內加載完成。現在已經有十多家網站加入 MIP 項目&#xff0c;有更多的網站正在加入中。在MIP收到的反饋中&#xff0c;大部分都提到了廣告的…

JAVA知識基礎(四):深入理解static關鍵字

1、static存在的主要意義 static的主要意義是在于創建獨立于具體對象的域變量或者方法。以致于即使沒有創建對象&#xff0c;也能使用屬性和調用方法&#xff01; static關鍵字還有一個比較關鍵的作用就是 用來形成靜態代碼塊以優化程序性能。static塊可以置于類中的任何地方…

MIP改造常見問題二十問

在MIP推出后&#xff0c;我們收到了很多站長的疑問和顧慮。我們將所有疑問和顧慮歸納為以下二十個問題&#xff0c;希望對大家理解 MIP 有幫助。 1、MIP 化后對其他搜索引擎抓取收錄以及 SEO 的影響如何&#xff1f; 答&#xff1a;在原頁面 MIP 化&#xff0c;不會影響其它搜…

Nginx(零):背景

我們今天開始對Nginx的學習&#xff0c;本來是打算第一篇就是基礎知識介紹的&#xff0c;但是我感覺在學習一個新知識之前總應該知道&#xff0c;我們為什么要學習它&#xff0c;學習它的意義何在吧&#xff01;所以我加了背景這一篇作為Nginx開始學習的標志。 1、Nginx的誕生…

Nginx(一):概念基礎

上一篇我們介紹了Nginx的背景&#xff0c;現在我們就要開始正式對Nginx的學習了。本篇我們將對Nginx的基本定義進行介紹&#xff0c;了解Nginx到底是什么。然后我們會介紹Nginx最基本的三個概念&#xff1a;反向代理、負載均衡、動靜分離。 1、Nginx是什么 Nginx(“engine x”…

MIP 官方發布 v1穩定版本

近期&#xff0c;MIP 官方發布了 MIP 系列文件的全新 v1 版本&#xff0c;建議開發者盡快完成升級。 一、 我是開發者&#xff0c;如何升級版本&#xff1f; 對于 MIP 頁面開發者來說&#xff0c;* 只需替換線上引用的 MIP 文件為 v1 版本 *&#xff0c;就可以完成升級。所有…

百度MIP頁規范詳解 —— canonical標簽

百度 MIP 的規范要求必須添加強制性標簽 canonical&#xff0c;不然 MIP 校驗工具 會報錯&#xff1a; 強制性標簽 <link rel"/^(canonical)$/"> 缺失或錯誤 這個標簽怎么寫&#xff1f;又是干什么用的呢&#xff1f; ** 簡單來說&#xff0c;canonical 標簽…

Nginx(二):安裝、配置、常用命令

1、Nginx在Linux操作系統中的安裝 這里簡單介紹一下nginx的安裝了 1.1、前期準備 在安裝nginx之前我們要提前準擺好它的編譯工具以及庫文件&#xff1a;zlib、poenssl。 還有有讓Nginx支持Rewrite功能的PCRE. 安裝的途徑有很多可以參考&#xff1a;https://www.runoob.com/lin…

JAVA知識基礎(五):深入理解final關鍵字

1.final 關鍵字 final關鍵字主要用在三個地方&#xff1a;變量、方法、類。 final修飾變量&#xff1a;final修飾一個類時&#xff0c;表明這個類不能被繼承。final修飾方法&#xff1a;final修飾方法&#xff0c;方法不可以重寫&#xff0c;但是可以被子類訪問 【前提&#…

CMS模板應用調研問卷

截止目前&#xff0c;已經有數十家網站與我們合作&#xff0c;進行了MIP化改造&#xff0c;在搜索結果頁也能看到“閃電標”的出現。除了改造方面的問題&#xff0c;MIP項目組被問到最多的就是&#xff1a;我用了wordpress&#xff0c;我用了織夢cms&#xff0c;怎么改MIP呢&am…

Nginx(三):反向代理

我們本篇將通過兩個實例進行對Nginx反向代理的學習。 1、概念基礎 反向代理&#xff0c;其實客戶端對代理是無感知的&#xff0c;因為客戶端不需要任何配置就是可以訪問。我們只需要將請求發送到反向代理服務器上&#xff0c;有反向代理服務器去選擇目標服務器獲取數據后&…

VIP站長大會(北京站)常見問題解答

功能支持問題 1. react 能否和 MIP 結合使用&#xff0c;如果暫時不能以后是否有考慮&#xff1f;是否會和其他 JavaScript 框架 (比如 Angular ) 結合 ? 目前暫無計劃支持。 2. MIP 頁是否支持自定義 cookie? 實現 登錄、統計、廣告等功能 ? <mip-cookie>組件正在…

Nginx(四):負載均衡Load balancing

1、概念基礎 Load balancing&#xff0c;即負載均衡&#xff0c;是一種計算機技術&#xff0c;用來在多個計算機&#xff08;計算機集群&#xff09;、網絡連接、CPU、磁盤驅動器或其他資源中分配負載&#xff0c;以達到最優化資源使用、最大化吞吐率、最小化響應時間、同時避…

JAVA知識基礎(六):抽象

1.概述 抽象類、抽象方法以及接口&#xff0c;這三個知識點是每個程序員必備的基礎&#xff0c;無論是在實際編程的時候&#xff0c;還是在面試的時候&#xff0c;都會出現這類問題&#xff0c;面試官很可能就會問你&#xff0c;interface和abstract的區別 當父類知道子類應該…

MIP開發教程(三) 使用MIP-CLI工具調試組件

一 . 在 mip-extensions 倉庫中創建新的組件二 . 預覽調試組件 三 . 在 MIP 頁中引用自己編寫的 MIP 組件 四 . 組件提交到 GitHub 倉庫時需要進行校驗 站長開發的非通用組件&#xff0c;使用 組件上線平臺 提交&#xff0c;上線后代碼位于 GitHub/mip-extension-platform 倉…

JAVA知識基礎(七):封裝

1.概述 封裝&#xff08;Encapsulation&#xff09;是指一種將抽象性函式接口的實現細節部分包裝、隱藏起來的方法。 封裝可以被認為是一個保護屏障&#xff0c;防止該類的代碼和數據被外部類定義的代碼隨機訪問。 要訪問該類的代碼和數據&#xff0c;必須通過嚴格的接口控制…

MIP開發教程(二) 使用MIP-CLI工具調試MIP網頁

初始化 MIP 配置 新建一個 MIP 網頁 編寫 MIP 網頁代碼 校驗 MIP 網頁 調試 MIP 網頁 1. 初始化 MIP 配置 首先在html目錄下進行初始化 MIP 配置&#xff1a; $ mip init 此時會創建mip.config文件&#xff1a; 2. 新建一個 MIP 網頁 在mip-project/html文件夾下輸入如下…

Nginx(五):動靜分離

1、概念基礎 Nginx動靜分離簡單來說就是把動態請求和靜態請求分開&#xff0c;不能理解成只是單純的把動態頁面靜態頁面的物理分離。嚴格意義上說應該是動態請求跟靜態請求的分開&#xff0c;可以理解成使用Nginx處理靜態頁面&#xff0c;Tomcat處理動態頁面。動靜分離從目前實…