关于前端:🗂-看了-webdev-的-631-篇博客我总结了这些内容

如果你喜爱我的文章，心愿点赞👍 珍藏 📁 评论 💬 三连反对一下，谢谢你，这对我真的很重要！

最近在做 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 读了一遍，并以本人的认知对内容做了剖析和总结，以便本人后续回顾与搜寻。

<!–truncate–>

内容分类：

截止到目前为止（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.性能指标

性能指标相对是 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 了，所以只有几篇晚期的文章；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
• 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
  • 2. SameSite cookie recipes
  • 3. 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

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://youmightnotneedelectr…，兴许不须要 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…
• 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/…
• 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-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-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

如果你喜爱我的文章，心愿点赞👍 珍藏 📁 评论 💬 三连反对一下，谢谢你，这对我真的很重要！

欢送大家关注我的微信公众号：卤蛋实验室，目前专一前端技术，对图形学也有一些渺小钻研。

原文链接 👉 web-dev-blog：更新更及时，浏览体验更佳