[JavaScript]页面的回流与重绘

2021-12-23 22:05:22 阅读：106 来源： 互联网

标签：元素 console log 标签 JavaScript 重绘 var 节点页面

文章目录

一些DOMAPI

获取元素相关结点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>

增加节点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>

回流与重绘

CSS的书写顺序影响

示例：

 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代码，渲染。

节点渲染优化

一个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;
}

标签：元素,console,log,标签,JavaScript,重绘,var,节点,页面
来源： https://blog.csdn.net/m0_61607810/article/details/122117369

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9