2019年Chrome開發者峯會亮點：讓全部用戶告別加載延遲

2019年Chrome開發者峯會亮點：讓全部用戶告別加載延遲

做者｜Dion Almaer譯者｜王強編輯｜王文婧做爲有史以來最大的開放生態系統，Web 是一個規模龐大的公衆產業。現在，互聯網上有超過 15 億家活躍網站，爲全球近 45 億 Web 用戶提供服務。用戶在站點之間跳轉時會得到一種獨特的體驗，彷彿整個 Web 世界已經融爲一體。在剛剛舉行的 Chrome 開發者峯會（CDS）上，人們關注的重點是如何爲開發者提供多樣化的能力，以知足用戶的不一樣需求。本文做者爲你們介紹了本次 CDS 的一些要點。擴展 Web 的功能和用途

咱們的目標是讓全部用戶告別加載延遲。

在今年的 I/O 大會上，咱們預覽了 Portals，這項新技術使開發人員能夠預渲染內容並按需將其嵌入到頁面中，以改變用戶在 Web 上跳轉頁面的方式，從而創造無縫的體驗。咱們很高興看到像 Fandango 這樣的早期合做夥伴已經開始在他們的網站上測試這種新的導航風格。Portals 位於 chrome://flags/#enable-portals 標誌後，供開發人員試驗。

Portals：https://web.dev/hands-on-portals/

Fandango 網站的 Portals 演示

在今年的 CDS 上，咱們還預覽了 Web Bundles，這是一種基礎架構 API，開發人員能夠經過它以任何格式（電子郵件、FTP 甚至 USB）分發他們的 Web 內容，而內容自己不會有任何改動。這種技術不只可以以閃電般的速度交付 Web 內容，並且即便用戶處於脫機狀態，也能夠實現點對點內容分發。未來，諸如 後臺按期同步（Background Periodic Sync） 和 內容索引（Content Indexing） 之類的 API，將使開發人員能夠主動緩存和顯示相關的 Web 內容，即便用戶沒有 Internet 鏈接也能繼續瀏覽頁面。如今，Web Bundles 已經能夠在實驗標誌後可用，而另外兩項新技術如今能夠經過 Origin Trials 使用。

Web Bundles：https://web.dev/web-bundles/

Web 內容的消費從未像如今這樣多樣化。在發展中市場中，「移動優先」潮流的興起已經是既定事實。咱們還看到，在全球範圍內的年輕用戶羣中，跨設備計算也在增加。咱們在努力讓這一平臺變得足夠強大，以使開發人員創造出用戶所指望的現代化體驗，同時充分發揮 Web 的便利性優點。咱們在集中精力開發功能強大的 Web 應用程序，從而持續爲平臺帶來爲數衆多的舉措，包括：

• SMS 接收器（SMS Receiver）：容許 Web 應用程序獲取雙因素驗證短信。https://web.dev/sms-receiver-api-announcement/
• 內容拾取器（Contact Picker）：容許人們將 Web 內容共享到其聯繫人列表中，從而將社交媒體和通訊功能引入 Web 應用程序。https://web.dev/contact-picker/

• 原生文件系統 API：使 Web 應用程序能夠直接讀取或保存對用戶設備上的文件和文件夾所作的更改。這使開發人員能夠構建功能強大、可以與用戶本地設備上的文件交互的應用程序，例如 IDE、照片、視頻編輯器和文本編輯器等。https://web.dev/native-file-system/

在這個領域，咱們還有不少工做正在進行中，咱們火燒眉毛地想看看大家使用這些功能構建了怎樣的內容。你能夠在咱們的博客上閱讀有關支持最新 Web 體驗的最新情報。

https://blog.chromium.org/2019/11/making-new-experiences-possible-on-web.html

不管使用框架仍是 CMS，都能走向成功

做爲 Web 開發人員，咱們正在集體經歷一段旅途，爲人們提供最佳且獨特的 Web 體驗。在這種集體責任的背景下，關於 Web 運行情況的準確、可行的數據變得愈來愈重要。

CDS 爲咱們提供了一個檢查點，能夠用來了解咱們的工做方式，並就下一步方向展開討論。咱們可使用 HTTP Archive，瞭解 Web 的構建方式；使用「Chrome 用戶體驗報告」，獲知 Web 的用戶體驗狀況。在過去的一年中，使用快速的"First Contentful Paint"和「First Input Delay「（咱們的加載和交互性的核心指標）的網站比例呈現了增加的趨勢。

HTTP Archive：https://httparchive.org/

Chrome 用戶體驗報告：https://developers.google.com/web/tools/chrome-user-experience-report

用戶體驗質量的衡量是多方面的，今天咱們引入了兩個新指標，使開發人員能夠全面瞭解其網站的運行狀況。它們分別是 Largest Contentful Paint（用戶看到最有意義的頁面內容的速度有多快）和Cumulative Layout Shift（感知到的頁面穩定性）。

如今，數據自己雖然頗有用，可是能夠帶來修復和改進的看法則更有價值。咱們常常被問到「我該如何處理這些信息？」咱們與社區中的許多專家合做製做了 Web 年鑑，使開發人員能夠全面瞭解 Web 的運行情況。咱們今天發佈了超過 17 個章節，將來還會分享更多這樣的看法。

Web 年鑑：http://almanac.httparchive.org/

開發人員在很是努力地朝着正確的方向改善他們的性能指標，所以咱們正在尋找方法來獎勵那些更進一步的開發人員。咱們分享了一些早期探索成果，在 Chrome 用戶界面中的速度信號。

左側：較慢網站中顯示的加載界面信息；右側：較快網站中顯示綠色的進度條。

框架、庫和 CMS 構成了開發者生態系統的重要組成部分，咱們在熱情地支持他們爲用戶建立即時和無縫體驗的旅程。今年早些時候，咱們爲 WordPress 和 React 建立了 Lighthouse Stack Packs，以支持他們的開發者生態系統建立快速且可靠的站點，今天咱們進一步擴大了這一技術的覆蓋範圍，新增對 Angular、AMP 以及電子商務 CMS、Magento 的支持，爲使用各類工具的開發人員都帶來了更具可行性的看法。

Lighthouse Stack Packs：https://developers.google.com/web/updates/2019/01/lighthouse-platform-packs

咱們很高興看到 Framework Fund（框架基金）支持了許多有意義的項目，這些項目可讓開發者更容易實現性能目標。咱們還期待今年能有更多項目得到基金的資助。

項目：https://opencollective.com/chrome

最後，咱們發佈了 Lighthouse CI，爲開發人員提供針對每一個拉取請求的看法。開發人員能夠迅速將 Lighthouse CI 加入本身的構建管道，以充分了解他們所作的更改效果及其對站點質量的影響。

讓瀏覽器適合每一位用戶

咱們相信，不管用戶的設備類型、聯網速度或購買力如何，Web 都屬於每個人。爲了確保全部人都能使用這一平臺，咱們正在投資改善瀏覽器的性能和內存佔用，引入了諸如圖像延遲加載之類的新功能——該功能如今對 Chrome Lite 用戶默承認用；另外一項功能名爲 Paint Holding，即將在 Chrome 中推出。

Web 必須是讓全部人感到安全和可信賴的場所。爲了進一步改進圍繞 HTTPS 加密的舉措，咱們正在與社區合做，開始默認阻止全部混合內容——也就是 HTTPS 頁面上不安全的 HTTP 子資源，同時還在測試 DNS over HTTPS，這一協議經過加密瀏覽器和 DNS 提供商之間的流量來提供更好的安全和隱私水平。

咱們還會遵照咱們在 I/O 大會上的承諾，使咱們現有的第三方 Cookie 控件更加可見。從 Chrome M79 Beta 版本開始，咱們正在嘗試使用一個開關來控制新隱身標籤頁上的第三方 Cookie。咱們還正在從新設計設置頁面，以便用戶在常規模式下更輕鬆地訪問這一控件。最後，除了在改善現有 Cookie 基礎架構方面繼續取得進展外，咱們還將繼續開發「隱私沙箱「技術，這是一種內容安全的環境，還能夠保護用戶的隱私。

「隱私沙箱」：https://blog.chromium.org/2019/08/potential-uses-for-privacy-sandbox.html

咱們要感謝整個 Web 社區在平臺上的持續投入。咱們相信提高每位用戶的 Web 體驗是咱們的集體責任，本着這種精神，讓咱們爲 Web 中的「咱們「乾杯。

原文連接：https://blog.chromium.org/2019/11/chrome-dev-summit-2019-elevating-web.html

 活動推薦

近年來，隨着 jQuery 的落幕，三大框架的割據以及小程序的爆發，大前端的發展也經歷了從靜態頁面到 JavaScript 跨時代的誕生，再從 PC 端到移動端的轉向，以及由依賴後端到先後端分離的架構演變。

騰訊在線教育前端團隊，近年來在大前端技術架構演進方面也有了很多突破，如 Hybird 方案、離線包方案、PWA 結合 *** 方案、以及 RN 動態化方案的落地和執行等。

此次 GMTC 全球大前端技術大會（深圳站）2019，咱們專門請到了 騰訊的前端高級工程師曹海歌，但願能夠從騰訊在線教育前端團隊的實操案例中，深刻了解騰訊爲提高研發效率，進行的前端工程化體系建設過程。掃描下方二維碼或點擊閱讀原文，查看詳情。