成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

無線頁面加速解決方案-AMP

wangxinarhat / 1764人閱讀

摘要：特點是與年月推出的一個開源的，移動端頁面加速解決方案。僅運行加速動畫移動端動畫優(yōu)化主要方案。緩存緩存頁面，加速文檔請求相應(yīng)。參考資料中文文檔如何提升性能，來自的移動頁面優(yōu)化方案關(guān)于谷歌的，你需要知道這些瀏覽器渲染頁面過程與頁面優(yōu)化

AMP在國內(nèi)應(yīng)該很少有人接觸得到，今天介紹一個比較冷門的，有條件的方便使用的前端無線頁面框架。

AMP特點

AMP（Accelerated Mobile Pages）是Google與2015年9月推出的一個開源的，移動端頁面加速解決方案。是Google生態(tài)的一環(huán)，主要有一下特點：

1. 頁面加載速度大大提升

AMP制定了一些嚴(yán)格的頁面編寫規(guī)范，并且提供了一些功能標(biāo)簽。滿足這些閱讀和使用這些標(biāo)簽之后，使得靜態(tài)或簡單交互頁面加載速度和性能有15%-85%的提升。

這是AMP最出名，并且最立竿見影的效果。后面會分析他為什么這么快，但是也限制了他的頁面功能：靜態(tài)或者簡單交互。

2. 影響SEO排名

AMP規(guī)范中約束了開發(fā)者使用向有利于seo化的頁面標(biāo)簽，這樣對任何搜索引擎都是有利的；同時Google在AMP特有的標(biāo)簽中做了識別，這樣Google搜索引擎會將這樣的頁面權(quán)重加大，影響在google搜索中排名，達到了"你只要進入我的生態(tài)，我就能給你帶來一定免費流量"的目的。

3. 豐富組件 便捷開發(fā)

AMP為開發(fā)者提供了很多組件：頁面Google廣告接入組件，嵌入Facebook或者Twitter或者YouTube等社交分享組件，Google流量統(tǒng)計組件等。

AMP還提供了AMP Story的功能，便于開發(fā)者開發(fā)活動頁，宣傳頁等功能。

AMP適用場景

AMP適用場景有很多限制：AMP規(guī)范限制了頁面css必須內(nèi)嵌在HTML內(nèi)，并且大小不超過50KB；不能使用JS；只能通過AMP提供的功能開發(fā)。這就造成了AMP頁面必須體積小，內(nèi)容多以展示為主，交互必須簡單。

AMP官網(wǎng)給出了一些客戶的例子：

Vox：新聞類

Myntra：電商類

Tasty.co：視頻內(nèi)容類

騰訊新聞：新聞類網(wǎng)站

Iene：新聞/視頻內(nèi)容類

Magebit：金融/電商類

通過上面官網(wǎng)給出的例子分析我們可以發(fā)現(xiàn)，AMP頁面基本集中在電商，新聞，視頻內(nèi)容類的網(wǎng)站。這類網(wǎng)站往往需要靠SEO等手段引入流量，并且頁面展示性內(nèi)容居多，用戶操作少而且都很簡單。

AMP在淘系里面的應(yīng)用

淘系（淘寶，天貓等）作為國內(nèi)最大的電商平臺，對于國外電商的流量，尤其是國外中文電商的流量也是十分看重的，所以也看中了Google搜索能帶來的流量，使用了AMP方案。

淘系現(xiàn)有的電商頁面很多并不利于seo，加上頁面功能復(fù)雜交互多，無法改造成AMP頁面；而且淘系的移動端頁面往往還要嵌入各個APP里面，更加沒法改造成AMP。

所以現(xiàn)在的方案是：新增一套AMP頁面網(wǎng)站，專門用來承接SEO流量，這套頁面滿足用戶基本交互需求，復(fù)雜操作和詳細內(nèi)容指向淘系源站。

淘系A(chǔ)MP電商流量示意圖

淘系A(chǔ)MP電商網(wǎng)站是一套完整的電商瀏覽網(wǎng)站，用戶通過谷歌搜索結(jié)果進入站內(nèi)，頁面內(nèi)的鏈接指向站內(nèi)其他AMP頁面，用以消化流量，提升體驗，同時所有頁面均對SEO做過優(yōu)化；當(dāng)用戶需要下單，或者反饋等具體操作時候，鏈接引導(dǎo)至淘系國內(nèi)主站。

在這個過程中，淘系A(chǔ)MP電商網(wǎng)站扮演的角色是SEO優(yōu)化，提供用戶瀏覽查看等基本操作用以吸引用戶，引導(dǎo)流量至主站的銜接作用。雖然功能簡單，但是作用重要而且無可替代。

AMP開發(fā)

AMP具體開發(fā)詳見官方文檔，這里簡單介紹開發(fā)關(guān)鍵點。

1.獲取 AMP HTML 模板 


  
    
    
    Hello AMP world
    
    
    
  
  
    
Hello AMP World!

官方推薦的AMP模板，這里要注意的是：

必須以作為DTD開頭。

?是AMP頁面特有的標(biāo)志，用來告訴google 緩存這是AMP頁面并且需要緩存頁面，也可使用amp字符代替。如果沒有對應(yīng)的字符，google緩存不會緩存該頁面。

link標(biāo)簽指向該頁面對應(yīng)的非AMP頁面，google回去預(yù)加載對應(yīng)內(nèi)容，如果沒有，指向自己。

頁面只能有一個custom樣式，并且大小限制為50KB。

4. 增加簡單交互與數(shù)據(jù)

按需加載對應(yīng)的庫：

通過將元素屬性綁定到自定義表達式來發(fā)揮作用。這些表達式可以引用“state”（易變的 JSON 數(shù)據(jù)）。我們可使用 中包含的組件對此狀態(tài)進行初始化。

使用AMP的語法實現(xiàn)事件驅(qū)動：

模板語法實現(xiàn)頁面綁定數(shù)據(jù)：

支持通過其 src 屬性提取遠程數(shù)據(jù)，該屬性會從 CORS 端點提取 JSON。此項提取操作會在網(wǎng)頁加載時執(zhí)行 1 次，因此有助于確保數(shù)據(jù)的新鮮度（尤其是當(dāng)數(shù)據(jù)由緩存提供時）。

支持mustache模板

這樣就可以實現(xiàn)頁面簡單功能的開發(fā)，更多細節(jié)看官方文檔。

AMP加速原理

為什么AMP頁面加載這么快，主要有以下幾點：

僅允許異步腳本：JavaScript會阻塞 DOM 的構(gòu)建，延緩頁面渲染，所以amp禁止同步的JavaScript。

靜態(tài)確定所有資源的大小：圖片、廣告或 iframe 等外部資源必須在 HTML 中聲明其大小，以便 AMP 可以在資源下載前確定每個元素的大小和位置。

不讓擴展機制阻塞渲染：AMP插件內(nèi)部做的優(yōu)化。

有 CSS 都必須內(nèi)嵌并具有大小限值。

字體觸發(fā)必須高效字體觸發(fā)必須高效。

僅運行 GPU 加速動畫：移動端動畫優(yōu)化主要方案。

最大程度減少樣式重新計算次數(shù)：減少瀏覽器的重繪和重排。

設(shè)定資源加載的優(yōu)先級：AMP runtime會根據(jù)頁面需要加載的內(nèi)容排序，確保主要內(nèi)容優(yōu)先加載。

瞬時加載頁面：大量使用 preconnect API。

google緩存：CDN緩存AMP頁面，加速文檔請求相應(yīng)。

這里面的幾點主要分成兩部分，常規(guī)武器和核武器。常規(guī)武器是任何移動端頁面都可以使用的，比如1，2，3，5，6，7，9。核武器是AMP內(nèi)部專門來實現(xiàn)的：3，8，10。

通過上面幾點，其實可以發(fā)現(xiàn)，AMP在實現(xiàn)頁面加載優(yōu)化上大量用到了常見的優(yōu)化方案，但是做的非常嚴(yán)格。我們?nèi)粘Ｔ陂_發(fā)中，使用常規(guī)的頁面優(yōu)化方案，也會取得不錯的效果。

總結(jié)

amp頁面適用場景：需要SEO（主要是google）；靜態(tài)或簡單交互頁面快速搭建；活動頁；

amp頁面性能提升關(guān)鍵：常規(guī)武器和核武器。

缺點：開發(fā)成本，功能限制，國內(nèi)就是禁地。

參考資料

AMP中文文檔

AMP如何提升性能

AMP，來自 Google 的移動頁面優(yōu)化方案

關(guān)于谷歌的AMP，你需要知道這些

瀏覽器渲染頁面過程與頁面優(yōu)化

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97022.html

相關(guān)文章

  • 瀏覽器渲染流程&Composite（渲染層合并）簡單總結(jié)

    摘要：渲染層合并對頁面中元素的繪制是在多個層上進行的。擁有兩套不同的渲染路徑硬件加速路徑和舊軟件路徑中有不同類型的層負責(zé)子樹和負責(zé)的子樹，只有是作為紋理上傳給的。整個圖在中其實有幾種不同的層類型渲染層，這是負責(zé)對應(yīng)子樹圖形層，這是負責(zé)對應(yīng)子樹。 梳理瀏覽器渲染流程 首先簡單了解一下瀏覽器請求、加載、渲染一個頁面的大致過程： DNS 查詢 TCP 連接 HTTP 請求即響應(yīng) 服務(wù)器響應(yīng) 客戶...

    Channe 評論0 收藏0

  • 瀏覽器渲染流程&Composite（渲染層合并）簡單總結(jié)

    摘要：渲染層合并對頁面中元素的繪制是在多個層上進行的。擁有兩套不同的渲染路徑硬件加速路徑和舊軟件路徑中有不同類型的層負責(zé)子樹和負責(zé)的子樹，只有是作為紋理上傳給的。整個圖在中其實有幾種不同的層類型渲染層，這是負責(zé)對應(yīng)子樹圖形層，這是負責(zé)對應(yīng)子樹。 梳理瀏覽器渲染流程 首先簡單了解一下瀏覽器請求、加載、渲染一個頁面的大致過程： DNS 查詢 TCP 連接 HTTP 請求即響應(yīng) 服務(wù)器響應(yīng) 客戶...

    zhkai 評論0 收藏0

  • 瀏覽器渲染流程&Composite（渲染層合并）簡單總結(jié)

    摘要：渲染層合并對頁面中元素的繪制是在多個層上進行的。擁有兩套不同的渲染路徑硬件加速路徑和舊軟件路徑中有不同類型的層負責(zé)子樹和負責(zé)的子樹，只有是作為紋理上傳給的。整個圖在中其實有幾種不同的層類型渲染層，這是負責(zé)對應(yīng)子樹圖形層，這是負責(zé)對應(yīng)子樹。 梳理瀏覽器渲染流程 首先簡單了解一下瀏覽器請求、加載、渲染一個頁面的大致過程： DNS 查詢 TCP 連接 HTTP 請求即響應(yīng) 服務(wù)器響應(yīng) 客戶...

    willin 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<