• 关于

    dom结构

    的搜索结果

回答

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存,利用 dom diff 算法避免了没有必要的 dom 操作,从而提高性能。 用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上,视图就更新了。
问问小秘 2019-12-02 03:20:40 0 浏览量 回答数 0

问题

源码剖析之虚拟 DOM

什么是虚拟 DOM 虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象来描述 DOM,虚拟 DOM 的本质就是 JavaScript 对象,使用 JavaScript 对象来描述 DOM ...
moduletek 2020-08-13 09:42:14 0 浏览量 回答数 0

问题

为什么说 SAX 比 DOM4J 解析 xml 性能低?:报错

目前公认的XML解析器性能最好的是 DOM4J 我的疑问: DOM4J 是基于DOM文档树结构来进行解析的,来解析xml文件之前,会将整个 XML文档装载入内存形成完整的 DOM数结构ÿ...
kun坤 2020-06-06 15:28:11 3 浏览量 回答数 1

万券齐发助力企业上云,爆款产品低至2.2折起!

限量神券最高减1000,抢完即止!云服务器ECS新用户首购低至0.95折!

回答

SAX与DOM之间有一些显著区别,包括:DOM是复杂对象处理的首选,比如当XML比较复杂的时候,或者当你需要随机处理文档中数据的时候。SAX从文档的开始通过每一节点移动,以定位一个特定的节点。 DOM为载入到内存的文档节点建立类型描述。最终,这些描述呈现了可容易横向移动、潜在巨大、树型结构。如果XML很冗长,DOM就会显示出无法控制的胀 大。例如,一个300KB的XML文档可以导致RAM或者虚拟内存中的3,000,000KB的DOM树型结构。通过比较就会发现,一个SAX文档根本就 没有被解构,它也没有隐藏在内存空间中(当然当XML流被读入时,会有部分文档暂时隐藏在内存中)。SAX就是一种“更轻巧的”技术──它可以给你的系统 带来更轻的负担。SAX相当于观看一场马拉松比赛,而DOM就好比邀请所有的比赛选手到家里参加晚餐。所以,你如何选择SAX和DOM?如果你处理复杂的东西,比如高级XSLT转换,或者Xpath过滤,请选择使用DOM。如果你建立或者更改XML文档,你也可以选择DOM。相反,你可以使用SAX来查询或者阅读XML文档。SAX可以快速扫描一个大型的XML文档,当它找到查询标准时就会立即停止,然后再处理之。在某些情况下,在一个方案中,最佳的选择是使用DOM和SAX处理不同的部分。例如,你可以使用DOM将XML载入到内存并改变它,然后通过从DOM树中发送一个SAX流而转移最后的结果。
cysnow 2019-12-02 01:49:13 0 浏览量 回答数 0

回答

我对 Virtual DOM 的理解是, 首先对我们将要插入到文档中的 DOM 树结构进行分析,使用 js 对象将其表示出来,比如一个元素对象,包含 TagName、props 和 Children 这些属性。然后我们将这个 js 对象树给保存下来,最后再将 DOM 片段插入到文档中。 当页面的状态发生改变,我们需要对页面的 DOM 的结构进行调整的时候,我们首先根据变更的状态,重新构建起一棵对象树,然后将这棵新的对象树和旧的对象树进行比较,记录下两棵树的的差异。 最后将记录的有差异的地方应用到真正的 DOM 树中去,这样视图就更新了。 我认为 Virtual DOM 这种方法对于我们需要有大量的 DOM 操作的时候,能够很好的提高我们的操作效率,通过在操作前确定需要做的最小修改,尽可能的减少 DOM 操作带来的重流和重绘的影响。其实 Virtual DOM 并不一定比我们真实的操作 DOM 要快,这种方法的目的是为了提高我们开发时的可维护性,在任意的情况下,都能保证一个尽量小的性能消耗去进行操作。
剑曼红尘 2020-04-06 15:52:41 0 浏览量 回答数 0

回答

虚拟 dom 是相对于浏览器所渲染出来的真实 dom 的,在react,vue等技术出现之前,我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构,来达到更新 ui 的目的。 这种方式相当消耗计算资源,因为每次查询 dom 几乎都需要遍历整颗 dom 树,如果建立一个与 dom 树对应的虚拟 dom 对象( js 对象),以对象嵌套的方式来表示 dom 树,那么每次 dom 的更改就变成了 js 对象的属性的更改,这样一来就能查找 js 对象的属性变化要比查询 dom 树的性能开销小。 问题来源于GitHub,查看更多答案,请查看https://github.com/haizlin/fe-interview/issues/227
游客7iokfgo4yexey 2020-05-24 12:14:44 0 浏览量 回答数 0

问题

使用css的相邻+选择器和伪类会有兼容问题吗?

项目使用的是php的drupl来生成的Dom结构,然后由我来样式,dom非常冗余和复杂,我又不能改变dom结构, 所以使用了很多+选择器,和伪类,会产生兼容问题么?...
杨冬芳 2019-12-01 19:37:46 770 浏览量 回答数 1

回答

对于浏览器引擎而言,并不存在“HTML标签”这回事。其本质是DOM节点对象。也并不存在“HTML文档”这回事,其本质是DOM节点对象组成的文档树。 浏览器引擎才是实际存储和渲染DOM节点对象的“大爷”。只是我们无法直接操作浏览器引擎,所以对这个本质并不熟悉(其实也不需要很熟悉,但是得知道)。 DOM节点对象是唯一的,但操作DOM节点对象的数据,却不止有一种方法。例如对于一个图像的宽度: •HTML可以通过的width属性去定义; •JavaScript可以通过element.width去读取和修改; •别忘了CSS,CSS也可以通过width属性去修改。 HTML属性和JavaScript的DOM对象的属性,本质上都只是影响DOM节点对象数据的众多理由之一。 多个原因影响同一个DOM节点的实质数据(多对一),请务必记住这个本质理由。 详细而言: HTML仅仅是文档树和节点对象的一种描述方法。 •浏览器的解析器部分,根据HTML直接把DOM文档树,交给浏览器引擎。 •用其他的方法,也可以描述DOM对象,例如JSX。(当然用其他方法描述DOM对象的时候,生成DOM文档树的过程,肯定会发生相应的修改) JavaScript中的DOM对象,仅仅是一种操作浏览器引擎中DOM对象的接口。 •JavaScript中的DOM对象,和浏览器引擎中存储的DOM节点,本质上不是一个东西。 •用户实际上仅仅有权操作JavaScript中提供的DOM对象。 •JS引擎和浏览器引擎协作,确保了JavaScript的DOM对象,是引擎中DOM节点的一个原样映射。 •这样用户就能通过操作JavaScript的DOM对象,透明的修改引擎中存储的DOM节点。 •而浏览器引擎在本质上,仅仅负责在DOM树更新时承担重新渲染,实际上并不关心JS的存在。 •你如果用其他办法修改了引擎使用的DOM树,也能更新文档结构。(当然这种办法基本上不存在…) 至于HTML属性名和JavaScript DOM对象的属性名大多相似或等同,这仅仅是人为的方便。我如果喜欢我也可以设计成这样嘛: // <img src="http://localhost/1.png" alt="alt text" width=640 height=480 /> node.DataSource = "http://localhost/1.png"; node.AlternativeText = "alt text"; node.Dimension.Width = 640; node.Dimension.Height = 480; 虽然这样就真的没法记了。 JavaScript DOM对象属性名和HTML属性名的近似,是JavaScript给Web开发者的恩惠。选择只记忆HTML属性名,然后记忆(或者是踩坑了再反查)JavaScript属性名中少量和HTML不同名的差异点,这是很自然的。
杨冬芳 2019-12-02 02:54:12 0 浏览量 回答数 0

问题

动态生成的html结构 在上面再添加HTML dom

动态生成的html结构 在上面再添加HTML dom...
爵霸 2019-12-01 20:04:24 997 浏览量 回答数 3

回答

AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-model)来设置数据绑定。因此, NG框架是在DOM加载完成之后, 才开始起作用的. 答案来源于网络
养狐狸的猫 2019-12-02 03:03:35 0 浏览量 回答数 0

回答

可以理解为 react-native 是和 react-dom 一样的渲染引擎。 react 本身是跨平台的,react创建的虚拟dom对象,在web平台上,由 react-dom 去渲染成真实的 dom 结构; 而在 native 平台则是通过 react-native 作为桥接层,驱动原生UI渲染。react-native 内置了一些原生组件和功能API, 这些组件和API可以通过 react-native 的 bridge 暴露给js调用,同时也提供了自定义原生组件和模块的方式来扩充组件和API。
albin.liao 2019-12-02 01:35:38 0 浏览量 回答数 0

回答

varimgnew=document.getElementById("img1"); 这个地方不对,img还没有被添加到dom里面,是get不到的 回复 @小鱼吹泡泡:需要用代码放入dom,例如jq的insert和append之类的函数怎么才能得到呢,应该把这个获取对象的语句放在哪个位置?     varimg=newImage();//创建一个image对象    img.src="path.png";//指定img的src属性    img.id="id";//指定img的id    //以上三步创建了一个Image对象,但此对象并没有放到dom结构里    //它是独立存在的    window.onload=function(){        //将创建的Image对象添加到html的dom树里        document.body.appendChild(img);        //document.getElementById是从dom结构中查找指定id的节点        //但如果对象没有放置到dom树,显然是查找不到的        varmyImg=document.getElementById("id");        //如果上一步查找指定的id对象,而该对象不在dom结构里,则myImg为null        //下一步的alert中,由于myImg为null,对null采取属性获取,会报错        //但由于第一步已经将img放到了dom里,现在不会错了        alert(myImg.src);    }谢谢哈! 用代码来创建newimage好复杂啊!可不可以有第三方插件什么的来帮助 createnewimage ?跪求好的建议!谢谢!
爱吃鱼的程序员 2020-06-22 22:52:49 0 浏览量 回答数 0

回答

建议使用门户网站将子级呈现到父组件的DOM层次结构之外的DOM节点中。 ReactDOM.createPortal(child, container) 第一个参数是任何可渲染的React子元素,例如元素,字符串或片段。第二个参数是DOM元素。
你的答案 2020-05-07 17:18:09 0 浏览量 回答数 0

回答

1. 原生 DOM 操作 VS 通过框架封装操作。 这是一个性能 vs. 可维护性的取舍。框架的意义在于为你掩盖底层的 DOM 操作,让你用更声明式的方式来描述你的目的,从而让你的代码更容易维护。没有任何框架可以比纯手动的优化 DOM 操作更快,因为框架的 DOM 操作层需要应对任何上层 API 可能产生的操作,它的实现必须是普适的。针对任何一个 benchmark,我都可以写出比任何框架更快的手动优化,但是那有什么意义呢?在构建一个实际应用的时候,你难道为每一个地方都去做手动优化吗?出于可维护性的考虑,这显然不可能。框架给你的保证是,你在不需要手动优化的情况下,我依然可以给你提供过得去的性能。 2. 对 React 的 Virtual DOM 的误解。 React 从来没有说过 “React 比原生操作 DOM 快”。React 的基本思维模式是每次有变动就整个重新渲染整个应用。如果没有 Virtual DOM,简单来想就是直接重置 innerHTML。很多人都没有意识到,在一个大型列表所有数据都变了的情况下,重置 innerHTML 其实是一个还算合理的操作... 真正的问题是在 “全部重新渲染” 的思维模式下,即使只有一行数据变了,它也需要重置整个 innerHTML,这时候显然就有大量的浪费。 我们可以比较一下 innerHTML vs. Virtual DOM 的重绘性能消耗: innerHTML: render html string O(template size) + 重新创建所有 DOM 元素 O(DOM size)Virtual DOM: render Virtual DOM + diff O(template size) + 必要的 DOM 更新 O(DOM change) Virtual DOM render + diff 显然比渲染 html 字符串要慢,但是!它依然是纯 js 层面的计算,比起后面的 DOM 操作来说,依然便宜了太多。可以看到,innerHTML 的总计算量不管是 js 计算还是 DOM 操作都是和整个界面的大小相关,但 Virtual DOM 的计算量里面,只有 js 计算和界面大小相关,DOM 操作是和数据的变动量相关的。前面说了,和 DOM 操作比起来,js 计算是极其便宜的。这才是为什么要有 Virtual DOM:它保证了 1)不管你的数据变化多少,每次重绘的性能都可以接受;2) 你依然可以用类似 innerHTML 的思路去写你的应用。 3. MVVM vs. Virtual DOM 相比起 React,其他 MVVM 系框架比如 Angular, Knockout 以及 Vue、Avalon 采用的都是数据绑定:通过 Directive/Binding 对象,观察数据变化并保留对实际 DOM 元素的引用,当有数据变化时进行对应的操作。MVVM 的变化检查是数据层面的,而 React 的检查是 DOM 结构层面的。MVVM 的性能也根据变动检测的实现原理有所不同:Angular 的脏检查使得任何变动都有固定的 O(watcher count) 的代价;Knockout/Vue/Avalon 都采用了依赖收集,在 js 和 DOM 层面都是 O(change): - 脏检查:scope digest O(watcher count) + 必要 DOM 更新 O(DOM change) - 依赖收集:重新收集依赖 O(data change) + 必要 DOM 更新 O(DOM change)可以看到,Angular 最不效率的地方在于任何小变动都有的和 watcher 数量相关的性能代价。但是!当所有数据都变了的时候,Angular 其实并不吃亏。依赖收集在初始化和数据变化的时候都需要重新收集依赖,这个代价在小量更新的时候几乎可以忽略,但在数据量庞大的时候也会产生一定的消耗。 MVVM 渲染列表的时候,由于每一行都有自己的数据作用域,所以通常都是每一行有一个对应的 ViewModel 实例,或者是一个稍微轻量一些的利用原型继承的 "scope" 对象,但也有一定的代价。所以,MVVM 列表渲染的初始化几乎一定比 React 慢,因为创建 ViewModel / scope 实例比起 Virtual DOM 来说要昂贵很多。这里所有 MVVM 实现的一个共同问题就是在列表渲染的数据源变动时,尤其是当数据是全新的对象时,如何有效地复用已经创建的 ViewModel 实例和 DOM 元素。假如没有任何复用方面的优化,由于数据是 “全新” 的,MVVM 实际上需要销毁之前的所有实例,重新创建所有实例,最后再进行一次渲染!这就是为什么题目里链接的 angular/knockout 实现都相对比较慢。相比之下,React 的变动检查由于是 DOM 结构层面的,即使是全新的数据,只要最后渲染结果没变,那么就不需要做无用功。 Angular 和 Vue 都提供了列表重绘的优化机制,也就是 “提示” 框架如何有效地复用实例和 DOM 元素。比如数据库里的同一个对象,在两次前端 API 调用里面会成为不同的对象,但是它们依然有一样的 uid。这时候你就可以提示 track by uid 来让 Angular 知道,这两个对象其实是同一份数据。那么原来这份数据对应的实例和 DOM 元素都可以复用,只需要更新变动了的部分。或者,你也可以直接 track by $index 来进行 “原地复用”:直接根据在数组里的位置进行复用。在题目给出的例子里,如果 angular 实现加上 track by $index 的话,后续重绘是不会比 React 慢多少的。甚至在 dbmonster 测试中,Angular 和 Vue 用了 track by $index 以后都比 React 快: dbmon (注意 Angular 默认版本无优化,优化过的在下面) 顺道说一句,React 渲染列表的时候也需要提供 key 这个特殊 prop,本质上和 track-by 是一回事。 4. 性能比较也要看场合 在比较性能的时候,要分清楚初始渲染、小量数据更新、大量数据更新这些不同的场合。Virtual DOM、脏检查 MVVM、数据收集 MVVM 在不同场合各有不同的表现和不同的优化需求。Virtual DOM 为了提升小量数据更新时的性能,也需要针对性的优化,比如 shouldComponentUpdate 或是 immutable data。 初始渲染:Virtual DOM > 脏检查 >= 依赖收集小量数据更新:依赖收集 >> Virtual DOM + 优化 > 脏检查(无法优化) > Virtual DOM 无优化大量数据更新:脏检查 + 优化 >= 依赖收集 + 优化 > Virtual DOM(无法/无需优化)>> MVVM 无优化 不要天真地以为 Virtual DOM 就是快,diff 不是免费的,batching 么 MVVM 也能做,而且最终 patch 的时候还不是要用原生 API。在我看来 Virtual DOM 真正的价值从来都不是性能,而是它 1) 为函数式的 UI 编程方式打开了大门;2) 可以渲染到 DOM 以外的 backend,比如 ReactNative。 总结 以上这些比较,更多的是对于框架开发研究者提供一些参考。主流的框架 + 合理的优化,足以应对绝大部分应用的性能需求。如果是对性能有极致需求的特殊情况,其实应该牺牲一些可维护性采取手动优化:比如 Atom 编辑器在文件渲染的实现上放弃了 React 而采用了自己实现的 tile-based rendering;又比如在移动端需要 DOM-pooling 的虚拟滚动,不需要考虑顺序变化,可以绕过框架的内置实现自己搞一个。
九旬 2020-05-24 11:46:45 0 浏览量 回答数 0

回答

onload 是全部内容加载完毕(图片等资源下载完成)。$(document).ready(function() 是DOM结构加载完成(图片等不需要下载完成,只要读完html的dom结构就可以了。)另外ready 的兼容性有问题,因此,需要做分别处理。一般,我们拿JQUERY插件直接用就行了,JQ自己做过处理。
吴孟桥 2019-12-02 02:32:44 0 浏览量 回答数 0

回答

DOM解析器将整个XML加载到内存中,以创建基于树的DOM模型。这有助于它快速定位节点并更改 XML 结构。SAX 解析器是基于事件的解析器,不会将整个 XML 加载到内存中。 因此,DOM 比 SAX 更快,但它需要更多的内存,并且不适合解析大型 XML 文件。
YDYK 2020-04-26 15:11:46 0 浏览量 回答数 0

回答

DOM0 直接绑定 <input onclick="sayHi()"/> btn.onclick = function() {} btn.onclick = null DOM2 DOM2 级事件可以冒泡和捕获 通过 addEventListener 绑定 通过 removeEventListener 解绑 // 绑定 btn.addEventListener('click', sayHi) // 解绑 btn.removeEventListener('click', sayHi) DOM3 DOM3 具有更多事件类型 DOM3 级事件在 DOM2 级事件的基础上添加了更多的事件类型,全部类型如下: UI事件,当用户与页面上的元素交互时触发,如:load、scroll 焦点事件,当元素获得或失去焦点时触发,如:blur、focus 鼠标事件,当用户通过鼠标在页面执行操作时触发如:dbclick、mouseup 滚轮事件,当使用鼠标滚轮或类似设备时触发,如:mousewheel 文本事件,当在文档中输入文本时触发,如:textInput 键盘事件,当用户通过键盘在页面上执行操作时触发,如:keydown、keypress 合成事件,当为IME(输入法编辑器)输入字符时触发,如:compositionstart 变动事件,当底层DOM结构发生变化时触发,如:DOMsubtreeModified
茶什i 2019-12-02 03:21:13 0 浏览量 回答数 0

回答

代码重用很常见。最基本的方法是功能抽象化,将处理对象作为参数引入。这样功能不依赖于dom,即可到处重用。你所说的“好像很多重用对HTML结构变了也能用”是比较含糊的说法。只要你的效果不是依赖于特定dom结构的,重用都不是难事。但实际上如何重用取决于具体的业务。最好有具体业务代码来分析。
小旋风柴进 2019-12-02 02:19:21 0 浏览量 回答数 0

回答

大家都知道操作 DOM 是很慢的,为什么慢的原因已经在「浏览器渲染原理」章节中说过,这里就不再赘述了。 那么相较于 DOM 来说,操作 JS 对象会快很多,并且我们也可以通过 JS 来模拟 DOM const ul = { tag: 'ul', props: { class: 'list' }, children: { tag: 'li', children: '1' } } 上述代码对应的 DOM 就是 <ul class='list'> <li>1</li> </ul> 那么既然 DOM 可以通过 JS 对象来模拟,反之也可以通过 JS 对象来渲染出对应的 DOM。当然了,通过 JS 来模拟 DOM 并且渲染对应的 DOM 只是第一步,难点在于如何判断新旧两个 JS 对象的最小差异并且实现局部更新 DOM。 首先 DOM 是一个多叉树的结构,如果需要完整的对比两颗树的差异,那么需要的时间复杂度会是 O(n ^ 3),这个复杂度肯定是不能接受的。于是 React 团队优化了算法,实现了 O(n) 的复杂度来对比差异。 实现 O(n) 复杂度的关键就是只对比同层的节点,而不是跨层对比,这也是考虑到在实际业务中很少会去跨层的移动 DOM 元素。 所以判断差异的算法就分为了两步 首先从上至下,从左往右遍历对象,也就是树的深度遍历,这一步中会给每个节点添加索引,便于最后渲染差异一旦节点有子元素,就去判断子元素是否有不同 在第一步算法中我们需要判断新旧节点的 tagName 是否相同,如果不相同的话就代表节点被替换了。如果没有更改 tagName 的话,就需要判断是否有子元素,有的话就进行第二步算法。 在第二步算法中,我们需要判断原本的列表中是否有节点被移除,在新的列表中需要判断是否有新的节点加入,还需要判断节点是否有移动。 举个例子来说,假设页面中只有一个列表,我们对列表中的元素进行了变更 // 假设这里模拟一个 ul,其中包含了 5 个 li [1, 2, 3, 4, 5] // 这里替换上面的 li [1, 2, 5, 4] 从上述例子中,我们一眼就可以看出先前的 ul 中的第三个 li 被移除了,四五替换了位置。 那么在实际的算法中,我们如何去识别改动的是哪个节点呢?这就引入了 key 这个属性,想必大家在 Vue 或者 React 的列表中都用过这个属性。这个属性是用来给每一个节点打标志的,用于判断是否是同一个节点。 当然在判断以上差异的过程中,我们还需要判断节点的属性是否有变化等等。 当我们判断出以上的差异后,就可以把这些差异记录下来。当对比完两棵树以后,就可以通过差异去局部更新 DOM,实现性能的最优化。 另外再来回答「为什么 Virtual DOM 比原生 DOM 快」这个问题。首先这个问题得分场景来说,如果无脑替换所有的 DOM 这种场景来说,Virtual DOM 的局部更新肯定要来的快。但是如果你可以人肉也同样去局部替换 DOM,那么 Virtual DOM 必然没有你直接操作 DOM 来的快,毕竟还有一层 diff 算法的损耗。 当然了 Virtual DOM 提高性能是其中一个优势,其实最大的优势还是在于: 将 Virtual DOM 作为一个兼容层,让我们还能对接非 Web 端的系统,实现跨端开发。同样的,通过 Virtual DOM 我们可以渲染到其他的平台,比如实现 SSR、同构渲染等等。实现组件的高度抽象化
前端问答 2019-12-24 12:32:58 0 浏览量 回答数 0

问题

我用开源中国的客户端,做了一个服务端登陆httpclient post老是301烦死了报错 

http://www.oschina.net/action/api/login_validate/ 和这个做了个一样的,但不知道他们的代码是什么我做出来post提交会301有什么办法可以不用更改客户端直接200提交 服务端是...
kun坤 2020-06-10 09:58:51 4 浏览量 回答数 1

问题

php 抓取的页面如何处理可以只保留DOM结构,去掉CSS和JS?

正则规则写好后,页面一旦有改变就要重新修改正则。先提取页面的 DOM,有没有比较好的办法?...
a123456678 2019-12-01 19:26:05 1099 浏览量 回答数 2

回答

简述重排的概念 浏览器下载完页面中的所有组件(HTML、JavaScript、CSS、图片)之后会解析生成两个内部数据结构(DOM 树和渲染树),DOM 树表示页面结构,渲染树表示 DOM 节点如何显示。重排是 DOM 元素的几何属性变化,DOM 树的结构变化,渲染树需要重新计算。 简述重绘的概念 重绘是一个元素外观的改变所触发的浏览器行为,例如改变 visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。由于浏览器的流布局,对渲染树的计算通常只需要遍历一次就可以完成。但 table 及其内部元素除外,它可能需要多次计算才能确定好其在渲染树中节点的属性值,比同等元素要多花两倍时间,这就是我们尽量避免使用 table 布局页面的原因之一。 简述重绘和重排的关系 重绘不会引起重排,但重排一定会引起重绘,一个元素的重排通常会带来一系列的反应,甚至触发整个文档的重排和重绘,性能代价是高昂的。 什么情况下会触发重排? - 页面渲染初始化时;(这个无法避免) - 浏览器窗口改变尺寸; - 元素尺寸改变时; - 元素位置改变时; - 元素内容改变时; - 添加或删除可见的 DOM 元素时。 重排优化有如下五种方法 - 将多次改变样式属性的操作合并成一次操作,减少 DOM 访问。 - 如果要批量添加 DOM,可以先让元素脱离文档流,操作完后再带入文档流,这样只会触发一次重排。(fragment 元素的应用) - 将需要多次重排的元素,position 属性设为 absolute 或 fixed,这样此元素就脱离了文档流,它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。 - 由于 display 属性为 none 的元素不在渲染树中,对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时,可以先隐藏它,操作完成后再显示。这样只在隐藏和显示时触发两次重排。 - 在内存中多次操作节点,完成后再添加到文档中去。例如要异步获取表格数据,渲染到页面。可以先取得数据后在内存中构建整个表格的 html 片段,再一次性添加到文档中去,而不是循环添加每一行。
茶什i 2019-12-02 03:19:56 0 浏览量 回答数 0

回答

可以的,确保组件 DidMount 的情况下,是可以获取到真实 dom 并进行操作的。但是, 非常不建议这么做。react 是一个数据(状态)驱动的视图层框架, UI = f(state) , 用 jquery 修改真实的 dom 是很危险的事情,只是控制显示隐藏还好,尤其是对真实dom 的增删改,会破坏原有的结构。完全可以换一个思路来解决这个问题。 可以用 css3 定义 fadeIn,fadeOut 等动画。通过 添加和移除 className 来实现动画效果, 而 className 本身可以作为组件的状态。 通过修改状态来驱动视图变化
albin.liao 2019-12-02 02:24:36 0 浏览量 回答数 0

回答

可能有以下几方面原因: • 组件不支持data为null。 • 组件代码修改了jquery,例如重新赋值jquery。 • 组件代码修改了window对象。 • 当添加多个组件时修改配置不生效,需检查组件代码是否有CSS文件。 • 操作了容器外的DOM结构。 • 使用jquery操作DOM结构时,禁止$(‘.classname’),必须从container容器中查找。
LiuWH 2020-03-23 14:00:33 0 浏览量 回答数 0

回答

首先,解析 HTML 有两种办法: 一种是基于事件回调的:比如 python 的 HTMLParser 和 PHP 的 SimpleXML。它在遇到 starttag、endtag 以及遇到 text node 时就调用你指定的函数。 第二种是建立起一个完整的 DOM 树,让你进行 DOM 操作。 现在的问题就是应该怎么定义“不同”。 如果你指的只是 text node 的 text content 不同,而 node tree 的结构完全相同的话,就很容易了,此时你可以使用第一种解析 HTML 的方法;只需要把第一个页面所有的 text node 按顺序存下来;然后把第二个 HTML 的所有 text node 与之一一比对就 ok 了。 如果页面结构都不同的话,就会复杂些。这种情况下可以用第二种解析 HTML 的方法建立起 DOM 树;然后可以一层一层递归地比对innerHTML:具体来说,比如你先比对的 innerHTML。如果不一致的话,就一一比对其下所有元素的innerHTML。然后把其中innerHTML相同的节点忽略;对innerHTML不相同的节点再递归地进行处理。如果遇到某个元素在两个文档里的childNode数量不一的情况……那就看你想怎么办了。
落地花开啦 2019-12-02 02:49:42 0 浏览量 回答数 0

回答

原生XML扩展 我更喜欢使用其中一个原生XML扩展,因为它们与PHP捆绑在一起,通常比所有第三方库更快,并且在标记上给我所需的所有控制权。 DOM DOM扩展允许您使用PHP 5通过DOM API操作XML文档。它是W3C的文档对象模型核心级别3的实现,这是一个平台和语言中立的接口,允许程序和脚本动态访问和更新文件的内容,结构和风格。 DOM能够解析和修改现实世界(破碎)的HTML,并且可以执行XPath查询。它基于libxml。 使用DOM需要一些时间才能提高效率,但这个时间非常值得IMO。由于DOM是一个与语言无关的接口,因此您可以找到多种语言的实现,因此如果您需要更改编程语言,那么您很可能已经知道如何使用该语言的DOM API。 一个基本的用法示例可以在抓取A元素的href属性中找到,一般的概念概述可以在php的DOMDocument中找到 StackOverflow上已经广泛介绍了如何使用DOM扩展,因此如果您选择使用它,您可以确定您遇到的大多数问题都可以通过搜索/浏览Stack Overflow来解决。 XMLReader的 XMLReader扩展是一个XML pull解析器。读取器在文档流上作为光标前进,并在途中停在每个节点上。 与DOM一样,XMLReader基于libxml。我不知道如何触发HTML解析器模块,因此使用XMLReader解析损坏的HTML的可能性可能不如使用DOM,因为您可以明确告诉它使用libxml的HTML解析器模块。 使用php从h1标签获取所有值时,可以找到一个基本用法示例 XML解析器 此扩展允许您创建XML解析器,然后为不同的XML事件定义处理程序。每个XML解析器还有一些您可以调整的参数。 XML Parser库也基于libxml,并实现了SAX样式的XML推送解析器。它可能是比DOM或SimpleXML更好的内存管理选择,但是比XMLReader实现的pull解析器更难以使用。 SimpleXML的 SimpleXML扩展提供了一个非常简单且易于使用的工具集,用于将XML转换为可以使用普通属性选择器和数组迭代器处理的对象。 当您知道HTML是有效的XHTML时,SimpleXML是一个选项。如果你需要解析破碎的HTML,甚至不要考虑SimpleXml,因为它会窒息。 一个基本的用法示例可以在一个简单的CRUD节点程序和xml文件的节点值中找到,PHP手册中还有很多其他的例子。 第三方库(基于libxml) 如果您更喜欢使用第三方库,我建议使用实际上使用DOM / libxml而不是字符串解析的库。 FluentDom - 回购 FluentDOM为PHP中的DOMDocument提供了类似jQuery的流畅XML接口。选择器是用XPath或CSS编写的(使用CSS到XPath转换器)。当前版本扩展了DOM实现标准接口并添加了DOM Living Standard的功能。FluentDOM可以加载JSON,CSV,JsonML,RabbitFish等格式。可以通过Composer安装。 HtmlPageDom Wa72 \ HtmlPageDom`是一个用于轻松操作HTML文档的PHP库。它需要来自Symfony2组件的DomCrawler来遍历DOM树,并通过添加操作HTML文档的DOM树的方法来扩展它。 phpQuery(多年未更新) phpQuery是一个服务器端,可链接,CSS3选择器驱动的文档对象模型(DOM)API,基于用PHP5编写的jQuery JavaScript库,并提供额外的命令行界面(CLI)。 另见:https://github.com/electrolinux/phpquery Zend_Dom Zend_Dom提供了处理DOM文档和结构的工具。目前,我们提供Zend_Dom_Query,它提供了一个统一的界面,可以使用XPath和CSS选择器查询DOM文档。 的QueryPath QueryPath是一个用于操作XML和HTML的PHP​​库。它不仅适用于本地文件,还适用于Web服务和数据库资源。它实现了许多jQuery接口(包括CSS样式的选择器),但它在服务器端使用时经过了大量调整。可以通过Composer安装。 fDOMDocument fDOMDocument扩展了标准DOM,以便在所有错误情况下使用异常,而不是PHP警告或通知。为方便起见,他们还添加了各种自定义方法和快捷方式,并简化了DOM的使用。 军刀/ XML saber / xml是一个包装和扩展XMLReader和XMLWriter类的库,用于创建一个简单的“xml到对象/数组”映射系统和设计模式。编写和读取XML是单遍的,因此可以快速并且需要大型xml文件的低内存。 FluidXML FluidXML是一个用于使用简洁流畅的API来操作XML的PHP​​库。它利用XPath和流畅的编程模式,既有趣又有效。 第三方(不是基于libxml的) 构建DOM / libxml的好处是,您可以获得良好的开箱即用性能,因为您基于本机扩展。但是,并非所有第三方库都沿着这条路线行进。其中一些列在下面 PHP简单的HTML DOM解析器 用PHP5 +编写的HTML DOM解析器允许您以非常简单的方式操作HTML! 需要PHP 5+。 支持无效的HTML。 使用选择器在HTML页面上查找标签,就像jQuery一样。 从一行中提取HTML中的内容。 我一般不推荐这个解析器。代码库很糟糕,解析器本身很慢而且内存很耗。并非所有jQuery选择器(例如子选择器)都是可能的。任何基于libxml的库都应该比这更容易。 PHP Html解析器 PHPHtmlParser是一个简单,灵活的html解析器,允许您使用任何css选择器(如jQuery)选择标签。目标是帮助开发需要快速,简单的方法来废弃html的工具,无论它是否有效!这个项目最初是由sunra / php-simple-html-dom-parser支持的,但支持似乎已经停止,所以这个项目是我对他以前工作的改编。 同样,我不推荐这个解析器。CPU使用率很高,速度相当慢。还没有清除已创建DOM对象的内存的功能。这些问题尤其适用于嵌套循环。文档本身不准确且拼写错误,自4月14日以来没有回复修复。 加农 通用标记器和HTML / XML / RSS DOM解析器 能够操纵元素及其属性 支持无效的HTML和UTF8 可以对元素执行类似CSS3的高级查询(比如jQuery - 支持的命名空间) HTML美化器(如HTML Tidy) 缩小CSS和Javascript 排序属性,更改字符大小写,更正缩进等。 扩展 使用基于当前字符/标记的回调解析文档 操作以较小的功能分隔,以便轻松覆盖 快速而简单 从未使用过它。不知道它是否有用。 HTML 5 您可以使用上面的方法来解析HTML5,但由于HTML5允许的标记,可能会有怪癖。因此,对于HTML5,您要考虑使用专用解析器,例如 html5lib 基于WHATWG HTML5规范的HTML解析器的Python和PHP实现,可与主要桌面Web浏览器实现最大兼容性。 HTML5最终确定后,我们可能会看到更多专用解析器。还有一个W3的博客文章,名为How-To for html 5 parsing,值得一试。 网页服务 如果您不想编写PHP,您也可以使用Web服务。一般来说,我发现这些实用程序很少,但那只是我和我的用例。 ScraperWiki。 ScraperWiki的外部界面允许您以您希望在Web或您自己的应用程序中使用的形式提取数据。您还可以提取有关任何刮刀状态的信息。 常用表达 最后也是最不推荐的,您可以使用正则表达式从HTML中提取数据。通常,不鼓励在HTML上使用正则表达式。 您可以在网上找到与标记相匹配的大多数片段都很脆弱。在大多数情况下,它们只适用于非常特殊的HTML。微小的标记更改,例如在某处添加空格,或添加或更改标记中的属性,可以使RegEx在未正确编写时失败。在HTML上使用RegEx之前,您应该知道自己在做什么。 HTML解析器已经知道HTML的语法规则。必须为您编写的每个新RegEx讲授正则表达式。RegEx在某些情况下很好,但它实际上取决于您的用例。 您可以编写更可靠的解析器,但是使用正则表达式编写完整可靠的自定义解析器是浪费时间,因为上述库已经存在并且在此方面做得更好。
游客gsy3rkgcdl27k 2019-12-02 02:09:37 0 浏览量 回答数 0

问题

Java 处理 XML 的三种主流技术及介绍:报错

 XML (eXtensible Markup Language) 意为可扩展标记语言,它已经是软件开发行业中大多数程序员和厂商用以选择作为数据传输的载体。本文作者对于 Java 处理 XML 的几种主流技术进行一些总结和介绍...
kun坤 2020-06-09 23:26:43 0 浏览量 回答数 1

回答

问题在于 appendTo() 或者 append() 方法都是移动 DOM 对象,而不是将 DOM 对象复制到你指定的那个地方。 比如下面这样的 HTML 结构:` `执行这样的 jQuery 脚本:var $a = $("#a"), $b = $("#b"), $p = $("p"); $p.appendTo($a); HTML 结构就变成了: ` `再执行这样的脚本:$p.appendTo($b);HTML 结构就变成了: <div id = "a"></div> <div id = "b"><p></p></div> 也就是说,如果你想出现多个 标签,要么生成多个 元素,要么克隆多个。直接用 append() 与 appendTo() 方法,如你所见,达不到你想要的效果。
小旋风柴进 2019-12-02 02:28:02 0 浏览量 回答数 0

回答

[attr!='value'] 这个选择器不是标准选择器,是 jQuery 扩展的功能,在 jQuery 的实现里面,如果元素不包含attr,并且属性选择符是 !=,这个元素也会被加到最终的结果里面。 你的 DOM 结构如果是下面这种,选择器返回的才是你想要的结果。 <img src="img/123.jpg" data-src/> <img src="img/loading.gif" data-src="img/1.jpg"/> <img src="img/loading.gif" data-src="img/2.jpg"/> 根据你的需求和 DOM 结构,应该用 「含有某个属性选择器」,而不是「某个属性不等于选择器」。
小旋风柴进 2019-12-02 02:26:40 0 浏览量 回答数 0

回答

vue1.0的数据绑定完全依赖于数据侦测,使用Object.defineProperty方法使数据去通知相应watch,改变dom结构。vue2.0引入了虚拟dom,只通知到组件,提升了颗粒度。 问题来源于GitHub,查看更多答案,请查看https://github.com/haizlin/fe-interview/issues/546
游客7iokfgo4yexey 2020-05-23 14:40:03 0 浏览量 回答数 0

云产品推荐

上海奇点人才服务相关的云产品 小程序定制 上海微企信息技术相关的云产品 国内短信套餐包 ECS云服务器安全配置相关的云产品 开发者问答 阿里云建站 自然场景识别相关的云产品 万网 小程序开发制作 视频内容分析 视频集锦 代理记账服务