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页面回流与重绘内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了JavaScript基本类型值-Number类型的相关知识，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章介绍了js使弹层下面body禁止滚动的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
JavaScript中Window对象stop()方法用于停止页面载入,该方法类似在浏览器上点击停止载入按钮,如果页面在载入图片或框架(iframe)时间过长,我门可以使用该方法来停止载入,可以应用在判断页面载入时间,过长就不加载特效2023-09-09
这篇文章主要为大家详细介绍了swiper自定义分页器的样式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。这种赋值语法极度简洁，同时还比传统的属性访问方法更为清晰，下面这篇文章主要给大家介绍了关于在es6解构时应该注意的点，需要的朋友可以参考下。2017-08-08
下面小编就为大家带来一篇laydate 显示结束时间不小于开始时间的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
今天小编就为大家分享一篇layui 富文本赋值，取值，取纯文本值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要给大家介绍了关于JavaScript如何调用C++模块中函数的相关资料,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-01-01
javascript移出节点removeChild()使用介绍
这篇文章主要介绍了javascript节点操作移出节点removeChild()的使用,需要的朋友可以参考下2014-04-04
解决IE下select标签innerHTML插入option的BUG（兼容IE,FF,Opera,Chrome,Safa
在ie下面使用innerHTML来插入option选项的话，ie会去掉前面的<option>，并拆分成多个节点，这样会造成select的出错2010-05-05
最新评论