css和html中的dom节点都是怎么被处理的

今天看到一篇文章浏览器渲染原理  很不错

为什么我会去注意这篇东西呢！因为我昨天在修复朋友们提交的一个小bug后，发现自己的前端有点糟糕，可能是以前我对于前端的处理方式都是交给我的朋友的。原本在我的前端理解中，对于css的控制，我一直希望使用id和css，原因是我觉得够简单和直接，没有复杂的递归关系，不需要一层一层向下看，但是呢这要求很高的文档规范和命名规则，否则名字实在太多了。

通过阅读上述文章，我知道了如下东西：

1，html 会被解析成dom结构

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

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

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

5，1）不要一条一条地修改DOM的样式。与其这样，还不如预先定义好css的class，然后修改DOM的className。 这条很棒

 

6，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

7，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的重新布局。

 

再相信的信息去看那篇帖子吧！我后续把他提到的文章看下。做个小翻译。