Web前端學習 移動Web加速技術

2021-09-20 00:24:11 字數 2567 閱讀 2474

移動裝置已經成為當下使用頻率最高的電子裝置,而移動web依然是移動裝置中使用頻率最高的應用場景。

站點頁面效能提公升可以使得使用者瀏覽站點時的體驗得到良好改善,作為其中一條技術分支,移動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的份額將會逐漸超越pc端。什麼是移動web開發,其實就是將網頁更好的顯示在移動端的一些設定,簡單來說就兩點如下 流式布局 流式布局,也叫百分比布局,是移動端開發中經常使用的布局方式之一。流式布局的特徵 寬度自適應,高度寫死,並不是百分百還原設計圖。圖示都是固定死...

Web前端效能優化之CDN加速

1 什麼是cdn?在介紹cdn加速之前,我們先來簡單的了解一下什麼是cdn?cdn content delivery network 即內容分發網路,其基本思路是盡可能的避開網際網路上有可能影響資料傳輸速度和穩定性的瓶頸和環節,使內容傳輸更快 更穩定。通過在網路各處放置節點伺服器所構成的現有網際網路...

web前端學習 11 24 25

這應該是對html的學習吧,到css部分的時候先暫停了。html的學習應該就是其標籤的認識,現在先把所有學到的標籤列出來 1.2.3.4.5.這個部分似乎還有更多可加入屬性 6.7.8.9.10.11.12.13.14.15.16.17.18.target屬性似乎在xhtml1.1中被刪除 19.2...