Web 应用模式
用于构建 Web 应用的一系列常见模式。
- 如何查询 Web 平台信息中心以获取基准工具
- 使用 Google 工具构建核心网页指标工作流程
- 2025 年 2 月基准月度摘要
- ruby-align 已成为基准
- 使用 Background Fetch API 下载 AI 模型
- 预提取资源以加快后续导航速度
- 调试布局偏移
- 优化 Cumulative Layout Shift
- CSS scrollbar-color 和 scrollbar-gutter 现已成为基准规范
- 2025 年 1 月基准月度摘要
- WasmGC 和 Wasm 尾调用优化现已成为基准
- Largest Contentful Paint (LCP)
- Promise.try 现已在基准版中推出
- 使用 getClientCapabilities() 简化 WebAuthn 功能检测
- 构建支持本地和离线的聊天机器人
- 大语言模型的优势和限制
- 优化耗时较长的任务
- 使用 CSS mask-image 属性对图片应用效果
- 2024 年基准：提供更多工具来帮助 Web 开发者
- 延迟加载视频
- 预加载模块
- 衡量表单中的浏览器自动填充功能
- 第 2 部分：构建客户端 AI 毒性检测
- Total Blocking Time (TBT)
- 开始衡量 Web Vitals
- 优化 Largest Contentful Paint
- Web Vitals
- 提高 Core Web Vitals 最有效的方法
- CSS content-visibility 属性现已成为基准值
- Core Web Vitals 指标阈值是如何定义的
- 在实验室中手动诊断互动速度缓慢的问题
- 基准
- 往返缓存
- 使用 CSSNestedDeclarations 改进了 CSS 嵌套
- First Input Delay (FID)
- 在现场调试性能
- 对 CSS @property 的性能进行基准测试
- 使用 Google 工具将 Core Web Vitals 与广告收入相关联
- Web Storage
- 现在该延迟加载屏幕外 iframe 了！
- 在同一网域中构建多个渐进式 Web 应用
- Web 推送协议
- 优秀的渐进式 Web 应用有哪些特点？
- 怎样才算可安装？
- Chrome 如何处理 Web 应用清单的更新
- 添加 Web 应用清单
- 使用严格的内容安全政策 (CSP) 缓解跨站脚本攻击 (XSS)
- 通过 Web 访问硬件设备
- 允许通过相关源请求在您的各个网站上重复使用通行密钥
- 针对 Web 的浏览器级图片延迟加载
- 选择正确的图片格式
- 自定义指标
- 使用 Google Analytics（分析）4 和 BigQuery 衡量效果并进行调试
- Web 权限最佳实践
- Cookie 通知最佳实践
- 使用 Media Session API 自定义媒体通知和播放控件
- 查找实际应用中的缓慢互动情况
- 使用 tabindex
- 加载第一个字节所需时间 (TTFB)
- 适用于小型 LLM 的实用提示工程
- Interaction to Next Paint (INP)
- 使用 light-dark() 的 CSS 配色方案相关颜色
- 适用于 Web 应用的 WebAssembly 性能模式
- CSS 动画网格布局
- 使用游戏手柄畅玩 Chrome 恐龙游戏
- inert 属性
- 使用 AAGUID 确定通行密钥提供程序
- 使用 Binaryen 编译和优化 Wasm
- <model-viewer> 网络组件
- 以 HTML5 格式录制音频和视频
- userVerification 深度解析
- 为什么 CrUX 数据与我的 RUM 数据不同？
- 面向 Web 开发者的无障碍功能
- 加载第三方 JavaScript
- 禁止创建新的通行密钥（如果已存在通行密钥）
- 使用 IndexedDB
- 2024 年每位前端开发者都应知道的 5 个 CSS 代码段
- 优化加载第一个字节所需时间
- 网址的组成部分有哪些？
- 可发现凭据深入探究
- 渲染性能
- ResizeObserver：类似于元素的 document.onresize
- 优化基于文本的资源的编码和传输大小
- OffscreenCanvas - 使用 Web Worker 来加快画布操作
- First Contentful Paint (FCP)
- 内容分发网络 (CDN)
- 怎样才算是良好的退出体验？
- 可交互时间 (TTI)
- 使用 Fetch Priority API 优化资源加载
- :user-valid 和 :user-invalid 伪类
- 为业务决策者优化 Core Web Vitals
- JavaScript 中 base64 编码字符串的细微差别
- CSS subgrid
- 在不影响网页速度的情况下有效加载广告
- 四种常见的代码覆盖率类型
- 从技术角度来看，测试或不测试
- 定义测试用例和优先级
- 以用户为中心的效果指标
- 预加载自适应图片
- 使用 CSS 根据用户偏好调整排版
- 金字塔还是螃蟹？找到合适的测试策略
- 三种常见的测试自动化类型
- 避免不必要的下载
- 什么是 WebAssembly，它从何而来？
- 将 mkbitmap 编译为 WebAssembly
- 在现代 Web 应用中安全地托管用户数据
- 源私有文件系统
- 为响应更快的网站部署 AVIF
- 优化 Interaction to Next Paint
- 您目前可以使用的 Baseline 功能
- 脚本评估和耗时较长的任务
- DOM 大小对互动的影响以及应对措施
- 优化输入延迟
- 客户端呈现 HTML 和交互
- 使用 WordPress Playground 和 WebAssembly 打造浏览器内的 WordPress 体验
- Cumulative Layout Shift (CLS)
- 面向开发者的新功能 - 由 WebAssembly 提供
- 应用商店中的 PWA
- 什么是源代码映射？
- 2023 年每位前端开发者都应该知道的 6 个 CSS 代码段
- CSS 中的三角函数
- 使用 requestVideoFrameCallback() 对视频执行高效的每视频帧操作
- GDE 社区亮点：Lars Knudsen
- CSS 快速提示！渐变文本动画
- 媒体应用的新模式
- 正在构建 Chrometober！
- 构建提示组件
- 创建通行密钥以实现无密码登录
- 通过表单自动填充功能实现通行密钥登录
- 构建悬浮操作按钮 (FAB) 组件
- 字体最佳实践
- GDE 社区亮点：Alba Silvente Fuentes
- CSS 快速提示！动画加载器
- 测试 Web 设计颜色对比度
- 为网站构建主导航栏
- 是 :modal 吗？
- 营造弯曲的网格幻觉
- 代码和跟踪代码管理器的最佳做法
- 广告素材列表样式
- Nordhealth 如何在 Web 组件中使用自定义属性
- 通过单独的转换属性对 CSS 转换进行更精细的控制
- CSS 边框动画
- BBC 如何推出 HSTS 以提高安全性和性能。
- 为什么实验室数据和现场数据可能不同（以及如何处理这些数据）
- 实现双赢局面
- Internet Explorer 的结束
- 告别 HTML5Rocks
- 第一方饼干食谱
- 在网页上同步音频和视频播放
- 使用圆锥渐变创建冷边框
- 选择 JavaScript 库或框架
- 使用 Fetch API 时实现错误处理
- JavaScript 库与框架之间的区别
- 终端前端开发者指南
- 一款用于快速、精美的网页字体的 API
- GOV.UK 从其前端删除了 jQuery。
- 构建按钮组件
- 不要与浏览器的预加载扫描程序冲突
- 缩小差距
- 衡量实际网页指标的最佳做法
- 在开发者社区中寻找勇气和灵感
- 现实生活中的可变字体
- 使用 CSS Gradient Creator 快速创建精美的 CSS 渐变
- 深入探究顶级 Web 开发者的痛点
- 利用 images.tooling.report 完善您的网站图片
- 全局和局部变量范围
- 构建对话框组件
- 调试网络上的媒体播放错误
- GDE 社区亮点：Nishu Goel
- 过度延迟加载的性能影响
- 构建加载条组件
- 保存表单中的凭据
- Chrome 和 Firefox 即将登陆主要版本 100
- 构建自适应网站图标
- 在 Emscripten 中绘制到画布
- 通过更新 HTTP 缓存提高安全性和隐私性
- 其他 HTML 元素
- 将 USB 应用移植到 Web 中。第 2 部分：gPhoto2
- 网络错误日志记录 (NEL)
- WebAssembly 功能检测
- 将 USB 应用移植到 Web 中。第 1 部分：libusb
- 构建主题切换组件
- 使用 Emscripten 在 C++ 中嵌入 JavaScript 代码段
- Oculus Quest 2 上的 PWA
- 建筑设计人员
- Designcember 计算器
- 使用结构化克隆在 JavaScript 中进行深层复制
- 构建消息框组件
- 界面资金
- 构建 3D 游戏菜单组件
- Lighthouse 用户流
- PageSpeed Insights 的新变化
- 2021 年 Chrome 开发者峰会上发布的所有内容
- 关于动画流畅性指标
- 使用 Photoshop 探索网络世界
- 构建多选组件
- 如何使用 Navigation Timing 和 Resource Timing 评估现场加载性能
- 使用 Sanitizer API 安全地操控 DOM
- 使用第三方嵌入代码的最佳做法
- SPA 架构对核心网页指标的影响
- JavaScript 事件深入探究
- 捆绑非 JavaScript 资源
- 构建拆分按钮组件
- 使用 CSS 模块脚本导入样式表
- CSS 强调色
- 构建 switch 组件
- 用户偏好设置媒体功能客户端提示标头
- 构建面包屑导航组件
- 使用 C、C++ 和 Rust 中的 WebAssembly 线程
- 支持离线流式传输的 PWA
- 媒体流式传输基础知识
- 媒体加密
- 媒体框架
- @font-face 的 CSS size-adjust
- 构建配色方案
- 使用 AVIF 压缩网站上的图片
- Web 工具中的 Cumulative Layout Shift 不断演变
- 用于网页指标的 CSS
- 新增了 CSS 函数伪类选择器 :is() 和 :where()
- 现已推出全新渐进式 Web 应用培训
- 全新的自适应设计：组件驱动型环境中的网页设计
- 迁移到用户代理客户端提示
- 安全标头快速参考
- Excalidraw 和 Fugu：改善核心用户历程
- Service Worker 中的 ES 模块
- 构建媒体滚动条组件
- 使用 Lighthouse 优化网页指标
- 使用 WebAssembly 中的异步 Web API
- 自定义 PWA 标题栏的窗口控件叠加层
- 控制第三方脚本
- 使用 WebOTP API 在跨源 iframe 中填充动态密码表单
- 使用 DataTransfer API 打破障碍
- 构建拆分文本动画
- 提高 CLS 指标
- Web 开发者满意度
- 构建“设置”组件
- JavaScript：这是什么意思？
- 迷你应用编程方式
- 迷你应用组件
- 对 Web 开发者的迷你应用总结
- 迷你应用标记、样式、脚本和更新
- 在示例项目中运用迷你应用编程原则
- 什么是 H5 和 QuickApp？
- 项目结构、生命周期和捆绑
- 迷你应用开源项目
- 数据流 - 权威指南
- 构建“标签页”组件
- 关于启用跨域隔离的指南
- 使用 Origin-Agent-Cluster 标头请求性能隔离
- CSS aspect-ratio 属性
- WebRTC 现在是 W3C 和 IETF 标准
- 轮播界面最佳实践
- 需要反馈：如何针对长期有效网页改进布局偏移指标
- 使用 HTTPS 进行本地开发
- 何时使用 HTTPS 进行本地开发
- Codelab：构建 Sidenav 组件
- 构建侧边导航栏组件
- Codelab：在 CSS 中居中
- 在 CSS 中居中
- 爱你的缓存 ❤️
- 跨浏览器绘制 Worklet 和 Houdini.how
- 使用 AutoWebPerf 自动执行审核
- 有关付款和地址表单的最佳做法
- 付款表单最佳实践 Codelab
- 注册表单最佳实践 Codelab
- 有关注册表单的最佳做法
- 有关短信动态密码表单的最佳做法
- 地址表单最佳实践 Codelab
- 使用 Service Worker 向页面广播更新
- 命令式缓存指南
- 与 Service Worker 的双向通信
- 停用鼠标加速以提供更好的 FPS 游戏体验
- Codelab：构建故事组件
- 构建“短片故事”组件
- CMS 的浏览器级延迟加载
- Schemeful Same-Site
- Codelab：构建推送通知客户端
- Codelab：构建推送通知服务器
- 推送通知概览
- 衡量离线使用情况
- 高性能 CSS 动画的示例
- CSS min()、max() 和 clamp()
- Signed Exchange (SXG)
- 使用与流相关的缩写符号增强逻辑布局
- 为什么有些动画速度很慢？
- 在 Service Worker 中处理范围请求
- 如何创建高性能 CSS 动画
- 控制相机平移、倾斜度和缩放
- 什么是第三方源试用？
- 分离窗口内存泄漏
- 创建离线后备网页
- Core Web Vitals
- 使用 CSS 的 clip-path 属性创建有趣的图片形状
- 使用 CSS ::marker 的自定义项目符号
- 添加用于更改密码的常用网址，帮助用户轻松更改密码
- 使用 Service Worker 编排付款事务
- 使用 Service Worker 处理可选的付款信息
- ARIA：毒药还是解药？
- 使用 Emscripten 调试 WebAssembly 中的内存泄漏
- content-visible：可提升渲染性能的新 CSS 属性
- 取消屏蔽剪贴板访问权限
- Android 设备上的 Web
- 引荐来源网址和引荐来源网址政策最佳实践
- 在 Google 上构建 PWA（第 1 部分）
- 使用 Lighthouse CI 监控性能
- 设计 Google 帐号中通行密钥的用户体验
- @property：为 CSS 变量赋予超能力
- Service Worker 缓存和 HTTP 缓存
- 将网站速度与业务指标联系起来
- 通过 Android 付款应用提供送货和联系信息
- 注册基于网络的付款应用
- 基于网络的付款应用概览
- 处理导航请求
- 使用 Chrome 用户体验报告了解实际应用性能
- 一行 CSS 中的十种现代布局
- 使用 devicePixelContentBox 实现像素完美的渲染
- web.dev 实时总结
- 借助跨平台浏览器功能构建登录表单
- 有关登录表单的最佳做法
- 逐步增强您的渐进式 Web 应用
- 用于调试 Google 搜索中的 JavaScript 问题的 Web 开发者工具
- 利用 Workbox 打造弹性搜索体验
- 将媒体内容添加到网页
- 以前无人关联的大胆添加链接：文本片段
- 如何报告良好的浏览器错误
- 让您的 PWA 感觉更像一个应用
- 使用 RAIL 模型衡量性能
- 使用 Quicklink 加快 React 中的导航速度
- 使用 Fetch Metadata 保护您的资源免受网络攻击
- 内容重新排序
- Chromium 84 中的 Web Animations API 改进
- 通过 Web Payments 为付款应用提供助力
- 付款交易的生命周期
- 设置付款方式
- Android 付款应用开发者指南
- Chromium 83 中适用于 macOS system-ui 字体的更多可变字体选项
- 渐进式 Web 应用如何助力业务成功
- 利用应用快捷方式快速完成工作
- 准备移除 AppCache
- 永久存储
- 如何制定安装策略
- CommonJS 如何扩大您的 app bundle
- 在 Chrome 中对网络音频应用进行性能分析
- 为什么需要“跨源隔离”来实现强大的功能
- 通过精细分块提升 Next.js 和 Gatsby 网页加载性能
- “同网站”和“同源”
- 使用 COOP 和 COEP 将网站设置为“跨源隔离”
- 使用 measureUserAgentSpecificMemory() 监控网页的总内存用量
- web.dev 工程博客 #1：我们如何构建网站和使用 Web 组件
- 通过配色方案 CSS 属性和相应的元标记改进了深色模式默认样式
- 确保您的网站在新冠肺炎 (COVID-19) 疫情期间可供所有人访问
- 颜色和对比度无障碍功能
- 修复超载的服务器
- 无障碍点按目标
- 无障碍自适应设计
- 使用可信类型防范基于 DOM 的跨站脚本攻击漏洞
- 在 Android 应用中使用 PWA
- 通过预加载可选字体来防止布局偏移和不可见文本 (FOIT) 闪烁
- 如何使用 nginx 分发 Signed HTTP Exchange (SXG)
- 如何使用 nginx 设置 Signed HTTP Exchange (SXG)
- 使用媒体查询优化 CSS 背景图片
- 跨职能解决网站速度问题
- 更改布局后滚动贴靠
- 如何使用 Web Packager 设置 Signed Exchange
- 如何提供您自己的应用安装体验
- 增强现实：您可能已经知道了
- 虚拟现实登陆网络（第二部分）
- 在现实世界视图中定位虚拟对象
- 推动 Web 框架生态系统的发展
- 什么是渐进式 Web 应用？
- 在 PWA 中使用可遮盖式图标支持自适应图标
- 使用 Workbox 将 PWA 集成到内置共享界面中
- 改进同步 XMLHttpRequest() 中的页面关闭
- 使用模块 worker 进行 Web 线程处理
- 自适应加载：改善了慢速设备上的网页性能
- 速度工具的发展：2019 年 Chrome 开发者峰会的精彩瞬间
- 使用 Web Worker 在浏览器的主线程之外运行 JavaScript
- 2019 年夏季图片优化问卷调查的反馈
- 构建推送通知服务器
- Next.js 中的路由预提取
- 在 Next.js 中使用动态导入功能进行代码拆分
- 使用 Next.js 时默认提高性能
- 通过 Web Share API 与操作系统共享界面集成
- AMP 如何保证您的 Next.js 应用中的速度
- 虚拟现实即将登陆网络
- 了解 Cookie
- SameSite Cookie 配方
- 快捷广告至关重要
- 使用推送通知吸引用户和再次互动
- Notifications API 使用入门
- 使用 Service Worker 管理通知
- 解决布局不稳定问题
- 让 Web 应用快速加载的技巧（即使在功能手机上）
- 借助 Houdini 的新 API 实现更智能的自定义属性
- 预提取的两种方法：<链接>标记和 HTTP 标头
- 什么是混合内容？
- 修正混合内容
- 基本视频不再局限于图片，适用于 Web 应用
- 向渐进式 Web 应用添加 Apple 触摸图标
- 准备就绪的播放器网页
- 多源网站中的渐进式 Web 应用
- 优化 WebFont 的加载和呈现
- 缩减网页字体大小
- 使用 Angular CLI 创建渐进式 Web 应用
- 识别运行缓慢的第三方 JavaScript
- 高效加载第三方 JavaScript
- 使用图片 CDN 优化图片
- 第三方 JavaScript 性能
- 更强大的表单控件
- 优化第三方 JavaScript
- 尽早建立网络连接，以提升系统感知的网页速度
- 使用背景幕滤镜制作操作系统风格的背景
- 利用“在重新验证时过时”功能保持内容的新鲜度
- 使用 Angular CDK 虚拟化大型列表
- 在 Angular 中路由预加载策略
- 优化 Angular 的更改检测
- 通过预测性预提取提高网页导航速度
- 根据网络质量调整视频，以适应图片投放
- 使用 Codelyzer 审核 Angular 应用的可访问性
- 使用 Angular Service Worker 进行预缓存
- Angular CLI 的性能预算
- Preferreds-color-scheme：你好，黑暗，我的老朋友
- Angular 中的路由级代码拆分
- 使用入门：优化 Angular 应用
- 有关网站性能的十大提示
- 网络组件：帮助推动网络发展的秘密成分
- 使用 Lighthouse 制定性能预算
- Web Payments API 更新
- 速度的价值
- 在桌面设备上为渐进式 Web 应用安装地址栏
- 效果如何提高转化率？
- Service Worker 思维模式
- 如何通知用户我的 PWA 可安装？
- 促进 PWA 安装的模式
- 利用图片政策实现快速加载时间等
- 使用 Critical 提取并内嵌关键 CSS
- 提取关键 CSS
- 冗长的 JavaScript 任务会延迟您的可交互时间吗？
- 大规模提升速度：网页性能方面有哪些新变化？
- 隆重推出 PROXX
- 使用 Web Perception Toolkit 进行视觉搜索
- SameSite Cookie 说明
- 基于网络质量的自适应投放
- 亲身体验门户：在网络上实现无缝导航
- 使用 brotli 缩减和压缩网络载荷
- 2019 年 I/O 大会上的 web.dev
- 如何测量速度？
- 如何保持快速？
- 什么是速度？
- 使用回应贴靠预渲染路线
- 使用 React.lazy 和 Suspense 进行代码拆分
- 使用 React-window 虚拟化大型列表
- 使用入门：优化您的 React 应用
- 使用 Create React App 添加 Web 应用清单
- 使用 react-axe 和 eslint-plugin-jsx-a11y 进行无障碍功能审核
- 在“使用 Workbox 创建 React 应用”中进行预缓存
- Codelab：预加载关键资源以提高加载速度
- 首选减压：有时运动越少
- 推迟非关键 CSS
- 信任有益，观察更好：Intersection Observer v2
- 自适应设计基础知识
- 可构造的样式表
- 在网页上呈现
- 将性能预算纳入构建流程中
- 将 bundlesize 与 Travis CI 搭配使用
- 使用 webpack 设置性能预算
- 使用 Lighthouse 聊天机器人设置性能预算
- Emscripten 和 npm
- 您的应用是否已安装？getInstalledRelatedApps() 会告诉您！
- 向新型浏览器提供新式代码，以提高网页加载速度
- 利用客户端提示适应用户
- 标签和文本替代方案
- 键盘操作基础知识
- 语义和屏幕阅读器
- 样式聚焦
- 标题和地标
- 使用 tabindex 控制焦点
- 使用语义 HTML 轻松实现键盘操作
- 什么是无障碍？
- 使用 Service Worker
- 修复欺骗性 404 错误
- 配置 HTTP 缓存行为
- 预加载关键资源，以提高加载速度
- 将 Imagemin 与 webpack 结合使用
- 提供具有正确尺寸的图片
- 用视频替换 GIF
- 跨源资源共享 (CORS)
- 探索开发者工具的“Network”面板
- 安保真不是那么吓人！
- 利用 Lighthouse 发现效果提升机会
- 通过 PRPL 模式应用即时加载
- 同源政策和提取请求
- 什么是安全攻击？
- 性能预算基础知识
- 使用 HTTP 缓存防止不必要的网络请求
- 使用命令行创建 WebP 图片
- 指定多个槽宽度
- 如何使用 Lighthouse 衡量搜索引擎优化情况
- 艺术指导
- 使用 WebP 图片