2020笔记1. CSS篇-页面渲染流程以及修改css后产生了哪些行为

228 阅读3分钟

页面加载:

一个正常的html页面中通常包含: js,css,html以及一些head信息。我主要理一下这个页面显示出来之前的生命周期 以下参考资料主要来自:

juejin.cn/post/684490…

segmentfault.com/a/119000001…

1.首先,浏览器自上而下加载所有文件

2.css和dom加载完毕之后开始分别解析cssTree和DomTree,在渲染过程中互不影响。需要注意的是,如果在它们中间插入js代码,并且js代码需要修改cssTree,那么js代码会暂停到csstree构建完成,而DomTree会被js堵塞, 所以间接的css加载就堵塞了dom的解析

3.一般js在加载的时候就会执行,它会堵塞css和dom解析,所以我们一般js都会写在dom的下面,不然提早操作dom就会报错了。

4.在cssTree和DomTree解析完毕之后,它们组成了renderTree。

5.页面开始布局,从renderTree开始计算元素属性,布局流程的输出是一个“盒模型”,它会精确地捕获每个元素在视口内的确切位置和尺寸,所有相对测量值都将转换为屏幕上的绝对像素。

  1. 渲染显示

修改页面样式之后:

  1. 修改样式对浏览器来说可以分为两类-回流、重绘:

其中重绘主要指修改元素除几何属性之外的其他属性,比如元素的颜色或者背景色之类,而回流就是修改了元素的几何属性(长宽高等),它会造成所有相关的其他元素全部重新排列位置,比如兄弟元素A和B,在修改了A的高度之后B的元素位置必然会发生改变(脱离文档流后面说),回流必定包含重绘,显然回流要比重绘更加消耗资源。

  1. 如何减少回流:

    2.1: 很多的几何属性在css3中有一个transform都可以很完美代替,它完美的避过了回流的问题,transform修改的样式主要是针对自身(重点!),列如left:10px和transform:translateX(10)都是向右平移10px, 前者会导致回流后者就不会,因为transform主要是针对自身产生变化,相对于文档流来说他还在那个位置(个人理解)。

    打个比方:班级中小明的位置太挤伸展不开要调整一下。

    一个办法是老师说:大家都给小明腾腾位置。很明显这样调整起码会导致小明边上的人全部重新搬桌子和椅子。

    另一个办法: 小明直接在位子上搭一个台子(好像不太好哈哈哈)。坐在上面,自然就能伸展开了,对于整个班级来说小明还是在那个位置,其他人的位置不用调整。 当然这样也是有弊端的,会和其他同学在上帝视角里重合,也就是页面元素覆盖了。

    2.2: 在必须要进行回流操作时,减少浏览器回流次数,尽量把多次操作放到一起。

    2.3:回流操作毕竟频繁的元素,可以用position来它们脱离文档流,减少回流涉及的dom规模。