写一个回流

回流是指浏览器根据当前文档的样式和布局信息，计算并重新绘制网页的过程。（改变窗口大小、元素尺寸，添加删除DOM...）

const element = document.createElement('div')
element.textContent = 'Hello World'
document.body.appendChild(element)

element.style.width = '300px'
element.style.height = '500px'

element.offsetWidth // 强制触发回流

element.style.opacity = '0.5'
element.style.transform = translateX(50px)

element.offsetHeight // 强制触发回流

回流优化操作：

用CSS3动画来代替js操作，css3动画会使用硬件加速；
尽量一次性获取所有需要的布局信息，不要频繁读取；
对频繁操作的元素使用离线DOM或虚拟DOM进行批量操作，减少回流次数；
尽量使用transform来替代top和left来改变元素位置；

使用事件委托，减少DOM元素的增删改查。

// 事件委托———给父元素绑定事件，去增删去处理子元素。只需绑定一次事件，就可以管理多个子元素
<html>
    <ul id="list">
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
</ul>    
</html>
<script>
var list = document.getElementById('list')
list.addEventListener('click', (event) => {
    var target = event.target
    console.log(target) // <li>list1\2\3</li>
    if (target.tagName === 'LI') {
        list.removeChild(target)
    }
})
</script>

重绘是什么

不影响布局的情况下，去改变元素的样式。（改变背景颜色、边框颜色，文本颜色、透明度...） ——这个其实没什么好讲的，改变样式罢了

addEventListener

是一个事件监听的方法，给一个元素注册一个监听事件，再指定一个函数，当事件触发时，执行该函数。
element.addEventListener(event, () => {})
event：要监听的事件，'click'、'keydown'
参数为 (e) ，e.target 定位子元素

说一下this

this是一个特殊的指示符，他可以代表当前执行代码的对象。用一句话总结就是谁调用我，我指向谁。
全局调用函数，指向window
在对象里调用函数，指向所在对象
构造函数实例化对象时，指向新创建的实例对象
通过call()、aplly()、bind()显示指定this
箭头函数没有this，他指向定义时所在作用域中的this。

（在传统函数中，this的值是在函数调用过程中动态确定的，它取决于函数什么时候被调用）

改变this指向的方法

使用call()和apply()方法：这两个方法可以立即调用一个函数，并临时修改函数执行时的this指向
- call和apply的区别：传入的参数不同，call可以传入多个参数，而apply只能穿两个参数，并且第二个参数是一个数组
使用bind()方法：bind方法必须手动执行，可以传入多个参数
箭头函数：自己没有this绑定机制，但可以捕获到外层作用域的this值

CALL() APPLY() BIND()
自动自动手动
多个参数两个参数多个参数

CALL()	APPLY()	BIND()
自动	自动	手动
多个参数	两个参数	多个参数

JS针对性总结：说一下回流和重绘、addEventListener是什么、再讲一下this

写一个回流

重绘是什么

addEventListener

说一下this

改变this指向的方法