⏱ 看了 web.dev 的 631 篇博客，我总结了这些内容

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

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

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

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

内容分类：

截止到目前为止（2022-7-7），web.dev 一共发布了 631 篇 blog，从 blog 的内容和发布时间可以很明显的看出 google 官方的发力（营销）方向，比如说前几年在推 PWA[6]，这两年在推 Web Vitals[7]。纵观下来，Blog 的内容可以分为以下几类

• 性能指标：例如 Web Vitals，FMP，TTI 这些概念和相对应的优化策略
• 优化策略：例如对网络的优化，对图片/字体/CSS/JS 的优化
• UI/UX：这部分内容偏向于实战和设计，最终会产出一些 UI Component
• Web 特性：例如 Web Worker，WebXR，Wasm 等功能的介绍和教程
• 提案/API：主要是对一些提案的实现和现代浏览器 API 的介绍，内容偏向于文档，对开发者来说距离较远
• 商业案例：其实就是 Case Study[8] 章节的内容，只不过这部分内容也收录在 Blog 里

1.性能指标

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

2.优化策略

从文章比例上就可以看出，Web 非常关注网络资源的优化，这是 Web 的优点也是 Web 的痛点，JS 运行的再快也扛不住一次网络异常，所以网络优化的内容非常多。

渲染优化的文章主要集中到 13-15 年，最近几年很少说了，这个和历史发展潮流也差不多，13-15 年属于移动互联网高速发展时期，Native 开发还是如日中天，Web 在渲染性能上确实不如 Native，现如今随着内核的发展以及终端机性能的提升，渲染基本上已经不是性能瓶颈了，而且浏览器渲染模块对于 Web 开发者来说也很难去介入，所以内容较少也在情理之中。

JS 优化内容也比较少，一是对于大部分场景来说开发者还没有到优化 JS 解决性能瓶颈，二是很多 JS 优化的内容都搬到 https://v8.dev/blog[9] 了，所以只有几篇早期的文章；JS 框架层的优化最近有一些，例如和 nextjs，react 的合作之类的。

图片视频字体的优化都属于资源优化，内容也不错，可以一起看看单项突破。

3.UI/UX

CSS 主要介绍的是一些 CSS新特性新属性，还有一些关于 CSS 的使用/优化文章。

UI 是最近有些 blog 写了些 UI 组件，感觉内容也可以学习一下。UX 内容就比较杂了，涉及到交互效果，可访问性等内容，相对来说这个分类里跨学科内容多一些。

4.Web 特性

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都比较新，有兼容性问题，一般很难在项目中落地；二是在现实场景里，基本上很少有需求需要用到 Web 的 File API/Bluetooth API 等功能，一般这些场景都是遇到再看，所以这部分内容其实只要知道有就可以，要用到再看细节也不迟。

Blog 链接

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

Web Vitals

• 2022-5-16: How do modern frameworks perform on the new INP metric[10]
• 2022-5-11: How SPA architectures affect Core Web Vitals[11]
• 2022-1-18: Core Web Vitals workflows with Google tools[12] 介绍了可以测量 Core Web Vitals 的一些通用工具
• 2021-8-17: Why lab and field data can be different (and what to do about it)[13]
  • 介绍了 实验室数据和用户统计数据 两者的不同，以及产生这些不同的可能原因
• 2021-6-21: Towards a better responsiveness metric[14]，对 FID 指标的探索
• 2021-6-2: CSS for Web Vitals[15]，利用 CSS 优化 Web Vitals
• 2021-6-2: Evolving Cumulative Layout Shift in web tooling[16]，CLS 在 web 性能工具里的发展
• 2021-5-19: Techniques to make a web app load fast, even on a feature phone[17]，里面的性能优化流程挺不错的，每一步优化都有数据
• 2021-5-11: Optimizing Web Vitals using Lighthouse[18]，Lighthouse 对 Web Vitals 指标的检测和优化建议
• 2021-5-11: Debug layout shifts[19]，layout shifts 引起的原因以及如何识别、测量和修复
• 2021-5-9: How CLS optimizations increased Yahoo! JAPAN News's page views per session by 15%[20]
  • 2021-5-9: Aspect Ratio Boxes[21]，一个保持长宽比的盒子
• 2021-4-7: Evolving the CLS metric[22]，CLS 指标的测量细节
• 2021-4-1: Debug Web Vitals in the field[23]，讲如何测量 Web Vitals 指标
• 2021-1-25: Feedback wanted: The road to a better layout shift metric for long-lived pages[24]，对 CLS 指标的探索
• 2020-8-20: Optimize Largest Contentful Paint[25]
• 2020-8-17: Optimize Cumulative Layout Shift[26]
• 2020-7-17: Relating site speed and business metrics[27]，性能测试方法论
• 2020-5-28: Tools to measure Core Web Vitals[28]
• 2020-5-27: Getting started with measuring Web Vitals[29]
• 2020-5-27: Defining the Core Web Vitals metrics thresholds[30]
• 2020-5-20: Optimize First Input Delay[31]
• 2020-5-19: What's New in Lighthouse 6.0[32]
• 2020-5-11: Best practices for measuring Web Vitals in the field[33]
• 2020-1-8: Advancing the web framework ecosystem[34]，讲了一些框架在性能上的探索
• 2019-12-16: Speed tooling evolutions: highlights from Chrome Developer Summit 2019[35]，新的 LCP/CLS 指标的提出
• 2019-12-16: Lighthouse evolution: continuous integration, new performance score formula, and more[36]
• 2019-9-30: Fixing layout instability[37]，修复布局偏移
  • https://www.npmjs.com/package/source-map-explorer
• 2019-5-31: What should you measure to improve performance?[38]
• 2019-5-29: Are long JavaScript tasks delaying your Time to Interactive?[39]，TTI 的优化，要把大于 50ms 的长任务进行分块处理
  • https://philipwalton.com/articles/idle-until-urgent/，对长任务的分解
• 2019-5-24: Speed at scale: what's new in web performance?[40]
• 2019-5-5: How to report metrics and build a performance culture[41]
• 2018-8-21: Web Performance Made Easy - Google I/O 2018 edition[42]，网站优化指南
  • https://github.com/aFarkas/lazysizes#readme
• 2018-8-17: How To Think About Speed Tools[43]，介绍了一些对性能的误解，还有一些性能统计工具
• 2014-1-21: User timing API[44]，Timing API 的使用

网络

• 2022-3-8: Optimizing resource loading with Priority Hints[45]
  • fetchpriority 属性的运用，用来修改资源加载优先级，Chrome101 可用
  • 这里面有资源加载优先级的表格和说明：https://docs.google.com/document/d/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc/edit#heading=h.ua1godj1atee
  • Preload[46]，Chrome 50，iOS 11.3
  • Preconnect[47]，Chrome 46，iOS 11.3
  • dns-prefetch：Chrome 4
  • https://wicg.github.io/priority-hints/
  • https://addyosmani.com/blog/script-priorities/
• 2022-2-24: Optimizing third-party script loading in Next.js[48]
• 2022-2-7: Improve security and privacy by updating HTTP Cache[49]
• 2021-10-14: Referrer[50]，跨域安全内容，内含 strict-origin-when-cross-origin 介绍
• 2021-10-8: Assessing loading performance in the field with Navigation Timing and Resource Timing[51]，统计资源请求的流程和时间
• 2021-10-5: Best practices for using third-party embeds[52]
  • 第三方嵌入的内容（地图/视频/图片等）优化方案：延迟加载/图片占位图/交互时再加载
  • https://web.dev/third-party-facades/
• 2021-9-29: Using WebTransport[53]，一种新的网络传输方式
• 2021-9-22: Streaming requests with the fetch API[54]，可以在 fetch stream 的时候在结束前处理结果
• 2021-9-10: Improving user privacy and developer experience with User-Agent Client Hints[55]，新的 HTTP User-Agent
• 2021-6-15: The performance effects of too much lazy-loading[56]
  • 对懒加载的调研，发现 wordpress 一个不合理的优化：他们的懒加载会把首屏的图片也懒加载了，这样会劣化 LCP
• 2022-6-14: Security headers quick reference[57]，跨域安全相关的 HTTP Header
• 2021-4-22: Keeping third-party scripts under control[58]，对第三方网站的治理流程
• 2021-2-1: Requesting performance isolation with the Origin-Agent-Cluster header[59]，新的 HTTP 头
• 2021-1-25: When to use HTTPS for local development[60]，什么时候要用到本地 HTTPS 开发调试
• 2021-1-25: How to use HTTPS for local development[61]
• 2020-12-16: Publish, ship, and install modern JavaScript for faster applications[62]
  • https://estimator.dev/: 计算网站在采用现代 JavaScript 语法后可实现的尺寸和性能改进
  • 网站 JS 代码膨胀的原因：转换现代语法到传统语法，体积膨胀 20%；polyfill lib helpers 函数带来的体积膨胀
  • 介绍了 package.json/webpack/Rollup/babel 的配置参数
• 2020-12-11: Love your cache ❤️[63]，简单的介绍了 HTTP 缓存
• 2020-11-20: 对 Same-Site 的介绍
  1. Schemeful Same-Site[66]
  2. SameSite cookie recipes[65]
  3. SameSite cookies explained[64]
• Feedback wanted: CORS for private networks (RFC1918)[67]
• 2020-10-28: Measuring offline usage[68]
• 2020-9-22: Content delivery networks (CDNs)[69]，对 CDN 的介绍
• 2020-6-17: Improving page dismissal in synchronous XMLHttpRequest()[70]，网络保活方案
• 2022-6-9: Signed Exchanges (SXGs)[71]，加速 HTTPS 连接改善 FCP
• 2020-5-31: Fix an overloaded server[72]，服务器网络优化策略
• 2020-5-11: How to set up Signed HTTP Exchanges (SXG) using nginx[73]
• 2020-5-11: How to distribute Signed HTTP Exchanges (SXG) using nginx[74]
• 2020-5-5: How Google improved ads performance with stale-while-revalidate[75]
• 2020-4-29: Improved Next.js and Gatsby page load performance with granular chunking[76]
  • 2018-12-6: HTTP/2 Prioritization[77]
• 2019-12-16: Adaptive loading: improving web performance on slow devices[78]，根据网络情况自适应加载资源
• 2019-9-12: Prefetch resources to speed up future navigations[79]，Prefetch 的一些运用，用来优化导航性能
  • A Netflix Web Performance Case Study[80]
  • https://github.com/GoogleChromeLabs/quicklink
• 2019-7-30: Establish network connections early to improve perceived page speed[81]，preconnect 和 dns-prefetch 的运用
  • https://www.igvita.com/posa/high-performance-networking-in-google-chrome/
• 2019-7-18: Keeping things fresh with stale-while-revalidate[82]，stale-while-revalidate 的介绍
• 2019-7-8: Faster web navigation with predictive prefetching[83]，一个用来集成到 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[84]，对 Web Push 的介绍
• 2018-8-17: Decrease front-end size[85]，webpack 的一些优化项
• 2015-5-27: Enabling HTTPS on Your Servers[86]，如何在服务器上开启 HTTPS
• 2020-5-25: WebSocketStream: integrating streams with the WebSocket API[87]
• 2020-2-19: How to set up Signed Exchanges using Web Packager[88]
• 2015-3-27: Important Security Terminology[89]，对 HTTPS 的介绍
• https://www.susielu.com/data-viz/bundle-buddy，chunk 拆包的介绍
• 2013-6-5: Deep dive into the murky waters of script loading[90]，浏览器如何加载资源
  • 标准：https://html.spec.whatwg.org/multipage/scripting.html#script
  • https://hacks.mozilla.org/2009/06/defer/
  • 动态创建并添加到 HTML 中的脚本默认是 async 的，所以时序无法保证
• 2012-10-20: Introducing WebSockets - Bringing Sockets to the Web[91]

渲染

• 2022-4-11: Bringing instant page-loads to the browser through speculative prerendering[92]
  • 只有 Chrome 支持
• 2019-8-27: Rendering on the Web[93]
  • 介绍了 CSR/NSR/Rehydration/Prerendering 等方案，里面有个非常经典的图
• 2011-10-21: Avoiding Unnecessary Paints - Animated GIF Edition[94]
• 2011-8-16: Improving HTML5 Canvas performance[95]，canvas 性能优化
• 2011-6-3: HTML5 techniques for optimizing mobile performance[96]，文章比较老了

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

• 2015-5-20: Stick to Compositor-Only Properties and Manage Layer Count[97]，利用合成器属性、管理视图图层（layer）
• 2015-5-20: Simplify paint complexity and reduce paint areas[98]，减少 Paint 操作带来的影响
• 2015-5-20: Rendering Performance[99]，改进渲染性能
  • udacity 浏览器渲染性能优化免费课程[100]
• 2015-5-20: Reduce the scope and complexity of style calculations[101]，减少样式计算的范围和复杂性
• 2015-5-20: Optimize JavaScript execution[102]，优化 JS 执行性能
• 2015-5-20: Debounce your input handlers[103]
• 2015-5-20: Avoid large, complex layouts and layout thrashing[104]，避免布局抖动
• 2014-8-8: The Basics of easing[105]，动画曲线
• 2014-8-8: Custom easing[106]，动画曲线
• 2014-8-8: Choosing the right easing[107]，动画时间
• 2014-8-8: Asymmetric animation timing[108]，动画时间的选择
• 2014-8-8: Animations and performance[109]，动画性能，will-change属性
• 2014-8-8: CSS versus JavaScript animations[110]，CSS 动画与 JS 动画
• 2013-6-28: Antialiasing 101[111]，抗锯齿
• 2013-5-8: Avoiding unnecessary paints[112]，避免没必要的 paint
• 2013-4-12: CSS paint times and page render weight[113]，CSS 不同属性不同组合对渲染性能的影响
• 2013-5-11: Accelerated Rendering in Chrome[114]，chrome 中的加速渲染
• 2012-11-2: Jank busting for better rendering performance[115]
• 2012-12-20: Scrolling performance[116]，滚动性能
• 2012-11-2: Jank busting for better rendering performance[117]，更好的滚动性能
• 2011-10-21: Avoiding Unnecessary Paints - Animated GIF Edition[118]
• 2011-8-5: How browsers work[119]：浏览器如何运行的，文章比较老了

图片

• https://images.tooling.report/，查询各个 SaaS 服务对图片的优化
• Building an adaptive favicon[120]，用 svg 代替 ico 图标
• Building an effective Image Component[121]，利用一个 image 组件优化图片大小/宽高/优先级
• 2021-6-7: Using AVIF to compress images on your site[122]，介绍了 AVIF 图片格式
• 2020-2-14: AVIF for Next-Generation Image Coding[123]，Netflix 使用 AVIF 带来的图片优化
• 2019-11-22: Feedback from the summer 2019 image optimization survey[124]
  • LQIP：https://www.guypo.com/introducing-lqip-low-quality-image-placeholders
• 2019-9-30: Preloading responsive images[125]，响应式图片 + Preload
• 2019-9-23: Optimize images with Thumbor[126]，压缩图片的cdn，主要介绍了配置
• 2019-9-3: Going beyond images with basic video for the web[127]
• 2019-6-24: Top tips for web performance[128]，图片尺寸优化，主要是利用浏览器属性
• 2019-5-31: Image policies for fast load times and more[129]，浏览器对图片优化做的一些 API
• 2014-5-28: Easy high DPI images[130]
• 2014-8-29: Responsive images[131]，早期的图片优化方案
• 2012-10-15: Splash vector graphics on your responsive site[132]

字体

• 2022-1-19: Introduction to variable fonts on the web[133]，可变字体，一个字体文件可用动态切换多个字重（旧的字体需要多个字体文件）
• 2021-7-30: Use advanced typography with local fonts[134]，直接访问本地字体。因为用户安装的本地字体容易被黑客利用获取用户隐私，所以只允许访问白名单和操作系统内置的字体
  • 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[135]，新的 css 属性，防止字体切换的时候带来布局变动从而劣化 CLS 指标
• 2021-6-3: Best practices for fonts[136]
  • 内联字体声明（而不是内联字体本身）
  • preconnect + preload
  • 字体裁剪 + 可变字体
  • font-display[137] 的使用
• 2020-7-3: Optimize WebFont loading and rendering[138]
  • 介绍了浏览器加载字体的默认行为，并说明了一些字体属性的运用
• 2020-5-26: More variable font options for the macOS system-ui font in Chromium 83[139]，可变字体控制
• 2020-5-18: Prevent layout shifting and flashes of invisible text (FOIT) by preloading optional fonts[140]，介绍了 font-display: optional 在 chrome83 的改动，由原来的布局抖动模式变成加载前 或 100ms 前白屏显示了
  • 2018-4-23: 通过预加载 web 字体提高加载速度[141]
  • https://font-display.glitch.me/：介绍了 font-display 的行为模式
  • https://css-tricks.com/font-display-masses/

JS/框架

• 2022-5-18: Perform efficient per-video-frame operations on video with requestVideoFrameCallback()[142]
• 2021-6-28: Resource inlining in JavaScript frameworks[143]
  • 内联首屏/关键 css，减少一次网络请求
  • 内联字体声明
• 2021-6-7: Observing compute pressure[144]，测量 CPU 数据的 API
• 2021-5-8: JavaScript: What is the meaning of this?[145]，对 JS 中 this 的介绍
• 2021-2-25: Streams—The definitive guide[146]，对浏览器中的 Streams API 的介绍
• 2020-9-29: Detached window memory leaks[147]，内存泄漏检测
• 2020-8-20: Choose the best build tool for your project with tooling.report[148]
  • https://bundlers.tooling.report/，用来对比不同构建工具的特点/优点/缺点
• 2020-5-26: How CommonJS is making your bundles larger[149]。tree-shaking 的运用
  • The Cost Of JavaScript In 2018[150]
  • The cost of JavaScript in 2019 · V8[151]，有 JS bundle 大小的测量和考据
• 2020-4-29: Improved Next.js and Gatsby page load performance with granular chunking[152]，通过分包提高性能
• 2019-4-29: Virtualize large lists with react-window[153]，虚拟滚动列表
• 2019-8-13: Third-party JavaScript performance[154]
• 2018-10-10: Async functions - making promises friendly[155]，介绍 async function
• 2013-6-21: Static memory javascript with Object Pools[156]，JS 对象池
• 2013-6-13: Use forensics and detective work to solve JavaScript performance mysteries[157]，JS 性能问题的排查，使用了 V8 做调试
• 2012-10-11: Performance tips for JavaScript in V8[158]，文章较老，但内容也有参考价值

CSS

• 2022-5-11: Grid Bridging the gap[159]
• 2021-10-19: Improved dark mode default styling with the color-scheme CSS property and the corresponding meta tag[160]
• 2021-8-17: Using CSS Module Scripts to import stylesheets[161]，Chrome 93 可用
• 2021-6-9: Building a color scheme[162]，通过 hsl() 和 calc() 构建可动态计算的颜色主题
• 2021-5-27: New CSS functional pseudo-class selectors :is() and :where()[163]
• 2021-5-22: Compat 2021: Eliminating five top compatibility pain points on the web[164]，CSS flex/grid/sticky/aspect-ratio/transform 兼容性
• 2021-5-9: content-visibility: the new CSS property that boosts your rendering performance[165]
• 2021-1-28: New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly[166]，新的 css 属性 aspect-ratio，用来替换 padding-top hack，只有 Chrome88 以上和 iOS15 支持
• 2020-12-16: Centering in CSS[167]，介绍了几种 CSS 居中对齐的方案
• 2020-12-10: Cross-browser paint worklets and Houdini.how[168]，介绍了 Houdini 这种新方案
• 2020-10-14: min(), max(), and clamp(): three logical CSS functions to use today[169]
• 2020-9-14: Apply effects to images with CSS's mask-image property[170]
• 2020-9-14: Create interesting image shapes with CSS's clip-path property[171]
• 2020-9-2: Custom bullets with CSS ::marker[172]，修改 li 标签前面的小圆点样式
• 2020-7-21: @property: giving superpowers to CSS variables[173]，CSS Houdini 相关的 API
• 2020-7-7: Ten modern layouts in one line of CSS[174]
• 2020-7-7: Pixel-perfect rendering with devicePixelContentBox[175]，像素相关的 API
• 2020-5-27: Web Animations API improvements in Chromium 84[176]
• 2020-9-24: Next-generation web styling[177]
• 2020-8-2: prefers-color-scheme: Hello darkness, my old friend[178]，如何在网页上开启暗黑模式以及相关要注意的点
• 2019-9-19: Smarter custom properties with Houdini’s new API[179]
• 2019-5-29: Extract critical CSS[180]，提取首屏 CSS
• 2019-5-29: Extract and inline critical CSS with Critical[181]，使用 Critical 提取首屏关键 CSS
  • 14KB：
• 2019-8-29: Create OS-style backgrounds with backdrop-filter[182]
• 2019-5-9: What's the CSS :scope pseudo-class for?[183]
• 2014-9-17: Getting Started with CSS Shapes[184]
• 2012-5-25: Understanding CSS filter effects[185]

UI

• 2021-12-18: How Terra improved user engagement thanks to Dark Mode[186]
• 2021-5-26: The new responsive: Web design in a component-driven world[187]
• 2021-4-20: Building split text animations[188]，文字动效
• 2021-5-17: Building a Settings component[189]，偏向设计的 CSS 运用指南
• 2021-2-17: Building a Tabs component[190]，Tab 组件的构建，用了很多 CSS 技巧
• 2021-1-26: Best practices for carousels[191]，轮播图的最佳实践
• 2021-1-21: Building a sidenav component[192]，对 sidenav 组件的探索
• 2020-12-9: Payment and address form best practices[193]，表单设计
• 2020-11-25: Building a Stories component[194]
• 2020-5-14: Responsive web design basics[195]，响应式设计基础知识
• 2019-8-31: Icons and browser colors[196]，定义浏览器的组件颜色
• 2013-12-18: HTML's New Template Tag[197]，HTML <template> 标签

交互

• 2022-2-16: prefers-reduced-motion: Sometimes less movement is more[198]，查询用户偏好，显示/关闭网页动画
• 2021 Scroll Survey Report[199]，一篇介绍滚动交互的报告
• 2021-5-29: Read files in JavaScript[200]
• 2021-9-10: JavaScript eventing deep dive[201]
  • 对 preventDefault 和 stopPropagation 的深入研究
• 2021-5-30: Best practices for cookie notices[202]，Cookie 通知的最佳实践
• 2021-5-22: Control camera pan, tilt, and zoom[203]
• 2020-2-22: Scroll snapping after layout changes[204]
• 2020-7-24: Multi-device content[205]
  • 这里面介绍了一个概念，The next billion users，下一个十亿用户，指收入少设备差但是又有上网需求的用户，但和中国的农村用户不重叠（国内的网络要比亚非拉等地的网络好很多）
• 2019-6-8: Accessibility[206]
• 2019-8-7: Animating Modal Views[207]
• 2019-8-11: Animating Between Views[208]
• 2019-12-6: Accessibility tips for web developers[209]
• 2018-9-20: Basics of UX[210]
• 2018-9-20: Add touch to your site[211]，对触摸事件的说明
• 2013-5-13: Touch and mouse[212]

Web Worker/Service Worker

• 2021-10-29: Bringing service workers to Google Search[213]
  • 2018-9-7: Speed up service worker with navigation preloads - Chrome Developers[214]
• 2021-6-14: Indexing your offline-capable pages with the Content Indexing API[215]，让 Service Worker 能够告诉浏览器哪些页面可以离线工作
• 2021-5-13: ES modules in service workers[216]
• 2020-12-10: Extending Workbox[217]，Workbox 是一个用来处理 Service Worker 缓存的工具箱，这篇文章主要介绍了如何制定自定义的缓存方案
• 2020-12-8: Workers overview[218]
  • Web Worker：主要是做复杂计算的，抽象库：https://github.com/GoogleChromeLabs/comlink，介绍：https://surma.dev/things/when-workers/
  • Service Worker：主要是拦截网络请求的，抽象库：https://developer.chrome.com/docs/workbox/
  • 介绍了 Web Worker 和 Service Worker
  • Imperative caching guide[219]：命令式单向缓存
  • Broadcast updates to pages with service workers[220]：广播式更新
  • Two-way communication with service workers[221]：双向通讯
  • 2019-12-5: Use web workers to run JavaScript off the browser's main thread[222]
• 2020-10-6: Handling range requests in a service worker[223]
• 2020-8-20: Resilient search experiences[224]，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[225]，使用 service workers 加载自适应资源
• 2020-7-17: Service worker caching and HTTP caching[226]，缓存
• 2020-7-13: Handling navigation requests[227]，Service Worker 处理导航请求
• 2020-4-27: The Cache API: A quick guide[228]，Cache API，用来控制网络缓存，尽管它被定义在 service worker 的标准中， 但是它不必一定要配合 service worker 使用
• 2019-12-17: Threading the web with module workers[229]
• 2019-6-4: Service worker mindset[230]
  • https://serviceworkies.com/：一个学习 Service worker 的游戏网站
• 2018-9-20: Service worker registration[231]
• 2018-2-27: Measuring the Real-world Performance Impact of Service Workers[232]
• 2015-10-1: Service Workers in Production[233]
• 2013-7-30: The synchronous FileSystem API for workers[234]

PWA

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

安全

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

浏览器

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

WebGL/WebGPU

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

WebXR

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

WebAssembly

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

Web Component

• 2022-2-23: Constructable Stylesheets[303]
• 2019-6-18: Web components: the secret ingredient helping power the web[304]
• 2018-9-20: Building components[305]
  • 2017-8-14: HowTo Components – Overview[309]
  • 2017-10-11: HowTo Components – howto-tooltip[310]
  • 2017-10-11: HowTo Components – howto-tabs[311]
  • Custom Elements: 2019-9-5: Custom Elements v1 - Reusable Web Components[306]
  • Shadow DOM: 2020-6-27: Shadow DOM v1 - Self-Contained Web Components[307]
  • Best Practices: 2019-9-5: Custom Element Best Practices[308]
  • Examples
• 2017-1-10: Web Components v1 - the next generation[312]
• 2016-10-3: Shadow DOM 101[313]
• 2016-10-3: Shadow DOM 201[314]
• 2016-10-3: Shadow DOM 301[315]

提案/实验性功能/新 API

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

参考资料

[1]

https://web.dev/: https://web.dev/

[2]

Learn: https://web.dev/learn/

[3]

Measure: https://web.dev/measure/

[4]

Case Study: https://web.dev/tags/case-study/

[5]

Blog: https://web.dev/blog/

[6]

PWA: https://web.dev/progressive-web-apps/

[7]

Web Vitals: https://web.dev/learn-web-vitals/

[8]

Case Study: https://web.dev/tags/case-study/

[9]

https://v8.dev/blog: https://v8.dev/blog

[10]

How do modern frameworks perform on the new INP metric: https://web.dev/inp-in-frameworks/#how-are-aurora-and-frameworks-addressing-inp-issues

[11]

How SPA architectures affect Core Web Vitals: https://web.dev/vitals-spa-faq/

[12]

Core Web Vitals workflows with Google tools: https://web.dev/i18n/en/vitals-tools/

[13]

Why lab and field data can be different (and what to do about it): https://web.dev/lab-and-field-data-differences/

[14]

Towards a better responsiveness metric: https://web.dev/better-responsiveness-metric/

[15]

CSS for Web Vitals: https://web.dev/i18n/en/css-web-vitals/

[16]

Evolving Cumulative Layout Shift in web tooling: https://web.dev/cls-web-tooling/

[17]

Techniques to make a web app load fast, even on a feature phone: https://web.dev/load-faster-like-proxx/

[18]

Optimizing Web Vitals using Lighthouse: https://web.dev/optimize-vitals-lighthouse/

[19]

Debug layout shifts: https://web.dev/debug-layout-shifts/

[20]

How CLS optimizations increased Yahoo! JAPAN News's page views per session by 15%: https://web.dev/yahoo-japan-news/

[21]

Aspect Ratio Boxes: https://css-tricks.com/aspect-ratio-boxes/

[22]

Evolving the CLS metric: https://web.dev/evolving-cls/

[23]

Debug Web Vitals in the field: https://web.dev/debug-web-vitals-in-the-field/

[24]

Feedback wanted: The road to a better layout shift metric for long-lived pages: https://web.dev/better-layout-shift-metric/

[25]

Optimize Largest Contentful Paint: https://web.dev/i18n/en/optimize-lcp/

[26]

Optimize Cumulative Layout Shift: https://web.dev/i18n/en/optimize-cls/

[27]

Relating site speed and business metrics: https://web.dev/site-speed-and-business-metrics/

[28]

Tools to measure Core Web Vitals: https://web.dev/vitals-tools-2020/

[29]

Getting started with measuring Web Vitals: https://web.dev/i18n/en/vitals-measurement-getting-started/

[30]

Defining the Core Web Vitals metrics thresholds: https://web.dev/i18n/en/defining-core-web-vitals-thresholds/

[31]

Optimize First Input Delay: https://web.dev/i18n/en/optimize-fid/

[32]

What's New in Lighthouse 6.0: https://web.dev/lighthouse-whats-new-6.0/

[33]

Best practices for measuring Web Vitals in the field: https://web.dev/i18n/en/vitals-field-measurement-best-practices/

[34]

Advancing the web framework ecosystem: https://web.dev/advancing-framework-ecosystem-cds-2019/

[35]

Speed tooling evolutions: highlights from Chrome Developer Summit 2019: https://web.dev/speed-tooling-evolutions-cds-2019/

[36]

Lighthouse evolution: continuous integration, new performance score formula, and more: https://web.dev/lighthouse-evolution-cds-2019/

[37]

Fixing layout instability: https://web.dev/fixing-layout-instability/

[38]

What should you measure to improve performance?: https://web.dev/what-should-you-measure-to-improve-performance/

[39]

Are long JavaScript tasks delaying your Time to Interactive?: https://web.dev/i18n/en/long-tasks-devtools/

[40]

Speed at scale: what's new in web performance?: https://web.dev/speed-at-scale/

[41]

How to report metrics and build a performance culture: https://web.dev/how-to-report-metrics/

[42]

Web Performance Made Easy - Google I/O 2018 edition: https://web.dev/web-performance-made-easy/

[43]

How To Think About Speed Tools: https://web.dev/speed-tools/

[44]

User timing API: https://web.dev/usertiming/

[45]

Optimizing resource loading with Priority Hints: https://web.dev/priority-hints/

[46]

Preload: https://web.dev/uses-rel-preload/

[47]

Preconnect: https://web.dev/uses-rel-preconnect/

[48]

Optimizing third-party script loading in Next.js: https://web.dev/script-component/

[49]

Improve security and privacy by updating HTTP Cache: https://web.dev/http-cache-security/

[50]

Referrer: https://web.dev/i18n/en/referrer-best-practices/

[51]

Assessing loading performance in the field with Navigation Timing and Resource Timing: https://web.dev/navigation-and-resource-timing/

[52]

Best practices for using third-party embeds: https://web.dev/embed-best-practices/

[53]

Using WebTransport: https://web.dev/i18n/en/webtransport/

[54]

Streaming requests with the fetch API: https://web.dev/i18n/en/fetch-upload-streaming/

[55]

Improving user privacy and developer experience with User-Agent Client Hints: https://web.dev/i18n/en/user-agent-client-hints/

[56]

The performance effects of too much lazy-loading: https://web.dev/lcp-lazy-loading/

[57]

Security headers quick reference: https://web.dev/security-headers/

[58]

Keeping third-party scripts under control: https://web.dev/controlling-third-party-scripts/

[59]

Requesting performance isolation with the Origin-Agent-Cluster header: https://web.dev/origin-agent-cluster/

[60]

When to use HTTPS for local development: https://web.dev/when-to-use-local-https/

[61]

How to use HTTPS for local development: https://web.dev/i18n/en/how-to-use-local-https/

[62]

Publish, ship, and install modern JavaScript for faster applications: https://web.dev/publish-modern-javascript/

[63]

Love your cache ❤️: https://web.dev/love-your-cache/

[64]

SameSite cookies explained: https://web.dev/i18n/en/samesite-cookies-explained/

[65]

SameSite cookie recipes: https://web.dev/samesite-cookie-recipes/

[66]

Schemeful Same-Site: https://web.dev/schemeful-samesite/

[67]

Feedback wanted: CORS for private networks (RFC1918): https://web.dev/cors-rfc1918-feedback/

[68]

Measuring offline usage: https://web.dev/measuring-offline-usage/

[69]

Content delivery networks (CDNs): https://web.dev/content-delivery-networks/

[70]

Improving page dismissal in synchronous XMLHttpRequest(): https://web.dev/disallow-synchronous-xhr/

[71]

Signed Exchanges (SXGs): https://web.dev/signed-exchanges/

[72]

Fix an overloaded server: https://web.dev/overloaded-server/

[73]

How to set up Signed HTTP Exchanges (SXG) using nginx: https://web.dev/how-to-set-up-signed-http-exchanges/

[74]

How to distribute Signed HTTP Exchanges (SXG) using nginx: https://web.dev/how-to-distribute-signed-http-exchanges/

[75]

How Google improved ads performance with stale-while-revalidate: https://web.dev/ads-case-study-stale-while-revalidate/

[76]

Improved Next.js and Gatsby page load performance with granular chunking: https://web.dev/granular-chunking-nextjs/

[77]

HTTP/2 Prioritization: https://calendar.perfplanet.com/2018/http2-prioritization/

[78]

Adaptive loading: improving web performance on slow devices: https://web.dev/adaptive-loading-cds-2019/

[79]

Prefetch resources to speed up future navigations: https://web.dev/link-prefetch/

[80]

A Netflix Web Performance Case Study: https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9

[81]

Establish network connections early to improve perceived page speed: https://web.dev/preconnect-and-dns-prefetch/

[82]

Keeping things fresh with stale-while-revalidate: https://web.dev/i18n/en/stale-while-revalidate/

[83]

Faster web navigation with predictive prefetching: https://web.dev/predictive-prefetching/

[84]

Sending messages with web push libraries: https://web.dev/sending-messages-with-web-push-libraries/

[85]

Decrease front-end size: https://web.dev/decrease-frontend-size/

[86]

Enabling HTTPS on Your Servers: https://web.dev/enabling-https-on-your-servers/

[87]

WebSocketStream: integrating streams with the WebSocket API: https://web.dev/i18n/en/websocketstream/

[88]

How to set up Signed Exchanges using Web Packager: https://web.dev/signed-exchanges-webpackager/

[89]

Important Security Terminology: https://web.dev/intro-to-security-terminology/

[90]

Deep dive into the murky waters of script loading: https://web.dev/speed-script-loading/

[91]

Introducing WebSockets - Bringing Sockets to the Web: https://web.dev/workers-basics/

[92]

Bringing instant page-loads to the browser through speculative prerendering: https://web.dev/speculative-prerendering/

[93]

Rendering on the Web: https://web.dev/rendering-on-the-web/

[94]

Avoiding Unnecessary Paints - Animated GIF Edition: https://web.dev/speed-animated-gifs/

[95]

Improving HTML5 Canvas performance: https://web.dev/canvas-performance/

[96]

HTML5 techniques for optimizing mobile performance: https://web.dev/mobile-optimization-and-performance/

[97]

Stick to Compositor-Only Properties and Manage Layer Count: https://web.dev/stick-to-compositor-only-properties-and-manage-layer-count/

[98]

Simplify paint complexity and reduce paint areas: https://web.dev/simplify-paint-complexity-and-reduce-paint-areas/

[99]

Rendering Performance: https://web.dev/rendering-performance/

[100]

udacity 浏览器渲染性能优化免费课程: https://www.udacity.com/course/browser-rendering-optimization--ud860

[101]

Reduce the scope and complexity of style calculations: https://web.dev/reduce-the-scope-and-complexity-of-style-calculations/

[102]

Optimize JavaScript execution: https://web.dev/optimize-javascript-execution/

[103]

Debounce your input handlers: https://web.dev/debounce-your-input-handlers/

[104]

Avoid large, complex layouts and layout thrashing: https://web.dev/avoid-large-complex-layouts-and-layout-thrashing/

[105]

The Basics of easing: https://web.dev/the-basics-of-easing/

[106]

Custom easing: https://web.dev/custom-easing/

[107]

Choosing the right easing: https://web.dev/choosing-the-right-easing/

[108]

Asymmetric animation timing: https://web.dev/asymmetric-animation-timing/

[109]

Animations and performance: https://web.dev/animations-and-performance/

[110]

CSS versus JavaScript animations: https://web.dev/css-vs-javascript/

[111]

Antialiasing 101: https://web.dev/antialiasing-101/

[112]

Avoiding unnecessary paints: https://web.dev/speed-unnecessary-paints/

[113]

CSS paint times and page render weight: https://web.dev/css-paint-times/

[114]

Accelerated Rendering in Chrome: https://web.dev/speed-layers/

[115]

Jank busting for better rendering performance: https://web.dev/speed-rendering/

[116]

Scrolling performance: https://web.dev/speed-scrolling/

[117]

Jank busting for better rendering performance: https://web.dev/speed-rendering/

[118]

Avoiding Unnecessary Paints - Animated GIF Edition: https://web.dev/speed-animated-gifs/

[119]

How browsers work: https://web.dev/howbrowserswork/

[120]

Building an adaptive favicon: https://web.dev/building-an-adaptive-favicon/

[121]

Building an effective Image Component: https://web.dev/image-component/

[122]

Using AVIF to compress images on your site: https://web.dev/compress-images-avif/

[123]

AVIF for Next-Generation Image Coding: https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4

[124]

Feedback from the summer 2019 image optimization survey: https://web.dev/image-optimization-survey-2019/

[125]

Preloading responsive images: https://web.dev/preload-responsive-images/

[126]

Optimize images with Thumbor: https://web.dev/use-thumbor/

[127]

Going beyond images with basic video for the web: https://web.dev/video-basics/

[128]

Top tips for web performance: https://web.dev/use-srcset-to-automatically-choose-the-right-image/

[129]

Image policies for fast load times and more: https://web.dev/image-policies/

[130]

Easy high DPI images: https://web.dev/easy-high-dpi-images/

[131]

Responsive images: https://web.dev/responsive-images/

[132]

Splash vector graphics on your responsive site: https://web.dev/svg-mobile-fundamentals/

[133]

Introduction to variable fonts on the web: https://web.dev/variable-fonts/

[134]

Use advanced typography with local fonts: https://web.dev/local-fonts/

[135]

CSS size-adjust for @font-face: https://web.dev/css-size-adjust/

[136]

Best practices for fonts: https://web.dev/font-best-practices/

[137]

font-display: https://caniuse.com/?search=font-display

[138]

Optimize WebFont loading and rendering: https://web.dev/optimize-webfont-loading

[139]

More variable font options for the macOS system-ui font in Chromium 83: https://web.dev/more-variable-font-options-in-chromium-83/

[140]

Prevent layout shifting and flashes of invisible text (FOIT) by preloading optional fonts: https://web.dev/i18n/en/preload-optional-fonts/

[141]

通过预加载 web 字体提高加载速度: https://web.dev/codelab-preload-web-fonts/

[142]

Perform efficient per-video-frame operations on video with requestVideoFrameCallback(): https://web.dev/requestvideoframecallback-rvfc/

[143]

Resource inlining in JavaScript frameworks: https://web.dev/aurora-resource-inlining/

[144]

Observing compute pressure: https://web.dev/compute-pressure/

[145]

JavaScript: What is the meaning of this?: https://web.dev/i18n/en/javascript-this/

[146]

Streams—The definitive guide: https://web.dev/streams/

[147]

Detached window memory leaks: https://web.dev/detached-window-memory-leaks/

[148]

Choose the best build tool for your project with tooling.report: https://web.dev/introducing-tooling-report/

[149]

How CommonJS is making your bundles larger: https://web.dev/i18n/en/commonjs-larger-bundles/

[150]

The Cost Of JavaScript In 2018: https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

[151]

The cost of JavaScript in 2019 · V8: https://v8.dev/blog/cost-of-javascript-2019

[152]

Improved Next.js and Gatsby page load performance with granular chunking: https://web.dev/granular-chunking-nextjs/

[153]

Virtualize large lists with react-window: https://web.dev/i18n/en/virtualize-long-lists-react-window/

[154]

Third-party JavaScript performance: https://web.dev/third-party-javascript/

[155]

Async functions - making promises friendly: https://web.dev/javascript-async-functions/

[156]

Static memory javascript with Object Pools: https://web.dev/speed-static-mem-pools/

[157]

Use forensics and detective work to solve JavaScript performance mysteries: https://web.dev/performance-mystery/

[158]

Performance tips for JavaScript in V8: https://web.dev/speed-v8/

[159]

Bridging the gap: https://web.dev/bridging-the-gap/

[160]

Improved dark mode default styling with the color-scheme CSS property and the corresponding meta tag: https://web.dev/i18n/en/color-scheme/

[161]

Using CSS Module Scripts to import stylesheets: https://web.dev/css-module-scripts/

[162]

Building a color scheme: https://web.dev/building-a-color-scheme/

[163]

New CSS functional pseudo-class selectors :is() and :where(): https://web.dev/css-is-and-where/

[164]

Eliminating five top compatibility pain points on the web: https://web.dev/compat2021/

[165]

content-visibility: the new CSS property that boosts your rendering performance: https://web.dev/content-visibility/

[166]

New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly: https://web.dev/aspect-ratio/

[167]

Centering in CSS: https://web.dev/centering-in-css/

[168]

Cross-browser paint worklets and Houdini.how: https://web.dev/houdini-how/

[169]

min(), max(), and clamp(): three logical CSS functions to use today: https://web.dev/min-max-clamp/

[170]

Apply effects to images with CSS's mask-image property: https://web.dev/css-masking/

[171]

Create interesting image shapes with CSS's clip-path property: https://web.dev/css-clipping/

[172]

Custom bullets with CSS ::marker: https://web.dev/css-marker-pseudo-element/

[173]

@property: giving superpowers to CSS variables: https://web.dev/at-property/

[174]

Ten modern layouts in one line of CSS: https://web.dev/i18n/en/one-line-layouts/

[175]

Pixel-perfect rendering with devicePixelContentBox: https://web.dev/device-pixel-content-box/

[176]

Web Animations API improvements in Chromium 84: https://web.dev/web-animations/

[177]

Next-generation web styling: https://web.dev/next-gen-css-2019/

[178]

prefers-color-scheme: Hello darkness, my old friend: https://web.dev/prefers-color-scheme/

[179]

Smarter custom properties with Houdini’s new API: https://web.dev/css-props-and-vals/

[180]

Extract critical CSS: https://web.dev/i18n/en/extract-critical-css/

[181]

Extract and inline critical CSS with Critical: https://web.dev/codelab-extract-and-inline-critical-css/

[182]

Create OS-style backgrounds with backdrop-filter: https://web.dev/backdrop-filter/

[183]

What's the CSS :scope pseudo-class for?: https://web.dev/what-s-the-CSS-scope-pseudo-class-for/

[184]

Getting Started with CSS Shapes: https://web.dev/shapes-getting-started/

[185]

Understanding CSS filter effects: https://web.dev/understanding-css/

[186]

How Terra improved user engagement thanks to Dark Mode: https://web.dev/terra-dark-mode/

[187]

The new responsive: Web design in a component-driven world: https://web.dev/new-responsive

[188]

Building split text animations: https://web.dev/building-split-text-animations/

[189]

Building a Settings component: https://web.dev/building-a-settings-component

[190]

Building a Tabs component: https://web.dev/building-a-tabs-component/

[191]

Best practices for carousels: https://web.dev/i18n/en/carousel-best-practices/

[192]

Building a sidenav component: https://web.dev/building-a-sidenav-component

[193]

Payment and address form best practices: https://web.dev/i18n/en/payment-and-address-form-best-practices/

[194]

Building a Stories component: https://web.dev/building-a-stories-component/

[195]

Responsive web design basics: https://web.dev/i18n/en/responsive-web-design-basics/

[196]

Icons and browser colors: https://web.dev/icons-and-browser-colors/

[197]

HTML's New Template Tag: https://web.dev/webcomponents-template/#the-road-to-a-standard

[198]

prefers-reduced-motion: Sometimes less movement is more: https://web.dev/prefers-reduced-motion/

[199]

2021 Scroll Survey Report: https://web.dev/2021-scroll-survey-report/

[200]

Read files in JavaScript: https://web.dev/i18n/en/read-files/

[201]

JavaScript eventing deep dive: https://web.dev/eventing-deepdive/

[202]

Best practices for cookie notices: https://web.dev/cookie-notice-best-practices/

[203]

Control camera pan, tilt, and zoom: https://web.dev/camera-pan-tilt-zoom/

[204]

Scroll snapping after layout changes: https://web.dev/snap-after-layout/

[205]

Multi-device content: https://web.dev/multi-device-content/

[206]

Accessibility: https://web.dev/accessibility/

[207]

Animating Modal Views: https://web.dev/animating-modal-views/

[208]

Animating Between Views: https://web.dev/animating-between-views/

[209]

Accessibility tips for web developers: https://web.dev/a11y-tips-for-web-dev/

[210]

Basics of UX: https://web.dev/ux-basics/

[211]

Add touch to your site: https://web.dev/add-touch-to-your-site/

[212]

Touch and mouse: https://web.dev/mobile-touchandmouse/

[213]

Bringing service workers to Google Search: https://web.dev/google-search-sw/

[214]

Speed up service worker with navigation preloads - Chrome Developers: https://developer.chrome.com/blog/navigation-preload/

[215]

Indexing your offline-capable pages with the Content Indexing API: https://web.dev/content-indexing-api/

[216]

ES modules in service workers: https://web.dev/es-modules-in-sw/

[217]

Extending Workbox: https://web.dev/extending-workbox/

[218]

Workers overview: https://web.dev/workers-overview/

[219]

Imperative caching guide: https://web.dev/imperative-caching-guide/

[220]

Broadcast updates to pages with service workers: https://web.dev/broadcast-updates-guide/

[221]

Two-way communication with service workers: https://web.dev/two-way-communication-guide/

[222]

Use web workers to run JavaScript off the browser's main thread: https://web.dev/off-main-thread/

[223]

Handling range requests in a service worker: https://web.dev/sw-range-requests/

[224]

Resilient search experiences: https://web.dev/resilient-search-experiences/

[225]

Adaptive loading with service workers: https://web.dev/adaptive-loading-with-service-workers/

[226]

Service worker caching and HTTP caching: https://web.dev/i18n/en/service-worker-caching-and-http-caching/

[227]

Handling navigation requests: https://web.dev/handling-navigation-requests/

[228]

The Cache API: A quick guide: https://web.dev/cache-api-quick-guide/

[229]

Threading the web with module workers: https://web.dev/module-workers/

[230]

Service worker mindset: https://web.dev/service-worker-mindset/

[231]

Service worker registration: https://web.dev/service-workers-registration/

[232]

Measuring the Real-world Performance Impact of Service Workers: https://web.dev/service-worker-perf/

[233]

Service Workers in Production: https://web.dev/service-workers-iowa/

[234]

The synchronous FileSystem API for workers: https://web.dev/filesystem-sync/

[235]

Get things done quickly with app shortcuts: https://web.dev/i18n/en/app-shortcuts/

[236]

Integrate with the OS sharing UI with the Web Share API: https://web.dev/web-share/

[237]

Badging for app icons: https://web.dev/badging-api/

[238]

Is your app installed? getInstalledRelatedApps() will tell you!: https://web.dev/get-installed-related-apps/

[239]

Receiving shared data with the Web Share Target API: https://web.dev/i18n/en/web-share-target/

[240]

Adaptive icon support in PWAs with maskable icons: https://web.dev/i18n/en/maskable-icon/

[241]

WebAPKs on Android: https://web.dev/webapks/

[242]

Instant navigation experiences: https://web.dev/instant-navigation-experiences/

[243]

Richer offline experiences with the Periodic Background Sync API: https://web.dev/i18n/en/periodic-background-sync/

[244]

Progressively enhance your Progressive Web App: https://web.dev/progressively-enhance-your-pwa/

[245]

Integrate PWAs into built-in sharing UIs with Workbox: https://web.dev/workbox-share-targets/

[246]

OYO Lite: a TWA with the best of web and Android apps: https://web.dev/oyo-lite-twa/

[247]

Progressive Web Apps in multi-origin sites: https://web.dev/multi-origin-pwas/

[248]

Address Bar Install for Progressive Web Apps on the Desktop: https://web.dev/pwa-install-addressbar/

[249]

How do I notify users that my PWA is installable?: https://web.dev/pwa-install-patterns/

[250]

Building the Google I/O 2016 Progressive Web App: https://web.dev/iowa2016/

[251]

Digging into the Privacy Sandbox: https://web.dev/digging-into-the-privacy-sandbox/

[252]

Making your website "cross-origin isolated" using COOP and COEP: https://web.dev/i18n/en/coop-coep/

[253]

Getting started with Trust Tokens: https://web.dev/i18n/en/trust-tokens/

[254]

Empowering payment apps with Web Payments: https://web.dev/empowering-payment-apps-with-web-payments/

[255]

Why should you deploy a strict Content Security Policy (CSP)?: https://web.dev/strict-csp/

[256]

Protect your resources from web attacks with Fetch Metadata: https://web.dev/i18n/en/fetch-metadata/

[257]

Content security policy: https://web.dev/csp/

[258]

Android payment app developers guide: https://web.dev/i18n/en/android-payment-apps-developers-guide/

[259]

Why you need "cross-origin isolated" for powerful features: https://web.dev/i18n/en/why-coop-coep/

[260]

EME WTF?: https://web.dev/eme-basics/

[261]

The end of Internet Explorer: https://web.dev/the-end-of-ie/

[262]

CSS Grid in IE: CSS Grid and the New Autoprefixer | CSS-Tricks - CSS-Tricks: https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/

[263]

Back/forward cache: https://web.dev/bfcache/

[264]

Preparing for AppCache removal: https://web.dev/i18n/en/appcache-removal/

[265]

Browser-level lazy-loading for CMSs: https://web.dev/browser-level-lazy-loading-for-cmss/

[266]

Human interface devices on the web: a few quick examples: https://web.dev/hid-examples/

[267]

Automating audits with AutoWebPerf: https://web.dev/autowebperf/

[268]

Deprecating Excalidraw Electron in favor of the web version: https://web.dev/deprecating-excalidraw-electron/

[269]

Introducing1.1: https://web.dev/introducing-model-viewer/

[270]

Theweb component: https://web.dev/model-viewer/

[271]

Web on Android: https://web.dev/web-on-android/

[272]

ResizeObserver: it’s like document.onresize for elements: https://web.dev/i18n/en/resize-observer/

[273]

Storage for the web: https://web.dev/i18n/en/storage-for-the-web/

[274]

Making JavaScript and Google Search work together: https://web.dev/javascript-and-google-search-io-2019/

[275]

Introduction to fetch(): https://web.dev/introduction-to-fetch/

[276]

Best Practices for Using IndexedDB: https://web.dev/indexeddb-best-practices/

[277]

Web storage overview: https://web.dev/web-storage/

[278]

Social discovery: https://web.dev/social-discovery/

[279]

Get started with GPU Compute on the web: https://web.dev/gpu-compute/

[280]

Canvas inspection using Chrome DevTools: https://web.dev/canvas-inspection/

[281]

Typed arrays - Binary data in the browser: https://web.dev/webgl-typed-arrays/

[282]

WebGL orthographic 3D: https://web.dev/webgl-orthographic-3d/

[283]

WebGL transforms: https://web.dev/webgl-transforms/

[284]

WebGL Fundamentals: https://web.dev/webgl-fundamentals/

[285]

An introduction to shaders: https://web.dev/webgl-shaders/

[286]

Positioning virtual objects in real-world views: https://web.dev/ar-hit-test/

[287]

Virtual reality comes to the web: https://web.dev/vr-comes-to-the-web/

[288]

Virtual reality comes to the web, part II: https://web.dev/vr-comes-to-the-web-pt-ii/

[289]

Augmented reality: You may already know it: https://web.dev/web-ar/

[290]

Welcome to the immersive web: https://web.dev/welcome-to-immersive/

[291]

Rendering Text in WebVR: https://web.dev/within/

[292]

Core Interactions in the WebVR Lab: https://web.dev/playcanvas/

[293]

Matterport VR for WebVR: https://web.dev/matterport/

[294]

Bear 71 and WebVR: https://web.dev/bear71/

[295]

Emscripten’s embind: https://web.dev/embind/

[296]

Using asynchronous web APIs from WebAssembly: https://web.dev/asyncify/

[297]

Debugging memory leaks in WebAssembly using Emscripten: https://web.dev/webassembly-memory-debugging/

[298]

Emscripten and npm: https://web.dev/emscripten-npm/

[299]

How we're bringing Google Earth to the web: https://web.dev/earth-webassembly/

[300]

WebAssembly Threads ready to try in Chrome 70: https://web.dev/wasm-threads/

[301]

Extending the browser with WebAssembly: https://web.dev/wasm-av1/

[302]

Loading WebAssembly modules efficiently: https://web.dev/loading-wasm/

[303]

Constructable Stylesheets: https://web.dev/constructable-stylesheets/

[304]

Web components: the secret ingredient helping power the web: https://web.dev/web-components-io-2019/

[305]

Building components: https://web.dev/web-components/

[306]

Custom Elements v1 - Reusable Web Components: https://web.dev/custom-elements-v1/

[307]

Shadow DOM v1 - Self-Contained Web Components: https://web.dev/shadowdom-v1/

[308]

Custom Element Best Practices: https://web.dev/custom-elements-best-practices/

[309]

HowTo Components – Overview: https://web.dev/components-examples-overview/

[310]

HowTo Components – howto-tooltip: https://web.dev/components-howto-tooltip/

[311]

HowTo Components – howto-tabs: https://web.dev/components-howto-tabs/

[312]

Web Components v1 - the next generation: https://web.dev/webcomponents-org/

[313]

Shadow DOM 101: https://web.dev/shadowdom/#you-pass-shadow-dom-101

[314]

Shadow DOM 201: https://web.dev/shadowdom-201/

[315]

Shadow DOM 301: https://web.dev/shadowdom-301/

[316]

TransformStream is now supported cross-browser: https://web.dev/transformstream/

[317]

Let installed web applications be file handlers: https://web.dev/file-handling/

[318]

The File System Access API: simplifying access to local files: https://web.dev/file-system-access/

[319]

Breaking down barriers using the DataTransfer API: https://web.dev/datatransfer/

[320]

Unblocking clipboard access: https://web.dev/i18n/en/async-clipboard/

[321]

Access USB Devices on the Web: https://web.dev/i18n/en/usb/

[322]

Read from and write to a serial port: https://web.dev/serial/

[323]

Capture Keys with the Keyboard Lock API: https://web.dev/keyboard-lock/

[324]

Video processing with WebCodecs: https://web.dev/webcodecs/

[325]

Interact with NFC devices on Chrome for Android: https://web.dev/nfc/#status

[326]

Communicating with Bluetooth devices over JavaScript: https://web.dev/i18n/en/bluetooth/

[327]

Notification Triggers: https://web.dev/notification-triggers/

[328]

Customize media notifications and playback controls with the Media Session API: https://web.dev/media-session/

[329]

Managing several displays with the Multi-Screen Window Placement API: https://web.dev/multi-screen-window-placement/

[330]

Detect inactive users with the Idle Detection API: https://web.dev/idle-detection/#use-cases

[331]

Migrate to User-Agent Client Hints: https://web.dev/migrate-to-ua-ch/

[332]

polyfill 库: https://github.com/GoogleChromeLabs/uach-retrofill

[333]

Declarative Shadow DOM: https://web.dev/declarative-shadow-dom/

[334]

Trust is good, observation is better: Intersection Observer v2: https://web.dev/intersectionobserver-v2/

[335]

Stay awake with the Screen Wake Lock API: https://web.dev/wake-lock/

[336]

A contact picker for the web: https://web.dev/i18n/en/contact-picker/

[337]

The Shape Detection API: a picture is worth a thousand words, faces, and barcodes: https://web.dev/shape-detection/

[338]

WebSocketStream: integrating streams with the WebSocket API: https://web.dev/i18n/en/websocketstream/

[339]

Sensors for the web: https://web.dev/generic-sensor/

[340]

Improving user privacy and developer experience with User-Agent Client Hints: https://web.dev/user-agent-client-hints/

[341]

Capturing an image from the user: https://web.dev/capturing-images/

[342]

Reading and writing files and directories with the browser-fs-access library: https://web.dev/browser-fs-access/

[343]

Building a device for WebUSB: https://web.dev/build-for-webusb/

[344]

Better JS scheduling with isInputPending(): https://web.dev/isinputpending/

[345]

Monitor your web page's total memory usage with measureUserAgentSpecificMemory(): https://web.dev/monitor-total-page-memory-usage/

[346]

Logical layout enhancements with flow-relative shorthands: https://web.dev/logical-property-shorthands/

[347]

It's time to lazy-load offscreen iframes!: https://web.dev/iframe-lazy-loading/

[348]

Know your code health with the ReportingObserver API: https://web.dev/reporting-observer/

[349]

Boldly link where no one has linked before: Text Fragments: https://web.dev/i18n/en/text-fragments/

[350]

Profiling Web Audio apps in Chrome: https://web.dev/profiling-web-audio-apps-in-chrome/

[351]

Get started with Web Bundles: https://web.dev/web-bundles/

[352]

More capable form controls: https://web.dev/more-capable-form-controls/

[353]

Updates to the Web Payments APIs: https://web.dev/web-payments-updates/

[354]

How YouTube improved video performance with the Media Capabilities API: https://web.dev/youtube-media-capabilities/

[355]

Hands-on with Portals: seamless navigation on the web: https://web.dev/hands-on-portals/

[356]

Credential Management API Feature Detection Check-up: https://web.dev/webauthn-credential-management/

[357]

Getting started with Web Audio API: https://web.dev/webaudio-intro/

[358]

Getting started with Web Audio API: https://web.dev/customelements/