个人中心
文章发布
退出
作者热门文章
- r - 以节省内存的方式增长 data.frame
- ruby-on-rails - ruby/ruby on rails 内存泄漏检测
- android - 无法解析导入android.support.v7.app
- UNIX 域套接字与共享内存(映射文件)
30
4
在我的项目中实现 Shadow DOM 是否会使它们像 React 使用的虚拟 DOM 一样更快？
最佳答案
它们是不同用途的不同事物，因此比较性能没有意义。
虚拟 DOM
虚拟 DOM 旨在避免对 DOM 进行不必要的更改，这在性能方面代价高昂，因为对 DOM 的更改通常会导致页面重新呈现。 Virtual DOM 还允许收集要同时应用的多个更改，因此并非每个更改都会导致重新渲染，而是在将一组更改应用到 DOM 后重新渲染只会发生一次。
影子 DOM
Shadow dom 主要是关于实现的封装。单个自定义元素可以实现或多或少的复杂逻辑以及或多或少的复杂 DOM。可以通过导入和 <body><my-app></my-app> 将任意复杂度的整个 Web 应用程序添加到页面中但也可以将更简单的可重用和可组合组件实现为自定义元素，其中内部表示隐藏在影子 DOM 中，如 <date-picker></date-picker> .
样式封装Shadow DOM 还可以防止样式被意外应用到设计者不打算应用的元素，例如，因为您正在使用的 CSS 或组件库更改了一个选择器，该选择器现在应用到使用相同 CSS 类名的其他元素。添加到组件的样式限定在该组件范围内，防止样式渗出或渗入。
Shadow DOM 和性能
尽管 shadow DOM 首先与性能无关，但它也具有性能影响。因为样式是有范围的，所以浏览器可以假设某些更改只影响页面的有限区域(自定义元素的影子 DOM)，这可以将重新渲染限制在此类组件的区域，而不是重新渲染整个页面。
这就是 >>> 的原因, /deep/ , 和 ::shadow允许跨影子 DOM 边界应用样式的 CSS 组合器已被弃用，并且很快就会从 Chrome 中删除(其他浏览器从未有过它们 AFAIK)。这些组合器的存在阻止了上一段中提到的那种优化。
Angular2 利用了两个世界的优势。
它使用单向数据流并仅在模型上运行变化检测。如果它检测到更改，它会导致通过更新绑定(bind)来更新 DOM，并制作结构指令，如 *ngFor , *ngIf , ... 更新 DOM。因此，DOM 仅在模型实际更改时更新。
Angular2 使用影子 DOM(仅适用于 ViewEncapsulation.Native 目前不是默认设置)来利用浏览器提供的样式封装功能，或者(当前默认设置)通过重写添加到组件的样式来模拟样式封装，作为一种解决方法，直到原生影子 DOM 和 CSS 变量(用于动态全局样式更改)变得广泛可用。
关于dom - Shadow DOM 是否像 React.js 中的 Virtual DOM 一样快？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36012239/
30
4
0
我无法创建另一个父 div 容器，是否可能仅使用 css 技巧？盒子阴影:7px 7px 7px 黑色；只会从右边框和底边框创建阴影，但我也需要左边框和上边框。 最佳答案 盒子阴影有4个参数；偏移量、
我刚遇到一个有趣的情况，我有一个提交 放置在 内的 native 自定义元素的 Shadow DOM 内. Select #shadow-root ...
假设我们有一些 CSS 代码，例如动画 CSS 加载器，我们希望在所有使用 Shadow DOM 的 Web 组件中使用它。如果我们无法像 ::shadow 那样穿透 Shadow DOM，我们如何重
shadow-dom 中的document 变量的值是多少？在 this jsfiddle 我们可以看到它在父文档中搜索 app 节点并提醒它的值。这是否意味着 shadow-dom 没有单独的文档变
以下代码是来自 chrome 开发工具的 View #shadow-root (user-agent) This I want to restyle 如果我想在 shadow
运行mvn package:shade shade时，日志中的条目显示:用 XYZ-shaded.jar 替换 XYZ.jar但在我的目标目录中，我找不到阴影 jar 这是我关于 Maven 阴影的
我正在尝试编写一个 mixin，它应该将 CSS box-shadow 作为参数并将其转换为 filter: drop-shadow()。 // mixin drop-shadow($shadows)
我正在使用 gradle shadow 插件构建我的 uber jar。 build.grade 文件看起来像: buildscript { repositories { jc
我正在尝试向子对象所在的父对象添加阴影 元素位于其中。我希望插入的阴影与图像重叠。 我的 HTML 代码是: 和 CSS: .highlights { height: 360px
我想在 UIView 上添加drop shadow 和stroke shadow这是我的设计师给我的阴影， 对于投影，他告诉我使用 RGB(176,199,226)，不透明度为 90%，距离为 3，大
我希望在单击图像时出现投影。我目前不使用 Jquery，所以如果可能的话，请提供一个 java 脚本解决方案。这是我的 fiddle :http://jsfiddle.net/zUNhD/7/ 我还希
从那以后我一直在使用 CSS box-shadows，但现在我有一个带有圆 Angular 的图像并想给它一个圆 Angular 阴影。所以我尝试使用 filter: drop-shadow，但不幸的
LWC 合成影子 dom 似乎不像 native 影子 dom 实现那样处理插槽，例如 假设您从一个元素开始: Hi there 然后附加影子dom并添加一个插槽，h1将被插入: 现在，如果您在运行“
我试图在以下文档中观察文档级别的自定义输入元素的文本输入元素的输入值的变化: 其中自定义 Div 和自定义输入定义如下: Units 如状态h
我的网站上安装了一个 Angular 网络组件。它使用 Shadow DOM，因此它非常快(在我的情况下必须如此)。 在我的站点上，我还有一个快捷方式 h，它会打开一个显示一些有用信息的弹出窗口。 h
我正在尝试为一个带有与其文本颜色相同的阴影的框创建样式。因为我有几个框，每个框都有不同的文本颜色，所以我想避免在每个框的每个单独规则集中重复相同的颜色。 现在，背景和边框模块状态为 box-shado
我想使用不支持 Shadow-DOM 的浏览器(如 Firefox、PhantomJS 以及其他使用 WebDriver 的浏览器)测试 Polymer 应用程序。 当我使用类似的东西时，Firefo
我有一个 Assets 代表一个按钮，下面有一个阴影。我只想让蓝色部分可点击。有没有简单的方法来做到这一点？ 谢谢。 最佳答案 您可以像这样以编程方式添加阴影: button.layer.shadow
我正在尝试创建一个 Photoshop 内阴影效果，与 css3 框阴影插入效果相同。 第 1 步(我正在生成按钮 - 圆 Angular 矩形): convert -size 220x50 xc:n
我需要在 boxMesh 上转换阴影，而网格本身应该不可见。 我找到了 technique Three.js GitHub 问题跟踪器似乎在几年前就可以工作，但现在不再工作了 - 它涉及创建一个新的着
我是一名优秀的程序员,十分优秀！