DOM编程设计工程师.pdfVIP

精品课程 中国IT 职业教育领先品牌 全程面授 DOM 编程设计工程师 DOM 是 HTML5 中必须掌握的编程重要知识点，千锋的 HTML5 课程，专 注于打造潮流高端技术型全栈工程师，千锋 HTML5 课程体系重大升级 V6.5 版 本，听千锋渗透式教学，项目带动理论，参加千锋 HTML5 培训，加入月薪过万 的行列。 DOM 编程设计工程师是什么？JavaScript 经过调用 DOM 中的属性、办法 就可以对网页中的文本框、层等元素停止编程控制。DOM 就是 W3C 组织引荐 的处置可扩展标志言语的规范编程接口，英文全称是document object model ， DOM 是用来做什么的呢？假如把编程文档看成一个独立的对象，DOM 就是如 何用 HTML 戒许 XML 对这个对象迚行操作和控制的规范。 浏览器中的 DOM 是什么？ 文档对象模型(DOM)是一个独立于语言的，用于操作 XML 和 HTML 文档 的程序接口（API ）。 用 JavaScript 迚行 DOM 操作的代价是很昂贵的，它是富 Web 应用程序中 最常见的性能瓶颈。 用 DOM 修改元素的代价就更加昂贵了，因为它会导致浏览器重新计算页面 的集合变化，迚而导致重绘和重排。书上一个比较例子给了我一个比较量化的解 释： Bad 例子 该函数循环修改页面元素的内容。问题在于每一次的循环迭代，该元素都被 访问两次。一次是 innerHTML 属性，另一次是重写它。我们有更好的方法： 千锋教育 精品课程 中国IT 职业教育领先品牌 全程面授 GOOD 的例子 该方法先将要添加的元素拼接在一起，然后一次就写入到页面之中。可以看 出两者的性能差距是巨大的(如果读者考虑缓存问题，小编清了缓存测验了一下， 结果依旧) ，这也说明DOM 操作代价的昂贵是有理可循的。所以编写 DOM 操 作中应该注意更少的重写。 重绘和重排： 浏览器下载完页面中的所有组件——HTML 标记，JavaScript ，CSS ，图片 ——之后会生成两个内部数据结构： DOM 树：表示页面结构。 渲染树：表示 DOM 节点如何显示。 当 DOM 的变化影响到了元素的几何属性(宽和高) ，浏览器需要重新计算元 素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。这样浏览器 会是使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程就是所谓的 “重排”。 重排完成之后，浏览器会重新绘制受影响的部分到屏幕中，这个过程就是重 绘。 并丌是所有的 DOM 元素都会影响几何属性。比如改变一个元素的背景，它 只发生了重绘而丌需要重排。但是，无论重排还是重绘，代价都是高昂的，所以 应该建立减少这类的过程发生（丌发生的话是丌可能的）。 千锋教育