主要观点:WebKit 宣布将为<script>
和<style>
元素实现blocking=render
属性,此属性可让开发者明确标记资源为渲染阻塞,但一般不建议使用,除非知道需要此行为。文中还讨论了阻塞状态(非阻塞、渲染阻塞、解析阻塞)、影响网页阻塞状态的文件类型(样式表和脚本)、async
、defer
和type=module
属性以及blocking=render
在阻塞网页字体和 A/B 测试实验中的应用等。
关键信息:
blocking=render
属性可明确标记资源为渲染阻塞。- 目前只有
render
令牌,规范可扩展添加其他值。 - 网页加载资源有三种阻塞状态,非阻塞性能最佳,渲染阻塞次之,解析阻塞最差。
- 样式表是渲染阻塞,脚本是解析阻塞,默认其他文件类型非阻塞。
async
、defer
和type=module
使<script>
非阻塞。blocking=render
主要用于给<script>
赋予渲染但非解析阻塞的特性。- 在阻塞网页字体方面,不建议使用
blocking=render
,但 Chrome 已有类似行为。 - 在 A/B 测试实验中,
blocking=render
可避免页面闪烁和泄露实验,但可能导致渲染阻塞时间延长。
重要细节: - 文中通过多个图表和示例详细解释了各种阻塞状态和相关概念。
- 介绍了 A/B 测试实验中使用的反闪烁代码片段及其存在的问题,以及
blocking=render
如何解决这些问题。 - 提及了作者 Harry Roberts 的相关信息和联系方式,以及他所在公司的相关情况。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。