盛況回顧 | 谷歌 Web 開發者大會的重要發布

2021-02-15 谷歌開發者
在幾個月密集的準備後，本月初我們完成了有史以來的第一次線上谷歌 Web 開發者大會，給全球 Web 開發者帶來完美的線上體驗和大量的技術乾貨。

谷歌 Web 開發者大會

https://web.dev/live

今天我們通過 bilibili 和騰訊視頻發布內嵌中文字幕的所有演講視頻，希望可以為中國開發者們帶來機會再次與 Web 技術接軌。

https://www.bilibili.com/medialist/play/ml1018067858/http://v.qq.com/vplus/78ffb35ddcf6577ad6e00555d6a4fbaa?page=cover此外，谷歌大中華區 Web 生態諮詢團隊也將定期帶來 Chrome/Web 技術的更新，幫助開發者得到更及時的發布和反饋，期待本次的內容對廣大的 Web 開發社區帶來價值。接下來讓我們一起了解一下在三天的谷歌 Web 開發者大會中分享的一些新聞和更新。Chrome 團隊發布了 Web Vitals 計劃，以提供統一的文檔、指標和工具，幫助開發者在 web 上提供優秀的用戶體驗。Google Search 團隊最近也宣布，他們將把 web 體驗納入排名標準，並將以 Core Web Vitals (核心網頁指標) 作為基礎。
2020 年 Core Web Vitals 的三大核心是: 頁面內容的加載、交互性和視覺穩定性，並通過以下指標來呈現:

最大內容繪製 (Largest Contentful Paint) 評估頁面主要內容可能已完成加載時的感知加載速度，並在頁面加載時間軸上標記時間點；首次輸入延遲 (First Input Delay) 評估用戶首次嘗試與網頁交互時的網頁響應速度，並量化用戶感知體驗；累積布局偏移 (Cumulative Layout Shift) 評估可見頁面內容的視覺穩定性，並量化內容的意外布局偏移量。在谷歌 Web 開發者大會上，我們分享了如何優化核心 Web 指標 (Core Web Vitals) 的最佳實踐，以及如何使用 Chrome DevTools 解讀核心 Web 指標。我們還分享了很多其他與性能表現相關的演講，您可以觀看視頻了解詳細內容:△ 優化核心 Web 指標 (Core Web Vitals)
△ 使用 Chrome DevTools 解讀核心 Web 指標

為 web 這樣一個寬泛的平臺進行開發相當具有挑戰性。構建工具通常位於您的 web 開發項目的核心，在幫助開發者完成工作和管理產品生命周期中承擔著關鍵角色。

我們都知道繁冗的構建配置文件是什麼樣子，所以，為了幫助 web 開發者和工具作者克服 web 的複雜性，我們為大家帶來了 tooling.report。這個網站可以幫助您為下一個項目選擇合適的構建工具，還可以幫您判斷從一個工具遷移到另一個工具是否值得，或者弄清楚如何將最佳實踐納入工具配置和代碼庫中。

我們設計了一套測試，來確定哪些構建工具可以讓您遵循 web 開發的最佳實踐。我們與構建工具的作者們合作，確保我們有正確地使用這些工具，並公平地給出評價結果。

tooling.report 的初始版本涵蓋了目前最流行的構建工具，包括 webpack v4、Rollup v2、Parcel v2 和 Browserify with Gulp。我們在構建 tooling.report 時也保留了將來添加更多構建工具的能力，並能藉助社區力量進行更多的測試。

如果我們遺漏了應該測試的最佳實踐，請在 GitHub 向我們提交需求。如果您願意編寫測試或添加我們沒有包含在初始集合中的新工具，歡迎您來這裡做出貢獻！

https://github.com/GoogleChromeLabs/tooling.report/issues/newhttps://github.com/GoogleChromeLabs/tooling.report/blob/dev/CONTRIBUTING.md請大家進一步閱讀 tooling.report 的介紹文檔，或觀看演講視頻：

△ 構建更好的工具

Chrome 相信開放 web 的價值，這樣的 web 應該能夠尊重用戶的隱私，維護關鍵的用例，讓 web 能為每一個人所用。

2019 年，Chrome 提出了對 cookie 標準的更新，將 cookie 默認限制在第一方上下文中，並要求涉及第三方 (也稱作 "跨站") 上下文的 cookie 必須明確做出標記。這為防止跨站請求偽造 (Cross-Site Request Forgery) 攻擊提供了一道防線。目前，Chrome、Firefox、Edge 等瀏覽器都採納了這一建議。

https://blog.chromium.org/2019/05/improving-privacy-and-security-on-web.html之前，鑑於 COVID-19 的疫情局勢，Chrome 決定暫時撤銷這些變更，但很遺憾的是，在人們最脆弱的危機期間，這類攻擊的數量卻依然有所增加。所以，隨著 Chrome 84 穩定版的發布 (2020 年 7 月中旬)，這些變化將重新開始在版本 80 及以上的所有 Chrome 中部署。想要了解更多詳情，請查看 SameSite cookie 指南以及演講視頻:

臨時撤銷 SameSite cookie 變更

https://blog.chromium.org/2020/04/temporarily-rolling-back-samesite.html

SameSite 更新

https://www.chromium.org/updates/same-site?pli=1#20200528

SameSite cookie 指南

https://web.dev/samesite-cookies-explained/

△ 關於 Cookie 的注意問題——聊聊 SameSite 

此外，Chrome 正在引入一套標準提案 (名為 "隱私沙箱計劃"，Privacy Sandbox)，支持通過 web 平臺變現的用例，但執行方式需要更加尊重用戶隱私。Chrome 正在積極收集對這些提案的反饋，並在 W3C 的公開論壇中參與討論，包括隱私沙箱計劃和來自各方的其他提案。您可以觀看演講視頻了解更多關於這一計劃的信息：

最後，讓我們看看用戶安全方面的問題。Spectre 是一個漏洞，即在一個瀏覽器進程中運行的惡意代碼可能會讀取與該進程相關的任何數據，即使它的來源並不相同。瀏覽器對此的緩解措施之一是站點隔離，即把每個站點放到一個單獨的進程中。您可以觀看視頻，了解更多新的跨源 Opener 和 Embedder 策略 (COOP 和 COEP) 的內容。

https://meltdownattack.com/

△ 防止信息洩漏及應用 COOP 和 COEP

Chrome 希望您能自由地創建最高質量的 web 應用，在不同設備上盡最大可能觸達用戶。藉助 PWA 的可安裝性和可靠性，以及能力拓展項目 (Project Fugu)，Chrome 得以通過三個關鍵任務來縮小原生應用和 web 之間的差距，幫助您構建和提供出色的體驗。

https://web.dev/fugu-status/首先，Chrome 團隊一直在努力讓 web 開發者和用戶對安裝體驗有更多的控制權，比如在 omnibox 中加入安裝提示等。儘管 web 無處不在，但對於一些企業來說，讓自己的應用出現在商店中仍然相當重要。為了提供幫助，Chrome 推出了 Bubblewrap，它身兼代碼庫和 CLI 雙重職能，讓您的 PWA 能夠輕鬆進入 Play Store。事實上，PWABuilder.com 現在就在底層使用了 Bubblewrap。只需點擊幾下滑鼠，您就可以生成一個 APK，並將您的 PWA 上傳到 Play Store，前提是您符合相關標準。

提供可安裝體驗

https://web.dev/customize-install/

安裝提示

https://web.dev/install-criteria/

更多安裝支持

https://web.dev/promote-install/#browser-promotion

Bubblewrap

https://github.com/GoogleChromeLabs/bubblewrap

針對 PWA 的新質量評估標準

https://blog.chromium.org/2020/06/changes-to-quality-criteria-for-pwas.html

其次，Chrome 提供了與作業系統更緊密的集成，比如可以通過調用系統級的分享服務與 Web Share API 來分享照片、歌曲等內容，也可以在安裝的其他應用分享內容時進行接收。您可以一直給用戶提供最新的內容，也可以通過應用徽標 (app badging) 巧妙地告知他們有新的事情發生。另外，現在用戶可以更輕鬆地通過應用快捷方式 (App Shortcuts) 快速啟動一個動作，該功能將在 Chrome 84 (2020 年 7 月中旬) 中提供。

Web Share API

https://web.dev/web-share/

接收其他應用分享的內容

https://web.dev/web-share-target/

應用徽標

https://web.dev/badging-api/

應用快捷方式

https://web.dev/app-shortcuts/

最後，Chrome 一直在開發新的功能，以實現之前不可能實現的新場景，比如可以讀寫用戶本地文件的編輯器，或者獲取本地安裝的字體列表，以便用戶在設計中使用它們。在谷歌 Web 開發者大會期間，我們談到了很多其他的功能和特性，這些功能和特性可以讓您提供與本地應用相同的體驗。您可以觀看第二天的演講視頻：

Chrome DevTools 和 Lighthouse 6.0 的新進展

Chrome Devtools: 新的 Issues 標籤頁、色覺障礙模擬器和 Web Vitals 支持

Chrome DevTools 最強大的功能之一，就是發現 web 上的問題並告知開發者。當我們進入 web 的全新發展階段並以隱私為先時，這一點尤為重要。為了減少 Console 中的通知堆積和雜亂現象，Chrome DevTools 推出了 Issues 標籤頁，該頁面主要呈現三類關鍵問題: Cookie 問題、混合內容問題和 COEP 問題。請觀看視頻，了解如何用 Chrome 開發者工具的 Issues tab 發現並解決問題。

https://developers.google.cn/web/tools/chrome-devtools/issueshttps://web.dev/samesite-cookies-explainedhttps://developers.google.cn/web/fundamentals/security/prevent-mixed-content/what-is-mixed-contenthttps://web.dev/coop-coep/

△ 用 Chrome 開發者工具的 Issues tab 發現並解決問題 

此外，隨著 Core Web Vitals 成為 web 開發者使用和評判質量的最關鍵指標之一，DevTools 希望確保開發者能夠輕鬆了解他們的頁面在這些指標上的表現。因此，這三個指標現在都被放置在了 Chrome DevTools 的 Performance (性能) 面板中。

https://web.dev/vitals/#core-web-vitals最後，隨著越來越多的開發者關注無障礙體驗，DevTools 還推出了色覺障礙模擬器，允許開發者模擬視覺模糊和其他類型的視覺障礙。您可以觀看視頻了解 Chrome 開發者工具的產品進展:

△ Chrome 開發者工具的產品進展

Lighthouse 6.0: 新的指標、Core Web Vitals 實驗室測量、更新的性能評分和新的審查項目

Lighthouse 是一個開源的自動化工具，可以幫助開發者提高網站的性能。在最新的版本中，Lighthouse 團隊專注於提供基於指標的洞察，讓您通過關鍵數據緯度整體掌握用戶體驗的質量。

https://developers.google.cn/web/tools/lighthouse為了確保一致性，Lighthouse 增加了對 Core Web Vitals 的支持，這些指標包括: LCP、TBT (FID 的替代指標，因為 Lighthouse 是一個實驗室工具，而 FID 只能在真實環境中測量) 和 CLS。Lighthouse 還刪除了三個舊的指標: First Meaningful Paint、First CPU Idle 和 Max Potential FID。刪除的原因包括度量的可變性因素，以及新的指標能夠更好地反映 Lighthouse 試圖衡量的用戶體驗。此外，Lighthouse 還根據用戶的反饋，對每個指標在整體評分中的佔比做了一些調整。

LCP

https://web.dev/lcp/

TBT

https://web.dev/tbt/

FID

https://web.dev/fid/

CLS

https://web.dev/cls/

First Meaningful Paint

https://web.dev/first-meaningful-paint/

First CPU Idle

https://web.dev/first-cpu-idle/

Max Potential FID

https://web.dev/lighthouse-max-potential-fid/

Lighthouse 還增加了評分計算器，通過提供第 5 版和第 6 版分數的對比，幫助您進一步了解性能評分。當您使用 Lighthouse 6.0 進行審核時，報告中會給出計算器的連結，並在其中填充好了您的數據。最後，Lighthouse 還增加了一些新的審核項目，重點是 JavaScript 分析和無障礙體驗。

請觀看視頻進一步了解 Chrome Speed 工具的新功能:

△ Chrome Speed 工具的新功能

感謝與我們共同探討 web 平臺機遇和挑戰的每一位社區成員。

本文總結了本次活動的一些亮點，但這遠非全部內容，請點擊閱讀原文觀看所有的演講視頻。如果您想直接收到我們的更多內容，請訂閱 web.dev 郵件。此外，別忘了訪問 web.dev/live 上的地區活動，查找您所在時區即將舉辦的社區活動！

https://web.dev/newsletterhttps://web.dev/live#regional-events

 點擊屏末 | 閱讀原文 | 觀看谷歌 Web 開發者大會全部演講視頻

相關焦點

  • 2019 年穀歌開發者大會參與感
    導語本文儘量以『前端開發者』的身份去思考和描述問題。當然範圍不限於前端本身，技術本身是沒有邊界，思考和意識也一樣。這次去上海最大的感受就是 ：不要給自己設限。正文分享的視頻 Google 搜索就可以找到。內容不在一一介紹了。今年穀歌開發者大會的主題是：更好賦能開發者!
  • 2021 Google 開發者大會精彩回顧 | Q推薦
    今年的 Google 開發者大會，是不是又給你帶來一次意外驚喜？每年，Google 都會在這場年度盛會上為開發者及科技愛好者展示 Google 的產品和平臺更新，讓你更快一步了解最新產品及洞察最前沿技術。與往年不同的是，今年穀歌首次推出了 Google 開發者在線課程。
  • 「平淡」開發者大會背後是一個更加務實的谷歌
    騰訊科技 紀振宇 5月29日矽谷報導沒有谷歌(微博)眼鏡，沒有無人汽車，2015年的谷歌IO開發者大會沒有出現人們所期待的「酷炫」
  • 從2019谷歌開發者大會,看大數據發展的4個趨勢
    導讀9月10日-11日，2019谷歌開發者大會(Google Developer Day)在上海世博中心成功舉辦，大會圍繞熱門技術
  • 谷歌助理來了!谷歌開發者大會紀要
    谷歌I/O開發者大會正在召開。今天就為您梳理一下，世界網際網路巨頭谷歌谷歌眼中，我們觸手可及的未來是什麼樣子。
  • 2017谷歌開發者大會:人工智慧能否引領谷歌走向未來
    來源：騰訊科技一年一度的谷歌(微博)開發者大會17日如期而至，與往年相比，今年的谷歌開發者大會更像是一個過渡年中的例行亮相。與去年相比，谷歌所強調的「從移動為先向人工智慧為先」的戰略方向沒有任何改變。在I/O首日的主旨演講環節，谷歌並沒有像早年那樣，有任何的炫目的黑科技的展示和發布，更多地則是人工智慧技術應用到谷歌現有的產品線中，提升用戶體驗的一些具體功能的發布和完善。
  • 谷歌2017開發者大會(官方同傳+中文字幕+原聲)
    這是前兩天Google CEO 桑德爾·皮蔡在 Google I/O 2017 (Google I/O大會的IO的含義：Input/Output & Innovation in the open）上向世界傳遞的一個聲音！那場科技工程師的盛會中，谷歌推出了一系列讓人驚喜的黑科技。
  • 2018谷歌I/O開發者大會:谷歌即時遊戲向所有安卓開發者開放
    今天凌晨（北京時間5月9日），也就是美國當地時間5月8日上午10點，為期三天的2018年穀歌I/O開發者大會正式拉開帷幕。
  • 谷歌開發者大會焦點:大中華區新掌門亮相,Android 10原生支持5G,TF2.0大更新
    此外，新任谷歌大中華區總裁陳俊廷登場，宣布正式推出Grow with Google成長計劃。2016 年穀歌開發者大會在中國首次舉辦，2017 年穀歌宣布成立「AI 中國研發中心」，2018年穀歌的「AI+小程序」的產物「猜畫小歌」火遍中國，今年的谷歌開發者大會為我們帶來了什麼？
  • 2019谷歌開發者大會首日看點:Google Play的新變化
    2019 谷歌開發者大會 9 月 10-11 日在上海舉辦，大會首日，谷歌大中華區總裁陳俊廷做大會開幕主題演講，重點是正式宣布在國內推出 Grow
  • 2018谷歌I/O開發者大會前瞻:Android P值得期待
    蘋果在剛剛舉辦的教育發布會上推出了2018款iPad，幾乎所有的智慧型手機廠商都愛上了全面屏。接下來還有什麼？沒錯，現在已經是四月份，因此還有另外一場重頭戲很快就會與我們見面，也就是在1個多月之後。谷歌的I/O開發者大會也是每年一次，今年將在5月8日到10日於加州舊金山的Shoreline Amphitheatre劇場舉行。
  • 我是如何在谷歌開發者大會刷新世界觀的
    聽說超妹要去谷歌開發者大會，身邊的程式設計師同事們都覺得簡直暴殄天物羨慕哭了。那麼接下來，就由超哥攜超妹為大家帶來「谷歌黑科技大揭秘」——去谷歌開發者大會的路上，超哥興奮得像個送孩子上清華的父親，一直不停地叨叨無論是衣、食、住、行，或多或少都有谷歌在背後的技術支撐。
  • 谷歌I/O 2018開發者大會有哪些值得關注的亮點?
    對於谷歌這樣實力雄厚的科技巨頭而言，其年度開發者大會自然吸引全世界目光。谷歌公司提供大量令人眼花繚亂的服務，其中涉及幾乎一切消費級科技產品，更不必提谷歌擁有並運營的涵蓋無數用戶的核心網際網路產品。不過谷歌I/O大會的容納能力有限，因此其中必然需要考慮展示內容的優先級順序。
  • 谷歌io開發者大會2018:AI無處不在
    中國時間5月9日凌晨，谷歌一年一度的I/O開發者大會在舊金山山景城開幕。
  • 我們找到了最靠譜的2017谷歌I/O全球開發者大會預告
    數小時之後，2017年穀歌I/O全球開發者大會就會開始。谷歌CEO桑達爾·皮查伊(Sundar Pichai)會在大會上自曝家醜嗎？就像Facebook的扎克伯格在F8大會上承認自家網站上廣為流傳的謀殺事件那樣；或像微軟CEO 賽特亞·納德拉（Satya Nadella）那樣聳人聽聞——在Build大會上，他說科技可能會把人類帶到一個奧威爾式的未來。
  • 谷歌大會展示未來
  • Google 開發者大會主旨演講:更好賦能開發者
    2019 谷歌開發者大會正式開始啦~想知道大會第一天都發布了哪些精彩內容？趕緊往下看！在本屆的谷歌開發者大會上，谷歌藝術與文化展示了谷歌科技與文化碰撞的最新實驗項目，希望能夠通過這些實驗不斷探索文化、藝術與設計的邊界，以及技術如何與中國藝術和文化相互啟發。同時還正式發布了「觀妙中國」 Android 應用，讓所有中國的藝術與文化熱愛者都可以足不出戶、隨時隨地的用手機欣賞高清藝術品和珍藏文物。
  • Google 谷歌的未來 & 野心:2017 Google I/O 大會全程回顧
    前言Google I/O 大會：Innovation in the Open，開放中創新，是Google官方舉辦的開發者大會面向開發者
  • 谷歌I/O 2016開發者大會開幕,重磅推出AI、VR、深度學習
    今日凌晨一點，谷歌 I/O 2016開發者大會在山景城拉開序幕。10-15分鐘圖文閱讀，獵云為沒有熬夜看直播的你精彩回放。一開場，CEO Sundar Pichai上臺對谷歌進行介紹。 I/O大會已經有10年歷史，此次大會中國有100萬人同步收看。目前世界上有30億人使用網際網路和手機。
  • 精彩回顧 | 2020 Chrome 開發者峰會: 構建開放的 web 體驗
    在過去的一年中，我們集中精力從以下三個方面增強 web 體驗:以下內容來自 2020 Chrome 開發者峰會主題演講中所分享動態。更多精彩內容分享，請至 Bilibili 觀看完整活動視頻:我們繼續努力打造隱私沙盒 (Privacy Sandbox)，並致力於開發一套能夠從根本上增強網絡隱私的開放標準。