- 浏览: 2609149 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (1286)
- js-oop (2)
- js-window (10)
- js-event (19)
- js-string (37)
- js-array (27)
- js-page (4)
- js-dom (62)
- js-lang (8)
- js-number (7)
- js-platform (3)
- js-object (15)
- js-element (3)
- js-browser (7)
- js-url (6)
- js-date (10)
- css基础 (48)
- css优化 (15)
- html基础 (17)
- html标签 (19)
- js基础 (117)
- js-兼容性差异 (33)
- js引擎 (3)
- js性能 (14)
- json (6)
- jQuery源码浅析 (43)
- web mobile开发资料 (78)
- js跨域 (2)
- html5 (74)
- html5-canvas (7)
- css3 (53)
- 浏览器 (5)
- api设计学 (3)
- js-加载 (3)
- linux (37)
- 架构师 (1)
- php (2)
- self开发的脚本库--凤凰 (2)
- web应用名词 (6)
- javascript新特性翻译 (8)
- ajax (6)
- jQuery动画效果 (7)
- prototype的解读 (13)
- 优秀插件翻译 (1)
- css解决方案 (26)
- 数据库 (2)
- english daily (59)
- 浏览器内核探究 (1)
- jQuery插件介绍 (9)
- jquery基础篇 (26)
- chrome浏览器问题整理 (14)
- js选择器那些事 (3)
- 前端框架 (26)
- Firefox私有属性 (11)
- webkit私有属性集合 (17)
- 书籍推荐 (21)
- 数据结构 (1)
- 网站建设相关 (7)
- 好文翻译 (2)
- 个人作品 (3)
- kissy的解读 (4)
- css-layout(布局研究) (5)
- less研究 (1)
- YUI探究 (1)
- hash探究 (1)
- js动画 (7)
- 前端面试题 (37)
- css书写规范 (1)
- js模板引擎 (6)
- js模块化 (19)
- 编写高质量代码 (3)
- 性能探究--应用协议 (2)
- 前端图像处理 (19)
- Mac OS相关 (21)
- 正则表达式 (11)
- 离线应用相关 (0)
- 前端工具 (65)
- nodeJS (55)
- jquery优化篇 (2)
- 设计模式探究系列 (3)
- windows7 (2)
- IE10 (10)
- 微博开放平台探究 (2)
- 常用web服务接口 (1)
- 数据存储相关 (8)
- 零时文件 (2)
- jQuery Mobile (16)
- backbone (15)
- underscore (22)
- sass (11)
- android (3)
- phonegap (10)
- IE私有 (11)
- qwrap (8)
- git (14)
- chrome extensions (5)
- freemarker (11)
- angularJS (3)
- seo (2)
- markdown (3)
- css动画 (4)
- 安卓开发 (2)
- React (7)
- 活动页技术 (1)
- 网络安全 (3)
- grunt (7)
- Lo-Dash (3)
- 前端国际化 (4)
- 版本控制 (2)
- 盒模型 (4)
- 微信开发 (1)
- Mock数据工具 (1)
- sails (1)
- vim (1)
- js-color (1)
- iOS 基础 (43)
最新评论
-
jertom:
<div id="showInfo" ...
addEventListener等事件监听的参数细谈 -
乌托邦国王:
引用[u][/u]
css3动画属性系列之transform细讲移动translate -
hvang1988:
能提供附件下载吗,找不到js库,google封了访问不了
Syntaxhighlighter---代码高亮插件介绍 -
sscsacdsadcsd:
我的天 那到底是为什么function是object我看und ...
typeof func ==='function'的疑惑 -
wkjiangwk:
试了,没用,你们从不去测试。
介绍一下x-webkit-speech -------实现语音输入
浏览器下载完页面中的所有组件----HTML标记,Js,CSS,图片等之后会解析并生成两个内部数据结构:
- DOM树 -------- 表示页面结构
- 渲染树 -------- 表示DOM节点如何显示
DOM树中的每一个需要显示的节点在渲染树中至少存在一个对应的节点(隐藏的DOM元素在渲染树中没有对应的节点)。
渲染树中的节点被称为“帧“或者”盒“,符合CSS模型的定义,理解页面元素为一个具体填充(padding),边距(marging),边框(borders)和位置(position)的盒子。
一旦DOM和渲染树构建完成,浏览器就开始显示(绘制"paint")页面元素。
当DOM的变化影响了元素的几何属性(宽和高),浏览器需要重新计算元素的几何属性,同样其他元素的几何属性和位置也会因此受到影响。
重排:浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树。
重绘:完成重排后,浏览器会重新绘制受影响的部分到屏幕中。
重排何时发生:
- 添加或删除可见的DOM元素
- 元素位置的改变
- 元素尺寸改变
- 内容改变
- 页面渲染器初始化
- 浏览器窗口尺寸的改变
发表评论
-
自执行函数相关
2013-05-07 20:39 1388整理几种自执行函数: 在最前最后加括 ... -
一淘首页优化总结
2013-02-01 17:10 0尽量减少DOM节点 不需要初始加载就渲染 ... -
严格模式探究
2013-01-18 17:32 1449探究一下严格模式 ... -
《JavaScript高级程序设计》性能探究之优化DOM交互
2012-10-20 17:50 1451本文来自《JavaScript高级程序设计》阅读笔记 ... -
《JavaScript高级程序设计》性能探究之最小化语句数
2012-10-20 16:18 1400本篇主要整理于《JavaScript高级程序设计》的第三版 6 ... -
翻译学习《how-web-page-loads》
2012-10-19 17:42 1345本文大部分来源于: http://www.douban ... -
关于页面的资源文件组织合理性探究
2012-10-18 13:55 1417本文主要来自于kejun's Blog里面的js和css的顺序 ... -
js性能之最小化重绘和重排(样式相关)
2012-09-22 20:18 1502前面有一篇记录了重绘和重排(http://zhangyaoch ... -
IE下的:hover
2012-09-19 16:22 1563从IE7(严格模式下)任何元素都可以使用:hover这 ... -
书写高质量JavaScript代码的要点(The Essentials of Writing High Quality JavaScript)翻译
2012-02-25 17:08 1657前言: 1、文章尾部带有原文的链接和来自zhang ... -
关于ajax类库的局限思考
2012-01-17 20:35 1471目前对于各大前端框架来言,都支持访问一个ajax对象,它屏蔽了 ... -
关于iframe加载完成的判断
2011-10-28 21:18 0//创建iframe var iframe = ... -
你会用string.lastIndexOf()吗?
2011-10-15 16:29 2115很多的人可能会不屑这个问题,请听我慢慢说道。 需求设计 ... -
js性能优化之 Object/Array直接量
2011-10-14 14:30 2702以前可能自己写的时候也有这个习惯,但是理论性的没有认真去中总结 ... -
js性能研究系列之----数据访问相关
2011-09-28 12:42 1542前言: 本来按照自己的计划是推出的是 常用性 ...
相关推荐
避免不必要的DOM操作、合理使用事件委托、减少重排和重绘等策略,都是提高网页性能的关键。 七、源码分析 附带的源码可能是书中示例的实现,通过阅读和研究这些代码,读者可以更直观地理解DOM编程的实际运用,包括...
- 掌握高效的DOM操作技巧,比如避免不必要的重排和重绘。 - 了解事件处理机制及如何优化事件监听器的使用。 3. **异步编程:** - 使用回调、Promises和async/await等技术进行异步编程。 - 了解异步模式对性能的...
在Web开发中,DOM操作是不可或缺的一部分,然而,频繁的DOM操作会引发性能问题,尤其是重排和重绘这两个方面。了解和优化重排和重绘是提升Web应用性能的关键。 首先,重排(也称为回流)是指浏览器重新计算DOM元素...
在前端开发中,直接操作DOM是昂贵的操作,因为它会触发浏览器的重排和重绘,从而影响性能。虚拟DOM的引入可以作为一个中间层,通过diff算法比较前后虚拟DOM树的差异,再将差异批量更新到真实DOM上,这样大大减少了...
- **性能优化**:减少 DOM 操作次数,避免重排和重绘。 - **兼容性处理**:使用特征检测而非版本检测,编写具有良好兼容性的代码。 - **代码模块化**:将代码组织成模块,提高可维护性和复用性。 - **响应式设计**:...
在探讨高性能的JavaScript DOM编程时,首先要明确DOM(文档对象模型)是与HTML和XML文档交互的一个应用程序接口。JavaScript通过DOM接口来进行文档结构的查询与操作。然而,这些操作往往代价较高,尤其是涉及到频繁...
- **性能优化**:避免不必要的DOM操作,使用`innerHTML`和`textContent`代替循环插入节点,减少DOM重绘和重排。 - **事件委托**:将事件监听器添加到父元素上,利用事件冒泡处理子元素的事件,提高性能。 - **...
3. **性能优化**:学习DOM操作的最佳实践,如批量操作、减少重排和重绘,以及使用事件委托。 4. **无障碍访问(Accessibility)**:理解A11y原则,编写对辅助技术友好的DOM代码。 5. **框架集成**:了解如何将这些...
例如,Chrome开发者工具中的“Performance”面板可以记录页面的重绘和重排,帮助找出性能瓶颈。另外,Visual Studio的UI性能分析器也能帮助检测和改进Windows应用的重绘效率。 在实际应用中,我们需要关注重绘的...
JavaScript 数据存储和DOM编程是前端开发中的核心概念,它们直接影响着网页交互的性能和效率。在JavaScript中,数据存储有多种方式,包括字面量、变量、数组和对象成员。理解这些存储方式对于优化代码至关重要。 ...
- **减少DOM操作**: 减少对DOM的操作次数,避免频繁触发重排或重绘。 - **性能优化**: 使用文档片段 (Document Fragment)、缓存DOM查询结果等方法来提高性能。 #### 三、案例研究 ##### 1. 动态加载内容 - **实现...
浏览器的重绘与重排是前端开发中两个关键的概念,它们直接影响着网页的性能和用户体验。...在实际项目中,应当养成良好的编程习惯,时刻关注性能指标,避免不必要的重排和重绘,以实现高性能的Web应用。
- 避免不必要的DOM操作:尽量减少对DOM的操作,因为每次操作都会引起浏览器的重绘或重排。 - 使用文档片段(DocumentFragment):批量修改DOM时,先在内存中操作文档片段,最后一次性插入DOM树,减少重绘次数。 -...
- **DOM操作成本**:直接操作DOM树的成本较高,因为每次操作都可能导致重排(reflow)和重绘(repaint),因此应尽量减少这类操作。 **细节探讨:** - **减少DOM访问**:可以通过缓存元素引用、批量修改后一次性...
- **减少重绘与重排**:通过减少DOM操作,提高页面渲染效率。 - **事件委托**:利用事件冒泡机制来优化事件监听。 #### 十、框架与库 - **React**:Facebook维护的一个用于构建用户界面的JavaScript库。 - **...
7. **性能优化**: 对DOM的频繁操作可能导致页面性能下降,因此了解如何有效地操作DOM,如批量更新、使用文档碎片(DocumentFragment)、避免不必要的重排和重绘,是优化Web应用的关键。 总的来说,掌握DOM是成为一...