前端学习day1

题目摘自牛客面经，记录学习前端过程day1！

浏览器的渲染过程，dom树是如何构建的，重绘和重排分别在渲染过程中的哪一部分？
答：一：浏览器的渲染过程主要分为七步：
1、HTML的加载
　　HTML是一个网页的基础，下载完成后解析
2、其他静态资源加载
　　解析HTML时，发现其中有其他外部资源链接比如CSS、JS、图片等，会立即启 用别的线程下载但当外部资源是JS时，HTML的解析会停下来，等JS下载完执行结束后才继续解析HTML，防止JS修改已经完成的解析结果（解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置，用户设置，外联样式，内联样式，html中的style(嵌在标签中的行间样式)。
3、DOM树构建
　　在HTML解析的同时，解析器会把解析完成的结果转换成DOM对象，再进一步构建DOM树
4、CSSOM树构建
　　CSS下载完之后对CSS进行解析，解析成CSS对象，然后把CSS对象组装起来，构建CSSOM树
5、渲染树构建
　　当DOM树和CSSOM树都构建完之后，浏览器根据这两个树构建一棵渲染树
6、布局计算
　　渲染树构建完成以后，浏览器计算所有元素大小和绝对位置
7、渲染
　　布局计算完成后，浏览器在页面渲染元素。经过渲染引擎处理后，整个页面就显示出来
二：DOM树的构建：
了解了 DOM 的结构是由各种的子节点组成的，那么以 HTMLDocument 为根节点，其余节点为子节点，组织成一个树的数据结构的表示就是 DOM树。
（个人理解为将一个html解析为一个个节点，将节点从上至下进入dom树中）
三 重绘和重排分别在渲染过程中的哪一部分
首先了解重绘和重排，当DOM的变化影响了元素的几何属性(宽或高)，浏览器需要重新计算元素的几何属性，同时其他元素的几何属性和位置也会受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树，这个过程称为重排。完成重排后，浏览器会重新绘制受到影响的部分到屏幕，这个过程称为重绘。
重绘处于渲染过程中构建渲染树的部分
重排处于渲染过程中渲染部分
（拓展）重排和重绘是DOM编程中耗能的主要原因之一，为了避免不必要的性能损耗可以参考一下几点：
1、尽量不要在布局信息改变时做查询(会导致渲染队列强制刷新);
2、同一个DOM的多个属性改变可以写在一起(减少DOM访问，同时把强制渲染队列刷新的风险降为0);
3、如果要批量添加DOM，可以先让元素脱离文档流，操作完成后带人文档流，这样只会触发一次重排(fragment元素的应用);
4、将需要多次重排的元素，添加定位属性，设置为absolute,fixed，这样此元素就脱离了文档流，不会影响其他元素。