JavaScript页面回流与重绘

JavaScript页面回流与重绘

目录

1.DOMAPI

1.1获取元素相关结点API

1.2增加节点API

2.回流与重绘

2.1CSS的书写顺序影响

2.2节点渲染优化

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标签是行级元素,不能设定widthheight值,如果我们在最下面写一行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页面回流与重绘内容请搜索易知道(ezd.cc)以前的文章或继续浏览下面的相关文章希望大家以后多多支持易知道(ezd.cc)!

推荐阅读

    Javascript中 toFixed四舍六入方法

    Javascript中 toFixed四舍六入方法,浮点,手动,银行家,进,javascript中toFixed使用的是银行家舍入规则。银行家舍入:所谓银行家舍入法,其实

    javascript怎么隐藏元素值

    javascript怎么隐藏元素值,隐藏,元素,设置,显示,位置,属性,javascript隐藏元素值的方法:1、设置元素style属性中的display,语句如“t.style.displ

    javascript对象怎么转换成字符串

    javascript对象怎么转换成字符串,字符串,参数,对象,序列化,属性,数组,在javascript中可以使用“JSON.stringify()”方法将对象转换成字符串,其语

    javascript怎么将字母转为小写

    javascript怎么将字母转为小写,方法,字符串,函数,语法,主机,语言,javascript字母转为小写的方法:1、使用toLowerCase()函数,语法“string.toLower

    javascript怎么实现二维码

    javascript怎么实现二维码,二维码,二维码生成,下载,插件,扫描二维码,操作,javascript实现二维码的方法:1、下载qrcodejs插件;2、使用qrcode实现二

    javascript如何获取字符串长度

    javascript如何获取字符串长度,字符,获取,属性,字符串长度,字符串,输出,javascript获取字符串长度的方法:1、使用length属性按字符来获取字符串

    javascript怎么类型转换

    javascript怎么类型转换,方法,字符串,转换,转换成,类型,数字,方法:1、使用“+”运算符自动进行转换。2、使用JS内置的函数进行转换,例toString()

    javascript如何去掉空格

    javascript如何去掉空格,去除,替换,方法,删除,文本,字符串,javascript去掉空格的方法:1、通过“str.replace(/\s+/g,"");”去除所有空格;2、通

    javascript中定义数组的方法有哪些

    javascript中定义数组的方法有哪些,数组,数组名,列表,元素,语句,方法,javascript中定义数组的方法:1、使用“var 数组名=[值列表]”语句;2、使用

    Javascript怎么检查对象是否为空

    Javascript怎么检查对象是否为空,对象,方法,字符串,数组,检查,语句,方法:1、将对象转化为json字符串,判断该字符串是否为“{}”;2、使用“$.isEmpt

    javascript怎么关闭当前窗口

    javascript怎么关闭当前窗口,窗口,脚本,本页,教程,提示,关闭窗口,javascript中可以利用window对象的opener属性、open()和close()方法来关闭当