目录

什么是dom？

dom 事件模型？

什么是事件冒泡，它是如何工作的？如何阻止事件冒泡、默认行为?

JavaScript 动画和 CSS3 动画有什么区别？

事件三要素

谈谈事件委托的理解？

描述浏览器的渲染过程，DOM 树和渲染树的区别

如何最小化重绘(repaint)和回流(reflow)

什么是dom？

DOM是一种用于HTML和XML文档的编程接口，他给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式

dom 事件模型？

DOM事件模型分为两种：事件捕获和事件冒泡

事件捕获以点击事件为例：同类事件会由 根--目标的祖先元素--目标的父元素--目标元素

事件冒泡和事件捕获截然相反，从内到外依次触发：目标元素--目标元素的父元素--父元素的父元素--根

什么是事件冒泡，它是如何工作的？如何阻止事件冒泡、默认行为?

在一个对象上触发某类事件，这个事件会向这个对象的父级对象传播，从里到外，直至它被处理，或者它到达了对象层次的最顶层，即 document 对象

阻止事件冒泡的方法

（1）w3c方法是：event.stopPropagation(); 事件处理过程中，阻止冒泡事件，但不会阻止默认行为

（2）IE则是使用event.cancelBubble = true 阻止事件冒泡

（3）return false; jq里面事件处理过程中，阻止冒泡事件，也阻止默认行为

JavaScript 动画和 CSS3 动画有什么区别？

1、CSS 动画

优点

• js动画控制能力强，可以在动画博凡过程中对动画进行精细控制，开始、暂停、终止、取消都是可以做到的

• 动画效果比css3动画丰富，比如曲线运动，冲击闪烁，视差滚动效果，只有js动画才能完成

• js动画大多数情况下没有兼容性问题，而css3动画有兼容性问题

• 缺点：
  1.1) 运行过程控制较弱,无法附加事件绑定回调函数。CSS 动画只能暂停,不能在动画中
  寻找一个特定的时间点，不能在半路反转动画，不能变换时间尺度，不能在特定的位置添
  加回调函数或是绑定回放事件,无进度报告。
  1.2) 代码冗长。想用 CSS 实现稍微复杂一点动画,最后 CSS 代码都会变得非常笨重。

2、JS 动画

2.1）JavaScript 动画控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、
回放、终止、取消都是可以做到的。
2.2）动画效果比 css3 动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只
有 JavaScript 动画才能完成。
2.3）CSS3 有兼容性问题，而 JS 大多时候没有兼容性问题。

缺点：
2.1）JavaScript 在浏览器的主线程中运行，而主线程中还有其它需要运行的 JavaScript
脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情
况。
2.2）代码的复杂度高于 CSS 动画

3、css 动画和 js 动画的差异

3.1）代码复杂度，js 动画代码相对复杂一些 。
3.2）动画运行时，对动画的控制程度上，js 能够让动画，暂停，取消，终止，css 动画不
能添加事件。
3.3）动画性能看，js 动画多了一个 js 解析的过程，性能不如 css 动画好

事件三要素

1、事件源、就是你点的那个 div，触发的对象
2、事件类型、表示动作，比如点击、滑过等
3、事件处理函数（事件处理程序）、表示结果，比如点开关跳转到另个页面

谈谈事件委托的理解？

事件代理则是一种简单的技巧，把事件处理器添加到一个上级元素上，这样就
避免了把事件处理器添加到多个子级元素上。这主要得益于浏览器的事件冒泡机制。

优点：
1、减少事件注册，节省内存。
2、在 table 上代理所有 td 的 click 事件。
3、在 ul 上代理所有 li 的 click 事件。
4、简化了 dom 节点更新时，相应事件的更新。
5、不用在新添加的 li 上绑定 click 事件。
6、当删除某个 li 时，不用移解绑上面的 click 事件。
缺点：
1、事件委托基于冒泡，对于不冒泡的事件不支持
2、层级过多，冒泡过程中，可能会被某层阻止掉。
3、理论上委托会导致浏览器频繁调用处理函数，虽然很可能不需要处理。所以建议就近委托，
比如在 table 上代理 td，而不是在 document 上代理 td。
4、把所有事件都用代理就可能会出现事件误判。比如，在 document 中代理了所有 button 的 click
事件，另外的人在引用改 js 时，可能不知道，造成单击 button 触发了两个 click 事件

描述浏览器的渲染过程，DOM 树和渲染树的区别

1、浏览器的渲染过程：
解析 HTML 构建 DOM(DOM 树)，并行请求 css/image/js
CSS 文件下载完成，开始构建 CSSOM(CSS 树)

CSSOM 构建结束后，和 DOM 一起生成 Render Tree(渲染树)
布局(Layout)：计算出每个节点在屏幕中的位置
显示(Painting)：通过显卡把页面画到屏幕上
2、DOM 树 和 渲染树 的区别
DOM 树与 HTML 标签一一对应，包括 head 和隐藏元素
渲染树不包括 head 和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有
对应的 css 属性

如何最小化重绘(repaint)和回流(reflow)

什么是重绘 Repaint 和重排 （回流 reflow）
重绘:当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需要浏览器
根据元素的新属性重新绘制，使元素呈现新的外观叫做重绘。
重排（回流）:当 render 树中的一部分或者全部因为大小边距等问题发生改变而需要 DOM 树重新
计算的过程
重绘不一定需要重排（比如颜色的改变），重排必然导致重绘（比如改变网页位置）

方法：
1、需要要对元素进行复杂的操作时，可以先隐藏(display:"none")，操作完成后再显示
2、需要创建多个 DOM 节点时，使用 DocumentFragment 创建完后一次性的加入 document
缓存 Layout 属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回流
3、尽量避免用 table 布局（table 元素一旦触发回流就会导致 table 里所有的其它元素回流）
4、避免使用 css 表达式(expression)，因为每次调用都会重新计算值（包括加载页面）
5、尽量使用 css 属性简写，如：用 border 代替 border-width, border-style, border-color
6、批量修改元素样式：elem.className 和 elem.style.cssText 代替 elem.style.xxx