9.29JS内容

重绘与回流（重排）：

重绘：repaint 当元素样式的改变不会影响布局时，浏览器将会用重绘对元素进行更新，此时只需UI层面的重新像素绘制，耗损少，常见操作：改变元素颜色，背景色等。

回流：reflow当元素尺寸，结构发生改变或触发属性时浏览器会重新计算渲染到页面内，发生回流，常见操作：让标签显示和影藏，改变宽高，通过 JS 往页面添加DOM元素，通过JS获取元素尺寸大小或偏移量等。

重绘不一定引起回流，但回流一定引起重绘。

怎样减少重绘和回流？

css：

    1.使用transform 替代top ,left  

    2.使用visibility替换display：none，前者只会引起重绘，后者会改变布局引发回流（个人习惯写     的都是display：none 改！！）

    3.避免使用table布局，可能小的改动会造成整个table的重新布局table元素一旦触发回流就会导      致table里所有其他元素回流。（使用表单元素时不加编辑器报错， 解决！！！）

    4.避免设置多层内联样式，css选择符合从右往左匹配查找，避免节点层级过多。

    5.尽量使用css属性简写，如border代替border-width，border-style（需注意一下写法）

JS:

    1.避免频繁操作样式，最好一次性重写style属性，或将样式列表定义为class并一次性更改class      属性。（都有反复改样式，最好先想清楚自己需要怎样的样式在写）

    2.避免频繁操作DOM，创建一个documentFragment，在它上面应用所有的DOM操作，最后把        他添加到文档中（虚拟文档 ===有点忘）。

    3.避免频繁读取会引发回流/重绘的属性，如需多次使用。用一变量缓存。  

    4.对具有复杂页面动画的元素使用绝对定位，使其脱离文档，否则会引起父元素及后续元素频       繁回流。

    5.避免触发同页布局

浏览器的渲染过程：

1.解析html创建DOM树

2.解析css创建CSSOM（css rule true    css规则树）

3.将DOM树和CSSOM树结合，合并成一个Render Tree （渲染树）

4.根据渲染树。去布局绘制并显示

客户端（浏览器）到服务器：

1.先进行域名解析

2.进行http请求，三次握手四次挥手（组织语言描述完整）

3.加载解析html：代码运行顺序丛上往下一行一行执行，在执行的过程中，会解析html标签创建一个DOM树，解析css创建CSSOM，将DOM与CSSOM结合，合成一个Render Tree

事件三阶段：先捕获 后目标  再冒泡

什么是事件委托（事件代理）：

利用了事件冒泡机制触发，当多个标签需要绑定同一个事件时，把这个事件委托给他们的某个祖先，让其担当事件监听的职务。

优点：1.可以减少事件注册，节省大量内存占用

            2.可将事件应用于动态添加的子元素上

缺点：1.使用不当会造成事件在不应该触发的时候触发

防抖和节流：

防抖：针对高频触发事件，让事件处理函数（事件处理的逻辑代码）延迟一段时间执行，如果在这段时间内再次触发，则重新开始计时，直到在重新计时这段时间内，没有再次触发执行事件处理函数。

节流：针对高频触发事件，让事件处理函数每隔一段时间执行一次稀释执行频率。