编辑注:以下帖子由 Igalia 合伙人 Frédéric Wang 撰写
AMP 项目连续三年与Igalia合作,处理 Web 社区的错误报告和增强请求。典型任务包括错误分类、调试和分析、编写测试、登陆补丁以及与 Web 平台的不同参与者进行讨论。这不仅有助于显著加快 AMP 项目的目标,而且对 Web 平台的所有开发人员和用户都有好处。
这篇博文描述了我们今年的活动,重点关注 WebKit/iOS 错误和功能。但是,我们的 Web 平台互操作性工作偶尔也会扩展到其他浏览器社区和标准化组织。
Resize Observer
Intersection Observer在 iOS 12.2 中发布,这要归功于 Google 工程师 Ali Juma。这是一个新的 JavaScript API,用于异步观察目标元素与祖先元素或顶级文档视口的交叉部分的变化。
Resize Observer是一个类似的 API,我们今年早些时候在首选项标志下实现了它。此 JavaScript API 允许 Web 开发人员异步观察元素何时调整大小,无论原因是什么。它在 iOS 13 beta 中可用,并且相应的首选项标志已在主干中默认启用,因此我们预计此功能将在 iOS 13 版本中可用。(2020 年 1 月 28 日更新:ResizeObserver 现在是 Safari 技术预览的一部分)
滚动
Apple 接管了我们去年开始的任务,使 <iframe> 元素可滚动,并且此行为现在在最新的 iOS 13 版本中默认启用。涉及可滚动元素的其他错误修复已登陆scroll-snap-align、调整大小后的可滚动性、滚动后的查找页面指示符以及与滚动闪烁和抖动相关的各种 iOS 13 回归。
滚动 API 的 ScrollIntoViewOptions 参数已实施增强功能。iOS 13 中提供了对逻辑滚动对齐的支持。我们还继续努力支持 scroll-behavior IDL 参数和 CSS 属性,并希望在下个学期完成此项工作。在进行此项工作时,我们还检测并修复了与 scrollIntoView() 方法相关的 Chrome 错误,包括存在滚动条或滚动器使用非默认书写模式的情况。
用户的一个旧浏览器互操作性问题与 scrollLeft、scrollTop 和类似 API 的不一致值有关,我们的重要成就之一就是确保在设置或获取滚动坐标时发生更可靠和标准的行为。我们引入了一个选项,让 Chrome 在非默认书写模式中使用标准值,并在确保它不会导致严重损坏后计划发布它。同样,Apple 决定在所有 WebKit 端口上启用我们 2018 年对视口滚动器的更改。
除了常规错误修复之外,我们还开始实施其他有趣的滚动功能,包括滚动超出自定义和滚动超出行为,这些功能是 Web 开发人员控制滚动器达到其边界时发生情况的强大 API。我们希望明年在这方面取得更多进展。
资源加载
另一个令人兴奋的目标是赋予 Web 作者更多控制加载行为的权力。特别是,这允许控制隐私并优化页面布局。
referrerpolicy 属性已实施为指定应在与加载资源的 HTML 元素关联的请求中包含多少引荐信息。这仅对 <iframe> 和 <script> 元素实施,并且在 iOS 13 中以实验功能标记的形式提供。我们将继续与 Apple 讨论何时可以默认启用或为其他元素实施此功能。
在 <link rel=preload> 上的 imagesrcset 和 imagesizes 属性 也已实施,并且在 iOS 13 中以实验功能标记的形式提供。这些属性提供了使用相关大小和 srcset 属性预加载由 <img> 元素表示的响应式图像的可能性,并优化了为用户设备选择适当大小。
我们还开始提交补丁以支持 <img> 和 <iframe> 元素上的 lazyload 属性。这些属性使 Web 作者能够指示是否可以延迟加载元素内容(例如,如果它们在视口中不可见,直到用户滚动到它们),或者是否应立即加载它们的内容。这些提示对浏览器优化资源加载非常有帮助。
最后,我们在 WebKit 中为内在尺寸属性提供了实验性支持。此提议旨在帮助浏览器在实际加载图像内容之前确定其纵横比或大小,从而避免额外的后加载重排。此提议已被基于纯 CSS 的方法取代,该方法解决了相同的使用案例。我们的实验对于浏览器供应商和 CSS WG 之间的讨论非常有用,我们计划重写我们的补丁,以在 WebKit 中实现基于 CSS 的方法。
结论
AMP 项目与 Igalia 之间的合作以推进网络平台的状态非常成功。还有几个待处理的任务和新的想法需要处理,因此我们期待明年继续这项工作!