使用者:Ninedyz/Accelerated Mobile Pages
Accelerated Mobile Pages（簡稱AMP，意為「加速移動頁面」）是Google帶領開發的開源項目，目的是為提升移動設備對網站的訪問速度[1]。AMP也可指其衍生的標準和庫等項目成果。AMP在HTML等廣泛使用的網絡技術基礎上進行改良，它的核心稱作AMP HTML，是HTML的一種。服務於技術預覽期結束後的2016年2月正式發布[2][3][4]。
構成
編輯AMP大致可分為AMP HTML、AMP JS和AMP Cache三部分[5]。
AMP HTML是描述網頁所用的標記語言，相當於普通網頁使用的HTML之亞種。AMP HTML在圖像顯示等方面使用與HTML不同的專用標籤，另外還限制了HTML部分功能的使用。
AMP JS是一套JavaScript庫，保證AMP HTML的正確和快速顯示。除此之外，AMP JS還負責在只支持普通HTML的瀏覽器中擔任橋梁，使其能正確支持AMP HTML的專用功能。AMP HTML中可以調用該函數庫。
AMP Cache是緩存並傳輸AMP頁面的CDN，進一步提高AMP網頁的性能。用戶在搜索引擎中點擊AMP網頁時，實際上訪問的是優化後的緩存頁面。Google的AMP Cache名為Google AMP Cache。
AMP HTML
編輯與創建普通網頁時創建的HTML類似，創建AMP頁面時是以AMP HTML的方式創建，寫法上大部分與HTML相同。文件擴展名亦同樣是.html[6]，但也有人選擇.amp.html以示區別。
AMP項目網站上有AMP HTML的詳細標準，以下為其中獨特的部分。
頭部
編輯AMP HTML的頭部格式如下。
<!doctype html>
<html amp lang="zh">
<head>
其中DOCTYPE聲明與普通的HTML5完全一樣，但起始標籤<html>改為<html amp>或包含繪文字的<html ⚡>。
<head>標籤須含有的元素包括charset和viewport元標籤，格式固定的<style>元素，以及讀取AMP JS庫的<script>元素等（其中一部分順序也有規定）。此外，通過加入JSON-LD形式的結構化數據[7]等，頁面可以包含向搜索引擎等工具傳遞合適信息的元數據。
自定義元素
編輯除普通HTML元素外，AMP HTML還可使用一些獨有元素（標籤），即自定義元素。例如用於顯示圖像的<amp-img>（取代普通的<img>元素），顯示布局側邊欄的<amp-sidebar>，顯示外部站點內容的<amp-facebook>、<amp-twitter>，等等。
AMP中不可使用用戶JavaScript，但有作為代替的自定義元素，代表性的有顯示廣告的<amp-ad>和用於訪問分析的<amp-analytics>。
部分自定義元素要求使用時添加一些附加JavaScript庫（在<head>標籤內）。
樣式
編輯AMP頁面與普通頁面一樣，使用CSS進行樣式布局。但CSS不能用外部文件表示，也不能在各元素的style屬性中分別定義，必須寫在AMP HTML開始部分<head>標籤中的單一<style>元素中（可在服務器端動態生成CSS後嵌入AMP HTML）。包括媒體查詢器和多數的屬性選擇器在內，大部分CSS功能都可在AMP中使用，禁用的則有!important限定符和*選擇器等。
另外，AMP允許通過元素的layout屬性控制布局。例如，自適應圖像可通過<amp-img layout="responsive">表示。
HTML限制
編輯部分HTML元素和屬性的使用受到限制，特別是圖像和媒體方面，這些均由AMP自有的自定義元素替換。
腳本
編輯AMP中，用戶自己的JavaScript，以及jQuery、AngularJS這類普通JavaScript庫原則上不能使用。作為代替方案，可使用AMP HTML的自定義元素製作交互式網頁。
優點
編輯使用AMP的網頁可快速讀取並顯示，用戶（網頁訪問者）在點擊鏈接後無需等待即可看到頁面內容。根據Google發布的數據，網頁若是訪問速度過慢，多數用戶會放棄並關閉網頁[8]，快速加載的頁面對網站製作者也有利。
在Google搜索結果中，妥善建立的AMP網頁旁會出現AMP標誌，對新聞等部分內容還會採用輪播（carousel）的特殊樣式[9]。
應用
編輯部分媒體已開始使用AMP，包括CNN、美國廣播公司和福克斯新聞。安裝第三方插件後，WordPress博客也可使用AMP[10]。
2017年3月7日，Google宣布百度、搜狗和Yahoo! JAPAN搜索將支持AMP[11]；其中百度在搜索結果中將AMP頁面標註為「MIP」（移動網頁加速器），一個百度主導、與AMP類似的項目[12]。
參考文獻
編輯- ^ Google、モバイルWeb高速化のオープンイニシアチブ「AMP」立ち上げ Twitterや大手メディアが参加. ITmedia NEWS. 2015-10-08 [2017-03-07] （日語）.
- ^ What Is Accelerated Mobile Pages? From Code To SEO. Malika Sharma. 2016-02-19 （英語）.
- ^ Christopher Ratcliff. Google has launched Accelerated Mobile Pages. Search Engine Watch. 2016-02-23 [2016-04-03] （英語）.
- ^ Implement Accelerated Mobile Pages (AMP) and Optimize the Website to Next Level. MUS Tips. 2016-03-05 [2016-04-19] （英語）.
- ^ Overview. Accelerated Mobile Pages Project. [2017-03-07] （日語）.
- ^ AMP HTML ページを作成する. Accelerated Mobile Pages Project. [2017-03-08] （日語）.
- ^ ついに始まった、Google AMP（Accelerated Mobile Pages）を試してみよう！. CodeZine. 2016-04-15 [2017-03-07] （日語）.
- ^ Googleの検索結果で上位表示されるAccelerated Mobile Pagesに、はてブやLINEも対応表明. @IT. 2016-04-18 [2017-03-07] （日語）.
- ^ Use AMP HTML. Google Developers. [2017-03-07] （英語）.
- ^ Jyoti Prakash Ray. How to Setup Google AMP on WordPress Site (Using AMP Plugin). Wpmyweb.com. 2017-02-07 [2017-03-07] （英語）.
- ^ AMP grows its footprint – Accelerated Mobile Pages Project. www.ampproject.org. [2017-03-08]. （原始內容存檔於2017-03-08） （英語）.
- ^ MIP官网_移动网页加速器_MIP(Mobile Instant Pages). www.mipengine.org. [2017-03-08]. （原始內容存檔於2017-02-19） （中文（中國大陸））.
外部連結
編輯- 官方網站 （英文）
- Official Google Blog: Introducing the Accelerated Mobile Pages Project, for a faster, open mobile web （英文）
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
[[Category:HTML]]