最近在做 web 性能优化的工作,所以想集中学习了解一下相关的专题内容。这部分内容肯定要学习一手信息,所以找先找了 https://web.dev/[1],一个 Google 官方推出的一个面向 Web 开发者的网站,里面有非常多的教程和最佳实践,非常适合有性能优化诉求的开发者去浏览和学习。
网站的核心部分分为 4 类:
从上面的结构可以看出,Lean/Measure/CaseStudy 这三个章节内容都是比较体系化的,但是 Blog 内容却没有一个很好的分类。以我的阅读经验,Blog 里有一些非常好的文章,所以我很好奇 Blog 章节里有多少好东西可供挖掘,于是上个月的时候花了一些时间,把所有的 Blog 读了一遍,并以自己的认知对内容做了分析和总结,以便自己后续回顾与搜索。
截止到目前为止(2022-7-7),web.dev 一共发布了 631 篇 blog,从 blog 的内容和发布时间可以很明显的看出 google 官方的发力(营销)方向,比如说前几年在推 PWA[6],这两年在推 Web Vitals[7]。纵观下来,Blog 的内容可以分为以下几类
种类 | 篇数 | 时间跨度 |
---|---|---|
性能指标/优化/监控 | 34 | 主要为 2018 - 2022 |
性能指标绝对是 Google/Chrome 这两年首推的内容了,从 2018 年到 2022,4 年的时间里就推出了 34 篇文章,最近两年的商业案例也基本都是「优化 Web Vitals 指标带来商业收益的」的套路。文章整体的质量都不错,从原因到解决方案到具体用例都有涉及。
种类 | 篇数 | 时间跨度 |
---|---|---|
网络优化 | 46 | 主要为 2018 - 2022 |
渲染 | 28 | 主要为 2013 - 2015,2018 做了相关修订 |
图片优化 | 13 | 主要为 2019 |
JS/JS 框架 | 15 | 主要为 2020 - 2021 |
font | 8 | 2020 - 2021 |
从文章比例上就可以看出,Web 非常关注网络资源的优化,这是 Web 的优点也是 Web 的痛点,JS 运行的再快也扛不住一次网络异常,所以网络优化的内容非常多。
渲染优化的文章主要集中到 13-15 年,最近几年很少说了,这个和历史发展潮流也差不多,13-15 年属于移动互联网高速发展时期,Native 开发还是如日中天,Web 在渲染性能上确实不如 Native,现如今随着内核的发展以及终端机性能的提升,渲染基本上已经不是性能瓶颈了,而且浏览器渲染模块对于 Web 开发者来说也很难去介入,所以内容较少也在情理之中。
JS 优化内容也比较少,一是对于大部分场景来说开发者还没有到优化 JS 解决性能瓶颈,二是很多 JS 优化的内容都搬到 https://v8.dev/blog[9] 了,所以只有几篇早期的文章;JS 框架层的优化最近有一些,例如和 nextjs,react 的合作之类的。
图片视频字体的优化都属于资源优化,内容也不错,可以一起看看单项突破。
种类 | 篇数 | 时间跨度 |
---|---|---|
CSS新特性/新属性 | 27 | 主要为 2019 - 2020 |
UI 组件/设计 | 12 | 主要为 2021 |
交互 | 15 | 2019 - 2021 |
CSS 主要介绍的是一些 CSS新特性新属性,还有一些关于 CSS 的使用/优化文章。
UI 是最近有些 blog 写了些 UI 组件,感觉内容也可以学习一下。UX 内容就比较杂了,涉及到交互效果,可访问性等内容,相对来说这个分类里跨学科内容多一些。
种类 | 篇数 | 时间跨度 |
---|---|---|
Web Worker/Service Worker | 22 | 主要为 2020 |
PWA | 16 | 主要为 2019 - 2020 |
浏览器 | 18 | 2018-2021 |
安全 | 10 | 主要为 2020 - 2021 |
WebGL/WebGPU | 6 | 2012 |
WebXR | 10 | 2017、2020 |
Wasm | 8 | 2018 - 2021 |
Web Component | 13 | 2016、2017 |
PWA 在前几年 Google 一直在推,但在国内其实一直不温不火的,大公司都有自己的 Hybrid H5 方案,小公司基本都去做小程序开发了;国外看似好一些,但做的最好的 twitter PWA,但我深度体验一年后,发现和 Native 应用比差距还是很大,这已经算全世界做的最好的 PWA APP 了,由此可见 PWA 推广道路之艰辛。不过 PWA 还是有很多值得学习参考的知识点的,还是有必要学习一下的。
Web Worker/Service Worker 加起来也有 22 篇文章,Web Worker 主要用来分散主线程的计算任务,Service Worker 主要起 Web Network 拦截器的作用(从效果上其实也可以归类到网络性能优化里),内容也是值得学习的。
浏览器分类主要是一些我不知道怎么分类的浏览器特性,比如说 BFCache,Web 存储方案介绍等等,内容相对较杂。
剩下的内容其实都比较散:
其实这些功能都属于叫好不叫座的状态,它们都大大提高了 Web 的上限,但是现实是没有几家公司需要突破传统 Web 的上限,大家其实都遵循一个原则——能跑就行。
种类 | 篇数 | 时间跨度 |
---|---|---|
提案/实验性功能/新 API | 42 | 主要为 2019-2022 |
这部分内容对于普通开发者来说其实不是很必要。一是提案/实验性功能/新 API都比较新,有兼容性问题,一般很难在项目中落地;二是在现实场景里,基本上很少有需求需要用到 Web 的 File API/Bluetooth API 等功能,一般这些场景都是遇到再看,所以这部分内容其实只要知道有就可以,要用到再看细节也不迟。
这部分内容是整理出的 Blog 内容,我对其标注了发布时间和文件标题,并对一些内容做了简评,方便后续搜索和查看。
fetchpriority
属性的运用,用来修改资源加载优先级,Chrome101 可用stale-while-revalidate
的介绍下面的文章其实都是 15 年写的,18 年修订的:https://web.dev/authors/paullewis/
preventDefault
和 stopPropagation
的深入研究[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/