requestAnimationFrame 和 setTimeout/setInterval 有什么区别？

查看详情

• 在 requestAnimationFrame 出现之前，主要使用 setTimeout/setInterval 来编写 JS 动画，但是 setTimeout/setInterval 有一个显著的缺陷就是时间是不精确的，setTimeout/setInterval 只能保证延时或者间隔不小于设定时间。
• requestAnimationFrame 是浏览器用于定时循环操作的一个接口，类似于 setTimeout，主要用途是按帧对网页进行重绘，让各种网页动画效果（DOM 动画、Canvas 动画、SVG 动画、WebGL 动画）能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。
• requestAnimationFrame 不需要设置时间，采用系统时间间隔（帧率）
• requestAnimationFrame 一旦页面不处于当前标签页就会自动停止刷新
• requestAnimationFrame 是在主线程完成的，如果主线程非常繁忙，动画效果会打折扣

什么是事件？什么是事件流？浏览器事件代理机制的原理是什么？为什么需要事件代理？

查看详情

• DOM 允许 JavaScript 对 HTML 事件作出反应。即操作对应的 HTML 元素时会触发相应的事件
• DOM 结构是一个树形结构，当一个 HTML 元素产生一个事件时，该事件会在元素节点与根节点之间的路径传播，路径所经过的节点都会收到该事件，这个传播的过程可称为 DOM 事件流。IE 最早使用的是事件冒泡事件流，而网景采用的是事件捕获。DOM2 把事件流分为三个阶段，捕获阶段、目标阶段、冒泡阶段，现代浏览器遵循的就是此规范。
• 事件代理又称为事件委托，在祖先 DOM 元素绑定一个事件，当触发子孙级的 DOM 元素事件时利用事件冒泡的原理来触发绑定在祖先级 DOM 的事件。因为事件会从目标元素一层层冒泡至 document 对象。
• 原因：
  • 添加到页面上的事件数量会影响页面的运行性能，如果添加的事件过多，会导致网页性能下降。采用事件代理的方式可以大大减少注册事件的个数。
  • 适用于动态增加的元素。
  • 不用担心注册了事件的 DOM 元素被移除后，可能无法回收其事件处理程序的问题。

DOM 节点创建和修改有哪些常用的 API？

查看详情

• 创建节点
  • createElement
  • createTextNode
  • createDocumentFragment
• 修改节点
  • appendChild
  • insertBefore
  • removeChild
  • replaceChild