js 回流、重绘、渲染(render)树

港控/mmm° 2021-07-24 23:04 475阅读 0赞

**回流必将引起重绘，重绘不一定引起回流**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]  
**渲染(render)树**(在domtree基础上，对具有空间大小的节点构成的树）  
![在这里插入图片描述][20191204212508943.png]**减少回流和重绘**

创建一个容器，将所有添加内容放到容器内,再添加到页面,只引起一次回流和重构
    	
    	var fragment=document.createDocumentFragment() //DocumentFragment节点不属于文档树,domtree中的对象都有父节点
    	fragment.appendChild(添加对象);
    	document.body.appendChild(fragment);

**代码示例：**

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		
    	</head>
    	<body>
    		<h1>第一个h1标签</h1>
    		<script type="text/javascript">
    		
    		var fragment=document.createDocumentFragment();
    		
    			var h1=document.createElement("h1");
    			h1.innerHTML="第二个h1";
    			fragment.appendChild(h1);
    			
    			var h2=document.createElement("h2");
    			h2.innerHTML="第一个h2";
    			fragment.appendChild(h2);
    		
    			var h3=document.createElement("h3");
    			h3.innerHTML="第一个h3"
    			fragment.appendChild(h3);
    			
    			document.body.appendChild(fragment);
    			
    			//创建一个容器，将所有添加内容放到容器内,再添加到容器,只引起一次回流和重构
    		</script>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/2f9dc901c1aa472f964fc5fd8b7ea2c2.png
[20191204212508943.png]: /images/20210724/119f86ea59f344b594931fce3ee4dc4a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，475人围观）

还没有评论，来说两句吧...

相关阅读

相关回流与重绘

https://www.cnblogs.com/chenyanlong/p/10551080.html][https_www.cnblogs.com_chenyanlon...

我会带着你远行/ 2024年04月19日 11:09/ 0 赞/ 61 阅读

相关浏览器回流、重绘

1. 什么是回流？页面中元素的尺寸，布局，隐藏等改变而需要重新构建页面，就会引起回流。 2. 什么是重绘？页面中元素属性发生改变，而这些属性只是影响元素的外观

清疚/ 2022年12月02日 00:51/ 0 赞/ 252 阅读

相关回流和重绘有什么区别？如何避免回流和重绘

> 写在前面：回流必将引起重绘，但是重绘不一定会引起回流回流和重绘回流重绘区别如何避免回流当元素的尺寸、结构等属性改变时，

怼烎@/ 2022年10月17日 00:51/ 0 赞/ 391 阅读

相关回流与重绘

回流（reflow）：当render树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建时称为回流。如改变某个元素的margin，那么其后

旧城等待，/ 2022年06月05日 06:22/ 0 赞/ 300 阅读

相关渲染树，重排，重绘

DOM树浏览器内核会对页面进行检索首先识别HTML代码，把HTML的每一个节点放到树形结构里面去，形成一个DOM树。 DOM树解析符合深度优先原则，例如：

川长思鸟来/ 2022年05月26日 12:18/ 0 赞/ 160 阅读

相关浏览器渲染流程和重绘，回流

1、渲染大致流程渲染引擎首先通过网络获得所请求文档的内容，渲染引擎在取得内容之后的基本流程： ①解析html以构建dom树 ②构建render树（render

古城微笑少年丶/ 2022年04月15日 02:24/ 0 赞/ 571 阅读

相关浏览器渲染中回流（reflow）与重绘（repaint）

其实我们学习浏览器渲染原理更多的是为了解决性能的问题，如果你不了解这部分的知识，你就不知道什么情况下会对性能造成损伤。并且渲染原理在面试中答得好，也是一个能与其他候选人拉开差距

迷南。/ 2022年03月19日 04:28/ 0 赞/ 436 阅读

相关回流和重绘总结

1.总结 reflow(回流):对DOM树进行渲染，只要修改DOM或修改元素的形状大小，就会触发reflow。 display显示/隐藏元素，显示时占据空间，隐藏时元素不占

怼烎@/ 2022年01月09日 09:29/ 0 赞/ 376 阅读

相关回流和重绘

回流(reflow)：当渲染树(render tree)中的元素由于位置大小变化、显示和隐藏时，浏览器对页面会重新布局，这就是回流；重绘(repaint)：当渲染树中的元

灰太狼/ 2021年10月24日 06:50/ 0 赞/ 350 阅读

相关 js 回流、重绘、渲染(render)树

回流必将引起重绘，重绘不一定引起回流 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

港控/mmm°/ 2021年07月24日 23:04/ 0 赞/ 476 阅读