DOM编程 --《高性能JavaScript》

Posted im.lhc

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM编程 --《高性能JavaScript》相关的知识,希望对你有一定的参考价值。

1.重绘和重排

  浏览器下载完页面的所有组件 —— html标记,CSS,javascript,图片,会解析并生成两个内部数据结构。

  DOM树

    表示页面结构

  渲染树(CSS)

    表示DOM节点如何显示

  当DOM变化影响了元素的几何属性(宽和高)会发生重新构造渲染树,进而进行重绘。

2.重排何时发生

  1.添加或删除可见的DOM元素

  2.元素的位置改变

  3.元素尺寸的改变(外边距,内边距,宽,高,border等)

  4.内容改变

  5.页面的渲染器初始化

  6.浏览器的窗口大小改变

3.最小化重排和重绘

  1.使用绝对位置定位页面上的动画元素,使元素脱离文档流

  2.对其应用多重改变

  3.把元素带回文档中

4.总结

  1.最小化DOM访问次数,尽可能在JavaScript端处理

  2.如果需要多次访问某个DOM节点,使用局部变量存储起来

  3.要留意重绘和重排

  4.动画中使用绝对定位,使用拖放代理

  5.使用事件委托来减少事件的处理数量。

以上是关于DOM编程 --《高性能JavaScript》的主要内容,如果未能解决你的问题,请参考以下文章

DOM编程

DOM编程

Javascript——DOM编程

JavaScript 之 DOM编程

JavaScript性能优化 DOM编程

JavaScriptJavaScript DOM 编程