作者 | brilliant open web團隊breezet、jennyl
編輯 | 尾尾
移動裝置已經成為當下使用頻率最高的電子裝置，而移動web依然是移動裝置中使用頻率最高的應用場景。
站點頁面效能提公升可以使得使用者瀏覽站點時的體驗得到良好改善，作為其中一條技術分支，移動web加速技術的方法和技術方案在近幾年得到了不斷發展。無論是內容分發平台、瀏覽器提供商、網路提供商還是web站點，都在通過各種各樣的移動web加速技術為使用者提供更良好的頁面瀏覽體驗。
開始的前言內容中我們已經提到，參與移動web生態的幾個重要角色分別是內容分發平台、瀏覽器提供商和網路提供商以及web站點。每個角色都在自己所擅長的領域通過技術創新來給使用者提供更快速的移動web體驗。因此，移動web加速的幾個技術方向也和幾個重要參與者的角色職能密不可分。
比較重要的技術方向分別是：
1. 頁面載入與快取
移動web加速的其中乙個重要技術方向是針對頁面載入和快取相關的加速技術。
在此方向中，頁面分發端、瀏覽器和流動網路是主要的影響因素，頁面載入相關的技術解決方案，也是從這三個影響因素為出發點，來進行技術設計和實現的。
頁面載入加速主要聚焦在頁面雲加速（cdn cache）以及移動端加速、頁面預取/預渲染等相關技術點。
2. 頁面構建
移動web加速的另乙個核心技術方向是通過明確頁面的正確構建方法，來提公升頁面在渲染和瀏覽時的使用者體驗。
移動頁面的渲染對使用者體驗的影響是非常巨大的，直接關係到使用者在開啟頁面時能否很快的看到首先想要瀏覽的內容（首屏渲染）。
影響首屏渲染的因素非常多，通過正確的頁面構建方法，可以進一步提公升站點頁面的首屏渲染效能並且不傷害使用者的瀏覽體驗。
頁面雲加速的主要核心其實就是使用雲端快取或**的方案，讓使用者能通過更快的網路獲取載入頁面。主要的核心技術點有兩部分：基於cdn的頁面cache或**、基於端（web容器或移動瀏覽器）與雲端互動的協議機制。
1.基於cdn的頁面cache或**
此技術其實在近幾年已經非常成熟，無論是各種雲服務解決方案還是cdn服務提供商都已經有非常成熟的技術能力。此項技術的思路是從web服務提供者角度來提供更好的網路環境來進行移動web加速。在此就不做更多的介紹。
2.基於端與雲端互動的協議機制
最近兩年開始興起的新的雲端加速技術方案，該技術在雲端的cache機制（主要是cdn）的基礎上，使用端來**使用者頁面載入行為，呼叫雲端的cache頁面返回給端使用。此項技術的思路與前者不同的是它想解決使用者在該端上（web容器或移動瀏覽器）的所有移動web站點的訪問加速，而不是某乙個站點或已經提供了cdn訪問的站點。主要作用是可以提公升使用者在該端上的web瀏覽體驗，讓使用者體驗優於其他競品。
主要技術 有：google amp cache、baidu mip cache、uc瀏覽器雲加速、qq瀏覽器雲加速等。
1.amp本月進展
amp（accelerated mobile pages）是谷歌提供的網頁加速技術，其官方**是：在本月不僅進行了技術方面的優化，還計畫在全球範圍內進行推廣，具體如下。
（1） adwords 支援amp化廣告落地頁：adwords是廣告提供商，使用amp落地頁能夠快速載入，提高廣告轉化率。amp的表單，內容實時更新和統計支援，使amp適用於廣告落地頁。
（2）condé nast是如何使用amp的：
condé nast擁有多個新聞業務，選擇amp不是因為原來頁面慢，而是相信google的服務和cdn； nast公司將amp和cms結合使用，自動將新聞生成為amp頁面。
（3） amp技術團隊將要進行全球巡迴推廣：包括新加坡、雪梨、倫敦、北京、上海等地，感興趣的讀者可以關注。
2.mip本月進展
mip的官方**是：位址是：在本月也更新了諸多新功能，進行了一系列公升級，具體如下。
mip新增功能
（1）增加儲存功能，使用localstorage和fetch實現。儲存功能可用於代替cookie儲存使用者設定，登入狀態，攜帶資訊，與伺服器進行資料通訊。
（2）mip-cache鏈結全量上線二級網域名稱，詳細說明及影響見《mip-cache網域名稱公升級》。
mip公升級功能
（2）mip-showmore 摺疊元件互動公升級。支援展開後不再顯示收起按鈕(
（3）mip.js 公升級。修復a鏈結在mip-iframe中不能跳出的問題。
校驗規則更新
在9月初，mip更新了少量校驗規則，對90%以上的mip頁無影響，保證mip校驗的嚴謹性。更新後的規則為：
（1） 對 head 中 base 標籤增加了限制，避免cache改寫後鏈結指向有問題。
（2）強制要求頁面引用https 的 mip.js，避免指令碼被不法劫持。
（3）認定src=」 「（引號之間只有空格）情況等同於src=」「，視內容為空。
（4）公升級template src校驗，支援文件中src=}的寫法。
進行中mip-bind 元件支援資料雙向繫結。頁面非同步更新，可用於電商等複互動頁面。
mip-cache 支援返回webp。使用壓縮率更高的，減少大小。
移動web加速的下乙個方向應該是探索頁面加速上的標準策略分級，並影響內容分發平台、搜尋引擎等流量入口使用標準的頁面效能分級來進行更廣泛層面的引導，提公升真實使用者接觸到的互聯**點的頁面體驗。
Web前端學習 移動Web加速技術
移動裝置已經成為當下使用頻率最高的電子裝置，而移動web依然是移動裝置中使用頻率最高的應用場景。站點頁面效能提公升可以使得使用者瀏覽站點時的體驗得到良好改善，作為其中一條技術分支，移動web加速技術的方法和技術方案在近幾年得到了不斷發展。無論是內容分發平台 瀏覽器提供商 網路提供商還是web站點，都...
移動web開發1
學習了viewport視口及相應的屬性 viewport 視口屬性 該屬性只在移動端瀏覽器上才有用。name viewport 告訴瀏覽器 我這個meta標籤設定的是viewport屬性 content設定的是屬性的值 屬性名不能亂寫 有固定的取值 width 寬度 device width 裝置的...
移動web 1畫素邊框
1px縮放都0.5px的狀態下，而0.5px並不是所有都支援，再根據 查詢設定不同的縮放比例就可以了，那麼我們就開始玩兒縮放吧。1.用height 1px的div，然後根據 查詢設定transform scaley 0.5 div2.用 after和 befor,設定border bottom 1p...