DOM编程

DOM访问和修改

1 .访问dom元素是有代价的,修改元素更为昂贵,因为他会导致浏览器重新计算页面的几何变化,最快的是在循环中访问或者修改元素,尤其是对HTML元素集合循环操作
2 .innerHTML和原生的方法哪个更快,大多数都差不多,但是innerHTML在大多数都是快的。
3 .重排和重绘都会导致ui的反应迟钝

重排发生的条件

1 .添加和删除可见元素
2 .元素位置发生改变
3 .元素尺寸改变(外边距,内边距,边框宽度,宽度,高度等属性改变)
4 .页面内容的改变:文本图片被另一个不同尺寸的图片替代
5 .页面渲染器初始化
6 .浏览器窗口尺寸改变
7 .根据改变的范围和程度,渲染树中或大或小的对应部分也需要重新计算,有些改变会导致整个页面的重排(当滚动条出现)
8 .因为每次重排都会产生计算消耗,所以大多数浏览器都会通过队列化修改并批量化执行来优化重排过程。然而,你可能需要立即执行这个操作。所以在实际操作中,尽量不要使用一下属性
9 .offsetTop,offsetHeight,scrollTop,scrollWidth,clientTop,clientWidth,getComputedStyle()

最小化重排和重绘

1 .合并多次的dom和样式的修改,然后一次处理掉
2 .css样式
3 .批量修改dom:使元素脱离文档流,对其应用进行多次改变,把元素带回文档中

让元素脱离动画流

1 .使用绝对定位页面上的动画元素,使其脱离文档流
2 .让元素动起来。
3 .当动画结束的时候恢复定位,从而只会移动下一次文档的其他元素

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容