重绘和重排

重绘和重排？
重排，又叫回流
浏览器运行机制：–
1、 构建DOM树 生成节点
2、 构建渲染树 css
3、 布局渲染树 确定渲染位置
4、 绘制渲染树 开始渲染

重绘： 一个元素外观的改变，会触发元素的重绘。如：color、background-color
重排（回流、reflow）：元素的规模尺寸、布局、隐藏等行为改变而需要重新构建，这就称为回流

重排必定引发重绘
重排触发条件：

1、 页面元素初始化
2、 元素位置改变
3、 添加删除可见的DOM元素
4、 元素尺寸的改变—— 大小、外边距，边框
5、 浏览器窗口尺寸的变化 resize事件发生时
6、 填充内容的改变
7、 读取某些元素的属性（offsetLeft/Top/Height/Width，clientTop/Left/Height/Width，scrollTop/Left/Height/Width，width/Height）

重绘重排的代价： 耗时，导致浏览器卡顿 所以，不要经常操作DOM元素

优化：
1、 浏览器自己的优化：浏览器会维护1个队列，等队列中的操作到了一定的数量或到了一定的时间间隔，浏览器就会Flush队列，进行一个批处理，这样就会让多次的回流、重绘变成一次回流重绘
2、 减少对DOM的操作：
A、 直接改变元素的className
B、 display: none，先设置为none,然后进行页面布局操作，完成后再设置为block，这样就只引发两次回流和重绘
C、 使用cloneNode 和 replaceChild，引发一次回流和重绘
D、 将需要多次重排的元素，position设置为absolute或fixed，脱离文档流，它的变化就不会影响到别的元素了
E、 如果需要创建多个DOM，使用DocumentFragment创建完成后一次性加入document

网页验证码中的作用（几种常见验证登录码）
作用：1、防止恶意登录注册 2、验证用户的合法性

功能怎么做？ 1、 大部分都是购买使用 2、前端通过发送接口，把手机号码传给后端，后端和第三方对接，向手机发送验证码，（即前端只需要调接口，大部分工作在后端 ￣□￣｜｜…….）

可参考网址： 聚合、极验

滑动验证码： 1、购买后，前端引入js，按照文档来就行了，前端只需要调接口