本文重点讲一个我们在日常工作中会经常遇到的问题，很多小伙伴不知道如何减少Dom操作中的回流和重绘问题?现在我们来聊聊，2018WEB前端如何减少Dom操作中的回流和重绘问题。
　　什么是回流和重绘?
　　(1)当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。然而，每一个页面至少需要回流一次，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受影响的一部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程为重绘。
　　(2)当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color，这就是重绘。
　　*注意：回流必然会引起重绘，而重绘不一定会引起回流。
　　常见的重绘和回流操作?
　　(1)添加、删除元素(回流+重绘)
　　(2)隐藏元素，display：none(回流+重绘)
　　(3)移除元素，比如改变top，left(jQuery的animate方法就是，该变top，left不一定会回流)，或者移动元素到另外1个父元素中。(回流+重绘)
　　(4)对style的操作(对不同的属性操作，影响不一样)
　　(5)以下属性，只要改动他们的值，就会造成回流，这些属性包括：offsetLeft、offsetTop、offsetWidth、offsetHscrollTop、scrollLeft、scrollWidth、scrollHclientWidth、clientHeight、clientLeft、clientT
　　(6)还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小。
　　如何减少回流和重绘
　　减少回流、重绘其实就是需要减少对 render tree的操作(合并多次Dom和样式的修改)，并减少对一下style信息的请求，尽量利用好浏览器的优化策略。具体方法如下：
　　1.直接改变className，如果动态改变样式，则使用cssText(考虑没有优化的浏览器)
　　// 不好的写法
　　var left = 1;
　　var top = 1;
　　el.style.left = left + &px&;
　　el.style.top = top + &px&;
　　// 比较好的写法
　　el.className += & className1&;
　　// 比较好的写法
　　el.style.cssText += &;
　　left: & + left + &
　　top: & + top + &&;
　　2. 让要操作的元素进行&离线处理&，处理完后一起更新
　　a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘;
　　//不好的写法(模式中所说的反模式)
　　var p,
　　p = document.creatElement('p');
　　t = document.creatTextNode('fist paragraph');
　　p.appendChild(t);document.body.appendChild(p); //将引起一次回流
　　p = document.creatElement('p');
　　t = document.creatTextNode('second paragraph');
　　p.appendChild(t);document.body.appendChild(p); //将再引起一次回流
　　//好的写法
　　var p, t,
　　frag = document.creatDocumentFragment();
　　p = document.creatElement('p');
　　t = document.creatTextNode('fist paragraph');
　　p.appendChild(t);
　　farg.appendChild(p);
　　p = document.creatElement('p');
　　t = document.creatTextNode('second paragraph');
　　p.appendChild(t);
　　farg.appendChild(p);
　　document.body.appendChild(frag); //相比前面的方法，这里仅仅引起一次回流，倘若页面里有很多这样的操作，利用文档随便将会提升很多
　　b) 使用display:none技术，只引发两次回流和重绘; ( 只是减少重绘和回流的次数，display：none 是会引起重绘并回流，相对来说，visibility: hidden只会引起重绘 )
　　c) 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘;
　　//建立克隆镜像var oldNode = document.getElementById('target'), clone = oldNode.cloneNode(true); //深复制// 处理克隆对象的操作....//完成后oldNode.parentNode.replaceChild(clone,oldNode);
　　3.不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存
　　//BAD WAYfor(循环) {el.style.left = el.offsetLeft + 5 + &px&;el.style.top = el.offsetTop + 5 + &px&;} // 这样写好点var left = el.offsetLeft,top = el.offsetTop,s = el. for (循环) { left += 10; top += 10; s.left = left + &px&; s.top = top + &px&; }
　　2018WEB前端如何减少Dom操作中的回流和重绘问题，笔者已经解说完毕，还有疑问之处的朋友，可以点击弹窗联系我们，长沙尚学堂客服妹妹会与您详细解说。
　　推荐阅读：
试听申请表全程面授，不高薪都难
报名成功后，尚学堂工作人员将在24小时内与您联系
主讲：马士兵类型：初级教程
主讲：高淇、裴新类型：初级教程
主讲：肖斌类型：高级教程
主讲：马士兵类型：高级教程
主讲：陈博类型：高级教程
微信公众号您所在位置： &
&nbsp&&nbsp&nbsp&&nbsp
CSS33D行星运转以及浏览器渲染原理教程.docx 18页
本文档一共被下载：
次 ,您可全文免费在线阅读后下载本文档。
下载提示
1.本站不保证该用户上传的文档完整性，不预览、不比对内容而直接下载产生的反悔问题本站不予受理。
2.该文档所得收入(下载+内容+预览三)归上传者、原创者。
3.登录后可充值，立即自动返金币，充值渠道很便利
需要金币：350 &&
CSS33D行星运转以及浏览器渲染原理教程
你可能关注的文档：
··········
··········
CSS3 3D 行星运转以及浏览器渲染原理
3D transform 会启用GPU加速，例如 translate3D, scaleZ 之类，当然我们的页面可能并没有 3D 变换，但是不代表我们不能启用 GPU加速，在非 3D 变换的页面也使用 3D transform 来操作，算是一种 hack 加速法。我们实际上不需要z轴的变化，但是还是假模假样地声明了，去欺骗浏览器。
作者：ChokCoco来源： HYPERLINK &/coco1s/p/5439619.html& \t &_blank& ChokCoco| 13:25
 HYPERLINK &javascript:favorBox('open');& \o &一键收藏，随时查看，分享好友！& \t &_self& ?收藏
 HYPERLINK &javascript:;& ??分享
?
最近入坑 Web 动画，所以把自己的学习过程记录一下分享给大家。
CSS3 3D 行星运转 demo 页面请戳： HYPERLINK &http://chokcoco.github.io/demo/css3demo/html/exampleSolarSystem.html& \t &_blank& Demo。（建议使用Chrome打开）
本文完整的代码，以及更多的 CSS3 效果，在我? HYPERLINK &/chokcoco/css3-& \t &_blank& Github?上可以看到，也希望大家可以点个 star。
嗯，可能有些人打不开 demo 或者页面乱了，贴几张效果图：（图片有点大，耐心等待一会）
CSS3 3D 行星运转效果图
随机再截屏了一张：
强烈建议你点进? HYPERLINK &http://chokcoco.github.io/demo/css3demo/html/exampleSolarSystem.html& \t &_blank& Demo?页感受一下 CSS3 3D 的魅力，图片能展现的东西毕竟有限。
然后，这个 CSS3 3D 行星运转动画的制作过程不再详细赘述，本篇的重点放在 Web 动画介绍及性能优化方面。详细的 CSS3 3D 可以回看上一篇博客： HYPERLINK &/coco1s/p/5414153.html& \t &_blank& 【CSS3进阶】酷炫的3D旋转透视。简单的思路：
1. 利用上一篇所制作的 3D 照片墙为原型，改造而来；
2. 每一个球体的制作，想了许多方法，最终使用了这种折中的方式，每一个球体本身也是一个 CSS3 3D 图形。然后在制作过程中使用 Sass 编写 CSS 可以减少很多繁琐的编写 CSS 动画的过程；
3. Demo 当中有使用 Javascript 写了一个鼠标跟随的监听事件，去掉这个事件，整个行星运动动画本身是纯 CSS 实现的。
下面将进入本文的重点，从性能优化的???度讲讲浏览器渲染展示原理，浏览器的重绘与重排，动画的性能检测优化等:
浏览器渲染展示原理及对web动画的影响
小标题起得有点大，我们知道，不同浏览器的内核（渲染引擎，Rendering Engine）是不一样的，例如现在最主流的 chrome 浏览器的内核是 Blink 内核（在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用），火狐是 Gecko，IE 是 Trident ，浏览器内核负责对网页语法的解释并渲染（显示）网页，不同浏览器内核的工作原理并不完全一致。
所以其实下面将主要讨论的是 chrome 浏览器下的渲染原理。因为 chrome 内核渲染可查证的资料较多，对于其他内核的浏览器不敢妄下定论，所以下面展开的讨论默认是针对 chrome 浏览器的。
首先，我要抛出一点结论：
使用 transform3d api 代替 transform api，强制开始 GPU 加速
这里谈到了 GPU 加速，为什么 GPU 能够加速 3D 变换？这一切又必须要从浏览器底层的渲染讲起，浏览器渲染展示网页的过程，老生常谈，面试必问，大致分为：
1. 解析HTML(HTML Parser)
2. 构建DOM树(DOM Tree)
3. 渲染树构建(Render Tree)
4. 绘制渲染树(Painting)
找到了一张很经典的图：
这个渲染过程作为一个基础知识，继
正在加载中，请稍后...浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。
两种情况清除浮动包括清除子元素的浮动和清除上级元素的浮动，其中清除上级元素的浮动，只需设置clear为both就可以了，而清除子元素的浮动则可以用空标签法、clearfix方法或overflow方法。因清除上级元素的浮动比较简单，而空标签法清除子元素浮动会增加额外标签，所以在这里主要说clearfix方法、overflow方法及偶然发现的inline-block方法。
Ionic is a powerful HTML5 native app development framework that helps you build native-feeling mobile apps all with web technologies like HTML, CSS, and Javascript.Ionic is focused mainly on the look and feel, and Integration Cordova、Angular、Node、Grunt、Bowser、Sass .Mixed development solution.
闭包（Closure）是词法闭包（Lexical Closure）的简称。当一个函数即便在离开了它的词法作用域(Lexical Scope)的情况下，仍然存储并可以存取它的词法作用域(Lexical Scope)，这个函数就构成了闭包。
闭包是函数和引用环境组成的整体，是函数的局部变量集合，只是这些局部变量在函数返回后会继续存在
闭包就是就是函数的“堆栈”在函数返回后并不释放，我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配
当在一个函数内定义另外一个函数就会产生闭包
浏览器的渲染机制
浏览器在获取到后端传过来的内容后，就开始执行render流程。不同内核的浏览器render流程略有不同，大致的工作流程：
解析HTML(HTML Parser)
构建DOM树(DOM Tree)
渲染树构建(Render Tree)：渲染树和DOM树比较相似，但渲染树能够根据style进行调整
绘制渲染树(Painting)：&&文章详情
一些关于性能优化的总结
这是一篇自己学习用的文章小结，都摘抄自各大神的文章，会持续更新，如果你看到了，并且看不懂，别嘲笑我，毕竟菜鸟的理解方式是旋转跳跃的。哈哈哈~
1、减少css的回流和重绘。
当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
回流必将引起重绘，而重绘不一定会引起回流。当页面布局和几何属性改变时就需要回流。假设你直接操作body，比如在body最前面插入1个元素，会导致整个render tree回流，这样代价当然会比较高，但如果是指body后面插入1个元素，则不会影响前面元素的回流。
如何减少回流、重绘
1. 直接改变className (尽可能在 DOM 树的最末端)
2. 避免设置多项内联样式
3. 应用元素的动画，使用 position 属性的 fixed 值或 absolute 值。不影响其他元素的布局，所它他们只会导致重新绘制，而不是一个完整回流。
4. 权衡平滑和速度
5. 避免使用table布局
6. 避免使用CSS的JavaScript表达式 (仅 IE 浏览器)
(C) Knowsky.com