JavaScript页面回流与重绘
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;
}
到此这篇关于JavaScript页面回流与重绘的文章就介绍到这了,更多相关JavaScript页面回流与重绘内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Typescript定义多个接口类型声明的方式小结,在 TypeScript 中,您可以使用交叉类型(&)或联合类型(|)来组合多个接口,从而实现多个接口类型的混合,文中通过代码讲解的非常详细,需要的朋友可以参考下2025-01-01
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
下面小编就为大家带来一篇浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
本篇文章主要介绍了解决浏览器会自动填充密码问题的方法。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
这篇文章主要介绍了微信小程序如何实现点击图片放大功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-01-01
本篇文章主要是对JS获取文本框,下拉框,单选框值的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇文章主要为大家详细介绍了微信小程序开发实现轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
本文给大家分享一段实例代码给大家详细介绍了JavaScript实现短信倒计时60s功能，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-10-10
javascript中的Base64、UTF8编码与解码详解
本文给大家介绍的是javascript中的Base64、UTF8编码与解码的函数源码分享以及使用范例，十分实用，推荐给小伙伴们，希望大家能够喜欢。2015-03-03
这篇文章主要给大家介绍了关于Three.js中矩阵和向量使用的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Three.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
在 JavaScript 开发中,对象和数组的复制是一个非常常见的操作,无论是函数参数传递、状态管理,还是避免不必要的副作用,了解和掌握各种复制方式至关重要,我们将系统梳理 JavaScript 中的几种常见复制方法,并对其应用场景进行详细说明,需要的朋友可以参考下2024-10-10
最新评论