🗂 对 web.dev 所有 blog 的整理与归档

更新提示

文章已于 2022-10-10 更新

最近在做 web 性能优化的工作，所以想集中学习了解一下相关的专题内容。这部分内容肯定要学习一手信息，所以找先找了 https://web.dev/，一个 Google 官方推出的一个面向 Web 开发者的网站，里面有非常多的教程和最佳实践，非常适合有性能优化诉求的开发者去浏览和学习。

网站的核心部分分为 4 类：

Learn：体系化的教程，例如性能优化和 PWA
Measure：就是一个在线版本的 Lighthouse，和 Chrome DevTools 的 Lighthouse 功能一致
Case Study：优化案例（商业互吹），内容一般为采用 X 优化带来数据 Y 的提升最终带来 Z 的商业增长
Blog：内容较杂，优化教程/API 解读/优化案例等等都有涉及

从上面的结构可以看出，Lean/Measure/CaseStudy 这三个章节内容都是比较体系化的，但是 Blog 内容却没有一个很好的分类。以我的阅读经验，Blog 里有一些非常好的文章，所以我很好奇 Blog 章节里有多少好东西可供挖掘，于是花了几个月的时间，把所有的 Blog 读了一遍，并以自己的认知对内容做了分析和总结，以便自己后续回顾与搜索。

内容分类：

截止到文章更新时间为止（2022-10-10），web.dev 一共发布了 657 篇 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.性能指标

种类	篇数	时间跨度
性能指标/优化/监控	35	主要为 2018 - 2022

性能指标绝对是 Google/Chrome 这两年首推的内容了，从 2018 年到 2022，4 年的时间里就推出了 34 篇文章，最近两年的商业案例也基本都是「优化 Web Vitals 指标带来商业收益的」的套路。文章整体的质量都不错，从原因到解决方案到具体用例都有涉及。

2.优化策略

种类	篇数	时间跨度
网络优化	47	主要为 2018 - 2022
渲染	28	主要为 2013 - 2015，2018 做了相关修订
图片优化	13	主要为 2019
JS/JS 框架	16	主要为 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新特性/新属性	28	主要为 2019 - 2020
UI 组件/设计	18	主要为 2022 - 2021
交互	16	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	14	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	43	主要为 2019-2022

这部分内容对于普通开发者来说其实不是很必要。一是提案/实验性功能/新 API都比较新，有兼容性问题，一般很难在项目中落地；二是在现实场景里，基本上很少有需求需要用到 Web 的 File API/Bluetooth API 等功能，一般这些场景都是遇到再看，所以这部分内容其实只要知道有就可以，要用到再看细节也不迟。

Blog 链接

这部分内容是整理出的 Blog 内容，我对其标注了发布时间和文件标题，并对一些内容做了简评，方便后续搜索和查看。

下面的文章其实都是 15 年写的，18 年修订的：https://web.dev/authors/paullewis/

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/introducing-lqip-low-quality-image-placeholders
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/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts
- 安全字体表（Win & Mac）：https://www.cssfontstack.com/
- 浏览器指纹：http://www-sop.inria.fr/members/Nataliia.Bielova/papers/Lape-etal-20-TWEB.pdf
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-display-masses/

JS/框架

2022-10-3: Optimize long tasks，优化 long tasks（50ms 以上的 task 就是 long task）
- 利用 setTimeout/postMessage/requestIdleCallback 手动推迟代码运行
- 利用 async await 和 setTimeout 搞一个 yieldToMain 函数封装任务队列执行，还可以封装 isInputPending 事件监测
- 新的 postTask 调度 API 使用
- 可以同步看腾讯文档的优化：异步分片计算在腾讯文档的实践
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-8-2: Finer grained control over CSS transforms with individual transform properties，拆分设置 transform 属性
2022-5-11: Bridging the gap，Grid 布局
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

2022-10-6: Building a floating action button (FAB) component，创建一个浮动按钮，样子就是 Android Material UI 中右下角的浮动加号按钮
2022-9-22: Speedy CSS Tip! Animated Loader，纯 CSS 画了一个经典 loading 菊花图
2022-9-7: Building the main navigation for a website，导航组件的设计
2022-8-24: Creative list styling，列表样式
2022-8-24: Building a crooked grid illusion
2022-8-1: CSS border animations，CSS 设置边框动画的小技巧
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-9-22: Testing Web Design Color Contrast，对于颜色可访问性的探索，介绍了 3 个不错的工具
- Pika：一个 MacOS 的检测工具，SwiftUI 写的，源码有学习价值
- VisBug
- Chrome DevTools
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/GoogleChromeLabs/comlink，介绍：https://surma.dev/things/when-workers/
  - Service Worker：主要是拦截网络请求的，抽象库：https://developer.chrome.com/docs/workbox/
- 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

PWA

2022-6-8: Get things done quickly with app shortcuts
2022-5-30: Integrate with the OS sharing UI with the Web Share API
2022-5-28: Badging for app icons，在桌面图标上显示角标
2021-9-16: Is your app installed? getInstalledRelatedApps() will tell you!
2021-6-7: Receiving shared data with the Web Share Target API
2021-5-19: Adaptive icon support in PWAs with maskable icons，PWA 的启动图标
2020-10-14: WebAPKs on Android
2020-8-20: Instant navigation experiences
2020-8-8: Richer offline experiences with the Periodic Background Sync API
2020-7-10: Progressively enhance your Progressive Web App，渐进式增强 PWA，但是有很多可以学习的点
2019-12-19: Integrate PWAs into built-in sharing UIs with Workbox
2019-11-8: OYO Lite: a TWA with the best of web and Android apps
2019-8-19: Progressive Web Apps in multi-origin sites
2019-6-12: Address Bar Install for Progressive Web Apps on the Desktop
2019-6-4: How do I notify users that my PWA is installable?
2016-6-10: Building the Google I/O 2016 Progressive Web App

安全

2022-1-25: Digging into the Privacy Sandbox
2021-12-21: Making your website "cross-origin isolated" using COOP and COEP
2021-12-10: Getting started with Trust Tokens
2020-7-16: Empowering payment apps with Web Payments
2021-5-21: Why should you deploy a strict Content Security Policy (CSP)?，Web CSP 安全的相关内容
2020-6-10: Protect your resources from web attacks with Fetch Metadata
2020-6-19: Content security policy
2020-5-25: Android payment app developers guide
2020-5-4: Why you need "cross-origin isolated" for powerful features
2016-5-17: EME WTF?

浏览器

2022-7-1: The end of Internet Explorer
- 2020-7-10: CSS Grid in IE: CSS Grid and the New Autoprefixer | CSS-Tricks - CSS-Tricks
2021-11-15: Back/forward cache，介绍了 BFCache
2021-8-23: Preparing for AppCache removal，移除 AppCache 的支持
2021-7-29: Browser-level lazy-loading for CMSs
2021-1-25: Human interface devices on the web: a few quick examples
2021-1-8: Automating audits with AutoWebPerf，性能测试工具
2021-1-7: Deprecating Excalidraw Electron in favor of the web version
- https://youmightnotneedelectron.com/，也许不需要 electron 的原因：Web 提供了很多 API
2020-9-3: Introducing <model-viewer> 1.1
2020-8-21: The <model-viewer> web component
2020-8-5: Web on Android，简单介绍了 Android 上的 WebView 架构
2020-5-26: ResizeObserver: it’s like document.onresize for elements
2020-4-27: Storage for the web，介绍了几种 web storage 的不同
2019-6-5: Making JavaScript and Google Search work together，这个意味着 Google SEO 机器人可以爬取 SPA 这种大量依赖 JS 生成网站的网页，属于一个非常大的进步了
- https://developers.google.com/search/blog/2019/05/the-new-evergreen-googlebot
2019-3-16: Introduction to fetch()，对 fetch API 的介绍
2018-9-20: Best Practices for Using IndexedDB
2018-9-20: Web storage overview，介绍 Web 上的存储方案
2018-9-20: Social discovery

WebGL/WebGPU

2022-5-1: Get started with GPU Compute on the web，简单介绍了 WebGPU
2013-9-16: Canvas inspection using Chrome DevTools，对 canvas 的调试
2012-7-20: Typed arrays - Binary data in the browser
2012-6-20: WebGL orthographic 3D
2012-8-18: WebGL transforms
2012-2-9: WebGL Fundamentals
2011-6-2: An introduction to shaders

WebXR

2020-6-4: Positioning virtual objects in real-world views
2020-5-2: Virtual reality comes to the web
2020-2-13: Virtual reality comes to the web, part II
2020-2-13: Augmented reality: You may already know it
2018-7-30: Welcome to the immersive web
2017-2-2: Rendering Text in WebVR
2017-2-2: Core Interactions in the WebVR Lab
2017-2-2: Matterport VR for WebVR
2017-11-6: Bear 71 and WebVR

WebAssembly

2021-8-13: Emscripten’s embind
2021-4-26: Using asynchronous web APIs from WebAssembly
2020-8-13: Debugging memory leaks in WebAssembly using Emscripten
- https://developer.chrome.com/docs/web-platform/webgpu/
2019-9-22: Emscripten and npm
2019-6-20: How we're bringing Google Earth to the web
2019-9-25: WebAssembly Threads ready to try in Chrome 70
2018-8-22: Extending the browser with WebAssembly
2018-10-23: Loading WebAssembly modules efficiently

Web Component

2022-8-17: How Nordhealth uses Custom Properties in Web Components，Web Components 的使用案例介绍
2022-2-23: Constructable Stylesheets
2019-6-18: Web components: the secret ingredient helping power the web
2018-9-20: Building components
- Custom Elements: 2019-9-5: Custom Elements v1 - Reusable Web Components
- Shadow DOM: 2020-6-27: Shadow DOM v1 - Self-Contained Web Components
- Best Practices: 2019-9-5: Custom Element Best Practices
- Examples
  - 2017-8-14: HowTo Components – Overview
  - 2017-10-11: HowTo Components – howto-tooltip
  - 2017-10-11: HowTo Components – howto-tabs
2017-1-10: Web Components v1 - the next generation
2016-10-3: Shadow DOM 101
2016-10-3: Shadow DOM 201
2016-10-3: Shadow DOM 301

提案/实验性功能/新 API

2022-9-2: Is it :modal?，新的浏览器原生提供的 modal 组件，Chrome105，Safari 15.6 支持
2022-7-1: TransformStream is now supported cross-browser
2022-6-15: Let installed web applications be file handlers，file API
2022-6-2: The File System Access API: simplifying access to local files
2022-4-5: Breaking down barriers using the DataTransfer API，对 DataTransfer API 的介绍
2022-5-10: Unblocking clipboard access，现代浏览器 clipboard API
2022-5-6: Access USB Devices on the Web
2022-4-21: Read from and write to a serial port
2022-4-4: Capture Keys with the Keyboard Lock API
2022-2-10: Video processing with WebCodecs，处理视频流的新提案
2022-1-27: Interact with NFC devices on Chrome for Android
2021-10-1: Communicating with Bluetooth devices over JavaScript，蓝牙 API
2021-12-3: Notification Triggers
2021-11-2: Customize media notifications and playback controls with the Media Session API
2021-11-10: Managing several displays with the Multi-Screen Window Placement API，多显示器管理 API，需要开 flag
2021-8-25: Detect inactive users with the Idle Detection API，空闲检测 API
2021-5-19: Migrate to User-Agent Client Hints，新的 UA 属性，用 userAgentData 替代 userAgent，有个相关的 polyfill 库
2021-4-14: Declarative Shadow DOM
2021-2-26: Trust is good, observation is better: Intersection Observer v2
2021-2-23: Stay awake with the Screen Wake Lock API
2021-2-23: A contact picker for the web
2021-2-23: The Shape Detection API: a picture is worth a thousand words, faces, and barcodes
2021-2-23: WebSocketStream: integrating streams with the WebSocket API
2021-2-17: Sensors for the web，传感器 API（加速度/重力/陀螺仪/方向传感器）
2021-2-12: Improving user privacy and developer experience with User-Agent Client Hints
2021-1-26: Capturing an image from the user，相机相册 API
2021-1-25: Reading and writing files and directories with the browser-fs-access library，文件读取 API
2020-12-3: Building a device for WebUSB
2020-11-19: Better JS scheduling with isInputPending()，JS 调度新 API
2020-10-19: Monitor your web page's total memory usage with measureUserAgentSpecificMemory()，测量页面内存占用情况
2020-10-13: Logical layout enhancements with flow-relative shorthands，一个布局方向的提案
2020-7-24: It's time to lazy-load offscreen iframes!，iframe 懒加载 API
2020-5-27: Know your code health with the ReportingObserver API
2020-5-17: Boldly link where no one has linked before: Text Fragments，开放了一个新的 API，即使是非标题文字也能自动创建 hash fragments 了
2020-5-4: Profiling Web Audio apps in Chrome，音频调试工具
2019-11-11: Get started with Web Bundles
2019-8-8: More capable form controls
2019-6-13: Updates to the Web Payments APIs
2019-6-12: How YouTube improved video performance with the Media Capabilities API
2019-2-15: Hands-on with Portals: seamless navigation on the web
2018-3-14: Credential Management API Feature Detection Check-up
2013-10-29: Getting started with Web Audio API
2013-10-29: Getting started with Web Audio API

个人微信：egg_labs

一个小尾巴

欢迎关注公众号：卤代烃实验室：专注于前端技术、混合开发、图形学领域，只写有深度的技术文章

内容分类：​

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​