`
zhangyaochun
  • 浏览: 2609149 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

js性能-DOM编程之重绘和重排

阅读更多

浏览器下载完页面中的所有组件----HTML标记,Js,CSS,图片等之后会解析并生成两个内部数据结构

 

 

  • DOM树  -------- 表示页面结构
  • 渲染树   -------- 表示DOM节点如何显示

      DOM树中的每一个需要显示的节点在渲染树中至少存在一个对应的节点(隐藏的DOM元素在渲染树中没有对应的节点)。
      渲染树中的节点被称为“帧“或者”盒“,符合CSS模型的定义,理解页面元素为一个具体填充(padding),边距(marging),边框(borders)和位置(position)的盒子。
      一旦DOM和渲染树构建完成,浏览器就开始显示(绘制"paint")页面元素。

 

 

 

     当DOM的变化影响了元素的几何属性(宽和高),浏览器需要重新计算元素的几何属性,同样其他元素的几何属性和位置也会因此受到影响。

 

    重排:浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树

 

    重绘完成重排后,浏览器会重新绘制受影响的部分到屏幕中。

 

 

    重排何时发生

 

 

  • 添加或删除可见的DOM元素
  • 元素位置的改变
  • 元素尺寸改变
  • 内容改变
  • 页面渲染器初始化
  • 浏览器窗口尺寸的改变

 

分享到:
评论

相关推荐

    DOM编程艺术 书+源码

    避免不必要的DOM操作、合理使用事件委托、减少重排和重绘等策略,都是提高网页性能的关键。 七、源码分析 附带的源码可能是书中示例的实现,通过阅读和研究这些代码,读者可以更直观地理解DOM编程的实际运用,包括...

    js-高性能JavaScript-JavaScript语言精粹修订版

    - 掌握高效的DOM操作技巧,比如避免不必要的重排和重绘。 - 了解事件处理机制及如何优化事件监听器的使用。 3. **异步编程:** - 使用回调、Promises和async/await等技术进行异步编程。 - 了解异步模式对性能的...

    高性能JavaScript 重排与重绘(2)

    在Web开发中,DOM操作是不可或缺的一部分,然而,频繁的DOM操作会引发性能问题,尤其是重排和重绘这两个方面。了解和优化重排和重绘是提升Web应用性能的关键。 首先,重排(也称为回流)是指浏览器重新计算DOM元素...

    13-文本小节-dom转vdom.md

    在前端开发中,直接操作DOM是昂贵的操作,因为它会触发浏览器的重排和重绘,从而影响性能。虚拟DOM的引入可以作为一个中间层,通过diff算法比较前后虚拟DOM树的差异,再将差异批量更新到真实DOM上,这样大大减少了...

    JavaScript DOM 编程艺术

    - **性能优化**:减少 DOM 操作次数,避免重排和重绘。 - **兼容性处理**:使用特征检测而非版本检测,编写具有良好兼容性的代码。 - **代码模块化**:将代码组织成模块,提高可维护性和复用性。 - **响应式设计**:...

    高性能JavaScript DOM编程(1)

    在探讨高性能的JavaScript DOM编程时,首先要明确DOM(文档对象模型)是与HTML和XML文档交互的一个应用程序接口。JavaScript通过DOM接口来进行文档结构的查询与操作。然而,这些操作往往代价较高,尤其是涉及到频繁...

    javascript&&dom葵花宝典

    - **性能优化**:避免不必要的DOM操作,使用`innerHTML`和`textContent`代替循环插入节点,减少DOM重绘和重排。 - **事件委托**:将事件监听器添加到父元素上,利用事件冒泡处理子元素的事件,提高性能。 - **...

    TA-JS-advanced-dom-and-test-TJaaan

    3. **性能优化**:学习DOM操作的最佳实践,如批量操作、减少重排和重绘,以及使用事件委托。 4. **无障碍访问(Accessibility)**:理解A11y原则,编写对辅助技术友好的DOM代码。 5. **框架集成**:了解如何将这些...

    如何实现重绘

    例如,Chrome开发者工具中的“Performance”面板可以记录页面的重绘和重排,帮助找出性能瓶颈。另外,Visual Studio的UI性能分析器也能帮助检测和改进Windows应用的重绘效率。 在实际应用中,我们需要关注重绘的...

    js 数据存储和DOM编程

    JavaScript 数据存储和DOM编程是前端开发中的核心概念,它们直接影响着网页交互的性能和效率。在JavaScript中,数据存储有多种方式,包括字面量、变量、数组和对象成员。理解这些存储方式对于优化代码至关重要。 ...

    JavaScript DOM 高级程序设计

    - **减少DOM操作**: 减少对DOM的操作次数,避免频繁触发重排或重绘。 - **性能优化**: 使用文档片段 (Document Fragment)、缓存DOM查询结果等方法来提高性能。 #### 三、案例研究 ##### 1. 动态加载内容 - **实现...

    浏览器的重绘repaints与重排reflows深入分析

    浏览器的重绘与重排是前端开发中两个关键的概念,它们直接影响着网页的性能和用户体验。...在实际项目中,应当养成良好的编程习惯,时刻关注性能指标,避免不必要的重排和重绘,以实现高性能的Web应用。

    DOM经典教程_web前端必备

    - 避免不必要的DOM操作:尽量减少对DOM的操作,因为每次操作都会引起浏览器的重绘或重排。 - 使用文档片段(DocumentFragment):批量修改DOM时,先在内存中操作文档片段,最后一次性插入DOM树,减少重绘次数。 -...

    (彩色高清)[高性能JavaScript编程].(High.Performance.JavaScript).Nicholas.C.Zakas.中英对照版.pdf

    - **DOM操作成本**:直接操作DOM树的成本较高,因为每次操作都可能导致重排(reflow)和重绘(repaint),因此应尽量减少这类操作。 **细节探讨:** - **减少DOM访问**:可以通过缓存元素引用、批量修改后一次性...

    JavaScript语言精粹

    - **减少重绘与重排**:通过减少DOM操作,提高页面渲染效率。 - **事件委托**:利用事件冒泡机制来优化事件监听。 #### 十、框架与库 - **React**:Facebook维护的一个用于构建用户界面的JavaScript库。 - **...

    DOM文档下载

    7. **性能优化**: 对DOM的频繁操作可能导致页面性能下降,因此了解如何有效地操作DOM,如批量更新、使用文档碎片(DocumentFragment)、避免不必要的重排和重绘,是优化Web应用的关键。 总的来说,掌握DOM是成为一...

Global site tag (gtag.js) - Google Analytics