javascript代码实例教程-JS中的数据绑定和DOM回流

发布时间:2019-01-01 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JS中的数据绑定和DOM回流脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

javascript中的几种数据绑定方法:(从后台获取到的JSON数据,对数据进行解析,然后获取我们有用的数据进行操作,或者和页面htML元素进行绑定---数据绑定)

JS中的数据绑定和DOM回流

JS中DOM的深入知识:

回流(重排:reflow):当页面中的html结构发生改变(增加、删除元素、位置发生改变),浏览器都需要重新计算一边新的DOM结构,重新对当前的页面进行渲染。

重绘:当某个元素的部分样式发生了改变(如背景颜色发生了改变),浏览器需要重新渲染当前元素即可。

回流比重绘耗能耗时,所以在优化程序系统的时候,我们尽量要减少浏览器的DOM回流操作。

JS中的数据绑定和DOM回流

利用动态创建元素节点然后追加到页面中的方式的弊端是:浏览器没创建一个li后间添加到页面中,然后引发DOM的回流,让浏览器重新渲染新的DOM文档。

JS中的数据绑定和DOM回流
JS中的数据绑定和DOM回流

字符串拼接的方法的优势:吧所有要添加到页面的元素形成一个字符串,然后在最后吧整个字符串添加到页面中,innerHTML=。。?,只进行了一次DOM的回流。

JS中的数据绑定和DOM回流

文档碎片的方式结合了动态创建节点方法和字符串方法,使得绑定数据后的原来存在的节点的操作响应还存在,并且只进行一次DOM回流。

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JS中的数据绑定和DOM回流全部内容,希望文章能够帮你解决javascript代码实例教程-JS中的数据绑定和DOM回流所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。