Hmo*_*omH 77 dom web-component shadow-dom virtual-dom
在我的项目中实现Shadow DOM会使它们像React使用的虚拟DOM一样快吗？
Gün*_*uer 111
虚拟DOM
虚拟DOM是关于避免对DOM进行不必要的更改,这在性能上是昂贵的,因为对DOM的更改通常会导致重新呈现页面.Virtual DOM还允许同时收集要应用的多个更改,因此并非每次更改都会导致重新呈现,而是仅在对DOM应用一组更改后重新呈现一次.
影子DOM
Shadow dom主要是关于实现的封装.单个自定义元素可以实现或多或少复杂的逻辑,并结合或多或少的复杂DOM.可以通过导入将任意复杂度的整个Web应用程序添加到页面中,<body><my-app></my-app>但也可以将更简单的可重用和可组合组件实现为自定义元素,其中内部表示隐藏在阴影DOM中<date-picker></date-picker>.
样式封装 Shadow DOM也是为了防止样式被意外地应用于设计者不想要的元素,例如因为您使用的CSS或组件库改变了现在应用于使用相同CSS类名的其他元素的选择器.添加到组件的样式将限定为该组件,并防止出现样式或样式.
影子DOM和性能
尽管影子DOM首先与性能无关,但它也具有性能影响.因为样式是作用域的,所以浏览器可以对某些更改进行假设,以仅影响页面的有限区域(自定义元素的阴影DOM),这可以限制重新渲染到此类组件的区域,而不是重新渲染整个页面.
这就是原因>>>,/deep/和::shadowCSS组合程序,这使得跨影子DOM边界应用样式,已过时,受到从Chrome很快删除(其他浏览器永远得不到据我所知).仅仅存在这些组合器就可以防止前一段中提到的那种优化.
Angular2利用两个世界的优势.
它使用单向数据流并仅在模型上运行更改检测.如果检测到变化它会导致DOM通过更新绑定更新,并作出这样结构的指令*ngFor,*ngIf...更新DOM.因此,DOM仅在模型实际更改时更新.
Angular2使用shadow DOM(ViewEncapsulation.Native目前不是默认值)来利用浏览器提供的样式封装功能,或者(当前默认)只是通过重写添加到组件的样式来模拟样式封装,作为一种解决方法直到本机shadow DOM和CSS变量(用于动态全局样式更改)变得广泛可用.
lux*_*lux 61
不,Shadow DOM和Virtual DOM是不相关的,虽然有点类似名称:
虚拟DOM:由于差异原因,反应保留DOM的两个副本(原始和更新)的概念.在渲染之前,React会对两个对象进行区分,以确定它是否应该将更新应用于实际的DOM树.这导致性能提升,因为我们只更新需要它的视图部分,而不是整个屏幕.
Shadow DOM: W3C提出的Web组件规范的一部分,它基本上允许将较小的DOM元素和CSS样式封装到单个DOM元素中:
Shadow DOM元素示例
<video width="300" height="150" />
但是,<video>实际上封装了以下元素:
<div>
<input type="button" style="color: blue;">Play
<input type="button" style="color: red;">Pause
<source src="myVideo.mp4">
</div>
因此,通过使用Shadow DOM,我们能够隐藏web元素的实现细节,并且只将必要的信息传递给子元素(即height,width),这可能令人困惑,非常类似于传递props给组件的ReactJS习惯用法.
提供的信息:
| 归档时间： |
|
| 查看次数： |
31085 次 |
| 最近记录： |