文章
构建支持本地和离线的聊天机器人
发布时间:2024 年 1 月 13 日 您可以使用 AI、传统机器学习模型和较新的大语言模型 (LLM) 构建许多令人惊叹的项目。借助 LLM,计算机可以生成新内容、撰写摘要、分析文本的情感等。在过去几年里,人们有机会使用 Gemini 和 ChatGPT 等应用,这些应用使用先进的自然语言处理 (NLP) 技术与用户进行对话。 Google 开发者专家 Christian Liebel 撰写了一篇文章,介绍了如何使用 LLM 向网站或 Web 应用添加聊天机器人。 在本系列中,您将:
使用 WebLLM 构建本地和离线聊天机器人
发布时间:2024 年 1 月 13 日 本文是有关 LLM 和聊天机器人的三篇系列文章中的第二篇。上一篇文章讨论了 设备端和浏览器端 LLM 的优缺点 。 现在,您已经更好地了解了客户端 AI,接下来可以将 WebLLM 添加到待办事项 Web 应用了。您可以在 GitHub 代码库的 web-llm 分支 中找到该代码。 WebLLM 是机器学习编译提供的面向 LLM 的基于 Web 的运行时。您可以试用 将 WebLLM 作为一款独立应用 。该应用的灵感来自于云端支持的聊天应用(例如
大语言模型的优势和限制
发布时间:2024 年 1 月 13 日 本文是关于 LLM 和聊天机器人的三篇系列文章中的第一篇。第 2 部分介绍了如何 使用 WebLLM 构建聊天机器人 ,第 3 部分介绍了如何 使用 Prompt API 。 大语言模型 (LLM) 正成为软件开发中的重要构建块:LLM 非常适合生成和处理自然语言文本,可实现数据提取、总结等应用场景,或协助与用户数据进行对话。 在本系列文章中,我将介绍设备端 LLM 的优点和缺点,并引导您使用两种本地和离线方式(基于 Web 的 LLM 运行时
使用 Prompt API 构建支持本地和离线的聊天机器人
发布时间:2024 年 1 月 13 日 本系列关于 LLM 聊天机器人的三篇文章至此结束。前面的文章介绍了 客户端 LLM 的强大功能 ,并详细介绍了如何 将 WebLLM 赋能的聊天机器人添加到待办事项应用 。 一些较新的设备在出厂时就内置了大型语言模型和其他 AI 模型。Chrome 提议 将内置 AI API 集成到浏览器中 ,目前 有多个 API 处于不同的开发阶段。其中许多 API 都正在接受标准化流程,以便网站可以使用相同的实现和模型来实现最佳推理性能。 Prompt API
优化耗时较长的任务
有人告诉你不要阻塞主线程并拆分长任务,但执行这些任务意味着什么呢?
使用 CSS mask-image 属性对图片应用效果
借助 CSS 遮罩,您可以选择将图片用作遮罩层。这意味着,您可以使用图片、SVG 或渐变作为遮罩,在不使用图片编辑器的情况下制作有趣的效果。
2024 年基准:提供更多工具来帮助 Web 开发者
web-features 数据集、Web 平台状态信息中心、基准状态微件等!回顾一下 2024 年的基准。
延迟加载视频
本文介绍了延迟加载以及您可以用于延迟加载视频的选项。
预加载模块
模块预加载提供了一种以声明方式提前加载 JavaScript 模块的方法。
衡量表单中的浏览器自动填充功能
为了优化用户体验,了解用户如何与您的表单互动至关重要。浏览器自动填充功能在此过程中发挥着重要作用。了解如何收集和分析有关用户如何在表单中使用自动填充功能的数据。
第 1 部分:利用客户端 AI 打击网络上的恶意评论
通过毒性内容检测功能保护用户,打造更安全的上网环境。在第一部分,我们分享了部署 AI 技术来从源头(用户的键盘)减少有害内容所需的背景信息。”
第 2 部分:构建客户端 AI 毒性检测
毒性内容检测功能可保护您的用户,并营造更安全的在线环境。在第 2 部分,我们将学习如何构建客户端 AI 工具,以便在源头检测和减少毒性内容。
Total Blocking Time (TBT)
本文介绍了总阻塞时间 (TBT) 指标,并说明了如何衡量该指标
优化 Largest Contentful Paint
关于如何分解 LCP 并确定有待改进的关键方面的分步指南。
Web Vitals
衡量网站是否运行正常的基本指标
提高 Core Web Vitals 最有效的方法
以下是 Chrome 确定的一系列最佳实践,它们是优化网站性能和提升 Core Web Vitals 的最大机遇
开始衡量 Web Vitals
了解如何在真实环境和实验室环境中衡量网站的 Web Vitals。
CSS content-visibility 属性现已成为基准值
CSS content-visibility 属性现已面向 Baseline Newly 提供。
比较 LLM 功能与摘要功能
使用 LLM 作为评判技术,评估不同模型和提示的结果。模型验证会委托给另一个 LLM,而不是依赖于人工判断。
Core Web Vitals 指标阈值是如何定义的
核心网页指标阈值背后的研究和方法
使用 Google 工具构建核心网页指标工作流程
随着 Core Web Vitals 的重要性日益增强,网站所有者和开发者越来越关注性能和关键用户体验。Google 提供了许多工具来帮助评估、优化和监控网页,但不同的数据源和有效使用方式往往会让用户感到困惑。本指南提出了一种将多种工具相结合的工作流程,并阐明了这些工具在开发过程中的意义和方式。
在实验室中手动诊断互动速度缓慢的问题
您浏览了现场数据,发现存在一些缓慢的互动。下一步是详细了解如何手动测试这些互动,并找出这些互动背后的原因。
基准
本文介绍了 Baseline 的起源故事、Google 的参与以及 WebDX 社区小组的所有权。
往返缓存
了解如何优化网页,让用户在使用浏览器的后退和前进按钮时能够即时加载。
使用 CSSNestedDeclarations 改进了 CSS 嵌套
CSS 嵌套功能得到了大幅改进!
First Input Delay (FID)
此博文介绍了 First Input Delay (FID) 指标,并说明了如何衡量该指标
在现场调试性能
了解如何使用调试信息对性能数据进行归因,以帮助您通过数据分析发现和修复真实用户的问题
提升客户端 AI 的性能和用户体验
了解客户端 AI 的优势,包括低延迟、降低服务器端费用、无 API 密钥要求、加强用户隐私保护和离线访问。
使用 Google 工具将 Core Web Vitals 与广告收入相关联
了解如何利用 Google 工具将 Core Web Vitals 与广告收入关联起来。
对 CSS @property 的性能进行基准测试
@property 对 CSS 的性能有何影响?
现在该延迟加载屏幕外 iframe 了!
这篇博文将介绍加载属性以及如何使用该属性来控制 iframe 的加载。
Web Storage
在浏览器中存储数据有多种选择。哪种方式最符合您的需求?
在同一网域中构建多个渐进式 Web 应用
了解构建多个 PWA 重复使用同一域名的推荐和不推荐方法及其优缺点。
Web 推送协议
分步互动式教程,介绍如何构建服务器以管理推送通知订阅并将 Web 推送协议请求发送到推送服务。
怎样才算可安装?
渐进式 Web 应用可安装性标准。
优秀的渐进式 Web 应用有哪些特点?
优秀或出色的渐进式 Web 应用有何特点?
Chrome 如何处理 Web 应用清单的更新
为 PWA 更改 Web 应用清单中的图标、快捷方式、颜色和其他元数据所需的操作。
添加 Web 应用清单
Web 应用清单是一个简单的 JSON 文件,用于告知浏览器您的 Web 应用应采取的行为。
使用严格的内容安全政策 (CSP) 缓解跨站脚本攻击 (XSS)
了解如何基于脚本 Nonce 或哈希部署 CSP,以深度防范跨站脚本攻击。
通过 Web 访问硬件设备
本文可帮助 Web 开发者根据给定设备选择合适的硬件 API。
允许通过相关源请求在您的各个网站上重复使用通行密钥
了解如何使用相关源请求 (Related Origin Request),以允许在您的各个网站上重复使用通行密钥。
选择正确的图片格式
为了在您的网站上投放经过优化的图片,首先要选择适当的图片格式。此帖子可帮助您做出正确的选择。
针对 Web 的浏览器级图片延迟加载
此博文将介绍加载属性以及如何使用该属性来控制图片的加载。
自定义指标
利用自定义指标,您可以衡量和优化您的网站为网站带来的独特体验。
使用 Google Analytics(分析)4 和 BigQuery 衡量效果并进行调试
了解如何将 Web Vitals 数据发送到 Google Analytics 4 媒体资源,以及如何导出此类数据以便在 BigQuery 和 Looker Studio 中进行分析。
Web 权限最佳实践
本指南概述了网站在请求用户授予敏感功能(例如摄像头、麦克风和位置信息)的使用权限时应遵循的最佳做法,以最大限度减少不必要的提示和禁止访问。
Cookie 通知最佳实践
了解 Cookie 通知对性能、效果衡量和用户体验有何影响。
使用 Media Session API 自定义媒体通知和播放控件
网络开发者可以使用 Media Session API 自定义媒体通知并响应媒体相关事件,例如跳转或轨道变化。
使用 tabindex
使用 tabindex 属性明确设置元素的标签页位置。
查找实际应用中的缓慢互动情况
要在实验室中重现缓慢的互动问题,以优化网站的 Interaction to Next Paint,您需要依靠现场数据来找到它们。本指南介绍了如何执行此操作。
加载第一个字节所需时间 (TTFB)
这篇博文介绍了 Time to First Byte (TTFB) 指标,并说明了如何对其进行测量。
适用于小型 LLM 的实用提示工程
了解如何调整提示,以便在不同的 LLM、模型和模型大小中实现首选结果。
Interaction to Next Paint (INP)
这篇博文介绍了 Interaction to Next Paint (INP) 指标,并说明了其工作原理和测量方式,并就如何改进该指标提供了建议。
使用 light-dark() 的 CSS 配色方案相关颜色
description:使用 light-dark() 函数定义可响应所用配色方案的颜色。
适用于 Web 应用的 WebAssembly 性能模式
本指南面向希望从 WebAssembly 中受益的 Web 开发者,您将学习如何借助正在运行的示例,利用 Wasm 外包 CPU 密集型任务。
CSS 动画网格布局
在 CSS 网格中,您可以使用 `grid-template-columns` 和 `grid-template-rows` 属性分别定义线条名称并跟踪网格列和行的大小。支持插值这些属性可以让网格布局在不同状态之间平滑过渡,而不是在动画或过渡的中间点贴靠。
使用游戏手柄畅玩 Chrome 恐龙游戏
了解如何使用 Gamepad API 控制网页游戏。
inert 属性
inert 属性是一种全局 HTML 属性,它简化了移除和恢复元素用户输入事件(包括焦点事件和来自辅助技术的事件)的方式。
升级您的网站搜索:利用生成式 AI 提供符合情境的回答
在使用 AI 工具和生成新内容时,需要考虑许多道德因素。
认识 Web.dev AI 团队
认识一下技术文案和开发者关系团队。
什么是人工智能?
“AI”是 AI 的首字母缩写词,用来表示 AI 领域涉及的各种技术。
道德与 AI
在使用 AI 工具和生成新内容时,需要考虑许多道德因素。
使用 AAGUID 确定通行密钥提供程序
依赖方可以通过检查 AAGUID 来确定通行密钥的来源。了解其运作方式。
使用 Binaryen 编译和优化 Wasm
通过名为 ExampleScript 的合成玩具语言示例,了解如何使用 Binaryen.js API 用 JavaScript 编写和优化 WebAssembly 模块。
以 HTML5 格式录制音频和视频
音频/视频捕获功能长期以来一直是 Web 开发的“圣杯”。 多年来,我们一直依赖浏览器插件( Flash 或 Silverlight )来完成此任务。 快来! 此时,HTML5 可以派上用场。这可能并不明显,但 HTML5 的兴起确实带来了对设备硬件的大量访问。 Geolocation API (GPS)、 Orientation API (加速度计)、 WebGL (GPU)和 Web Audio API (音频硬件)就是很好的例子。这些功能非常强大,可公开基于系统底层硬件功能的高级
<model-viewer> 网络组件
通过 <model-viewer> 网络组件,您可以以声明方式在网页上使用 3D 模型。
userVerification 深度解析
了解如何在 WebAuthn 中使用“userVerification”
为什么 CrUX 数据与我的 RUM 数据不同?
了解 RUM 数据为什么会显示与 CrUX 不同的核心网页指标数据。
面向 Web 开发者的无障碍功能
因此,构建包容且人人皆可访问的网站非常重要。我们可以针对至少六个关键的残疾领域进行优化:视觉、听觉、行动不便、认知、言语和神经系统。
Largest Contentful Paint (LCP)
这篇博文介绍了 Largest Contentful Paint (LCP) 指标并说明了如何测量该指标
加载第三方 JavaScript
第三方脚本提供广泛多样的实用功能,使得网络更具动态性。了解如何优化第三方脚本的加载,以降低其对性能的影响。
禁止创建新的通行密钥(如果已存在通行密钥)
了解如何防止在用户的密码管理工具中已有通行密钥时创建新的通行密钥。
使用 IndexedDB
IndexedDB 基础知识。
2024 年每位前端开发者都应知道的 5 个 CSS 代码段
现在您可以使用的值得信赖、强大且稳定的 CSS 了。
优化加载第一个字节所需时间
了解如何针对 Time to First Byte 指标进行优化。
网址的组成部分有哪些?
主机、网站和源有何区别?什么是 eTLD+1?本文介绍了相关信息。
可发现凭据深入探究
了解什么是可发现的凭据,以及如何打造适合您的使用场景的用户体验。
渲染性能
如果网站和应用运行不佳,用户就会注意到,因此优化渲染性能至关重要!
ResizeObserver:类似于元素的 document.onresize
当元素的内容矩形改变大小时,“ResizeObserver”会通知您,以便您相应地做出反应。
优化基于文本的资源的编码和传输大小
除了避免不必要的资源下载,在提高网页加载速度上您可以采取的最有效措施就是,通过优化和压缩其余资源来最大限度减小总下载大小。
OffscreenCanvas - 使用 Web Worker 来加快画布操作
本文介绍了如何使用 OffscreenCanvas API 在 Web 应用中渲染图形时实现性能提升。
First Contentful Paint (FCP)
此博文介绍了 First Contentful Paint (FCP) 指标,并说明了如何衡量该指标
内容分发网络 (CDN)
本文全面介绍了内容分发网络 (CDN)。此外,还介绍了如何选择、配置和优化 CDN 设置。
怎样才算是良好的退出体验?
有关用户退出网站时应该怎么做的实用开发者指南。
可交互时间 (TTI)
这篇博文介绍了可交互时间 (TTI) 指标并说明了如何衡量该指标
使用 Fetch Priority API 优化资源加载
Fetch Priority API 用于指示资源相对于浏览器的相对优先级。它能够实现最佳加载效果并改进核心网页指标。
:user-valid 和 :user-invalid 伪类
关于 :user-valid 和 :user-invalid 伪类,以及如何使用它们来改善输入验证的用户体验。
为业务决策者优化 Core Web Vitals
了解业务决策者和非开发者如何改进核心网页指标。
JavaScript 中 base64 编码字符串的细微差别
了解并避免在对字符串应用 base64 编码和解码时出现的常见问题。
CSS subgrid
subgrid 支持网格共享性,允许嵌套网格与祖先和同级对齐。
在不影响网页速度的情况下有效加载广告
在当今的数字世界中,在线广告是我们所有人享受的免费网络的关键组成部分。但是,如果广告植入不当,可能会导致浏览速度变慢,让用户感到沮丧,并降低互动度。了解如何在不影响网页速度的情况下有效加载广告,确保顺畅的用户体验,并为网站所有者最大限度地发掘创收机会。
四种常见的代码覆盖率类型
了解什么是代码覆盖率,并探索衡量代码的四种常用方法。
从技术角度来看,测试或不测试
确定需要测试的内容以及可以排除的内容。
定义测试用例和优先级
确定要测试的内容、定义测试用例并确定优先级。
以用户为中心的效果指标
以用户为中心的效果指标是一项重要的工具,可帮助您了解和改善网站的体验,让真实用户受益。
预加载自适应图片
了解预加载自适应图片以确保出色用户体验的全新精彩可能性。
使用 CSS 根据用户偏好调整排版
一种根据用户的偏好调整字体的方法,让用户在阅读您的内容时能感到最得心应手。
金字塔还是螃蟹?找到合适的测试策略
了解如何将不同的测试类型组合成与您的项目契合的合理策略。
三种常见的测试自动化类型
让我们从基础知识开始吧!了解两种常规测试模式和三种常见的测试自动化类型。
避免不必要的下载
您应定期审核资源,以确保每个资源都有助于提供更好的用户体验。
将 mkbitmap 编译为 WebAssembly
mkbitmap C 程序依次读取图像并对其应用以下一项或多项操作:反转、高通过滤、缩放和阈值。每项操作都可以单独控制和开启或关闭。本文介绍了如何将 mkbitmap 编译为 WebAssembly。
什么是 WebAssembly,它从何而来?
介绍了 WebAssembly(有时缩写为 Wasm),它是一种可执行程序的可移植二进制代码格式和对应的文本格式,以及用于促进此类程序与其主机环境之间交互的软件接口。
源私有文件系统
文件系统标准引入了来源私有文件系统 (OPFS),作为一个存储端点,该端点对网页的来源是私有的,对用户不可见,可选择性地提供对一种经过高度优化以提升性能的特殊文件的访问权限。 现代浏览器支持源私有文件系统,并且该系统已由 Web 超文本应用技术工作组 ( WHATWG ) 在 文件系统 Living Standard 中标准化。 浏览器支持 来源 当您想到计算机上的文件时,可能会想到文件层次结构:文件按文件夹整理,您可以使用操作系统的文件浏览器浏览这些文件夹。例如,在 Windows
在现代 Web 应用中安全地托管用户数据
如何在 Web 应用中安全地显示用户控制的内容。
为响应更快的网站部署 AVIF
简要介绍如何在生态系统中采用 AVIF,以及开发者可以通过 AVIF 从静态图片和动画中获得何种性能和质量优势。
优化 Interaction to Next Paint
了解如何优化网站的 Interaction to Next Paint。
您目前可以使用的 Baseline 功能
您只需了解 Baseline 中的部分功能即可。
优化输入延迟
输入延迟会严重影响总互动延迟,并会对网页的 INP 造成不利影响。在本指南中,了解什么是输入延迟,以及如何减少输入延迟以提高互动速度。
脚本评估和耗时较长的任务
加载脚本时,浏览器需要一些时间在执行之前对其进行评估,这可能会导致任务耗时较长。了解脚本评估的工作原理,以及您可以采取哪些措施来防止脚本评估在网页加载期间导致耗时较长的任务。
客户端呈现 HTML 和交互
使用 JavaScript 呈现 HTML 与呈现由服务器发送的 HTML 不同,这可能会影响性能。请在本指南中了解不同之处,以及您可以采取哪些措施来确保网站的呈现效果(尤其是在涉及互动的情况下)。
DOM 大小对互动的影响以及应对措施
DOM 大小大可能是决定互动是否快速的因素。详细了解 DOM 大小与 INP 之间的关系,以及在网页包含大量 DOM 元素时,您可以采取哪些措施来缩减 DOM 大小,以及如何通过其他方式限制渲染工作。
优化 Cumulative Layout Shift
Cumulative Layout Shift (CLS) 是一项指标,用于量化用户遇到网页内容突然偏移的频率。在本指南中,我们将介绍如何优化导致 CLS 的常见原因,例如没有尺寸或动态内容的图片和 iframe。
Cumulative Layout Shift (CLS)
这篇博文介绍了 Cumulative Layout Shift (CLS) 指标并说明了如何衡量该指标。
使用 WordPress Playground 和 WebAssembly 打造浏览器内的 WordPress 体验
由 PHP 提供支持的完整 WordPress 平台,可通过 WebAssembly 在浏览器中运行
面向开发者的新功能 - 由 WebAssembly 提供
得益于 WebAssembly,这里现在展示了各种工具。
什么是源代码映射?
使用源代码映射改善 Web 调试体验。
应用商店中的 PWA
渐进式 Web 应用可以提交到 Android Play 商店、Microsoft Store 等应用商店。
2023 年每位前端开发者都应该知道的 6 个 CSS 代码段
现在您可以使用的值得信赖、强大且稳定的 CSS 了。
CSS 中的三角函数
在 CSS 中计算正弦、余弦、正切等值。
使用 requestVideoFrameCallback() 对视频执行高效的每视频帧操作
requestVideoFrameCallback() 方法可让网络作者注册一个回调,该回调会在新的视频帧发送至合成器时在呈现步骤中运行。
GDE 社区亮点:Lars Knudsen
对 Google Developers Experts (GDE) 计划成员的系列访谈之一。
媒体应用的新模式
这篇博文宣布了媒体应用一系列新的模式。
CSS 快速提示!渐变文本动画
我们来使用作用域自定义属性和 background-clip 来实现动画渐变文字效果 前往 CodePen 并创建一个新的 Pen。 为文本创建标记。我们使用包含“Speedy”一词的标题: 然后,为 body 设置较深的 background-color : 将文本的 font-size 调高。使用 clamp 使其具有响应能力: 为我们要使用的颜色创建两个自定义属性。使用这些颜色将 linear-gradient 应用于 background ,并将其旋转 90 度:
正在构建 Chrometober!
这本 Chrometober 是如何生动展现卷轴式图书的,分享有趣又惊悚的提示与技巧。
构建提示组件
基本概述了如何构建颜色自适应且易于访问的提示自定义元素。
通过表单自动填充功能实现通行密钥登录
通行密钥使网站的用户帐号更加安全、更简单、更易于使用且无密码。本文介绍了应如何设计通过通行密钥实现无密码登录,同时兼顾现有密码用户的需求。
创建通行密钥以实现无密码登录
通行密钥使网站的用户帐号更加安全、更简单、更易于使用且无密码。本文介绍了如何允许用户为您的网站创建通行密钥。
构建悬浮操作按钮 (FAB) 组件
简要介绍如何构建颜色自适应、响应迅速且易于访问的 FAB 组件。
字体最佳实践
了解如何针对核心网页指标优化网页字体。
GDE 社区亮点:Alba Silvente Fuentes
对 Google Developers Experts (GDE) 计划成员的系列访谈之一。
CSS 快速提示!动画加载器
我们来使用作用域自定义属性和 animation-timing-function 制作一个动画 CSS 加载器 前往 CodePen 并创建一个新的 Pen。 为加载器创建标记。请注意内嵌自定义属性的使用: 您还可以使用生成器 ( Pug ) 配置行数: 为我们的加载器添加一些样式: 使用绝对定位和 calc 与 transform 的组合来定位线条: 根据 --index 应用不透明度: 开始行动吧! 请注意使用 steps(var(--count)) 来获得正确的效果 ✨ 完成!🎉
测试 Web 设计颜色对比度
简要介绍了用于测试和验证设计的无障碍色彩对比度的三种工具和方法。
为网站构建主导航栏
本教程介绍了如何构建网站的无障碍主导航。您将了解语义 HTML、无障碍功能,以及如何使用 ARIA 属性有时弊大于利。
是 :modal 吗?
利用以下便捷的 CSS 伪选择器,您可以实现选择模态元素。
代码和跟踪代码管理器的最佳做法
针对 Core Web Vitals 优化代码和跟踪代码管理器。
广告素材列表样式
了解设置列表样式的一些实用且富有创意的方式。
营造弯曲的网格幻觉
探索如何利用 CSS 重现视错觉的有趣探索。
Nordhealth 如何在 Web 组件中使用自定义属性
在设计系统和组件库中使用自定义属性的优势。
通过单独的转换属性对 CSS 转换进行更精细的控制
了解如何使用单独的平移、旋转和缩放 CSS 属性以直观的方式处理转换。
CSS 边框动画
了解在 CSS 中为边框添加动画效果的几种方法
BBC 如何推出 HSTS 以提高安全性和性能。
BBC 为其网站部署了 HSTS,以提高安全性和性能。欢迎了解 HSTS 的意义,以及 HSTS 能为您提供哪些帮助。
为什么实验室数据和现场数据可能不同(以及如何处理这些数据)
了解监控核心网页指标的工具可能会报告不同的数字,以及如何解读这些差异。
实现双赢局面
GDE Enrique Fernandez Guerra 对他的非政府组织 HelpDev 进行开源宣传。
Internet Explorer 的结束
停止对 Internet Explorer 的支持对于 Maersk.com 的客户和开发者来说意味着什么。
告别 HTML5Rocks
HTML5Rocks,很高兴认识你。
第一方饼干食谱
了解如何设置第一方 Cookie,以确保安全性和跨浏览器兼容性,并在第三方 Cookie 逐步淘汰后最大限度降低破坏的可能性。
在网页上同步音频和视频播放
Web Audio API 可以正确实现 AV 同步。
使用圆锥渐变创建冷边框
圆锥渐变可用于创建一些有趣的效果,例如这个漂亮的边框示例。 Adam Argyle 创建了此 CodePen (最初通过此 Tweet 在 Twitter 上分享),其中展示了如何使用 圆锥渐变 创建边框。 Terry Mun 以富有创意的方式 分叉 了 Adam 的 CodePen,并创建了此 CodePen 。将鼠标悬停在元素上,您会看到渐变发生变化,这得益于一些 JavaScript 代码更新了存储旋转角度的 CSS 自定义属性。 这些示例使用 border-image-source
选择 JavaScript 库或框架
了解使用 JavaScript 库或框架时需要做出的决策。
使用 Fetch API 时实现错误处理
使用 Fetch API 时捕获错误。
JavaScript 库与框架之间的区别
从客户端 JavaScript 环境的角度了解框架和库之间的差异。
终端前端开发者指南
此资源可帮助您快速了解航站楼的导航路线。
一款用于快速、精美的网页字体的 API
更新了 Google Fonts CSS API - 它的工作原理、使用方式,以及它如何高效地提供网页字体。
GOV.UK 从其前端删除了 jQuery。
GOV.UK 放弃了前端的 jQuery 依赖项。您永远无法猜测发生了什么。(是的,您会。)
构建按钮组件
简要介绍如何构建颜色自适应、响应式和无障碍组件。
不要与浏览器的预加载扫描程序冲突
不妨了解什么是浏览器预加载扫描程序、它如何帮助提升性能,以及如何避免这些问题。
缩小差距
让您能更轻松地构建网站。
衡量实际网页指标的最佳做法
如何使用当前的分析工具衡量网页指标
在开发者社区中寻找勇气和灵感
Web Google 开发者专家,介绍了指导计划如何帮助他们成为领导者。
现实生活中的可变字体
通过大量示例分享可变字体的实用指南。
使用 CSS Gradient Creator 快速创建精美的 CSS 渐变
使用 Josh W Comeau 的这款工具,即可制作出精美的渐变效果,变得超级简单。
深入探究顶级 Web 开发者的痛点
一系列关于首要痛点的数据分析,收集自与 Web 开发者的多次一对一对话。
利用 images.tooling.report 完善您的网站图片
查看图片工具的状态。
全局和局部变量范围
了解作用域及其在 JavaScript 中的工作原理。
构建对话框组件
简要介绍了如何使用“”元素构建颜色自适应、响应式且易于访问的小型和大型模态窗口。
调试网络上的媒体播放错误
了解如何调试网页上的媒体播放错误。
GDE 社区亮点:Nishu Goel
对 Google Developers Experts (GDE) 计划成员的系列访谈之一。
过度延迟加载的性能影响
在初始视口内提前加载图片,同时尽可能延迟加载其余图片,这样可以减少加载的字节数,同时提升 Web Vitals 指标。
构建加载条组件
简要介绍如何使用 `` 元素构建易于访问的彩色加载栏。
保存表单中的凭据
尽可能简化注册表单和登录表单。 保存登录表单中的凭据,以便用户在返回时无需重新登录。 如需存储表单中的用户凭据,请执行以下操作: 在继续操作之前,请检查您的表单是否包含 autocomplete 属性。这有助于 Credential Management API 从表单中查找 id 和 password ,并构建凭据对象。 这还有助于不支持 Credential Management API 的浏览器了解其语义。如需详细了解自动填充功能,请参阅 Jason Grigsby 撰写的 这篇文章 。
Chrome 和 Firefox 即将登陆主要版本 100
用户代理字符串更改、Chrome 和 Firefox 为减轻影响而采取的策略,以及您可以如何提供帮助。
构建自适应网站图标
有关如何构建自适应网站图标的基础概览。
通过更新 HTTP 缓存提高安全性和隐私性
忘记或滥用 Cache-Control 标头可能会对网站安全和用户隐私产生负面影响。获取关于高价值网站的建议。
在 Emscripten 中绘制到画布
了解如何使用 Emscripten 通过 WebAssembly 将 2D 图形渲染到网页上的画布。
其他 HTML 元素
衡量网站是否运行正常的基本指标
将 USB 应用移植到 Web 中。第 2 部分:gPhoto2
了解如何将 gPhoto2 移植到 WebAssembly,以便从 Web 应用中通过 USB 控制外接摄像头。
网络错误日志记录 (NEL)
使用网络错误日志记录 (NEL) 收集客户端网络错误。
WebAssembly 功能检测
了解如何在使用所有浏览器的用户的同时使用最新的 WebAssembly 功能。
将 USB 应用移植到 Web 中。第 1 部分:libusb
了解如何使用 WebAssembly 和 Fugu API 将与外部设备交互的代码移植到 Web。
构建主题切换组件
简要介绍如何构建易于使用的自适应主题切换组件。
使用 Emscripten 在 C++ 中嵌入 JavaScript 代码段
了解如何在 WebAssembly 库中嵌入 JavaScript 代码以与外界进行通信。
Oculus Quest 2 上的 PWA
Oculus Quest 2 是一款虚拟现实 (VR) 头戴设备,由 Meta 旗下部门 Oculus 开发。开发者现在可以构建和分发利用 Oculus Quest 2 的多任务处理功能的 2D 和 3D 渐进式 Web 应用 (PWA)。本文介绍了相关体验,以及如何在 Oculus Quest 2 上构建、旁加载和测试 PWA。
建筑设计人员
简要介绍 Designcember 的节假日日历式体验所用的流程和工具。
Designcember 计算器
这张图展示了利用环境光传感器和窗口控件叠加层功能在网络上重新创建太阳能计算器的程序。
使用结构化克隆在 JavaScript 中进行深层复制
在很长一段时间里,您不得不借助变通方法和库来创建 JavaScript 值的深层副本。Android 平台现在附带了“StructuredClone()”是一种用于深层复制的内置函数。
构建消息框组件
简要介绍如何构建自适应且可访问的消息框组件。
界面资金
Chrome 推出界面基金,用于向设计工具、CSS 和 HTML 设计人员提供公益金。
构建 3D 游戏菜单组件
简要介绍如何构建响应式、自适应且易于访问的 3D 游戏菜单。
PageSpeed Insights 的新变化
了解 PageSpeed Insights 的最新动态,帮助您更好地衡量和优化网页及网站的质量。
关于动画流畅性指标
了解如何衡量动画、如何看待动画帧以及网页整体流畅性。
2021 年 Chrome 开发者峰会上发布的所有内容
汇总了 2021 年 Chrome 开发者峰会上发布的所有重要公告,点击链接即可了解详情。
Lighthouse 用户流
试用新的 Lighthouse API 来衡量整个用户流中的性能和最佳做法。
使用 Photoshop 探索网络世界
在过去的三年中,Chrome 一直致力于为那些想要挑战浏览器极限的 Web 应用提供强力支持。Photoshop 就是其中之一。几年前,直接在浏览器中运行像 Photoshop 一样复杂的软件这样的想法是很难想象的。但是,通过使用各种新的网络技术,Adobe 现已将 Photoshop 公开测试版引入到网络中。
构建多选组件
简要介绍如何构建响应迅速、自适应、可访问的多选组件,以便对用户体验进行排序和过滤。
如何使用 Navigation Timing 和 Resource Timing 评估现场加载性能
了解使用 Navigation API 和 Resource Timing API 评估现场加载性能的基础知识。
使用 Sanitizer API 安全地操控 DOM
新的 Sanitizer API 旨在构建强大的处理器,以便将任意字符串安全地插入页面。本文介绍此 API 并解释其用法。
使用第三方嵌入代码的最佳做法
本文档介绍了加载第三方嵌入时可以采用的性能最佳实践、高效的加载技术,以及有助于减少热门嵌入的布局偏移的布局偏移终止工具。
SPA 架构对核心网页指标的影响
解答关于 SPA、核心网页指标和 Google 旨在解决当前衡量限制的计划的常见问题。
JavaScript 事件深入探究
preventDefault 和 stopPropagation :何时使用哪种方法以及每种方法的确切用途。 JavaScript 事件处理通常很简单。在处理简单(相对扁平)的 HTML 结构时,这一点尤为重要。不过,当事件在元素层次结构中传播时,情况会变得更加复杂。通常,此时开发者会联系 stopPropagation() 和/或 preventDefault() 来解决他们遇到的问题。如果您曾经想过:“我只会尝试 preventDefault() ,如果不行,再尝试
捆绑非 JavaScript 资源
了解如何以同时适用于浏览器和捆绑器的方式从 JavaScript 导入和捆绑各种类型的素材资源。
构建拆分按钮组件
简要介绍如何构建无障碍的拆分按钮组件。
使用 CSS 模块脚本导入样式表
了解如何使用 CSS 模块脚本来导入 CSS 样式表(使用与 JavaScript 模块相同的语法)。
CSS 强调色
只需一行代码即可将您的品牌颜色应用到内置的 HTML 表单输入。
构建 switch 组件
简要介绍如何构建响应迅速的无障碍开关组件。
用户偏好设置媒体功能客户端提示标头
通过一组客户端提示标头,网站可以选择在请求时获取用户的媒体偏好设置,以便服务器出于性能方面的原因内嵌正确的 CSS。 CSS 媒体查询,尤其是 prefers-color-scheme 或 prefers-reduced-motion 等 用户偏好媒体功能 ,可能会对网页需要传送的 CSS 量以及用户在网页加载时获得的体验产生 重大影响 。 重点介绍 prefers-color-scheme ,但强调该推理也适用于其他用户偏好设置媒体功能。最佳实践是,不要在关键渲染路径中加载特定不匹配配色方案的
构建面包屑导航组件
基本介绍了如何构建响应迅速的无障碍面包屑导航组件,以便用户能够浏览您的网站。
使用 C、C++ 和 Rust 中的 WebAssembly 线程
了解如何将用其他语言编写的多线程应用引入 WebAssembly。
媒体流式传输基础知识
媒体流式传输是一种从服务器持续传送多媒体内容的方法。在该方法中,内容已被拆分为多个单独的数据块,可在播放期间通过范围请求使用 DASH 和 HLS 等协议按特定顺序重新联接在一起。
媒体加密
了解数字版权管理概念,以及使用清除密钥或 Widevine 加密功能从原始 mov 文件获取为 MPEG-DASH 或 HLS 打包的加密媒体所需的命令。
媒体框架
媒体框架兼具专有和开源的丰富性,其核心是一组支持各种容器格式和传输协议的音频和/或视频播放的 API。
支持离线流式传输的 PWA
构建具有离线流式传输功能的 PWA 存在一些挑战。在本文中,您将了解可为用户提供优质离线媒体体验的 API 和技术。
@font-face 的 CSS size-adjust
现在,当网页字体加载时,您可以调整其缩放比例,使文档字体大小标准化,并在切换字体时防止布局偏移
构建配色方案
基本概述如何建立可配置的动态配色方案
使用 AVIF 压缩网站上的图片
向移动设备投放桌面设备尺寸的图片会消耗的数据量多于所需数据的 2-4 倍。针对不同的设备提供不同尺寸的图片,而不是“一刀切”的方法。
Web 工具中的 Cumulative Layout Shift 不断演变
从今天开始,CLS 变更已在许多 Chrome 网络工具平台发布,包括 Lighthouse、PageSpeed Insights 和 Chrome 用户体验报告。
用于网页指标的 CSS
本文介绍了用于优化网页指标的 CSS 相关技术。
新增了 CSS 函数伪类选择器 :is() 和 :where()
这些看似只是对 CSS 选择器语法的细微添加将会产生巨大的影响。
现已推出全新渐进式 Web 应用培训
全新的 Progressive Web App 培训(由六部分组成)现已发布,并且还有一系列新的 Codelab,旨在介绍如何构建可靠、可安装且性能强大的 PWA。
迁移到用户代理客户端提示
将网站从依赖用户代理字符串改为使用新的用户代理客户端提示的策略。
全新的自适应设计:组件驱动型环境中的网页设计
基于用户偏好的媒体功能、容器查询以及针对新型屏幕(例如可折叠屏幕)的媒体查询,将使我们在响应式网页设计的新时代能够使用资源。
Excalidraw 和 Fugu:改善核心用户历程
Thomas Steiner 在 2021 年 Google I/O 大会上演讲的演讲内容为:Excalidraw 和 Fugu:改进核心用户历程
安全标头快速参考
本文列出了可用于保护网站的重要安全标头。您可以使用该报告了解基于网络的安全功能,学习如何在网站上实现这些功能,还可以作为您何时需要提醒的参考。
Service Worker 中的 ES 模块
Service Worker 可以使用 ES 模块的静态导入引入额外的代码,作为 importScripts() 的替代方案。
构建媒体滚动条组件
简要介绍了如何为电视、手机、桌面设备等构建自适应横向滚动视图。
使用 Lighthouse 优化网页指标
今天,我们将介绍 Lighthouse、PageSpeed 和开发者工具中的新工具功能,帮助您确定如何改进您的网站在网页指标方面的表现。
使用 WebAssembly 中的异步 Web API
了解如何在将传统同步语言编译为 WebAssembly 时调用异步 Web API。
控制第三方脚本
第三方脚本或“代码”可能会导致网站出现性能问题,因此成为优化目标。不过,在开始优化添加的代码之前,请确保没有优化您甚至不需要的代码。本文介绍了如何评估新代码请求,以及如何管理和查看现有代码。
自定义 PWA 标题栏的窗口控件叠加层
借助窗口控件叠加功能,开发者可以自定义已安装 PWA 的标题栏,使其 PWA 看起来更像应用。
使用 WebOTP API 在跨源 iframe 中填充动态密码表单
WebOTP API 现在可以从 iframe 中接收动态密码。
使用 DataTransfer API 打破障碍
DataTransfer 对象用于保存拖放操作期间正在拖动的数据。它可以存储一个或多个数据项,其中每个项包含一个或多个数据类型。本文介绍了您可以使用 DataTransfer API 执行哪些操作。
构建拆分文本动画
简要介绍如何构建拆分字母和单词动画。
提高 CLS 指标
制定计划改进 CLS 指标,使其对长期有效网页更加公平。
Web 开发者满意度
“Web 开发者满意度”是一个 Google 项目,旨在收集有关 Web 开发者需求的信息。我们的目标是打造一个更可靠、可预测和可互操作的网络平台,让开发者能够投资于此平台并信任其,并采用和使用新功能来发展该平台和其业务。
构建“设置”组件
简要介绍了如何构建包含滑块和复选框的设置组件。
调试布局偏移
了解如何识别和解决布局偏移。
JavaScript:这是什么意思?
在 JavaScript 中,计算 `this` 的值可能并非易事,以下是具体的操作方法...
迷你应用开源项目
本章将介绍一些有趣的迷你应用开源项目。
什么是 H5 和 QuickApp?
本章将介绍 H5 应用和 QuickApp(二者不同于迷你应用)的背景信息。
迷你应用编程方式
本章将介绍迷你应用的编程方式。
在示例项目中运用迷你应用编程原则
本章展示了一个遵循“迷你应用编程方式”方法的示例项目。
迷你应用组件
本章将详细介绍所有迷你应用平台提供的组件。
对 Web 开发者的迷你应用总结
本章对迷你应用集合进行了以下观察:跳出思维模式,从自身的泡泡中汲取灵感和汲取灵感,这对于打造更美好的网络未来会大有帮助。
迷你应用标记、样式、脚本和更新
本章将介绍各种迷你应用平台的标记、样式、脚本和更新选项。
项目结构、生命周期和捆绑
本章将介绍迷你应用的项目结构、生命周期和捆绑。
数据流 - 权威指南
Streams API 让 JavaScript 能够以编程方式访问通过网络接收的数据流,并根据需要进行处理。
构建“标签页”组件
基本概述如何构建与 iOS 和 Android 应用中的标签页组件类似的标签页组件。
关于启用跨域隔离的指南
通过跨域隔离,网页可以使用 SharedArrayBuffer 等强大功能。本文介绍了如何在您的网站上启用跨域隔离。
使用 Origin-Agent-Cluster 标头请求性能隔离
Origin-Agent-Cluster 标头会切断对同一网域上其他源的同步访问,并提示浏览器为您的源站提供专用资源。
CSS aspect-ratio 属性
现在,使用新的宽高比 CSS 属性可以更轻松地保持图片和元素内的宽高比。
WebRTC 现在是 W3C 和 IETF 标准
简要介绍 WebRTC 的历史、架构、使用场景和未来。
轮播界面最佳实践
了解如何优化轮播界面以提升性能和易用性。
需要反馈:如何针对长期有效网页改进布局偏移指标
了解我们关于改进 Cumulative Layout Shift 指标的计划,并向我们提供反馈。
使用 HTTPS 进行本地开发
在大多数情况下, http://localhost 的行为与 HTTPS 类似,可用于开发目的。不过,在某些 特殊情况下 (例如使用自定义主机名或跨浏览器使用安全 Cookie),您需要明确将开发网站设置为像 HTTPS 一样运行,以准确反映您的网站在生产环境中的运行方式。(如果您的正式版网站不使用 HTTPS,请 优先改用 HTTPS )。 本页介绍了如何在本地使用 HTTPS 运行网站。 如需简要说明,请参阅 mkcert 快速参考 。** 如需为本地开发网站使用 HTTPS 并访问
何时使用 HTTPS 进行本地开发
大多数情况下,使用 http://localhost 进行本地开发即可,但在某些特殊情况下,本文介绍了何时需要使用 HTTPS 运行本地开发网站。 另请参阅: 如何在本地开发中使用 HTTPS 。 在本文中,关于 localhost 的陈述也适用于 127.0.0.1 和 [::1] ,因为它们都描述了本地计算机地址(也称为“环回地址”)。此外,为简单起见,我们未指定端口号。 因此,当您看到 http://localhost 时,请将其读作 http://localhost:{PORT} 或
Codelab:构建 Sidenav 组件
了解如何构建自适应滑出侧边导航布局组件。
构建侧边导航栏组件
基本概述如何构建自适应滑出侧边导航栏
Codelab:在 CSS 中居中
了解 CSS 的 5 种不同的居中技术。
在 CSS 中居中
在进行一系列测试时,请遵循以下 5 种居中技术,了解哪种方法最能适应变化。
爱你的缓存 ❤️
首次加载性能很重要,但并不是全部。第二次加载您的网站的用户将使用其缓存来获取对您内容的访问权限,因此,确保网站在加载速度和正确性方面都能顺畅运行是关键。
跨浏览器绘制 Worklet 和 Houdini.how
了解如何实现跨浏览器 Houdini Paint API,并使用 Houdini.how 探索 Houdini Worklet 的世界。
有关短信动态密码表单的最佳做法
要求用户提供通过短信传送的动态密码(动态密码)是确认用户电话号码的常用方法。这篇博文介绍了一些最佳实践,可帮助您构建能够提供出色用户体验的短信动态密码表单。
地址表单最佳实践 Codelab
了解地址表单的最佳实践。
有关注册表单的最佳做法
帮助用户轻松注册、登录和管理其账号详情。
注册表单最佳实践 Codelab
使用跨平台浏览器功能构建简单安全、易于访问且易用的注册表单。
使用 AutoWebPerf 自动执行审核
这款全新的模块化工具可从多个来源自动收集效果数据。
有关付款和地址表单的最佳做法
帮助用户尽可能快速、轻松地填写地址和付款表单,从而尽可能提高转化次数。
付款表单最佳实践 Codelab
了解付款表单的最佳做法。
使用 Service Worker 向页面广播更新
Service Worker 如何主动与页面通信以通知某些事件。
命令式缓存指南
如何传达窗口和 Service Worker,以执行与性能、缓存和离线相关的任务。
与 Service Worker 的双向通信
如何在页面和 Service Worker 之间建立双向通信通道。
停用鼠标加速以提供更好的 FPS 游戏体验
Web 应用现在可以在捕获指针事件时停用鼠标加速。
构建“短片故事”组件
基本介绍如何打造类似于 Instagram 快拍网页版的体验。
Codelab:构建故事组件
了解如何打造与网页版 Instagram 快拍类似的体验。
Schemeful Same-Site
“同网站”的定义不断发展,包含网址架构,因此网站的 HTTP 和 HTTPS 版本之间的链接现在计为跨网站请求。默认升级到 HTTPS,以尽可能避免问题;您也可以继续阅读下文,详细了解需要哪些 SameSite 属性值。
CMS 的浏览器级延迟加载
这篇博文介绍了如何在内容管理系统中采用加载属性。
Codelab:构建推送通知服务器
分步互动式教程,介绍如何构建服务器以管理推送通知订阅并将 Web 推送协议请求发送到推送服务。
Codelab:构建推送通知客户端
一个分步交互式教程,介绍如何构建一个客户端来订阅用户推送通知、将推送消息显示为通知,以及为用户退订推送通知。
推送通知概览
简要介绍什么是推送通知、为什么要使用推送通知以及推送通知的工作原理。
衡量离线使用情况
如何跟踪网站的离线使用情况,以便解释您的网站为何需要更好的离线体验。
高性能 CSS 动画的示例
展示高性能技术如何制作复杂而精美的动画。
CSS min()、max() 和 clamp()
Min、max 和 clamp 可提供强大的 CSS 功能,从而通过更少的代码安全锁实现更快速的样式设置。这篇博文介绍了如何利用这些得到良好支持的 CSS 数学函数来控制元素大小调整、保持适当的间距以及实现流体排版。
Signed Exchange (SXG)
SXG 是一种交付机制,通过该机制,无论资源是采用何种方式,都可以单独对资源的来源进行身份验证。
使用与流相关的缩写符号增强逻辑布局
为 Chromium 添加了新的逻辑属性缩写和新的内边距属性。
在 Service Worker 中处理范围请求
确保您的 Service Worker 知道在请求部分响应时应该怎么做。
如何创建高性能 CSS 动画
要提升 CSS 动画的性能,请尽可能使用 transform 和 不透明度 CSS 属性,并避免使用任何会触发布局或绘制的内容。
为什么有些动画速度很慢?
呈现良好动画效果是打造出色网络体验的核心所在。此博文介绍了某些类型的动画为何优于其他类型的动画。
控制相机平移、倾斜度和缩放
终于可以在网页上控制摄像头上的平移、倾斜和缩放功能了。
什么是第三方源试用?
源试用是测试新的或实验性网络平台功能的一种方式。通过第三方源试用,嵌入式内容的提供商可以在多个网站上试用新功能。 源试用 是测试新的或实验性 Web 平台功能的一种方式。 源试用通常只能在第一方基础上进行:它们仅适用于单个已注册的 源站 。如果开发者想要在嵌入了其内容的其他源上测试实验性功能,则这些源都需要为源试用进行注册,并且每个源都具有唯一的试用令牌。这并不是测试嵌入到许多网站的脚本时采用的可扩缩方法。 通过第三方源试用,嵌入式内容的提供商可以在多个网站上试用新功能。
分离窗口内存泄漏
分离窗口是一种常见的内存泄漏类型,非常难以找到和修复。
创建离线后备网页
了解如何为您的应用打造简单的离线体验。
使用 CSS 的 clip-path 属性创建有趣的图片形状
在 CSS 中使用裁剪可以帮助我们摆脱设计中看起来像箱子的所有内容。通过使用各种基本形状(即 SVG),您可以创建裁剪路径。然后剪掉您不想显示的元素部分。
使用 CSS ::marker 的自定义项目符号
使用 CSS 自定义 `` 或 `` 元素中数字或项目符号的颜色、大小或类型。
添加用于更改密码的常用网址,帮助用户轻松更改密码
通过将指向 /.well-known/change-password 的请求重定向到用于更改密码的网址,您可以比以往更轻松地更新密码。
使用 Service Worker 编排付款事务
基于网络的付款应用注册之后,即可接受来自商家的付款请求。本文介绍如何在运行时编排来自 Service Worker 的付款事务。
使用 Service Worker 处理可选的付款信息
基于网络的付款应用注册之后,即可接受来自商家的付款请求。本文介绍如何在运行时编排来自 Service Worker 的付款事务。
ARIA:毒药还是解药?
对屏幕阅读器说撒谎也能解决无障碍功能问题!
使用 Emscripten 调试 WebAssembly 中的内存泄漏
了解如何使用 WebAssembly 以安全且符合惯例的方式将使用其他语言编写的库引入到 Web 中。
content-visible:可提升渲染性能的新 CSS 属性
CSS content-visibility 属性通过跳过屏幕外内容的渲染,可提升 Web 内容渲染性能。本文介绍了如何使用 auto 关键字使用此新 CSS 属性来缩短初始加载时间。您还将了解 CSS Containment Spec 和 content-visibility 的其他值,以便更好地控制内容在浏览器中的呈现方式。
取消屏蔽剪贴板访问权限
Async Clipboard API 简化了对权限的复制和粘贴操作。
引荐来源网址和引荐来源网址政策最佳实践
不妨考虑将引荐来源网址政策设为 `Strict-origin-when-cross-origin`。此政策保留了引荐来源网址的大部分实用性,同时可降低跨源泄露数据的风险。
Android 设备上的 Web
了解如何使用不同的组件在 Android 应用内呈现 Web 内容。
在 Google 上构建 PWA(第 1 部分)
公告团队在开发 PWA 时对 Service Worker 的了解。
使用 Lighthouse CI 监控性能
了解如何设置 Lighthouse CI 并将其集成到开发者工作流中。
设计 Google 帐号中通行密钥的用户体验
为 Google 帐号带来更好的安全性和用户体验。
@property:为 CSS 变量赋予超能力
了解如何直接在 CSS 文件中使用语义类型、后备值等实现 CSS 自定义属性。
将网站速度与业务指标联系起来
利用 A/B 测试来评估网站速度对业务指标的影响。
通过 Android 付款应用提供送货和联系信息
了解如何修改您的 Android 付款应用,以在商家通过 Payment Request API 请求用户提供选用的送货地址及联系信息。
Service Worker 缓存和 HTTP 缓存
在 Service Worker 缓存和 HTTP 缓存层使用一致或不同的过期逻辑的优缺点。
基于网络的付款应用概览
了解如何调整基于网络的付款应用,使其与网络付款配合使用,并为客户提供更好的体验。
注册基于网络的付款应用
了解如何在客户浏览器中注册基于网络的付款应用。您还将学习如何对它们进行调试。
处理导航请求
导航请求是每当您在导航栏中输入新网址或访问网页上的链接时发出的 HTML 请求。这就是 Service Worker 对性能影响最大的因素:通过使用 Service Worker 无需等待网络即可进行响应,您可以确保导航可靠、快速且弹性佳。
使用 Chrome 用户体验报告了解实际应用性能
Chrome 用户体验报告(以前称为 CrUX)是一个公开数据集,包含数百万个网站上的真实用户体验数据。与实验室数据不同,CrUX 数据实际上来自那些选择参与测试的用户。
一行 CSS 中的十种现代布局
此博文重点介绍了几行强大的 CSS 功能,它们可完成一些非常繁重的工作,并帮助您构建强大的现代布局。
使用 devicePixelContentBox 实现像素完美的渲染
自 Chrome 84 开始,ResizeObserver 支持一种称为 device-pixel-content-box 的新框测量,该测量值以物理像素为单位测量元素尺寸。这对于渲染像素完美的图形至关重要,尤其是在高密度屏幕环境中。
web.dev 实时总结
关于在为期 3 天的在线社区活动中宣布的重大新闻和最新动态的摘要,以及即将举办的地区活动的提醒。
逐步增强您的渐进式 Web 应用
了解如何逐步增强您的渐进式 Web 应用,使其在所有现代浏览器中都可用,同时又能在支持新 Web 功能(如文件系统访问、系统剪贴板访问、联系人检索、定期后台同步、屏幕唤醒锁定、网络共享功能等)的浏览器中提供高级体验。
有关登录表单的最佳做法
借助跨平台浏览器功能,构建安全、无障碍且易于使用的登录表单。
借助跨平台浏览器功能构建登录表单
借助跨平台浏览器功能,构建安全、无障碍且易于使用的简单登录表单。
用于调试 Google 搜索中的 JavaScript 问题的 Web 开发者工具
如何调试个别网页或整个网站的 SEO 问题。
利用 Workbox 打造弹性搜索体验
如何使用后台同步和 Push API 通过 Workbox 实现弹性搜索体验。
将媒体内容添加到网页
使用 和 标记在网页中嵌入媒体文件。
以前无人关联的大胆添加链接:文本片段
通过文本片段,您可以在网址片段中指定文本片段。当导航到包含此类文本片段的网址时,浏览器可突出显示和/或将其引起用户的注意。
如何报告良好的浏览器错误
请将您在浏览器或特定设备或平台上发现的问题告知浏览器供应商,这是完善网络平台的重要一环!
让您的 PWA 感觉更像一个应用
了解如何使用 Web 技术实现针对特定平台的应用模式,让您的 Progressive Web App 类似于“真实”应用。
使用 RAIL 模型衡量性能
RAIL 模型让设计人员和开发者能够可靠地开展对用户体验影响最大的性能优化工作。了解 RAIL 模型规定的目标和指南,以及可用于实现这些目标的工具。
使用 Quicklink 加快 React 中的导航速度
Quicklink 是一个库,可在闲置时预提取视口内的链接,从而加快后续网页加载速度。
使用 Fetch Metadata 保护您的资源免受网络攻击
“提取元数据”是一项新的网络平台功能,可让服务器保护自己免受跨源攻击的侵害。
内容重新排序
使用 CSS 创建布局时,您需要注意,不要为使用键盘进行导航的用户带来连接中断的体验。
Chromium 84 中的 Web Animations API 改进
整理网页动画将变得更加容易。
Android 付款应用开发者指南
了解如何让您的 Android 付款应用与 Web Payments 搭配使用,并为客户提供更好的体验。
设置付款方式
若要使用网络付款完成付款交易,必须先发现您的付款应用。了解如何设置付款方式,并让您的商家应用做好付款准备,以便商家和客户进行付款。
通过 Web Payments 为付款应用提供助力
Web Payments 旨在在网络上提供顺畅的付款体验。了解其工作原理和优势,并准备好将您的付款应用与 Web Payments 集成。
付款交易的生命周期
了解商家如何集成付款应用、付款交易如何与 Payment Request API 搭配使用,以及 Web Payments 的各种功能。
Chromium 83 中适用于 macOS system-ui 字体的更多可变字体选项
Chromium 80 在 macOS 上出现了系统界面字体粗细回归问题。Chromium 83 的故障原因以及全新的超能力后分辨率功能,值得在 Chromium 83 中等待。
渐进式 Web 应用如何助力业务成功
为您的 PWA 构建可靠的业务用例。了解何时该投资,以及如何衡量其成效。
利用应用快捷方式快速完成工作
通过应用快捷方式,用户可以快速访问用户经常需要的一些常用操作。
准备移除 AppCache
Chrome 和其他浏览器计划移除 AppCache 的详细信息。
如何制定安装策略
结合使用不同的安装服务以提高安装率、避免平台竞争和侵蚀效应的最佳实践。
永久存储
永久性存储有助于保护关键数据免遭逐出,并降低数据丢失的可能性。
CommonJS 如何扩大您的 app bundle
CommonJS 模块是非常动态的,这就阻止了 JavaScript 优化器和捆绑包对其执行高级优化。
在 Chrome 中对网络音频应用进行性能分析
了解如何使用“about://tracing”和 Chrome 开发者工具中的 **WebAudio** 扩展程序在 Chrome 中分析网络音频应用的性能。
为什么需要“跨源隔离”来实现强大的功能
某些 Web API 会增加发生 Spectre 等旁路攻击的风险。为了降低这种风险,浏览器提供了基于选择启用的隔离环境,称为“跨源隔离”。了解为什么需要跨域隔离才能使用强大的功能,例如“SharedArrayBuffer”、“performance.measureUserAgentSpecificMemory()”以及更精确的高分辨率计时器。
通过精细分块提升 Next.js 和 Gatsby 网页加载性能
了解 Next.js 和 Gatsby 如何改进其构建输出,以尽可能减少重复代码并提高网页加载性能
“同网站”和“同源”
“同网站”和“同源”经常被引用,但经常被误解。本页介绍了它们的定义及不同之处。
使用 COOP 和 COEP 将网站设置为“跨源隔离”
某些 Web API 会增加发生 Spectre 等旁路攻击的风险。为了降低这种风险,浏览器提供了基于选择启用的隔离环境,称为“跨源隔离”。请使用 COOP 和 COEP 设置此类环境并启用强大的功能,例如“SharedArrayBuffer”、“performance.measureUserAgentSpecificMemory()”或精确度更高的高分辨率计时器。
使用 measureUserAgentSpecificMemory() 监控网页的总内存用量
了解如何在生产环境中衡量网页的内存用量以检测回归问题。
web.dev 工程博客 #1:我们如何构建网站和使用 Web 组件
阅读 web.dev 工程团队的第一篇博文,了解我们如何构建该网站,包括如何使用 Eleventy 和 Web 组件。
通过配色方案 CSS 属性和相应的元标记改进了深色模式默认样式
通过配色方案 CSS 属性和相应的元标记,开发者可以为自己的网页选择启用用户代理样式表特定于主题的默认默认值,例如表单控件、滚动条以及 CSS 系统颜色。同时,此功能可防止浏览器自行应用任何转换。
确保您的网站在新冠肺炎 (COVID-19) 疫情期间可供所有人访问
如何确保您网站的核心功能始终可用、可访问、安全、易用、可发现且快速。
无障碍点按目标
在移动设备或触摸屏设备上使用互动元素时,必须在其周围留出足够的空间。这对每个人都有帮助,特别是有运动障碍的人。
修复超载的服务器
如何确定服务器瓶颈、快速修复瓶颈、提高服务器性能以及防止回归。
无障碍自适应设计
我们知道,采用自适应设计是不错的方法,可提供最佳的多设备体验,但自适应设计也有助于提高无障碍性。
颜色和对比度无障碍功能
了解如何通过改进颜色和对比度来使网页更易于访问。
使用可信类型防范基于 DOM 的跨站脚本攻击漏洞
全新推出:Trusted Types:一款浏览器 API,用于防止现代 Web 应用中发生基于 DOM 的跨网站脚本攻击。
在 Android 应用中使用 PWA
如何在 Android 应用中打开渐进式 Web 应用。
通过预加载可选字体来防止布局偏移和不可见文本 (FOIT) 闪烁
通过优化渲染周期,Chrome 83 消除了预加载可选字体时的布局偏移。与 font-display: optional 搭配使用,可以最有效地确保自定义字体呈现时不卡顿。
如何使用 nginx 分发 Signed HTTP Exchange (SXG)
如何使用 nginx 获取和传送 SXG 文件,以及预提取子资源所面临的挑战。
如何使用 nginx 设置 Signed HTTP Exchange (SXG)
如何生成具有 SXG 扩展的 TLS 证书、安装用于生成 SXG 文件的工具,以及配置 nginx 以提供 SXG 文件。
使用媒体查询优化 CSS 背景图片
利用媒体查询发送大小不超过其尺寸的图片,这项技术通常称为自适应图片。
跨职能解决网站速度问题
其他部门可以如何帮助您的网站速度优化项目取得更大的成功。
更改布局后滚动贴靠
从 Chrome 81 开始,当页面布局发生更改时,滚动条始终保持贴靠状态。换言之,您不再需要添加事件监听器来强制重新贴靠。
如何使用 Web Packager 设置 Signed Exchange
了解如何使用 Web Packager 提供 Signed Exchange (SXG)。
如何提供您自己的应用安装体验
使用 beforeinstallprompt 事件为用户提供自定义的无缝应用内安装体验。
虚拟现实登陆网络(第二部分)
Chrome 79 现已推出虚拟现实技术。此次发布基于 WebXR Device API,是增强现实和虚拟现实的基础。本文是该系列中的第二篇,重点介绍了帧循环,即 XR 会话中向观看者显示图像的部分。其他浏览器很快将支持 WebXR Device API,包括 Firefox Reality、Oculus 浏览器、Edge 和 Magic Leap 的 Helio 浏览器等。
在现实世界视图中定位虚拟对象
WebXR Hit Test API 是网络增强现实的增强功能,可让您将虚拟对象放置在真实视图中。
增强现实:您可能已经知道了
如果您已经使用过 WebXR Device API,那么要知道很少有学习的新知识了。进入 WebXR 会话的方法大致相同。运行帧循环的方法大致相同。不同之处在于配置允许适当地显示内容以实现增强现实。
推动 Web 框架生态系统的发展
了解 Chrome 如何投资开发一些开源工具以推进 JavaScript 生态系统的发展
什么是渐进式 Web 应用?
介绍了渐进式 Web 应用 (PWA) 以及将其与其他 Web 应用区分开来的三大要素。
使用 Workbox 将 PWA 集成到内置共享界面中
如何在 Workbox 中注册路线,以便您的渐进式 Web 应用与平台专用应用一起显示在系统级共享界面中。
在 PWA 中使用可遮盖式图标支持自适应图标
可遮盖式图标是一种格式,可赋予您更多掌控力,让您的渐进式 Web 应用能够使用自适应图标。可遮盖式图标在所有 Android 设备上都能呈现出色的显示效果。
改进同步 XMLHttpRequest() 中的页面关闭
网页或应用在用户关闭时含有未提交的分析数据或其他数据,这种情况十分常见。网站使用对 XMLHttpRequest() 的同步调用来使网页或应用保持打开状态,直到其数据传递到服务器为止。这会损害用户体验,并忽略更好的数据保存方法。Chrome 80 实施了最新的规范更改以解决此问题。
使用模块 worker 进行 Web 线程处理
模块 worker 可将开销大的代码移到后台线程,从而轻松取消屏蔽主线程,同时保留标准 JavaScript 模块的工效学和性能优势。
速度工具的发展:2019 年 Chrome 开发者峰会的精彩瞬间
了解速度工具的最新发展情况,包括新的性能指标、PageSpeed Insights 和 Chrome 用户体验报告 (CrUX) 的更新,以及对网络生态系统的《网页年鉴》分析得出的数据洞见。
自适应加载:改善了慢速设备上的网页性能
了解自适应加载模式、如何实现,以及 Facebook、Tinder、eBay 和其他公司如何在生产环境中使用自适应加载。
使用 Web Worker 在浏览器的主线程之外运行 JavaScript
浏览器的主线程工作负担过重。通过使用 Web Worker 将代码移出主线程,您可以显著提高应用的可靠性和用户体验。
2019 年夏季图片优化问卷调查的反馈
问卷调查受访者对各种图片优化技术的评论。
构建推送通知服务器
在此 Codelab 中,您将学习如何构建推送通知服务器。
通过 Web Share API 与操作系统共享界面集成
借助 Web Share API,Web 应用能够使用与平台专用应用相同的由系统提供的分享功能。Web Share API 可让 Web 应用将链接、文本和文件共享给设备上安装的其他应用,就像共享特定平台应用一样。
Next.js 中的路由预提取
Next.js 如何通过路由预加载加快导航速度,以及如何对其进行自定义。 在本文中,您将了解 Next.js 中的路由的工作原理、如何针对速度进行优化,以及如何对其进行自定义以满足您的需求。 在 Next.js 中,您无需手动设置路由。Next.js 使用基于文件系统的路由,这样您只需在./pages/ 目录中创建文件和文件夹即可: 如需链接到其他网页,请使用 <Link> 组件,方法与使用旧版 <a> 元素类似: 当您使用 <Link>
在 Next.js 中使用动态导入功能进行代码拆分
如何通过代码分块和智能加载策略加快 Next.js 应用的速度。 本文介绍了不同类型的 代码分块 ,以及如何使用动态导入来加快 Next.js 应用的速度。 默认情况下,Next.js 会将 JavaScript 拆分为每个路由的单独分块。当用户加载您的应用时,Next.js 只会发送初始路由所需的代码。当用户在应用中导航时,他们会提取与其他路线关联的块。基于路由的代码拆分可最大限度地减少一次需要解析和编译的脚本量,从而缩短网页加载时间。
使用 Next.js 时默认提高性能
Next.js 会负责 React 应用中的许多优化,因此您无需执行以下操作: Next.js 是一个自负的 React 框架,内置了许多性能优化功能。该框架背后的主思想是,通过默认包含这些功能,确保应用启动并保持尽可能高的性能。 本简介将简要介绍该框架提供的许多高级功能。本集合中的其他指南将更详细地介绍这些功能。 虽然 Next.js 默认提供了多项性能优化,但这些指南旨在更详细地介绍这些优化,并展示如何使用这些优化来打造快速且高性能的体验。 通常,可以对 React
AMP 如何保证您的 Next.js 应用中的速度
了解在 Next.js 应用中支持 AMP 的好处和利弊 AMP 是一种网页组件框架,可确保网页快速加载。 Next.js 本身就支持 AMP。 本指南首先简要介绍了 AMP 如何保证网页快速加载 ,然后介绍了 在 Next.js 应用中支持 AMP 的不同方式 ,然后可帮助您 确定哪种方法最适合您 。 本指南的目标受众是已决定使用 Next.js 但不确定是否支持 AMP 的 Web 开发者。 AMP 有两项主要策略来保证速度: 在 Next.js 中使用 AMP 的方式有两种: 虽然
虚拟现实即将登陆网络
Chrome 79 现已推出虚拟现实技术。此次发布基于 WebXR Devicer API,是增强现实和虚拟现实的基础。本文是该系列中的第一篇,介绍了基本概念以及如何进入 XR 研讨会。其他浏览器很快将支持 WebXR Device API,包括 Firefox Reality、Oculus 浏览器、Edge 和 Magic Leap 的 Helio 浏览器等。
了解 Cookie
了解 Cookie 的工作原理以及什么是第一方 Cookie 和第三方 Cookie。
SameSite Cookie 配方
网站现在可以明确标记其 Cookie 以供跨网站使用。了解如何标记 Cookie,以确保您的第一方和第三方 Cookie 在实施此变更后继续有效。
快捷广告至关重要
了解快速广告的价值以及如何看待广告速度。
使用推送通知吸引用户和再次互动
使用推送通知,通过有针对性的及时更新吸引用户。
Notifications API 使用入门
在此 Codelab 中,您将了解如何请求用户权限和发送通知。
使用 Service Worker 管理通知
在此 Codelab 中,您将学习如何使用 Service Worker 管理通知。
解决布局不稳定问题
使用 WebPageTest 识别和修复布局不稳定性问题的演示。
让 Web 应用快速加载的技巧(即使在功能手机上)
功能手机正在复苏并广受欢迎,尤其是在 2G 网络是常态的新兴市场。下面是开发移动版扫雷游戏克隆 PROXX 时,我们在让其在 2G 网络的功能手机上快速加载方面的经验总结。
借助 Houdini 的新 API 实现更智能的自定义属性
CSS 变量虽然很有用,但并不好用,因为它们可以接受任何值,并且可以被替换,而您不能对其使用转换效果。CSS Properties 和 Values API 1 级解决了这些问题。
预提取资源以加快后续导航速度
了解 rel=prefetch 资源提示及其用法。
预提取的两种方法:<链接>标记和 HTTP 标头
了解如何通过预提取资源来加快后续导航速度。
修正混合内容
了解如何修正网站上的混合内容错误,以保护用户并确保所有内容均已加载。
什么是混合内容?
如果初始 HTML 内容通过安全的 HTTPS 连接加载,而其他资源则通过不安全的 HTTP 连接加载,那么就会出现混合内容。
基本视频不再局限于图片,适用于 Web 应用
研究表明,网络视频可以提高互动度和销量。即使您尚未向自己的网站添加视频,添加视频之前仍然需要完成。
向渐进式 Web 应用添加 Apple 触摸图标
介绍如何指定应在 iOS 主屏幕上显示的图标的互动式演示。
准备就绪的播放器网页
如今,Web 平台对于游戏开发已非常成熟。遵循游戏设计和变现的最佳实践是构建现代网页游戏的关键。这篇博文就此目标提供了指导。
多源网站中的渐进式 Web 应用
在构建 PWA 时,多源架构存在许多挑战。探索多个源的正确用法和错误用法,以及一些在多源网站中构建 PWA 的权宜解决方法。
优化 WebFont 的加载和呈现
此博文介绍了如何加载 WebFonts,以便在网页加载时无法使用 WebFonts,以防止布局偏移和出现空白页面。
缩减网页字体大小
此博文介绍了如何减小网站上使用的 WebFonts 的大小,使排版良好并不意味着网站速度慢。
使用 Angular CLI 创建渐进式 Web 应用
了解如何创建可安装的渐进式 Angular 应用。
识别运行缓慢的第三方 JavaScript
了解如何使用 Lighthouse 和 Chrome 开发者工具找出速度缓慢的第三方资源。
使用图片 CDN 优化图片
考虑使用图片 CDN 优化您网站的图片,并降低用户的数据费用。
高效加载第三方 JavaScript
了解如何避免使用第三方脚本的常见错误,从而缩短加载时间并改善用户体验。
第三方 JavaScript 性能
本文介绍了常见的第三方 JavaScript 类型以及它们所导致的性能问题。还提供了有关如何优化第三方脚本的一般性指导。
更强大的表单控件
借助新的网络平台功能,您可以更轻松地构建类似内置表单控件的自定义元素。
优化第三方 JavaScript
在 Lighthouse 的帮助下,了解优化运行速度缓慢的第三方资源的技巧。
尽早建立网络连接,以提升系统感知的网页速度
了解 rel=preconnect 和 rel=dns-prefetch 资源提示以及如何使用它们。
使用背景幕滤镜制作操作系统风格的背景
了解如何使用 CSS Backdrop-filter 属性为网页上的界面元素添加背景效果(如模糊处理和透明度)。
利用“在重新验证时过时”功能保持内容的新鲜度
stale-while-revalidate 功能可帮助开发者在即时性(立即加载缓存的内容)和新鲜度(确保将来使用缓存内容的更新)之间取得平衡。
使用 Angular CDK 虚拟化大型列表
了解如何使用 Angular Component Dev Kit 实现虚拟滚动,使大型列表的响应性更强。
在 Angular 中路由预加载策略
了解如何使用 Angular 的预加载策略提升应用运行速度。
优化 Angular 的更改检测
了解如何优化 Angular 应用的更改检测功能,以提高其响应速度。
根据网络质量调整视频,以适应图片投放
了解如何使用 Network Information API 根据网络质量调整您的内容。
通过预测性预提取提高网页导航速度
代码拆分可让您加快应用的运行速度,但可能会减慢后续导航的速度。预测性预提取是一种使用数据分析技术智能预提取用户接下来可能使用的内容的高效方式,从而优化网络利用率。
使用 Codelyzer 审核 Angular 应用的可访问性
了解如何使用 Codelyzer 使您的 Angular 应用可供访问。
使用 Angular Service Worker 进行预缓存
了解如何使用 Angular Service Worker 预缓存应用中的静态资源。
Angular CLI 的性能预算
了解如何直接在 Angular CLI 中使用性能预算!
Preferreds-color-scheme:你好,黑暗,我的老朋友
许多设备现在支持操作系统级深色模式或深色主题体验。这篇博文介绍了如何在网页上支持深色模式,列出了最佳实践,并引入了一个名为深色模式切换开关的自定义元素,该元素使网络开发者能够为用户提供一种方法来覆盖特定网页上的操作系统级偏好设置。
有关网站性能的十大提示
使用 srcset 自动选择合适的图片大小。
使用入门:优化 Angular 应用
了解如何提升 Angular 应用的速度、可靠性、可发现性、可安装性和无障碍性!
Angular 中的路由级代码拆分
了解如何使用路由级代码拆分来减小初始 app bundle。
网络组件:帮助推动网络发展的秘密成分
这篇博文总结了 Polymer 项目的 Kevin Schaaf 和 Salesforce 的 Caridy Patiño 对 2019 年网络组件现状的讲座。
使用 Lighthouse 制定性能预算
Lighthouse 现在支持性能预算。该功能 LightWallet 可以在五分钟内完成设置,并提供关于页面资源大小和数量的 Feedvack。
速度的价值
展示网站改进所带来的收入,同时排除营销广告系列等外部因素。
Web Payments API 更新
自从在 Chrome 53 中推出 Payment Request API 并在 Chrome 68 中推出 Payment Handler API 以来,其各自的规范都发生了很多变化。本文将总结这些更新,并将继续累积这些 API 更改。
在桌面设备上为渐进式 Web 应用安装地址栏
通过 Chrome 地址栏(多功能框)中的新安装按钮,可以轻松安装渐进式 Web 应用。
效果如何提高转化率?
了解网站性能对电子商务漏斗的不同部分有何影响
如何通知用户我的 PWA 可安装?
如何宣传渐进式 Web 应用的安装和最佳实践。
Service Worker 思维模式
对于许多 Web 开发者来说,使用 Service Worker 是一件不熟悉的事情。此博文将为您提供一些窍门,帮助您避开这些障碍。
促进 PWA 安装的模式
如何宣传渐进式 Web 应用的安装和最佳实践。
利用图片政策实现快速加载时间等
图片会占用大量的视觉空间,并占网站上所下载字节的大部分。使用新的功能政策来识别超大图片。
提取关键 CSS
了解如何利用关键 CSS 技术缩短渲染时间,以及如何为您的项目选择最佳工具。
使用 Critical 提取并内嵌关键 CSS
了解如何使用“Critical”(关键)来提取和内嵌关键 CSS,并缩短渲染时间。
冗长的 JavaScript 任务会延迟您的可交互时间吗?
了解如何诊断成本高昂且妨碍用户互动的工作。
大规模提升速度:网页性能方面有哪些新变化?
在 2019 年 Google I/O 大会上,我们推出了三项新的网络性能计划,希望能为所有人带来更好的用户体验。
隆重推出 PROXX
PROXX 是一款以 PWA 形式构建的类似扫雷游戏。它适用于各种各样的设备,并且随着设备性能的提升,视觉效果也会逐步提升。
SameSite Cookie 说明
了解如何使用 SameSite 属性标记您的 Cookie,以供第一方和第三方使用。您可以使用 SameSite 的宽松和严格值来加强对 CSRF 攻击的保护,从而提高网站的安全性。通过指定新的 None 属性,您可以将 Cookie 明确标记为跨网站使用。
使用 Web Perception Toolkit 进行视觉搜索
如果用户可以使用相机来搜索您的网站,那是不是很棒?
亲身体验门户:在网络上实现无缝导航
新提交的 Portals API 有助于简化前端,同时支持通过自定义过渡进行无缝导航。在本文中,您可以亲身体验一下如何使用门户改善您网站上的用户体验。
基于网络质量的自适应投放
使用 Network Information API 根据用户的连接质量调整提供给用户的资源。
使用 brotli 缩减和压缩网络载荷
在此 Codelab 中,您将了解 Brotli 压缩如何进一步降低压缩比并减少应用的总体大小。
2019 年 I/O 大会上的 web.dev
在 2019 年 Google I/O 大会上,web.dev 团队的相关人员已经发布了大量更新,包括焕然一新的设计、更多 Lighthouse 文档和一个全新的博客。
如何保持快速?
优化网速的品牌通常会发现速度减慢。在这篇博文中,我们将探讨如何确保您的快速体验始终是快速的。
如何测量速度?
由于用户设备、网络连接和其他因素的不同,实际性能差异很大。在本博文中,我们将探索有助于您收集实验室或现场数据来评估网页性能的工具。
什么是速度?
速度很重要,但它到底是什么意思呢?快速网站意味着什么?
使用 react-axe 和 eslint-plugin-jsx-a11y 进行无障碍功能审核
React-axe 是一个库,用于审核 React 应用,并将所有无障碍功能问题记录到 Chrome 开发者工具控制台中。eslint-plugin-jsx-a11y 是一个 ESLint 插件,可直接在您的 JSX 中识别并强制执行大量无障碍规则。组合使用这些选项可提供全面的审核方法,用于查找和修复应用中的任何无障碍功能问题。
使用入门:优化您的 React 应用
React 是一个开源库,让您可以更轻松地构建界面。本学习路线涵盖生态系统中的各种 API 和工具,您应考虑使用这些 API 和工具来提高应用的性能和易用性。
在“使用 Workbox 创建 React 应用”中进行预缓存
Workbox 内置于 Create React App 中,其默认配置会在每次构建时预缓存应用中的所有静态资源。
使用回应贴靠预渲染路线
reCAPTCHA 是一个第三方库,可将您网站上的网页预呈现为静态 HTML 文件。这可以缩短应用中的 First Paint 时间。
使用 Create React App 添加 Web 应用清单
默认情况下,“Create React App”包含 Web 应用清单。修改此文件将可更改应用安装在用户设备上时的显示方式。
使用 React.lazy 和 Suspense 进行代码拆分
借助 React.lazy 方法,您可以轻松地使用动态导入在组件级别上拆分 React 应用。将它与 Suspense 搭配使用,向用户显示适当的加载状态。
使用 React-window 虚拟化大型列表
reCAPTCHA 是一个库,可高效呈现大型列表。
Codelab:预加载关键资源以提高加载速度
在此 Codelab 中,您将学习如何通过预加载和预提取资源提升网页性能。
首选减压:有时运动越少
Preferreds-reduced-motion 媒体查询,用于检测用户是否已请求系统最大限度地减少其使用的动画或运动量。这适用于需要或希望使用最小化动画的用户;例如,前庭观众通常更喜欢尽可能减少动画。
推迟非关键 CSS
了解如何推迟非关键 CSS,以优化关键渲染路径并改进 First Contentful Paint (FCP)。
信任有益,观察更好:Intersection Observer v2
Intersection Observer v2 新增了一项功能,不仅可以观察交叉路口本身,还可以检测相交元素在交叉路口是否可见。
自适应设计基础知识
根据用户查看设备的需求和功能来打造网站。
可构造的样式表
可构造的样式表提供了一种顺畅的方式来创建样式并将其分发到文档或影子根,而不必担心 FOUC。
在网页上呈现
有关在应用中实现逻辑和渲染的建议。
将 bundlesize 与 Travis CI 搭配使用
只需极少的设置,即可定义性能预算,并结合使用 bundlesize 与 Travis CI,在开发工作流中强制实施这些预算。
将性能预算纳入构建流程中
密切关注效果预算的最佳方式是自动完成预算。了解如何选择最适合您的需求和当前设置的工具。
使用 webpack 设置性能预算
了解如何设置性能预算并利用 webpack 控制软件包大小。
使用 Lighthouse 聊天机器人设置性能预算
为提高提速,您付出了艰苦的努力。现在,您可以使用 Lighthouse Bot 在 Travis CI 中自动执行性能测试,确保您保持快速。
Emscripten 和 npm
您如何将 WebAssembly 集成到此设置中?在本文中,我们将以 C/C+ 和 Emscripten 为例进行说明。
您的应用是否已安装?getInstalledRelatedApps() 会告诉您!
getInstalledRelatedApps() API 是一个 Web 平台 API,可用于检查用户设备上是否已安装 iOS/Android/桌面应用或 PWA。
向新型浏览器提供新式代码,以提高网页加载速度
在此 Codelab 中,您将学习如何通过尽可能减少转译的代码量来提高应用性能。
利用客户端提示适应用户
客户端提示是一组 HTTP 请求标头,可用于根据用户设备和网络连接的特性更改提供网页资源的方式。在本文中,您将全面了解客户端提示及其工作原理,并为您提供一些有关如何利用这些提示来提升网站加载速度的思路。
使用 tabindex 控制焦点
标准 HTML 元素内置了键盘无障碍功能。构建自定义互动组件时,请使用 tabindex 确保可通过键盘访问这些组件。
标签和文本替代方案
为了让屏幕阅读器能够向用户显示语音界面,有意义的元素必须具有适当的标签或替代文本。标签或替代文本为元素提供了可访问名称,该名称是在无障碍功能树中表达元素语义的关键属性之一。
键盘操作基础知识
许多不同的用户依靠键盘来浏览应用 - 从有暂时性或永久性运动障碍的用户,到使用键盘快捷键的用户,可以提高工作效率和生产力。为您的应用制定良好的键盘导航策略可为所有用户提供更好的体验。
样式聚焦
焦点指示标志(通常用“对焦环”表示)可标识当前获得焦点的元素。对于无法使用鼠标的用户来说,这个指示器极为重要,因为它可以代替鼠标指针。
语义和屏幕阅读器
您有没有想过,屏幕阅读器等辅助技术会如何知道要向用户读出什么内容?答案是这些技术依赖于开发者使用语义 HTML 来标记其网页。但是,什么是语义?屏幕阅读器如何使用语义呢?
什么是无障碍?
无障碍网站是指只要用户无论有无残疾,就可以访问其内容,而且其功能还可由尽可能多样化的用户来操作。
使用语义 HTML 轻松实现键盘操作
通过使用正确的语义 HTML 元素,您或许能够满足大部分或全部键盘访问需求。这意味着您无需再花费太多时间来调整 tabindex,并且用户会更满意!
标题和地标
通过为标题和地标使用正确的元素,您可以显著改善辅助技术用户的导航体验。
提供具有正确尺寸的图片
在此 Codelab 中,您将学习如何提供具有正确尺寸的图片,以提高网络性能。
通过代码拆分减少 JavaScript 载荷
在此 Codelab 中,您将了解如何通过代码拆分来提高简单应用的性能。
用视频替换 GIF 动画,加快网页加载速度
您是否曾在 Imgur 或 Gfycat 等服务中看到过动画 GIF,在开发者工具中检查过它,但发现 GIF 真的是一个视频?这有充分的理由。GIF 动画非常大!通过将较大的 GIF 转换为视频,您可以大幅节省用户的带宽。
搜索的工作原理
搜索引擎是图书管理员的数字版本。查询使用综合索引来帮助查找正确的查询信息。了解搜索的基础知识之后,您就可以让自己的内容更容易被用户发现。
用视频替换 GIF
在此 Codelab 中,您将学习如何通过将 GIF 动画替换为视频来提高性能。
艺术指导
在此 Codelab 中,您将学习如何根据设备显示屏尺寸加载完全不同的图片。
Service Worker 和 Cache Storage API
浏览器的 HTTP 缓存是您的第一道防线。这不一定是最强大或最灵活的方法,并且您对缓存响应的生命周期的控制也很有限。但是,有几条经验法则可让您无需执行太多工作即可实现合理的缓存实现,因此您应始终尝试遵循这些规则。
同源政策
浏览器可以从多个网站加载和显示资源。如果这些资源之间的交互不受限,并且某个脚本受到攻击者的攻击,则该脚本可能会公开用户浏览器中的所有内容。
使用 Service Worker
在此 Codelab 中,您将学习如何通过注册 Service Worker 来确保应用的可靠性。
使用密度描述符
在此 Codelab 中,您将学习如何使用密度描述符和 srcset,根据用户设备以合适的像素密度加载图片。
提供自适应图片
向移动设备投放桌面设备尺寸的图片会消耗的数据量多于所需数据的 2-4 倍。针对不同的设备提供不同尺寸的图片,而不是“一刀切”的方法。
浏览器沙盒
为了防御攻击,开发者需要缓解漏洞并向应用添加安全功能。幸运的是,网页浏览器提供了许多安全功能,其中包括“沙盒”这一理念。
Workbox:您的高阶 Service Worker 工具包
Workbox 是基于 Service Worker 和 Cache Storage API 构建的高级 Service Worker 工具包。它提供了一组可直接用于生产环境的库,用于向 Web 应用添加离线支持。
安保真不是那么吓人!
一想到“安全”这个词,通常发生在坏消息的上下文中。但是,与“用户体验”或“无障碍”一样,安全性是 Web 开发的一个积极且不可或缺的一部分。
性能预算基础知识
良好的性能很少是副作用。了解效果预算,以及它们如何帮助您顺利实现目标。
配置 HTTP 缓存行为
在此 Codelab 中,您将学习如何使用 HTTP 标头控制资源缓存行为。
什么是安全攻击?
不安全的应用可能会让用户和系统面临各种类型的损害。当恶意方利用漏洞或缺乏安全功能来破坏其利益时,这种行为就称为攻击。在本指南中,我们将了解不同类型的攻击,以便您知道在保护应用安全时应注意的事项。
预加载关键资源,以提高加载速度
一旦您打开任何网页,浏览器就会从服务器请求 HTML 文档,解析该 HTML 文件的内容,并为任何其他外部引用分别提交请求。关键请求链表示浏览器优先处理和提取的资源的顺序。
通过代码拆分减少 JavaScript 载荷
发送较大的 JavaScript 载荷会显著影响网站的速度。不要在应用的第一页加载完毕后立即向用户提供所有 JavaScript,而应将捆绑包分成多段,仅在最开始部分发送需要的内容。
使用 WebP 图片
WebP 图片比对应的 JPEG 和 PNG 图片小,文件大小通常可减少 25-35%。这样可缩减页面大小并提升性能。
您的第一项效果预算
按照分步指南定义对您的网站有意义的效果指标阈值,确保您的网站快速加载。