2021-09-03

复习js第一天

什么是DOM

一.概念
1.DOM：Document Object Model，顾名思义：文档对象模型；允许js脚本控制web页面、文档与窗口

2.DOM 标准被分为 3 个不同的部分：
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

3.DOM的作用
（1）js可以通过DOM获取某个元素以及某个元素的父亲、儿子、后代、兄弟节点
（2）js可以通过DOM获取或修改某个元素的属性、内容
（3）js可以通过DOM新增、删除、插入元素
DOM的妙处在于：它能够在所有浏览器上提供一种一致的方式，通过代码访问HTML的结构和内容。

4.html dom 树的结构

拓展：浏览器加载页面时都做了什么？
答：浏览器加载页面时一共做了6步
第一步：解析HTML页面，从根标签html开始，将页面所有的标签全部解析，构成HTML DOM树
注意：HTML解析的时候不必等整个页面解析完，解析一部分显示一部分。但是像CSS、JavaScript等其他资源会阻止页面渲染。
第二步：解析CSS文件，构成CSSOM树。CSSOM（CSS Object Model） 是一个跟DOM相关的样式对象。它跟DOM的表示方法是相似的，但是不论显式声明还是隐式继承，每个节点都存在关联样式。CSS被称为“渲染阻塞资源”，它意味着如果不首先完全解析资源，渲染树是无法构建的。
第三步：执行JS。JavaScript被认为是"解析阻塞资源"，这意味着HTML的解析会被JavaScript阻塞。
当解析器解析到 script 标签时，无论该资源是内部还是外链的都会停止解析，先去下载资源。这也是为什么，当页面内有引用JavaScript文件时，引用标签要放到可视元素之后了。
第四步：创建渲染树，即将HTML DOM树与CSSOM树结合起来，（display：none不会在渲染树中）
第五步：生成布局
第六步：绘制页面

重排与重绘

一.重排与重绘的概念
当DOM的变化引发了元素几何属性的变化，比如改变元素的宽高，元素的位置，导致浏览器不得不重新计算元素的几何属性，并重新构建渲染树，这个过程称为“重排”。完成重排后，要将重新构建的渲染树渲染到屏幕上，这个过程就是“重绘”。简单的说，重排负责元素的几何属性更新，重绘负责元素的样式更新。而且，重排必然带来重绘，但是重绘未必带来重排。
二.引发重排的操作：重排发生的根本原理就是元素的几何属性发生了改变，
1.添加或者删除可见DOM元素
2.元素位置改变
3.元素的高宽发生变化
4.元素的内容发生改变
5.页面渲染器初始化
6.浏览器窗口变化

注意：重排和重绘的开销会非常大，如果我们不停的在改变页面的布局，就会造成浏览器耗费大量的开销在进行页面的计算，这样的话，我们页面在用户使用起来，就会出现明显的卡顿。会在后边单独一篇文章单独来聊如何来优化重排和重绘。