Web 孵化社区群组(Web Incubator Community Group,WICG)最近引入了展现锁定(Display Locking)提案,该提案可以轻松提高浏览器页面内容量并对渲染进行控制。
该提案适应多种使用场景,包括快速展现非常大的 HTML 文档,滚动显示大量内容,异步预渲染不可见的内容供后续展现,以及更快速地度量布局。该提案试图在不破坏 Web 特性和布局计算的情况下避免加载和渲染不可见的内容,并且为开发人员提供一种灵活性,使其能够在不向终端用户屏幕展现的情况下将内容预先渲染出来。
目前,DOM 是原子渲染的,随着站点和应用规模的增长,渲染也会耗费越来越长的时间。现在,我们所采用的技术包括隐藏不可见的内容或虚拟化,但是这些方式有一些限制,并且有可靠性方面的潜在问题。
展现锁定提案引入了三个新特性:
rendersubtree
属性,控制一个 DOM 子树是否要渲染。该属性可以被浏览器或其他的用户终端所修改,并且会触发一个 MutationObserver 事件,开发人员可以对事件进行响应。content-size
属性,为rendersubtree
属性标记为不可见的内容分配一个占位符的大小。- Element 对象的
updateRendering
方法,预渲染rendersubtree
属性标记为不可见的子树中的内容。 - Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
在起草该提案时,WICG 考虑了多个备选方案,包括contain: strict
、display:none
、visibility: hidden
等 CSS 属性,但是对于开发人员和用户终端来说,这些方案都缺乏足够的控制。
在现今的 Web 浏览器中,目前还没有该提案的实现。该提案还处于早期阶段,提案鼓励相关人员加入展现锁定社区群组来提供反馈。 Web 孵化社区群组 (WICG) 为提出和讨论新的 Web 平台特性提供了一个轻量级的场所。每个提案都会在群组的 Github 账户的 repository 中进行讨论。该群组的成员资格对所有人开放,但所有参与者必须首先签署 W3C 社区贡献者许可证协议(W3C Community Contributor License Agreement)。
作者:Dylan Schiemann
链接:https://www.infoq.cn/article/C3X8UFi7pXM5Ss9WXyy1
看完两件小事
如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:
- 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
- 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程
本文著作权归作者所有,如若转载,请注明出处
转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com