如何处理html和css中dom节点?

发布时间:2019-08-19编辑:脚本学堂
看到一文章写浏览器渲染原理,学到不少有关处理css和html中的dom节点的知识,看下文介绍。

1,html 会被解析成dom结构

2,css也会被解析成一个dom 这里的dom其实我就理解成一个树图,数据结构里面的树图

3,当css被赋予在html上时,他们两者会被关联

4,浏览器在处理css的变化时有reflow/repaint

5,1)不要一条一条地修改DOM的样式,不如预先定义好css的class,然后修改DOM的className。

  2)把DOM离线后修改。如:

?使用documentFragment 对象在内存里操作DOM
?先把DOM给display:none(有一次reflow),然后你想怎么改就怎么改。比如修改100次,然后再把他显示出来。
?clone一个DOM结点到内存里,然后想怎么改就怎么改,改完后,和在线的那个的交换一下。
?对于这的理解,我认为就是在js中把dom,赋值给一个变量,然后对这个变量做操作,最后在赋值给页面的html元素,而不是直接在获取。
?举例:var a=$("#id").val();然后你需要对这个a做样式的改动,这时a的变化不会和html有关联,但是如果你直接$("#id").css('')这里你css了很多,可能就会造成浏览器
一直在reflow或者repaint。

  3)不要把DOM结点的属性值放在一个循环里当成循环里的变量,不然这会导致大量地读写这个结点的属性。理解为for循环中如果你在不停的获取$("#id").val()是一个不可

取的行为。

 4)尽可能的修改层级比较低的DOM。当然,改变层级比较底的DOM有可能会造成大面积的reflow,但是也可能影响范围很小。

这里的意思我这么理解,你修改的子节点越接近树梢可能影响的范围越小,但是如果你n个子节点用的是同一个css的id或者
class可能就是要大面积reflow了。

 5)为动画的HTML元件使用fixed或abslout的position,那么修改他们的CSS是不会reflow的。

fixed和abstlout的定位就是匹配尺寸的和绝对位置的,相对于relative和float:left来说,我理解是前两者的z-index比
一般的div+1层,所以才会不影响周边的div而独立的存在。其他几个布局模式,都是需要牵制于周围的div的,也就会引发
reflow了

 6)千万不要使用table布局。由于可能很小的一个小改动会造成整个table的重新布局。