css树结构最多有多少层

html-css032

css树结构最多有多少层,第1张

理论上说是不限制的层数。

一般来说，css注重的就是代码简洁，尽量缩短，代码过长，会影响加载速度。而且层级嵌套太多，对于其他人员可读性太差 。

写样式，最好不要超过3个以上的层级，只要能找到对应的标签设置样式即可。

1、使用html解析器将html页面转化成浏览器能够理解的dom树 （ParseHTML）

2、将css解析成浏览器能够理解的css树（ 通过link标签引入的css才会走这一步，如果css是写到html里的话在第一步就解析了 ）

3、样式计算（Relcalculate Style）

4、dom树和css树生成布局树（Layout）

5、根据布局树生成图层树 —— 重排. (pre-paint)     （Update Layer Tree）. 

6、绘制（背景颜色、边框等）（按照图层去一个个绘制） —— 重绘（paint）

7、组合图层 —— 合成（Composite Layers）

图层树的几种情况：

    1、css3D

    2、position:fixed

    3、video

    4、canvas

    5、css3动画加载的时候作为一个单独的图层

浏览器每次可以接收64kb的数据，例如一个图片是120kb大小，那么浏览器将分成2次才能接收完数据

1、css解析的时候，浏览器会开一个线程去解析html，去开一个线程去解析css，这样会阻塞浏览器的渲染，但是不会阻塞dom的解析。

2、js解析的时候，会阻塞浏览器的渲染，会阻塞dom的解析，会阻塞js的执行

重排和重绘都是以图层为单位去操作，所以如果是一些变化的元素，最好将它单独作为一个图层隔离起来进行操作

1、重排：计算元素在窗口的几何位置

2、重绘：计算元素在窗口具体的呈现

1、元素位置移动尽量使用transform代替top、left

    1.1、直接使用transform会触发重排和重绘

    1.2、结合position:relative使用时只触发重绘

    1.3、作为单独图层时，不触发重排和重绘（会交给GPU进程去处理）

2、使用opacity代替visibility

    2.1、使用visibility会触发重绘

    2.2、使用opacity既触发重排，也触发重绘ß

    2.3、配合图层使用，opacity不触发重排和重绘

3、多次改变样式的操作合并成一次

4、利用文档碎片（documentFragment）

5、不要把某些dom节点的属性值放到循环里当成循环的变量

查询属性值的时候会触发重排、重绘！！

6、为动画元素新建图层