? 看了 web.dev 的 631 篇部落格，我總結了這些內容

web_dev_hero_image

如果你喜歡我的文章，希望點贊? 收藏 ? 評論 ? 三連支援一下，謝謝你，這對我真的很重要！

最近在做 web 效能優化的工作，所以想集中學習瞭解一下相關的專題內容。這部分內容肯定要學習一手資訊，所以找先找了 https://web.dev/，一個 Google 官方推出的一個面向 Web 開發者的網站，裡面有非常多的教程和最佳實踐，非常適合有效能優化訴求的開發者去瀏覽和學習。

網站的核心部分分為 4 類：

Learn：體系化的教程，例如效能優化和 PWA
Measure：就是一個線上版本的 Lighthouse，和 Chrome DevTools 的 Performance 功能一致
Case Study：優化案例（商業互吹），內容一般為採用 X 優化帶來資料 Y 的提升最終帶來 Z 的商業增長
Blog：內容較雜，優化教程/API 解讀/優化案例等等都有涉及

從上面的結構可以看出，Lean/Measure/CaseStudy 這三個章節內容都是比較體系化的，但是 Blog 內容卻沒有一個很好的分類。以我的閱讀經驗，Blog 裡有一些非常好的文章，所以我很好奇 Blog 章節裡有多少好東西可供挖掘，於是上個月的時候花了一些時間，把所有的 Blog 讀了一遍，並以自己的認知對內容做了分析和總結，以便自己後續回顧與搜尋。

內容分類：

截止到目前為止（2022-7-7），web.dev 一共釋出了 631 篇 blog，從 blog 的內容和釋出時間可以很明顯的看出 google 官方的發力（營銷）方向，比如說前幾年在推 PWA，這兩年在推 Web Vitals。縱觀下來，Blog 的內容可以分為以下幾類

效能指標：例如 Web Vitals，FMP，TTI 這些概念和相對應的優化策略
優化策略：例如對網路的優化，對圖片/字型/CSS/JS 的優化
UI/UX：這部分內容偏向於實戰和設計，最終會產出一些 UI Component
Web 特性：例如 Web Worker，WebXR，Wasm 等功能的介紹和教程
提案/API：主要是對一些提案的實現和現代瀏覽器 API 的介紹，內容偏向於文件，對開發者來說距離較遠
商業案例：其實就是 Case Study 章節的內容，只不過這部分內容也收錄在 Blog 裡

1.效能指標

種類	篇數	時間跨度
效能指標/優化/監控	34	主要為 2018 - 2022

效能指標絕對是 Google/Chrome 這兩年首推的內容了，從 2018 年到 2022，4 年的時間裡就推出了 34 篇文章，最近兩年的商業案例也基本都是「優化 Web Vitals 指標帶來商業收益的」的套路。文章整體的質量都不錯，從原因到解決方案到具體用例都有涉及。

2.優化策略

種類	篇數	時間跨度
網路優化	46	主要為 2018 - 2022
渲染	28	主要為 2013 - 2015，2018 做了相關修訂
圖片優化	13	主要為 2019
JS/JS 框架	15	主要為 2020 - 2021
font	8	2020 - 2021

從文章比例上就可以看出，Web 非常關注網路資源的優化，這是 Web 的優點也是 Web 的痛點，JS 執行的再快也扛不住一次網路異常，所以網路優化的內容非常多。

渲染優化的文章主要集中到 13-15 年，最近幾年很少說了，這個和歷史發展潮流也差不多，13-15 年屬於移動網際網路高速發展時期，Native 開發還是如日中天，Web 在渲染效能上確實不如 Native，現如今隨著核心的發展以及終端機效能的提升，渲染基本上已經不是效能瓶頸了，而且瀏覽器渲染模組對於 Web 開發者來說也很難去介入，所以內容較少也在情理之中。

JS 優化內容也比較少，一是對於大部分場景來說開發者還沒有到優化 JS 解決效能瓶頸，二是很多 JS 優化的內容都搬到 https://v8.dev/blog 了，所以只有幾篇早期的文章；JS 框架層的優化最近有一些，例如和 nextjs，react 的合作之類的。

圖片視訊字型的優化都屬於資源優化，內容也不錯，可以一起看看單項突破。

3.UI/UX

種類	篇數	時間跨度
CSS新特性/新屬性	27	主要為 2019 - 2020
UI 元件/設計	12	主要為 2021
互動	15	2019 - 2021

CSS 主要介紹的是一些 CSS新特性新屬性，還有一些關於 CSS 的使用/優化文章。

UI 是最近有些 blog 寫了些 UI 元件，感覺內容也可以學習一下。UX 內容就比較雜了，涉及到互動效果，可訪問性等內容，相對來說這個分類裡跨學科內容多一些。

4.Web 特性

種類	篇數	時間跨度
Web Worker/Service Worker	22	主要為 2020
PWA	16	主要為 2019 - 2020
瀏覽器	18	2018-2021
安全	10	主要為 2020 - 2021
WebGL/WebGPU	6	2012
WebXR	10	2017、2020
Wasm	8	2018 - 2021
Web Component	13	2016、2017

PWA 在前幾年 Google 一直在推，但在國內其實一直不溫不火的，大公司都有自己的 Hybrid H5 方案，小公司基本都去做小程式開發了；國外看似好一些，但做的最好的 twitter PWA，但我深度體驗一年後，發現和 Native 應用比差距還是很大，這已經算全世界做的最好的 PWA APP 了，由此可見 PWA 推廣道路之艱辛。不過 PWA 還是有很多值得學習參考的知識點的，還是有必要學習一下的。

Web Worker/Service Worker 加起來也有 22 篇文章，Web Worker 主要用來分散主執行緒的計算任務，Service Worker 主要起 Web Network 攔截器的作用（從效果上其實也可以歸類到網路效能優化裡），內容也是值得學習的。

瀏覽器分類主要是一些我不知道怎麼分類的瀏覽器特性，比如說 BFCache，Web 儲存方案介紹等等，內容相對較雜。

剩下的內容其實都比較散：

WebGL/WebGPU 的內容不多，而且成文時間也很早，而且 Web 3D 雖然依託於瀏覽器平臺，但實際上和傳統的 Web 開發完全是兩回事，所以內容少也可以理解
WebXR 內容也很少，主要還是功能介紹
Wasm 內容也較少，主要是入門教程
安全領域主要是對一些安全特性/安全 API 做的介紹
Web Component 有幾篇很不錯的系列教程可以當入門文章看

其實這些功能都屬於叫好不叫座的狀態，它們都大大提高了 Web 的上限，但是現實是沒有幾家公司需要突破傳統 Web 的上限，大家其實都遵循一個原則——能跑就行。

5.提案/API

種類	篇數	時間跨度
提案/實驗性功能/新 API	42	主要為 2019-2022

這部分內容對於普通開發者來說其實不是很必要。一是提案/實驗性功能/新 API都比較新，有相容性問題，一般很難在專案中落地；二是在現實場景裡，基本上很少有需求需要用到 Web 的 File API/Bluetooth API 等功能，一般這些場景都是遇到再看，所以這部分內容其實只要知道有就可以，要用到再看細節也不遲。

Blog 連結

這部分內容是整理出的 Blog 內容，我對其標註了釋出時間和檔案標題，並對一些內容做了簡評，方便後續搜尋和檢視。

Web Vitals

2022-5-16: How do modern frameworks perform on the new INP metric
2022-5-11: How SPA architectures affect Core Web Vitals
2022-1-18: Core Web Vitals workflows with Google tools 介紹了可以測量 Core Web Vitals 的一些通用工具
2021-8-17: Why lab and field data can be different (and what to do about it)
- 介紹了實驗室資料和使用者統計資料兩者的不同，以及產生這些不同的可能原因
2021-6-21: Towards a better responsiveness metric，對 FID 指標的探索
2021-6-2: CSS for Web Vitals，利用 CSS 優化 Web Vitals
2021-6-2: Evolving Cumulative Layout Shift in web tooling，CLS 在 web 效能工具裡的發展
2021-5-19: Techniques to make a web app load fast, even on a feature phone，裡面的效能優化流程挺不錯的，每一步優化都有資料
2021-5-11: Optimizing Web Vitals using Lighthouse，Lighthouse 對 Web Vitals 指標的檢測和優化建議
2021-5-11: Debug layout shifts，layout shifts 引起的原因以及如何識別、測量和修復
2021-5-9: How CLS optimizations increased Yahoo! JAPAN News's page views per session by 15%
- 2021-5-9: Aspect Ratio Boxes，一個保持長寬比的盒子
2021-4-7: Evolving the CLS metric，CLS 指標的測量細節
2021-4-1: Debug Web Vitals in the field，講如何測量 Web Vitals 指標
2021-1-25: Feedback wanted: The road to a better layout shift metric for long-lived pages，對 CLS 指標的探索
2020-8-20: Optimize Largest Contentful Paint
2020-8-17: Optimize Cumulative Layout Shift
2020-7-17: Relating site speed and business metrics，效能測試方法論
2020-5-28: Tools to measure Core Web Vitals
2020-5-27: Getting started with measuring Web Vitals
2020-5-27: Defining the Core Web Vitals metrics thresholds
2020-5-20: Optimize First Input Delay
2020-5-19: What's New in Lighthouse 6.0
2020-5-11: Best practices for measuring Web Vitals in the field
2020-1-8: Advancing the web framework ecosystem，講了一些框架在效能上的探索
2019-12-16: Speed tooling evolutions: highlights from Chrome Developer Summit 2019，新的 LCP/CLS 指標的提出
2019-12-16: Lighthouse evolution: continuous integration, new performance score formula, and more
2019-9-30: Fixing layout instability，修復佈局偏移
- https://www.npmjs.com/package...
2019-5-31: What should you measure to improve performance?
2019-5-29: Are long JavaScript tasks delaying your Time to Interactive?，TTI 的優化，要把大於 50ms 的長任務進行分塊處理
- https://philipwalton.com/arti...，對長任務的分解
2019-5-24: Speed at scale: what's new in web performance?
2019-5-5: How to report metrics and build a performance culture
2018-8-21: Web Performance Made Easy - Google I/O 2018 edition，網站優化指南
- https://github.com/aFarkas/la...
2018-8-17: How To Think About Speed Tools，介紹了一些對效能的誤解，還有一些效能統計工具
2014-1-21: User timing API，Timing API 的使用

網路

2022-3-8: Optimizing resource loading with Priority Hints
- fetchpriority 屬性的運用，用來修改資源載入優先順序，Chrome101 可用
- 這裡面有資源載入優先順序的表格和說明：https://docs.google.com/docum...
- Preload，Chrome 50，iOS 11.3
- Preconnect，Chrome 46，iOS 11.3
- dns-prefetch：Chrome 4
- https://wicg.github.io/priori...
- https://addyosmani.com/blog/s...
2022-2-24: Optimizing third-party script loading in Next.js
2022-2-7: Improve security and privacy by updating HTTP Cache
2021-10-14: Referrer，跨域安全內容，內含 strict-origin-when-cross-origin 介紹
2021-10-8: Assessing loading performance in the field with Navigation Timing and Resource Timing，統計資源請求的流程和時間
2021-10-5: Best practices for using third-party embeds
- 第三方嵌入的內容（地圖/視訊/圖片等）優化方案：延遲載入/圖片佔點陣圖/互動時再載入
- https://web.dev/third-party-f...
2021-9-29: Using WebTransport，一種新的網路傳輸方式
2021-9-22: Streaming requests with the fetch API，可以在 fetch stream 的時候在結束前處理結果
2021-9-10: Improving user privacy and developer experience with User-Agent Client Hints，新的 HTTP User-Agent
2021-6-15: The performance effects of too much lazy-loading
- 對懶載入的調研，發現 wordpress 一個不合理的優化：他們的懶載入會把首屏的圖片也懶載入了，這樣會劣化 LCP
2022-6-14: Security headers quick reference，跨域安全相關的 HTTP Header
2021-4-22: Keeping third-party scripts under control，對第三方網站的治理流程
2021-2-1: Requesting performance isolation with the Origin-Agent-Cluster header，新的 HTTP 頭
2021-1-25: When to use HTTPS for local development，什麼時候要用到本地 HTTPS 開發除錯
2021-1-25: How to use HTTPS for local development
2020-12-16: Publish, ship, and install modern JavaScript for faster applications
- https://estimator.dev/: 計算網站在採用現代 JavaScript 語法後可實現的尺寸和效能改進
- 網站 JS 程式碼膨脹的原因：轉換現代語法到傳統語法，體積膨脹 20%；polyfill lib helpers 函式帶來的體積膨脹
- 介紹了 package.json/webpack/Rollup/babel 的配置引數
2020-12-11: Love your cache ❤️，簡單的介紹了 HTTP 快取
2020-11-20: 對 Same-Site 的介紹
- 1. SameSite cookies explained
- 1. SameSite cookie recipes
- 1. Schemeful Same-Site
Feedback wanted: CORS for private networks (RFC1918)
2020-10-28: Measuring offline usage
2020-9-22: Content delivery networks (CDNs)，對 CDN 的介紹
2020-6-17: Improving page dismissal in synchronous XMLHttpRequest()，網路保活方案
2022-6-9: Signed Exchanges (SXGs)，加速 HTTPS 連線改善 FCP
2020-5-31: Fix an overloaded server，伺服器網路優化策略
2020-5-11: How to set up Signed HTTP Exchanges (SXG) using nginx
2020-5-11: How to distribute Signed HTTP Exchanges (SXG) using nginx
2020-5-5: How Google improved ads performance with stale-while-revalidate
2020-4-29: Improved Next.js and Gatsby page load performance with granular chunking
- 2018-12-6: HTTP/2 Prioritization
2019-12-16: Adaptive loading: improving web performance on slow devices，根據網路情況自適應載入資源
2019-9-12: Prefetch resources to speed up future navigations，Prefetch 的一些運用，用來優化導航效能
- A Netflix Web Performance Case Study
- https://github.com/GoogleChro...
2019-7-30: Establish network connections early to improve perceived page speed，preconnect 和 dns-prefetch 的運用
- https://www.igvita.com/posa/h...
2019-7-18: Keeping things fresh with stale-while-revalidate，stale-while-revalidate 的介紹
2019-7-8: Faster web navigation with predictive prefetching，一個用來整合到 webpack 等配置裡的 prefetch 框架，但是需要整合 google 分析等資料用來分析高頻頁面的互動資料，裡面還有機器學習模型進行預測
- https://github.com/guess-js
- https://guess-js.github.io/docs
- http://instantclick.io/
2019-6-6: Sending messages with web push libraries，對 Web Push 的介紹
2018-8-17: Decrease front-end size，webpack 的一些優化項
2015-5-27: Enabling HTTPS on Your Servers，如何在伺服器上開啟 HTTPS
2020-5-25: WebSocketStream: integrating streams with the WebSocket API
2020-2-19: How to set up Signed Exchanges using Web Packager
2015-3-27: Important Security Terminology，對 HTTPS 的介紹
https://www.susielu.com/data-...，chunk 拆包的介紹
2013-6-5: Deep dive into the murky waters of script loading，瀏覽器如何載入資源
- 標準：https://html.spec.whatwg.org/...
- https://hacks.mozilla.org/200...
- 動態建立並新增到 HTML 中的指令碼預設是 async 的，所以時序無法保證
2012-10-20: Introducing WebSockets - Bringing Sockets to the Web

渲染

2022-4-11: Bringing instant page-loads to the browser through speculative prerendering
- 只有 Chrome 支援
2019-8-27: Rendering on the Web
- 介紹了 CSR/NSR/Rehydration/Prerendering 等方案，裡面有個非常經典的圖
2011-10-21: Avoiding Unnecessary Paints - Animated GIF Edition
2011-8-16: Improving HTML5 Canvas performance，canvas 效能優化
2011-6-3: HTML5 techniques for optimizing mobile performance，文章比較老了

下面的文章其實都是 15 年寫的，18 年修訂的：https://web.dev/authors/paull...

2015-5-20: Stick to Compositor-Only Properties and Manage Layer Count，利用合成器屬性、管理檢視圖層（layer）
2015-5-20: Simplify paint complexity and reduce paint areas，減少 Paint 操作帶來的影響
2015-5-20: Rendering Performance，改進渲染效能
- udacity 瀏覽器渲染效能優化免費課程
2015-5-20: Reduce the scope and complexity of style calculations，減少樣式計算的範圍和複雜性
2015-5-20: Optimize JavaScript execution，優化 JS 執行效能
2015-5-20: Debounce your input handlers
2015-5-20: Avoid large, complex layouts and layout thrashing，避免佈局抖動
2014-8-8: The Basics of easing，動畫曲線
2014-8-8: Custom easing，動畫曲線
2014-8-8: Choosing the right easing，動畫時間
2014-8-8: Asymmetric animation timing，動畫時間的選擇
2014-8-8: Animations and performance，動畫效能，will-change屬性
2014-8-8: CSS versus JavaScript animations，CSS 動畫與 JS 動畫
2013-6-28: Antialiasing 101，抗鋸齒
2013-5-8: Avoiding unnecessary paints，避免沒必要的 paint
2013-4-12: CSS paint times and page render weight，CSS 不同屬性不同組合對渲染效能的影響
2013-5-11: Accelerated Rendering in Chrome，chrome 中的加速渲染
2012-11-2: Jank busting for better rendering performance
2012-12-20: Scrolling performance，滾動效能
2012-11-2: Jank busting for better rendering performance，更好的滾動效能
2011-10-21: Avoiding Unnecessary Paints - Animated GIF Edition
2011-8-5: How browsers work：瀏覽器如何執行的，文章比較老了

圖片

https://images.tooling.report/，查詢各個 SaaS 服務對圖片的優化
Building an adaptive favicon，用 svg 代替 ico 圖示
Building an effective Image Component，利用一個 image 元件優化圖片大小/寬高/優先順序
2021-6-7: Using AVIF to compress images on your site，介紹了 AVIF 圖片格式
- 2020-2-14: AVIF for Next-Generation Image Coding，Netflix 使用 AVIF 帶來的圖片優化
2019-11-22: Feedback from the summer 2019 image optimization survey
- LQIP：https://www.guypo.com/introdu...
2019-9-30: Preloading responsive images，響應式圖片 + Preload
2019-9-23: Optimize images with Thumbor，壓縮圖片的cdn，主要介紹了配置
2019-9-3: Going beyond images with basic video for the web
2019-6-24: Top tips for web performance，圖片尺寸優化，主要是利用瀏覽器屬性
2019-5-31: Image policies for fast load times and more，瀏覽器對圖片優化做的一些 API
2014-5-28: Easy high DPI images
2014-8-29: Responsive images，早期的圖片優化方案
2012-10-15: Splash vector graphics on your responsive site

字型

2022-1-19: Introduction to variable fonts on the web，可變字型，一個字型檔案可用動態切換多個字重（舊的字型需要多個字型檔案）
2021-7-30: Use advanced typography with local fonts，直接訪問本地字型。因為使用者安裝的本地字型容易被黑客利用獲取使用者隱私，所以只允許訪問白名單和作業系統內建的字型
- Web 安全字型：https://developer.mozilla.org...
- 安全字型表（Win & Mac）：https://www.cssfontstack.com/
- 瀏覽器指紋：http://www-sop.inria.fr/membe...
2021-6-9: CSS size-adjust for @font-face，新的 css 屬性，防止字型切換的時候帶來佈局變動從而劣化 CLS 指標
2021-6-3: Best practices for fonts
- 內聯字型宣告（而不是內聯字型本身）
- preconnect + preload
- 字型裁剪 + 可變字型
- font-display 的使用
2020-7-3: Optimize WebFont loading and rendering
- 介紹了瀏覽器載入字型的預設行為，並說明了一些字型屬性的運用
2020-5-26: More variable font options for the macOS system-ui font in Chromium 83，可變字型控制
2020-5-18: Prevent layout shifting and flashes of invisible text (FOIT) by preloading optional fonts，介紹了 font-display: optional 在 chrome83 的改動，由原來的佈局抖動模式變成載入前或 100ms 前白屏顯示了
- 2018-4-23: 通過預載入 web 字型提高載入速度
- https://font-display.glitch.me/：介紹了 font-display 的行為模式
- https://css-tricks.com/font-d...

JS/框架

2022-5-18: Perform efficient per-video-frame operations on video with requestVideoFrameCallback()
2021-6-28: Resource inlining in JavaScript frameworks
- 內聯首屏/關鍵 css，減少一次網路請求
- 內聯字型宣告
2021-6-7: Observing compute pressure，測量 CPU 資料的 API
2021-5-8: JavaScript: What is the meaning of this?，對 JS 中 this 的介紹
2021-2-25: Streams—The definitive guide，對瀏覽器中的 Streams API 的介紹
2020-9-29: Detached window memory leaks，記憶體洩漏檢測
2020-8-20: Choose the best build tool for your project with tooling.report
- https://bundlers.tooling.report/，用來對比不同構建工具的特點/優點/缺點
2020-5-26: How CommonJS is making your bundles larger。tree-shaking 的運用
- The Cost Of JavaScript In 2018
- The cost of JavaScript in 2019 · V8，有 JS bundle 大小的測量和考據
2020-4-29: Improved Next.js and Gatsby page load performance with granular chunking，通過分包提高效能
2019-4-29: Virtualize large lists with react-window，虛擬滾動列表
2019-8-13: Third-party JavaScript performance
2018-10-10: Async functions - making promises friendly，介紹 async function
2013-6-21: Static memory javascript with Object Pools，JS 物件池
2013-6-13: Use forensics and detective work to solve JavaScript performance mysteries，JS 效能問題的排查，使用了 V8 做除錯
2012-10-11: Performance tips for JavaScript in V8，文章較老，但內容也有參考價值

CSS

2022-5-11: Grid Bridging the gap
2021-10-19: Improved dark mode default styling with the color-scheme CSS property and the corresponding meta tag
2021-8-17: Using CSS Module Scripts to import stylesheets，Chrome 93 可用
2021-6-9: Building a color scheme，通過 hsl() 和 calc() 構建可動態計算的顏色主題
2021-5-27: New CSS functional pseudo-class selectors :is() and :where()
2021-5-22: Compat 2021: Eliminating five top compatibility pain points on the web，CSS flex/grid/sticky/aspect-ratio/transform 相容性
2021-5-9: content-visibility: the new CSS property that boosts your rendering performance
2021-1-28: New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly，新的 css 屬性 aspect-ratio，用來替換 padding-top hack，只有 Chrome88 以上和 iOS15 支援
2020-12-16: Centering in CSS，介紹了幾種 CSS 居中對齊的方案
2020-12-10: Cross-browser paint worklets and Houdini.how，介紹了 Houdini 這種新方案
2020-10-14: min(), max(), and clamp(): three logical CSS functions to use today
2020-9-14: Apply effects to images with CSS's mask-image property
2020-9-14: Create interesting image shapes with CSS's clip-path property
2020-9-2: Custom bullets with CSS ::marker，修改 li 標籤前面的小圓點樣式
2020-7-21: @property: giving superpowers to CSS variables，CSS Houdini 相關的 API
2020-7-7: Ten modern layouts in one line of CSS
2020-7-7: Pixel-perfect rendering with devicePixelContentBox，畫素相關的 API
2020-5-27: Web Animations API improvements in Chromium 84
2020-9-24: Next-generation web styling
2020-8-2: prefers-color-scheme: Hello darkness, my old friend，如何在網頁上開啟暗黑模式以及相關要注意的點
2019-9-19: Smarter custom properties with Houdini’s new API
2019-5-29: Extract critical CSS，提取首屏 CSS
2019-5-29: Extract and inline critical CSS with Critical，使用 Critical 提取首屏關鍵 CSS
- 14KB：
2019-8-29: Create OS-style backgrounds with backdrop-filter
2019-5-9: What's the CSS :scope pseudo-class for?
2014-9-17: Getting Started with CSS Shapes
2012-5-25: Understanding CSS filter effects

UI

2021-12-18: How Terra improved user engagement thanks to Dark Mode
2021-5-26: The new responsive: Web design in a component-driven world
2021-4-20: Building split text animations，文字動效
2021-5-17: Building a Settings component，偏向設計的 CSS 運用指南
2021-2-17: Building a Tabs component，Tab 元件的構建，用了很多 CSS 技巧
2021-1-26: Best practices for carousels，輪播圖的最佳實踐
2021-1-21: Building a sidenav component，對 sidenav 元件的探索
2020-12-9: Payment and address form best practices，表單設計
2020-11-25: Building a Stories component
2020-5-14: Responsive web design basics，響應式設計基礎知識
2019-8-31: Icons and browser colors，定義瀏覽器的元件顏色
2013-12-18: HTML's New Template Tag，HTML <template> 標籤

互動

2022-2-16: prefers-reduced-motion: Sometimes less movement is more，查詢使用者偏好，顯示/關閉網頁動畫
2021 Scroll Survey Report，一篇介紹滾動互動的報告
2021-5-29: Read files in JavaScript
2021-9-10: JavaScript eventing deep dive
- 對 preventDefault 和 stopPropagation 的深入研究
2021-5-30: Best practices for cookie notices，Cookie 通知的最佳實踐
2021-5-22: Control camera pan, tilt, and zoom
2020-2-22: Scroll snapping after layout changes
2020-7-24: Multi-device content
- 這裡面介紹了一個概念，The next billion users，下一個十億使用者，指收入少裝置差但是又有上網需求的使用者，但和中國的農村使用者不重疊（國內的網路要比亞非拉等地的網路好很多）
2019-6-8: Accessibility
2019-8-7: Animating Modal Views
2019-8-11: Animating Between Views
2019-12-6: Accessibility tips for web developers
2018-9-20: Basics of UX
2018-9-20: Add touch to your site，對觸控事件的說明
2013-5-13: Touch and mouse

Web Worker/Service Worker

2021-10-29: Bringing service workers to Google Search
- 2018-9-7: Speed up service worker with navigation preloads - Chrome Developers
2021-6-14: Indexing your offline-capable pages with the Content Indexing API，讓 Service Worker 能夠告訴瀏覽器哪些頁面可以離線工作
2021-5-13: ES modules in service workers
2020-12-10: Extending Workbox，Workbox 是一個用來處理 Service Worker 快取的工具箱，這篇文章主要介紹瞭如何制定自定義的快取方案
2020-12-8: Workers overview
- 介紹了 Web Worker 和 Service Worker
  - Web Worker：主要是做複雜計算的，抽象庫：https://github.com/GoogleChro...，介紹：https://surma.dev/things/when...
  - Service Worker：主要是攔截網路請求的，抽象庫：https://developer.chrome.com/...
- Imperative caching guide：命令式單向快取
- Broadcast updates to pages with service workers：廣播式更新
- Two-way communication with service workers：雙向通訊
- 2019-12-5: Use web workers to run JavaScript off the browser's main thread
2020-10-6: Handling range requests in a service worker
2020-8-20: Resilient search experiences，Using a service worker to save a search query when a user goes offline and then automatically retry the query once a connection is re-established.
2020-8-20: Adaptive loading with service workers，使用 service workers 載入自適應資源
2020-7-17: Service worker caching and HTTP caching，快取
2020-7-13: Handling navigation requests，Service Worker 處理導航請求
2020-4-27: The Cache API: A quick guide，Cache API，用來控制網路快取，儘管它被定義在 service worker 的標準中，但是它不必一定要配合 service worker 使用
2019-12-17: Threading the web with module workers
2019-6-4: Service worker mindset
- https://serviceworkies.com/：一個學習 Service worker 的遊戲網站
2018-9-20: Service worker registration
2018-2-27: Measuring the Real-world Performance Impact of Service Workers
2015-10-1: Service Workers in Production
2013-7-30: The synchronous FileSystem API for workers

如果你喜歡我的文章，希望點贊? 收藏 ? 評論 ? 三連支援一下，謝謝你，這對我真的很重要！

歡迎大家關注我的微信公眾號：滷蛋實驗室，目前專注前端技術，對圖形學也有一些微小研究。

原文連結 ? web-dev-blog：更新更及時，閱讀體驗更佳

? 看了 web.dev 的 631 篇部落格，我總結了這些內容

內容分類：

1.效能指標

2.優化策略

3.UI/UX

4.Web 特性

5.提案/API

Blog 連結

Web Vitals

網路

渲染

圖片

字型

JS/框架

CSS

UI

互動

Web Worker/Service Worker

PWA

安全

瀏覽器

WebGL/WebGPU

WebXR

WebAssembly

Web Component

提案/實驗性功能/新 API

相關文章