AMPHTML助力移動Web提速_html/css

加速移動頁面(AMP)是一個由Google發起的項目并很快被大約30家內容出版商支持，該項目的目的是使得普通網頁能夠在移動設備上實現更快甚至是瞬間的加載。用戶可以從這種更加接近無縫加載的體驗中獲益，而出版商們也從中期待更多的廣告收入，原因是頁面加載提速后會明顯降低網頁跳出率，據最近的一項調查顯示，如果一個頁面的加載時間大于10秒鐘則該頁面的跳出率可達58%之高。

AMP的目標是使用受限HTML以及緩存技術來提高移動網絡中靜態內容的性能。這個框架并不引入新的Web開發語言或相關技術，而是在現有技術的基礎上完成。除少數限制外，出版商們仍然可以自由地創建和發布他們的內容。當然，他們也被建議在全世界范圍內使用內容緩存來加速網頁加載。Google可以為那些對AMP感興趣的出版商們免費提供緩存服務。

AMP網頁使用一組受限的HTML標簽，這意味著現有的瀏覽器無需任何改動就可以渲染AMP網頁。存儲這些網頁的服務器可將AMP網頁與其它HTML頁面同等對待或者也可以對其使用一些優化措施，例如:將圖像的大小調整為窗口(viewport)的大小，內聯(inline)某些圖像或者CSS，壓縮(minify)HTML和CSS，提前加載外部組件等等。

由于性能方面的原因，一些HTML標簽被禁止使用: applet, base, embed, form, frame, frameset, object, param。除按鈕(Button)外，輸入元素被禁止使用。除了application/ld+json類型的腳本以及為加載AMP運行時環境和頁面頭部最后一個元素的必須的腳本標簽以外，其余的腳本都被禁止。audio,img和video被替換成了自定義元素: amp-audio, amp-img和amp-video。amp-iframe取代了iframe，該amp-iframe元素對原有的iframe進行了某些限制。此外Google還設計了一些其它的自定義元素:amp-anim, amp-ad, amp-pixel, amp-twitter等。所有這些元素設計的目的都是為了在頁面的預加載、加載及渲染等環節強化某些規則以最大限度地提高頁面性能。

除了AMP腳本以外，個人寫的JavaScript腳本也在被禁止的行列。AMP腳本(本身也是JavsScript寫的)用來加載AMP運行時環境，該環境實現了AMP的自定義元素、調度執行資源加載以及在開發過程中驗證頁面。AMP運行時環境決定了是否以及何時來加載一個資源。

第三方內容(包括第三方JS)，比如內嵌廣告或者網頁分析腳本等可以借用AMP的元素(amp-ad, amp-pixel)包含進來, 這些元素被強制要求運行在一個iframe沙盒中。跟蹤像素(Tracking pixels)是用來做分析用的。

根據規范構建出的AMP組件也許會包含在首頁中執行的JavaScript，不過，優先級會較低。這些組件被用于某些應用提供的服務，這些應用包括Instagram、Twitter或者YouTube。CSS也可以被包含，不過也必須遵守某些特定的規則。

速度索引(Speed Index)用來衡量某些經AMP優化過的網頁，據AMP團隊透露，他們注意到經過優化后，網頁性能的提升從15%到85%不等。為了展示AMP網頁的速度，他們已經建立了一個Google Search的demo。要運行這個demo，需要使用移動設備訪問下面的鏈接:g.co/ampdemo。AMP規范并不是最終版，仍然在完善之中。

為了使用AMP技術發布內容，一些出版商已經加入了這個項目，以下是其中的一些出版商名單,他們是: BBC、金融時報、經濟學人、赫芬頓郵報、紐約時報以及華盛頓郵報。

全能程序員交流QQ群290551701，群內程序員都是來自，百度、阿里、京東、小米、去哪兒、餓了嗎、藍港等高級程序員 ，擁有豐富的經驗。加入我們，直線溝通技術大牛，最佳的學習環境，了解業內的一手的資訊。如果你想結實大牛，那 就加入進來，讓大牛帶你超神！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com