JavaScript - WebAPI（进阶）面试题总结

1. 什么是DOM？

DOM 是 W3C（万维网联盟）的标准；
DOM 定义了访问 HTML 和 XML 文档的标准；
是 Document Object Model - 文档对象模型的缩写；
顶级对象：document(window.document)；
是中立于平台和语言的接口，它允许程序和脚本动态访问和更新文档、结构、样式；

2. dom节点的 Attribute 和 Property 有何区别？

什么是 Property：
- 每个 DOM 节点都是一个 object 对象，有自己的 prototype 和 method；
- 原则上 prototype 应该仅供 js 操作，不会出现在 html 中（默认属性除外：id/src/href/className/dir/title/lang 等），和其他 js object 一样，自定义的 prototype 也会出现在object的for-in遍历中；
什么是 Attribute：
- attribute出现在唉 dom 中，js提供了getAttribute/setAttribute 等方法来获取和改变它的值，最后作用于html中，可以影响innerHTML获取的值，可以通过访问dom节点的attribute属性来获取该节点的所有attribute（在IE < 9中，attribute获取和改变的实际上是prototype）；
两者的区别：
- 自定义的 Prototype 与 Attribute 不同步，不相等；
- 非自定义的 DOM prototype 与 attribute 是有条件同步的；
- 非自定义的属性(id/src/href/name/value 等)，通过 setAttribute 修改其特性值可以同步作用到 property 上，而通过.property 修改属性值有的(value)时候不会同步到 attribute 上，即不会反应到 html 上(除以下几种情况，非自定义属性在二者之间是同步的)。

3. dom结构怎样添加、移除、赋值、创建和查找结点？

创建新节点：

js 复制代码

document.createDocumentFragment(); // 创建一个DOM片段
document.createElement(); // 创建一个具体元素
document.createTextNode(); // 创建一个文本节点

添加、移除、替换、插入：

js 复制代码

appendChild(); // 添加节点
removeChild(); // 移除节点
replaceChild(); // 替换节点
insertBefore(); // 插入节点

查找：

js 复制代码

getElementByTayName(); // 通过标签名称查找元素
getElementByName(); // 通过元素的 name 属性的值
getElementById(); // 通过元素Id查找
getElementByClassName(); // 通过元素类型

// 根据选择器查找元素
document.querySelector(); //查找满足条件的第一个元素
document.querySelectororAll(); // 查找满足条件的所有元素

parentNode(); // 父节点
children // 亲子节点（伪数组）
previousElementSibling // 上一个兄弟节点
nextElementSibling // 下一个兄弟节点

4. 事件监听三要素

事件源、事件类型、事件处理函数；

5. 事件流、事件捕获、事件冒泡、事件委托

事件捕获:
- 以点击事件为例，同类型的事件会由根 ➡ 目标的祖先元素 ➡ 目标的父元素 ➡ 目标元素；
事件传播：
- 事件捕获和事件冒泡都有事件传播阶段，传播阶段就是事件从触发开始到结束的过程；
- 优先级：先捕获，再冒泡；
事件流：事件完整执行过程中的流动路径，主要有三个阶段：
- 事件捕获阶段：从祖先元素到目标元素（从外到内）；
- 事件目标阶段；
- 事件冒泡阶段：从目标元素到祖先元素（从内到外）；
事件冒泡：
- 在一个对象上触发某类事件，这个事件会向该对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都被激活），或者它到达了对象层次的最顶层（document对象）
事件委托：将事件绑定在目标元素的祖先元素身上，避免了给多个子元素绑定事件，主要原理是事件冒泡机制：
- 优点：
  - 减少事件注册，节省内存；
  - 简化了DOM节点更新时，相应事件的更新；
  - 不用在新添加的元素上绑定事件；
  - 当删除某个元素时，不用解绑该元素上面的事件
- 缺点：
  - 事件委托基于事件冒泡，对于不冒泡的事件不支持；
  - 层级过多，冒泡过程中，可能会被某层阻止掉；
  - 理论上委托会导致浏览器频繁调用事件处理函数，很可能有些事件不需要处理，所以建议就近委托；
  - 把所有事件都用代理就可能会出现事件误判；

6. 如何阻止事件冒泡，事件的默认行为？

阻止事件冒泡：
- event.stopPropagation();
- IE：evnet.cancelBuddle = true;；
阻止事件默认行为：
- event.preventDefault();；
- IE：e.return Value = false;；

7. JS动画和 CSS动画有什么区别

JS动画：
- 优点：
  - 动画控制能力强，可以再动画播放过程中对动画进行控制（开始、暂停、快进/退等等）；
  - 动画效果丰富（曲线运动，视差滚动）；
  - JS动画大多时候没有兼容性问题；
- 缺点：
  - 代码复杂程度高；
  - JS在浏览器主线程中运行，而主线程还有其他需要运行的脚本、样式计算、布局绘制任务等，这样就有可能出现线程阻塞的情况，导致动画丢帧；
CSS动画：
- 优点：
  - 浏览器可以对动画进行优化；
  - 代码相对简单，性能调优方向固定；
  - 相对帧速表现不好的浏览器，C3可以自动降级，而JS需要撰写额外的代码；
- 缺点：
  - 运行过程控制较弱；
  - 如果要实现复杂的动画，代码就会变得很多；
JS动画和 CSS动画差异：
- 代码复杂程度上：JS代码相对复杂一些；
- 动画运行时，对动画的控制程度上，JS可以操作动画，而CSS就相对显得笨重；
- 动画性能看，JS动画多了一个JS解析过程，解析功能不如CSS动画好；
总结：
- 简单的状态切换，不需要对中间过程控制，CSS动画是优选；
- 复杂的动画，应该使用JS动画实现；

8. DOM 和 BOM 的区别？

BOM：
- BOM 是 Browser Object Model 的缩写，即浏览器对象模型；
- BOM 没有相对标准；
- BOM 的顶级对象是 window；
DOM：
- DOM 是 Document Object Model 的缩写，即文档对象模型；
- DOM 是 W3C 的标准；
- DOM 的顶级对象是 document (实际上是 window.document)；

9. JS 中的定时器有哪些？它们的区别和用法是什么？

定时器有两种：间歇函数 + 延迟函数；
间歇函数（计时器）：
- setInterval(callback, time)；
- 按照指定的周期（以毫秒为单位）来调用函数或计算表达式；
- setInterval()方法会不停的调用函数，直到 cleatInterval() 被调用或者窗口关闭，由setInterval()返回的ID值可用作cleatInterval()方法的参数；
延迟函数（定时器）：
- setTimeout(callback, time)；
- 用于在指定的毫秒数后调用函数或计算表达式；
区别：
- 间歇函数是按照一定的周期去执行；
- 延迟函数只会执行一次；

10. document.write() 和 innerHTML 的区别？

document.write()是直接写入到页面的内容流，如果在写之前没有调用document.open()，浏览器会自动调用open()，每次写完关闭之后会重新调用该函数，会导致页面被重写；
innerHTML则是 DOM 页面元素的一个属性，代表该元素的html内容；
innerHTML将内容写入到某个DOM节点，不会导致页面重绘；
innerHTML在很多情况下都优于document.write()，原因在于其允许更精确的人控制要刷新页面的那个部分；

11. 什么是window对象，什么是document对象？

window对象：
- 表示浏览器中打开的窗口；
- 所有的全局函数和对象都属于window对象的属性或方法；
- 它是一个顶层对象，而不是另一个对象的饿属性
document对象：
- 该对象是window对象的一个属性，是显示于窗口或框架内的一个文档；
区别：
- window指窗体，document指页面；
- document是window的一个子对象；
- 用户不能改变document.location（因为这是当前显示文档的位置），但是，可以改变widnow.location（用其他文档取代当前文档）；
- window.location本身也是一个对象，documnet.location不是对象；

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

渲染过程：
- 解析HTML构建DOM树，并请求css、img、js；
- css文件下载完成之后，开始构建CSS树；
- CSS树构建完毕之后，和DOM一起生成渲染树；
- 布局：计算出每个节点在屏幕中的位置；
- 显示：通过显卡把页面画在屏幕上；
DOM树和渲染树区别：
- DOM树与HTML标签一一对应，包括head标签和隐藏元素；
- 渲染树不包括head标签和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应的css属性；

13. 如何最小化重绘和重排（回流）？

重绘：
- 当前元素的一部分属性发生改变，如外观、颜色等不会引起布局变化，只需要浏览器根据元素的新属性重新绘制，使元素呈现新的外观叫做重绘；
重排（回流）：
- 当渲染树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程称为重排；
重绘不一定需要重排，重排必然导致重绘；
最小化方法：
- 需要要对元素进行复杂的操作时，可以先隐藏(display:"none")，操作完成后再显示；
- 需要创建多个 DOM 节点时，使用 DocumentFragment 创建完后一次性的加入 document 缓存 Layout 属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回流；
- 尽量避免用 table 布局（table 元素一旦触发回流就会导致 table 里所有的其它元素回流）；
- 避免使用 css 表达式(expression)，因为每次调用都会重新计算值（包括加载页面）；
- 尽量使用 css 属性简写，如：用 border 代替 border-width, border-style, border-color；
- 批量修改元素样式：elem.className 和 elem.style.cssText 代替 elem.style.xxx；

14. 怎样终止forEach？

错误用法：
- continue、break、return；
forEach是专门用来循环数组，可以直接取到元素，同样也可以取到索引的值，但是存在局限性，就是不能用常规方法来结束循环；
正确做法：
- 使用抛出异常的方式来终止forEach循环；

js 复制代码

const arr = [1, 2, 3, 4, 5];
try {
    arr.forEach(item => {
        if (item >= 3) throw Error();
    });
} catch (err) {
    console.log('终止forEach循环');
}

前端面试题 ===> 【JavaScript - WebAPI（进阶）】

JavaScript - WebAPI（进阶） 面试题总结

1. 什么是DOM？

2. dom节点的 Attribute 和 Property 有何区别？

3. dom结构怎样添加、移除、赋值、创建和查找结点？

4. 事件监听三要素

5. 事件流、事件捕获、事件冒泡、事件委托

6. 如何阻止事件冒泡，事件的默认行为？

7. JS动画 和 CSS动画有什么区别

8. DOM 和 BOM 的区别？

9. JS 中的定时器有哪些？它们的区别和用法是什么？

10. document.write() 和 innerHTML 的区别？

11. 什么是window对象，什么是document对象？

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

13. 如何最小化重绘和重排（回流）？

14. 怎样终止forEach？

JavaScript - WebAPI（进阶）面试题总结

7. JS动画和 CSS动画有什么区别