資訊專欄INFORMATION COLUMN
摘要：特點是與年月推出的一個開源的，移動端頁面加速解決方案。僅運行加速動畫移動端動畫優化主要方案。緩存緩存頁面，加速文檔請求相應。參考資料中文文檔如何提升性能，來自的移動頁面優化方案關于谷歌的，你需要知道這些瀏覽器渲染頁面過程與頁面優化
AMP在國內應該很少有人接觸得到，今天介紹一個比較冷門的，有條件的方便使用的前端無線頁面框架。
AMP特點AMP（Accelerated Mobile Pages）是Google與2015年9月推出的一個開源的，移動端頁面加速解決方案。是Google生態的一環，主要有一下特點：
1. 頁面加載速度大大提升
AMP制定了一些嚴格的頁面編寫規范，并且提供了一些功能標簽。滿足這些閱讀和使用這些標簽之后，使得靜態或簡單交互頁面加載速度和性能有15%-85%的提升。
這是AMP最出名，并且最立竿見影的效果。后面會分析他為什么這么快，但是也限制了他的頁面功能：靜態或者簡單交互。
2. 影響SEO排名
AMP規范中約束了開發者使用向有利于seo化的頁面標簽，這樣對任何搜索引擎都是有利的；同時Google在AMP特有的標簽中做了識別，這樣Google搜索引擎會將這樣的頁面權重加大，影響在google搜索中排名，達到了"你只要進入我的生態，我就能給你帶來一定免費流量"的目的。
3. 豐富組件 便捷開發
AMP為開發者提供了很多組件：頁面Google廣告接入組件，嵌入Facebook或者Twitter或者YouTube等社交分享組件，Google流量統計組件等。
AMP還提供了AMP Story的功能，便于開發者開發活動頁，宣傳頁等功能。
AMP適用場景AMP適用場景有很多限制：AMP規范限制了頁面css必須內嵌在HTML內，并且大小不超過50KB；不能使用JS；只能通過AMP提供的功能開發。這就造成了AMP頁面必須體積小，內容多以展示為主，交互必須簡單。
AMP官網給出了一些客戶的例子：
Vox：新聞類
Myntra：電商類
Tasty.co：視頻內容類
騰訊新聞：新聞類網站
Iene：新聞/視頻內容類
Magebit：金融/電商類
通過上面官網給出的例子分析我們可以發現，AMP頁面基本集中在電商，新聞，視頻內容類的網站。這類網站往往需要靠SEO等手段引入流量，并且頁面展示性內容居多，用戶操作少而且都很簡單。
AMP在淘系里面的應用淘系（淘寶，天貓等）作為國內最大的電商平臺，對于國外電商的流量，尤其是國外中文電商的流量也是十分看重的，所以也看中了Google搜索能帶來的流量，使用了AMP方案。
淘系現有的電商頁面很多并不利于seo，加上頁面功能復雜交互多，無法改造成AMP頁面；而且淘系的移動端頁面往往還要嵌入各個APP里面，更加沒法改造成AMP。
所以現在的方案是：新增一套AMP頁面網站，專門用來承接SEO流量，這套頁面滿足用戶基本交互需求，復雜操作和詳細內容指向淘系源站。
淘系AMP電商網站是一套完整的電商瀏覽網站，用戶通過谷歌搜索結果進入站內，頁面內的鏈接指向站內其他AMP頁面，用以消化流量，提升體驗，同時所有頁面均對SEO做過優化；當用戶需要下單，或者反饋等具體操作時候，鏈接引導至淘系國內主站。
在這個過程中，淘系AMP電商網站扮演的角色是SEO優化，提供用戶瀏覽查看等基本操作用以吸引用戶，引導流量至主站的銜接作用。雖然功能簡單，但是作用重要而且無可替代。
AMP開發AMP具體開發詳見官方文檔，這里簡單介紹開發關鍵點。
1.獲取 AMP HTML 模板
Hello AMP world
Hello AMP World!
官方推薦的AMP模板，這里要注意的是：
必須以作為DTD開頭。
?是AMP頁面特有的標志，用來告訴google 緩存這是AMP頁面并且需要緩存頁面，也可使用amp字符代替。如果沒有對應的字符，google緩存不會緩存該頁面。
link標簽指向該頁面對應的非AMP頁面，google回去預加載對應內容，如果沒有，指向自己。
頁面只能有一個custom樣式，并且大小限制為50KB。
4. 增加簡單交互與數據按需加載對應的庫：
使用AMP的語法實現事件驅動：
模板語法實現頁面綁定數據：
支持mustache模板
這樣就可以實現頁面簡單功能的開發，更多細節看官方文檔。
AMP加速原理為什么AMP頁面加載這么快，主要有以下幾點：
僅允許異步腳本：JavaScript會阻塞 DOM 的構建，延緩頁面渲染，所以amp禁止同步的JavaScript。
靜態確定所有資源的大小：圖片、廣告或 iframe 等外部資源必須在 HTML 中聲明其大小，以便 AMP 可以在資源下載前確定每個元素的大小和位置。
不讓擴展機制阻塞渲染：AMP插件內部做的優化。
有 CSS 都必須內嵌并具有大小限值。
字體觸發必須高效字體觸發必須高效。
僅運行 GPU 加速動畫：移動端動畫優化主要方案。
最大程度減少樣式重新計算次數：減少瀏覽器的重繪和重排。
設定資源加載的優先級：AMP runtime會根據頁面需要加載的內容排序，確保主要內容優先加載。
瞬時加載頁面：大量使用 preconnect API。
google緩存：CDN緩存AMP頁面，加速文檔請求相應。
這里面的幾點主要分成兩部分，常規武器和核武器。常規武器是任何移動端頁面都可以使用的，比如1，2，3，5，6，7，9。核武器是AMP內部專門來實現的：3，8，10。
通過上面幾點，其實可以發現，AMP在實現頁面加載優化上大量用到了常見的優化方案，但是做的非常嚴格。我們日常在開發中，使用常規的頁面優化方案，也會取得不錯的效果。
總結amp頁面適用場景：需要SEO（主要是google）；靜態或簡單交互頁面快速搭建；活動頁；
amp頁面性能提升關鍵：常規武器和核武器。
缺點：開發成本，功能限制，國內就是禁地。
參考資料AMP中文文檔
AMP如何提升性能
AMP，來自 Google 的移動頁面優化方案
關于谷歌的AMP，你需要知道這些
瀏覽器渲染頁面過程與頁面優化
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97022.html
摘要：渲染層合并對頁面中元素的繪制是在多個層上進行的。擁有兩套不同的渲染路徑硬件加速路徑和舊軟件路徑中有不同類型的層負責子樹和負責的子樹，只有是作為紋理上傳給的。整個圖在中其實有幾種不同的層類型渲染層，這是負責對應子樹圖形層，這是負責對應子樹。 梳理瀏覽器渲染流程 首先簡單了解一下瀏覽器請求、加載、渲染一個頁面的大致過程： DNS 查詢 TCP 連接 HTTP 請求即響應 服務器響應 客戶...
摘要：渲染層合并對頁面中元素的繪制是在多個層上進行的。擁有兩套不同的渲染路徑硬件加速路徑和舊軟件路徑中有不同類型的層負責子樹和負責的子樹，只有是作為紋理上傳給的。整個圖在中其實有幾種不同的層類型渲染層，這是負責對應子樹圖形層，這是負責對應子樹。 梳理瀏覽器渲染流程 首先簡單了解一下瀏覽器請求、加載、渲染一個頁面的大致過程： DNS 查詢 TCP 連接 HTTP 請求即響應 服務器響應 客戶...
摘要：渲染層合并對頁面中元素的繪制是在多個層上進行的。擁有兩套不同的渲染路徑硬件加速路徑和舊軟件路徑中有不同類型的層負責子樹和負責的子樹，只有是作為紋理上傳給的。整個圖在中其實有幾種不同的層類型渲染層，這是負責對應子樹圖形層，這是負責對應子樹。 梳理瀏覽器渲染流程 首先簡單了解一下瀏覽器請求、加載、渲染一個頁面的大致過程： DNS 查詢 TCP 連接 HTTP 請求即響應 服務器響應 客戶...
閱讀 1391·2023-04-26 03:04
閱讀 2325·2019-08-30 15:44
閱讀 3727·2019-08-30 14:15
閱讀 3507·2019-08-27 10:56
閱讀 2703·2019-08-26 13:53
閱讀 2616·2019-08-26 13:26
閱讀 3075·2019-08-26 12:11
閱讀 3609·2019-08-23 18:21
{{User}}{{Datetime}}
{{Text}}