亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

wangxinarhat / 1817人閱讀

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

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

AMP特點(diǎn)

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

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

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

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

2. 影響SEO排名

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

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

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

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

AMP適用場(chǎng)景

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

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

Vox：新聞?lì)?/p>

Myntra：電商類

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

騰訊新聞：新聞?lì)惥W(wǎng)站

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

Magebit：金融/電商類

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

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

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

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

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

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

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

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

AMP開發(fā)

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

1.獲取 AMP HTML 模板 


  
    
    
    Hello AMP world
    
    
    
  
  
    
Hello AMP World!

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

必須以作為DTD開頭。

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

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

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

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

按需加載對(duì)應(yīng)的庫(kù)：

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

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

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

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

支持mustache模板

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

AMP加速原理

為什么AMP頁面加載這么快，主要有以下幾點(diǎn)：

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

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

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

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

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

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

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

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

瞬時(shí)加載頁面：大量使用 preconnect API。

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

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

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

總結(jié)

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

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

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

參考資料

AMP中文文檔

AMP如何提升性能

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/97022.html

相關(guān)文章

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

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

    willin 評(píng)論0 收藏0

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

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

    Channe 評(píng)論0 收藏0

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

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

    zhkai 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<