JavaScript页面回流与重绘

来源：jb51　　时间：2022/1/19 9:43:01　　对本文有异议

1.DOMAPI

1.1获取元素相关结点API

<body>
?? ?<div class="item">
?? ??? ?<h3 class="title">123</h3>
?? ??? ?<p class="des">456</p>
?? ??? ?<p class="price">789</p>
?? ?</div>
?? ?<script>
?? ??? ?var oItem = document.querySelector(".item");
?? ??? ?var oTitle = oItem.querySelector("h3");
?? ??? ?var itemChild = oItem.children;//获取当前对象的所有子元素，并且以集合的形式返回
?? ??? ?console.log(itemChild);
?? ??? ?console.log(oItem.childNodes);//获取元素内的节点列表，注意，换行符也会被当做是一个文本节点
?? ??? ?console.log(oItem.firstChild);//获取元素第一个子（节点：标签和文本）
?? ??? ?console.log(oItem.firstElementChild);//获取元素第一个子元素（只指代标签 ?不包括文本节点）
?? ??? ?console.log(oItem.lastChild);//获取元素最后一个子（节点：标签和文本）
?? ??? ?console.log(oItem.lastElementChild);//获取元素最后一个子元素（只指代标签 ?不包括文本节点）
 
?? ??? ?//Node节点 ?Element元素
?? ??? ?console.log(oTitle.parentElement);//获取元素父元素
?? ??? ?console.log(oTitle.parentNode);//也是获取父元素
?? ??? ?console.log(oTitle.nextElementSibling);//下一个兄弟元素
?? ??? ?console.log(oTitle.nextSibling);//下一个兄弟节点（包含文本节点）
?? ??? ?console.log(oTitle.previousElementSibling);//上一个兄弟元素
?? ??? ?console.log(oTitle.previousSibling);//上一个兄弟节点（包含文本节点）
 
?? ?</script>
</body>

1.2增加节点API

<script>
?? ?var oWrap = document.createElement("div");
?? ?//参数是tagName，也就是标签名称
?? ?oWrap.className = "wrap";//添加类名
?? ?oWrap.innerText = "文本";//添加一些文本
?? ?oWrap.style.fontSize = "30px";//设置字体大小
?? ?oWrap.style.color = "red";//设置颜色
?? ?//向body里添加标签
?? ?document.body.appendChild(oWrap);
?? ?//向添加的div标签里再添加一个p标签
?? ?var oP = document.createElement("p");
?? ?oP.innerText = "我是p标签";
?? ?oWrap.appendChild(oP);
?? ?//用innerHTML来添加节点
?? ?var elementStr = '<div class="erao"><p style="color: red; font-size: 30px;">我是p是wrap的子元素</p></div>';
?? ?document.body.innerHTML = elementStr;
?? ?
</script>

2.回流与重绘

2.1CSS的书写顺序影响

示例：

?span {
? ? ? width: 200px;
? ? ? height: 200px;
? ? ? margin: 10px;
? ? ? border: 2px solid red;
? ? ? background-color: #368;
? ? }

如上的css代码，在HTML页面中span标签不会被渲染出来，这是因为span标签是行级元素，不能设定width和height值，如果我们在最下面写一行position: absolute;，这就会导致浏览器切换计算模式。

浏览器在读css代码时是从上而下一行一行代码读的，在没有读到这行代码时浏览器先是用的行级元素的计算模式来阅读这段css代码，当读到position: absolute;这行代码时

浏览器隐式的将span的display展示模式更改为block，自然也将计算模式切换成块级元素的计算模式，然后再从头读这段css代码，渲染。

2.2节点渲染优化

一个html页面是一个整体，当这个整体中的某一个部分发生改变，那么这个页面整体会重新进行渲染，而如果我们采用添加标签的方式，每次添加一个标签，就会让每一次页面都重新渲染，性能急剧下降

解决方法是：使用Fragment临时容器

示例：

drawDom(3000, 'div');
? ? function drawDom(num, tagName) {
? ? ? var vDom;
? ? ? for (var i = 0; i < num; i++) {
? ? ? ? vDom = document.createElement(tagName);
? ? ? ? document.body.appendChild(vDom); //重复N次 每次渲染一个标签
? ? ? }
? ? }

如上述代码，当我们一个一个渲染3000个标签的时候，在本地的页面打开都需要一秒多，如果是线上的，那性能更加差

所以我们要使用Fragement临时容器，如果说页面渲染相当于货架上的商品，那么appendChild方法就相当于每一次从工厂生产商品立刻送到商店摆上货架，每一次都需要重新编排商品。

而使用Fragement时，就相当于在工厂和货架之间放置了一个大箱子，工厂生产出赖商品后先将商品放置在Fragment里，当需要的商品数量生产完后，再将Fragement这个大箱子直接提到商店，将里面的商品一次性摆上货架，这时就只需要编排一次商品，大大的提升了渲染性能。

修改后的代码：

drawDom(3000, 'div');
? ? function drawDom(num, tagName) {
? ? ? var vDom;
? ? ? var fragment = document.createDocumentFragment();//文档片段
? ? ? for (var i = 0; i < num; i++) {
? ? ? ? vDom = document.createElement(tagName); //
? ? ? ? fragment.appendChild(vDom); //放到临时容器fragment里
? ? ? }
? ? ? document.body.appendChild(fragment); ?//一次渲染渲染N个
? ? }

这里要注意innerHTML也会有同样的问题，解决的方式就是不要用innerHTML来每一次改变，而是以一个字符串来进行改变，等所有的改变结束后再直接赋值给innerHTML，也是能大大提升性能的

示例：

?drawHtml(3000, 'div');
?function drawHtml(num, tagName) {
? ? ? var eleStr = '';
? ? ? for (var i = 0; i < num; i++) {
? ? ? ? eleStr += '<' + tagName + '></' + tagName + '>';
? ? ? }
? ? ? document.body.innerHTML = eleStr;
}