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标签是行级元素，不能设定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页面回流与重绘
目录 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>
-
高性能JavaScript 重排与重绘(2)
先回顾下前一篇文章高性能JavaScript DOM编程,主要提了两点优化,一是尽量减少DOM的访问,而把运算放在ECMAScript这一端,二是尽量缓存局部变量,比如length等等,最后介绍了两个新的API querySelector()以及querySelectorAll(),在做组合选择的时候可以大胆使用.而本文主要讲的是DOM编程可能最耗时的地方,重排和重绘. 1.什么是重排和重绘 浏览器下载完页面中的所有组件--HTML标记.JavaScript.CSS.图片之后会解析生成两个内部数
-
js生成缩略图后上传并利用canvas重绘
一般在处理图片上传时,通常的逻辑都是将源图片上传到服务器端,再由服务器端的语言进行缩放大小的操作. 此种模式一般可以满足大部分的需求,但当我们所需要的图片仅仅是一个符合规定大小的源图片的缩略图,再使用此种模式,将是一种浪费服务端资源以及带宽的方式,故我们考虑在浏览器端生成小图后再进行上传操作. //以下为源代码 复制代码 代码如下: function drawCanvasImage(obj,width, callback){ var $canvas = $('<canvas></canv
-
高性能WEB开发 页面呈现、重绘、回流。
页面呈现流程 在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类似的. 1. 浏览器把获取到的html代码解析成1个Dom树,html中的每个tag都是Dom树中的1个节点,根节点就是我们常用的document对象(<html> tag).dom树就是我们用firebug或者IE Developer Toolbar等工具看到的html结构,里面包
-
Web面试常问回流reflow与重绘repaint原理及区别
目录 浏览器的渲染机制 回流 与 重绘 回流 导致回流的操作: 重绘 导致重绘的操作: 浏览器的渲染机制 1.浏览器采用两个引擎来处理页面的工作, 不同的浏览器使用的渲染引擎不一样 渲染引擎: Chrom和Safari使用"WebKit", Firefor使用"Geoko" js引擎 2.浏览器会把html解析成 DOM树, 把css解析成 CSSOM(CSS对象模型); 3.接着会把 DOM树 和 CSSOM, 结合产生 render tree(渲染树); 4.渲
-
浅谈重绘和回流的解析
目录 重绘和回流: 关于字体颜色的设置: 关于替代: 关于操作html: 重绘和回流: repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲染. reflow(渲染),与repaint区别就是他会影响到dom的结构渲染,同时他会触发repaint,他会改变他本身与所有父辈元素(祖先),这种开销是非常昂贵的,导致性能下降是必然的,页面元素越多效果越明显
-
浅谈DOM的操作以及性能优化问题-重绘重排
写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用收费桥梁连接,ECMAScript每次访问DOM,都要途径这座桥,并交纳"过桥费",访问DOM的次数越多,费用也就越高.因此,推荐的做法是尽量减少过桥的次数,努力待在ECMAScript岛上.我们不可能不用DOM的接口,那么,怎样才能提高程序的效率? 既然
-
了解重排与重绘
前言 浏览器下载完页面中的所有内容:HTML.JavaScript.CSS.图片--之后会解析并生成两个内部数据结构: DOM树:表示页面结构 渲染树:表示DOM节点如何显示 DOM树中的每一个需要显示的节点在渲染树中至少存在一个对应的节点(隐藏的DOM元素在渲染树中没有对应的节点).渲染树中的节点被称为"帧"或者"盒子",理解页面元素为一个具有填充(padding).边距(margin).边框(border)和位置(position)的盒子.一旦DOM树和渲染树构
-
使用重绘项美化WinForm的控件
如果你觉得项目中的ComboBox.ListBox或其它的Winforms控件不能满足你的显示要求,包括窗体在内很多控件都支持重绘修改显示样式.下面的示例完成对ComBox数据项的重绘,希望能起到抛砖引玉的作用. 显示源代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq;
-
基于jquery实现图片相关操作（重绘、获取尺寸、调整大小、缩放）
本文为大家分享了四个jquery图片常见操作,供大家参考,具体内容如下 1.关于图片大小的重绘,你可以在服务端来实现,也可以通过JQuery在客户端实现. $(window).bind("load", function() { // IMAGE RESIZE $('#product_cat_list img').each(function() { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $(
-
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript.不要编写重复性的脚本.要把JavaScript当作糖果工具,只是起到美化作用.别给你的网站添加大量的JavaScript代码.只有必要的时候用一下.只有确实能改善用户体验的时候用一下. 尽量减少DOM访问 使用JavaScript访问DOM元素很容易,代码更容易阅读,但是速度很慢.下面介绍几个要点:限制使用JavaScript来修饰网页布局,把针对访问元素的引用缓存起来.有时,当你的网站依赖大量的DOM改动时,就应该考虑限制你的标记.这是改用