搜尋
首頁web前端H5教程谷歌為什麼要推出AMP計畫?

谷歌為什麼要推出AMP計畫?

Apr 02, 2017 am 11:13 AM
ampGoogle

Google為什麼要推出AMP計畫?

Google最近宣布名為AMP的網頁加速項目,去提高行動裝置網頁載入的速度。 AMP是一個開源項目,這項技術可以限制HTML,CSS,JavaScript中可能會影響網頁載入速度的程式碼。 谷歌表示,這項技術可以幫助Nexus 5手機在3G網路下提高網頁載入速度15%到85%。影響這個專案的技術核心是AMP HTML。這樣的內容可能會收到影響。是什麼呢?

在討論解決方法之前,花一點時間去探索問題是值得的。或者電腦上基於web進行的互動是多麼的差勁。 #第三方的干擾

谷歌為什麼要推出AMP計畫?

廣告和一些追蹤分析的技術的插入,令到頁面的體積增大,請求增多,哪怕用戶手持的是一個頻寬和CPU處理都受到了限制的裝置。的巨大減少和電池壽命的增加。但這也造成他們在手機上展示的時候帶有大量的桌面顯示資源。的,這樣子他可以在滑鼠懸停的時候展現動畫效果(基於第三方庫,意味著高開銷)——這不是經常可以在移動設備上找到資源的情況。調查(PDF, 3.4 MB),一篇文章在行動裝置上的平均載入時間為8秒。 ,這已經足夠讓你去瀏覽第二個Vine影片了。

AMP有何不同

一些介紹AMP和Facebook即時文章與蘋果新聞不同處的背景資料會指出谷歌為它的新數位出版倡議做出的決定。

Facebook即時文章和蘋果新聞有以下幾個共同點:

#app內嵌的體驗

讀者透過手機上的Facebook軟體來存取Facebook即時文章,而蘋果新聞則是採用了iOS 9中的一個完全獨立的app。這兩個平台均沒有允許用戶在app外閱讀他們的文章。你可以認為他們都是一個特製的RSS更新應用程式。

聯合驅動

然而Facebook和蘋果採用了不同的聯合格式(蘋果新聞格式是基於JOSN的,而即時文章的標記則或多或少地被HTML標記在一個RSS推送中),他們都基於一個相同的原則:哄騙內容管理系統生成必要的聯合格式,然後Facebook和蘋果就會馬不停蹄地去提取、解析,然後把它們弄得漂漂亮亮地,緊接著快速的進行自訂的渲染。

體驗導向

儘管Facebook即時文章和蘋果新聞都專注於效能,但他們同樣關注如何使文章看起來更加現代化。兩個平台均有組件容許我們打造圓滑流暢的接口,這一般都會帶來可自訂的、手工打造的的閱讀體驗。

相反的,AMP有另外的關注點:

#基於web頁面的體驗

AMP的檔案被設計成可以在瀏覽器和WebViews上渲染。

原子化的檔案

儘管AMP的檔案是需要在AMP運行時進行驗證、解析和部分渲染,但他們是在你的伺服器或CDN緩存裡完全獨立的文件,而不是一些可能會在某個點上被轉化為文章,在APP上面渲染的來源資料集。

面向效能

#

相較於互動模式或美學元素,AMP更著重於效能。這不是說AMP的文件都很小家子氣(當他們使用正確的樣式的時候,他們可以和Facebook的即時文章或者蘋果新聞那樣吸引人),但是相比於提供一些花哨的視覺效果例如瘋狂的小東西,他們更關注如何讓文章渲染的更迅速。

Google現在已經在搜尋產品上使用AMP HTML。儘管這項技術仍有一些限制,但Google表示已經有30家發行商和科技公司參與了該項目,其中包括,BBC,紐約時報,Buzzfeed。

雖然這些初始的技術參數可能會被更改,但是AMP的技術規格已經公佈在了Github上,供各網站試用。

目前Google正在努力提升其行動端的閱讀體驗。雖然這項技術還存在一些不足,但行動端擁有37%的流量,還是會吸引越來越多網站加入AMP計畫。目前百度、搜狗、雅虎已經正式支持AMP


以上是谷歌為什麼要推出AMP計畫?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
H5指的是什麼?探索上下文H5指的是什麼?探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5:工具,框架和最佳實踐H5:工具,框架和最佳實踐Apr 11, 2025 am 12:11 AM

H5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面,支持組件化開發。 2.React通過虛擬DOM優化頁面渲染,適合複雜應用。 3.Webpack用於模塊打包,優化資源加載。

HTML5的遺產:當前了解H5HTML5的遺產:當前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5代碼:可訪問性和語義HTMLH5代碼:可訪問性和語義HTMLApr 09, 2025 am 12:05 AM

H5通過語義化元素和ARIA屬性提升網頁的可訪問性和SEO效果。 1.使用、、等元素組織內容結構,提高SEO。 2.ARIA屬性如aria-label增強可訪問性,輔助技術用戶可順利使用網頁。

H5與HTML5相同嗎?H5與HTML5相同嗎?Apr 08, 2025 am 12:16 AM

"h5"和"HTML5"在大多數情況下是相同的,但它們在某些特定場景下可能有不同的含義。 1."HTML5"是W3C定義的標準,包含新標籤和API。 2."h5"通常是HTML5的簡稱,但在移動開發中可能指基於HTML5的框架。理解這些區別有助於在項目中準確使用這些術語。

H5的功能是什麼?H5的功能是什麼?Apr 07, 2025 am 12:10 AM

H5,即HTML5,是HTML的第五個版本,它為開發者提供了更強大的工具集,使得創建複雜的網頁應用變得更加簡單。 H5的核心功能包括:1)元素允許在網頁上繪製圖形和動畫;2)語義化標籤如、等,使網頁結構清晰,利於SEO優化;3)新API如GeolocationAPI,支持基於位置的服務;4)跨瀏覽器兼容性需要通過兼容性測試和Polyfill庫來確保。

h5鏈接怎麼做h5鏈接怎麼做Apr 06, 2025 pm 12:39 PM

如何創建 H5 鏈接?確定鏈接目標:獲取 H5 頁面或應用程序的 URL。創建 HTML 錨點:使用 <a> 標記創建錨點並指定鏈接目標URL。設置鏈接屬性(可選):根據需要設置 target、title 和 onclick 屬性。添加到網頁:將 HTML 錨點代碼添加到希望鏈接出現的網頁中。

h5兼容問題怎麼解決h5兼容問題怎麼解決Apr 06, 2025 pm 12:36 PM

解決 H5 兼容問題的方法包括:使用響應式設計,允許網頁根據屏幕尺寸調整佈局。採用跨瀏覽器測試工具,在發布前測試兼容性。使用 Polyfill,為舊瀏覽器提供對新 API 的支持。遵循 Web 標準,使用有效的代碼和最佳實踐。使用 CSS 預處理器,簡化 CSS 代碼並提高可讀性。優化圖像,減小網頁大小並加快加載速度。啟用 HTTPS,確保網站的安全性。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器