移動(dòng)Web加速技術(shù)

優(yōu)化的技術(shù)建議包括但不限于:資源加載
1、將同類型資源在服務(wù)器端壓縮合并，減少網(wǎng)絡(luò)請(qǐng)求次數(shù)和資源體積。
2、引用通用資源，充分利用瀏覽器緩存。
3、使用CDN加速，將用戶的請(qǐng)求定向到最合適的緩存服務(wù)器上。
4、非首屏圖片懶加載，將網(wǎng)絡(luò)帶寬留給首屏請(qǐng)求。
頁(yè)面渲染：
1、將CSS樣式寫在頭部樣式表中，減少由CSS文件網(wǎng)絡(luò)請(qǐng)求造成的渲染阻塞。
2、將JavaScript放到文檔末尾，或使用async方式加載，避免JS執(zhí)行阻塞渲染。
3、對(duì)非文字元素(如圖片，視頻)指定寬高，避免瀏覽器重排重繪。
希望廣大站長(zhǎng)持續(xù)關(guān)注頁(yè)面加載速度體驗(yàn)。視網(wǎng)站自身情況，參照建議自行優(yōu)化頁(yè)面，或使用通用的加速解決方案(如MIP)，不斷優(yōu)化頁(yè)面首屏加載時(shí)間。
為什么說(shuō)會(huì)影響國(guó)外的站點(diǎn)呢?
首先，國(guó)內(nèi)的服務(wù)器線路對(duì)美國(guó)，香港，韓國(guó)等國(guó)外地區(qū)的線路不一致，訪問(wèn)速度肯定是有問(wèn)題的，用戶訪問(wèn)的時(shí)候肯定會(huì)稍微延遲幾秒，但是對(duì)于百度蜘蛛來(lái)說(shuō)，他已經(jīng)開了CDN了，不管是哪里的機(jī)器，只要你不是太爛的機(jī)房開的服務(wù)器，一般都不影響百度蜘蛛的抓取速度。
對(duì)于用戶訪問(wèn)來(lái)說(shuō)呢?這個(gè)肯定是有問(wèn)題了，那么百度此次的算法，肯定也會(huì)考慮到這部分的原因來(lái)打壓，所以，近期，國(guó)內(nèi)比較出名的站點(diǎn)，做擦邊的或者有優(yōu)質(zhì)內(nèi)容的，建議還是備案，或者無(wú)法備案的建議開通CDN，來(lái)提供訪問(wèn)速度，增加用戶的體驗(yàn)性。!

其實(shí)不僅是百度，各大搜索引擎對(duì)于移動(dòng)網(wǎng)頁(yè)的打開速度都越來(lái)越重視，并且將加載速度作為衡量網(wǎng)頁(yè)移動(dòng)友好度的重要標(biāo)準(zhǔn)。因此，再次建議站長(zhǎng)重視移動(dòng)端體驗(yàn)，打造用戶與站點(diǎn)共贏的網(wǎng)絡(luò)生態(tài)。為推進(jìn)Web技術(shù)的發(fā)展，Brilliant Open Web 團(tuán)隊(duì)特推出每月一期的《移動(dòng)Web加速技術(shù)月報(bào)》，該月報(bào)將整理較流行的移動(dòng)Web加速技術(shù)，并跟進(jìn)各項(xiàng)技術(shù)的進(jìn)展和發(fā)展方向，以期幫助開發(fā)者了解或選用相關(guān)的技術(shù)，把握技術(shù)發(fā)展趨勢(shì)。歡迎關(guān)注【OpenWeb開發(fā)者】公眾號(hào)并回復(fù)“加群”，一起探討相關(guān)技術(shù)。

一、前言
移動(dòng)設(shè)備已經(jīng)成為當(dāng)下使用頻率最高的電子設(shè)備，而移動(dòng)Web依然是移動(dòng)設(shè)備中使用頻率最高的應(yīng)用場(chǎng)景。
站點(diǎn)頁(yè)面性能提升可以使得用戶瀏覽站點(diǎn)時(shí)的體驗(yàn)得到良好改善，作為其中一條技術(shù)分支，移動(dòng)Web加速技術(shù)的方法和技術(shù)方案在近幾年得到了不斷發(fā)展。無(wú)論是內(nèi)容分發(fā)平臺(tái)、瀏覽器提供商、網(wǎng)絡(luò)提供商還是Web站點(diǎn)，都在通過(guò)各種各樣的移動(dòng)Web加速技術(shù)為用戶提供更良好的頁(yè)面瀏覽體驗(yàn)。
二、移動(dòng)Web加速技術(shù)有哪些方向？
開始的前言內(nèi)容中我們已經(jīng)提到，參與移動(dòng)Web生態(tài)的幾個(gè)重要角色分別是內(nèi)容分發(fā)平臺(tái)、瀏覽器提供商和網(wǎng)絡(luò)提供商以及Web站點(diǎn)。每個(gè)角色都在自己所擅長(zhǎng)的領(lǐng)域通過(guò)技術(shù)創(chuàng)新來(lái)給用戶提供更快速的移動(dòng)Web體驗(yàn)。因此，移動(dòng)Web加速的幾個(gè)技術(shù)方向也和幾個(gè)重要參與者的角色職能密不可分。
幾個(gè)重要的技術(shù)方向分別是：
1. 頁(yè)面加載與緩存
移動(dòng)Web加速的其中一個(gè)重要技術(shù)方向是針對(duì)頁(yè)面加載和緩存相關(guān)的加速技術(shù)。
在此方向中，頁(yè)面分發(fā)端、瀏覽器和移動(dòng)網(wǎng)絡(luò)是主要的影響因素，頁(yè)面加載相關(guān)的技術(shù)解決方案，也是從這三個(gè)影響因素為出發(fā)點(diǎn)，來(lái)進(jìn)行技術(shù)設(shè)計(jì)和實(shí)現(xiàn)的。
頁(yè)面加載加速主要聚焦在頁(yè)面云加速（CDN Cache）以及移動(dòng)端加速、頁(yè)面預(yù)取/預(yù)渲染等相關(guān)技術(shù)點(diǎn)。2. 頁(yè)面構(gòu)建
移動(dòng)Web加速的另一個(gè)核心技術(shù)方向是通過(guò)明確頁(yè)面的正確構(gòu)建方法，來(lái)提升頁(yè)面在渲染和瀏覽時(shí)的用戶體驗(yàn)。
移動(dòng)頁(yè)面的渲染對(duì)用戶體驗(yàn)的影響是非常巨大的，直接關(guān)系到用戶在打開頁(yè)面時(shí)能否很快的看到首先想要瀏覽的內(nèi)容（首屏渲染）。
影響首屏渲染的因素非常多，通過(guò)正確的頁(yè)面構(gòu)建方法，可以進(jìn)一步提升站點(diǎn)頁(yè)面的首屏渲染性能并且不傷害用戶的瀏覽體驗(yàn)。
三、相關(guān)技術(shù)介紹
在每期的網(wǎng)頁(yè)加速技術(shù)月報(bào)中，我們都會(huì)為大家介紹相關(guān)的加速技術(shù)知識(shí)點(diǎn)。本期先為大家介紹頁(yè)面云加速相關(guān)的技術(shù)知識(shí)。
頁(yè)面云加速的主要核心其實(shí)就是使用云端緩存或代理的方案，讓用戶能通過(guò)更快的網(wǎng)絡(luò)獲取加載頁(yè)面。主要的核心技術(shù)點(diǎn)有兩部分：基于CDN的頁(yè)面Cache或代理、基于端（Web容器或移動(dòng)瀏覽器）與云端交互的協(xié)議機(jī)制。
1.基于CDN的頁(yè)面Cache或代理
此技術(shù)其實(shí)在近幾年已經(jīng)非常成熟，無(wú)論是各種云服務(wù)解決方案還是CDN服務(wù)提供商都已經(jīng)有非常成熟的技術(shù)能力。此項(xiàng)技術(shù)的思路是從Web服務(wù)提供者角度來(lái)提供更好的網(wǎng)絡(luò)環(huán)境來(lái)進(jìn)行移動(dòng)Web加速。在此就不做更多的介紹。
2.基于端與云端交互的協(xié)議機(jī)制
最近兩年開始興起的新的云端加速技術(shù)方案，該技術(shù)在云端的Cache機(jī)制（主要是CDN）的基礎(chǔ)上，使用端來(lái)代理用戶頁(yè)面加載行為，調(diào)用云端的Cache頁(yè)面返回給端使用。此項(xiàng)技術(shù)的思路與前者不同的是它想解決用戶在該端上（Web容器或移動(dòng)瀏覽器）的所有移動(dòng)Web站點(diǎn)的訪問(wèn)加速，而不是某一個(gè)站點(diǎn)或已經(jīng)提供了CDN訪問(wèn)的站點(diǎn)。主要作用是可以提升用戶在該端上的Web瀏覽體驗(yàn)，讓用戶體驗(yàn)優(yōu)于其他競(jìng)品。
主要技術(shù) 有：Google AMP Cache、Baidu MIP Cache、UC瀏覽器云加速、QQ瀏覽器云加速等。
四、主要技術(shù)進(jìn)展
1.AMP本月進(jìn)度
AMP（Accelerated Mobile Pages）是谷歌提供的網(wǎng)頁(yè)加速技術(shù)，其官方網(wǎng)站是“https://developers.google.com/amp/”。AMP在本月不僅進(jìn)行了技術(shù)方面的優(yōu)化，還計(jì)劃在全球范圍內(nèi)進(jìn)行推廣，具體如下。
（1） AdWords 支持AMP化廣告落地頁(yè)：AdWords是廣告提供商，使用AMP落地頁(yè)能夠快速加載，提高廣告轉(zhuǎn)化率。AMP的表單，內(nèi)容實(shí)時(shí)更新和統(tǒng)計(jì)支持，使AMP適用于廣告落地頁(yè)。（相關(guān)鏈接：https://amphtml.wordpress.com/2017/09/07/faster-amp-ad-landing-page-support-from-adwords/）
（2）COND? NAST是如何使用AMP的： COND? NAST擁有多個(gè)新聞業(yè)務(wù)，選擇AMP不是因?yàn)樵瓉?lái)頁(yè)面慢，而是相信Google的服務(wù)和CDN； NAST公司將AMP和CMS結(jié)合使用，自動(dòng)將新聞生成為AMP頁(yè)面。（相關(guān)鏈接：https://amphtml.wordpress.com/2017/09/08/the-why-and-how-of-accelerated-mobile-pages-at-conde-nast/）
（3） AMP技術(shù)團(tuán)隊(duì)將要進(jìn)行全球巡回推廣：包括新加坡、悉尼、倫敦、北京、上海等地，感興趣的讀者可以關(guān)注。（相關(guān)鏈接：https://amphtml.wordpress.com/2017/09/19/introducing-the-amp-roadshow-bringing-the-amp-team-to-you/）
2.MIP本月進(jìn)度
MIP的官方網(wǎng)站是：https://www.mipengine.org/，GitHub地址是：https://github.com/mipengine/。MIP在本月也更新了諸多新功能，進(jìn)行了一系列升級(jí)，具體如下。
MIP新增功能
（1）增加儲(chǔ)存功能，使用localStorage和fetch實(shí)現(xiàn)。儲(chǔ)存功能可用于代替cookie保存用戶設(shè)置，登錄狀態(tài)，攜帶信息，與服務(wù)器進(jìn)行數(shù)據(jù)通信。
（2）MIP-Cache鏈接全量上線二級(jí)域名，詳細(xì)說(shuō)明及影響見《MIP-Cache域名升級(jí)》。
MIP升級(jí)功能
（1） mip-video 視頻組件升級(jí)。支持source多視頻源播放。
（2）mip-showmore 折疊組件交互升級(jí)。支持展開后不再顯示收起按鈕(https://www.mipengine.org/examples/mip-extensions/mip-showmore.html)。
（3）mip.js 升級(jí)。修復(fù)a鏈接在mip-iframe中不能跳出的問(wèn)題。
校驗(yàn)規(guī)則更新
在9月初，MIP更新了少量校驗(yàn)規(guī)則，對(duì)90%以上的MIP頁(yè)無(wú)影響，保證MIP校驗(yàn)的嚴(yán)謹(jǐn)性。更新后的規(guī)則為：
（1） 對(duì) head 中 base 標(biāo)簽增加了限制，避免cache改寫后鏈接指向有問(wèn)題。
（2）強(qiáng)制要求頁(yè)面引用https 的 mip.js，避免腳本被不法劫持。
（3）認(rèn)定src=” “（引號(hào)之間只有空格）情況等同于src=”“，視內(nèi)容為空。
（4）升級(jí)template src校驗(yàn)，支持文檔中src={{url}}的寫法。
進(jìn)行中mip-bind 組件支持?jǐn)?shù)據(jù)雙向綁定。頁(yè)面異步更新，可用于電商等復(fù)交互頁(yè)面。MIP-Cache 支持返回webp圖片。使用壓縮率更高的圖片，減少圖片大小。
四、總結(jié)
移動(dòng)Web加速的下一個(gè)方向應(yīng)該是探索頁(yè)面加速上的標(biāo)準(zhǔn)策略分級(jí)，并影響內(nèi)容分發(fā)平臺(tái)、搜索引擎等流量入口使用標(biāo)準(zhǔn)的頁(yè)面性能分級(jí)來(lái)進(jìn)行更廣泛層面的引導(dǎo)，提升真實(shí)用戶接觸到的互聯(lián)網(wǎng)站點(diǎn)的頁(yè)面體驗(yàn)。
歡迎各位讀者補(bǔ)充各項(xiàng)移動(dòng)Web加速技術(shù)及其最新進(jìn)展，可以發(fā)送郵件到 openweb@baidu.com，也可以關(guān)注【OpenWeb開發(fā)者】公眾號(hào)并回復(fù)“加群”，一起來(lái)探討相關(guān)技術(shù)，與我們攜手推進(jìn)Web技術(shù)的發(fā)展！