星哥の面试题Day9

面试题系列均来自鱼皮的知识星球——编程导航

用 CSS 和 JS 来实现动画分别有哪些优缺点？

用 CSS 和 JS 来实现动画各有其优缺点，具体如下：

使用 CSS 实现动画的优缺点：

优点：

硬件加速：CSS 动画会使用浏览器的 GPU 来进行硬件加速，能够更加流畅和高效地运行。
简单易用：CSS 动画通常只需要几行代码就能实现基本的动画效果，不需要使用 JavaScript 来控制动画。
低资源占用：CSS 动画通常比 JavaScript 动画使用更少的 CPU 和内存资源，因此更适合用于简单的动画效果。

缺点：

限制较大：CSS 动画在实现复杂的动画效果时，受到限制较大，不能像 JavaScript 动画那样自由控制动画的速度、方向等。
兼容性问题：由于不同浏览器对 CSS 动画支持程度不同，因此在实现时需要考虑浏览器兼容性问题。
可维护性差：当动画效果较为复杂时，使用 CSS 实现的代码会变得冗长和难以维护，因此需要进行代码优化和结构设计。

使用 JavaScript 实现动画的优缺点：

优点：

自由控制：JavaScript 动画能够更加自由地控制动画的速度、方向等，可以实现更加复杂的动画效果。
兼容性好：由于 JavaScript 是浏览器通用的语言，因此在实现动画效果时，能够更好地兼容不同的浏览器。
可维护性强：使用 JavaScript 实现动画时，代码结构更加灵活，能够更好地维护和扩展。

缺点：

资源占用高：JavaScript 动画通常需要更多的 CPU 和内存资源，因此在实现动画效果时需要考虑系统资源的消耗问题。
性能问题：JavaScript 动画性能受 JavaScript 引擎的影响，而不是浏览器引擎，因此需要对代码进行优化以提高动画性能。
复杂度高：JavaScript 动画的实现复杂度通常比 CSS 动画高，因此需要对动画效果进行设计和规划。

JS 中怎么阻止事件冒泡和事件默认行为？

在 JavaScript 中，可以通过以下方式阻止事件的冒泡和默认行为：

阻止事件冒泡： 事件冒泡是指当一个子元素触发了某个事件后，事件会一直冒泡到它的父元素，直到到达文档根节点。为了阻止事件冒泡，可以使用事件对象的 stopPropagation() 方法。例如：

document.getElementById("child").addEventListener("click", function(event) {
  // 阻止事件冒泡
  event.stopPropagation();
});

上面的代码中，当子元素被点击时，事件不会继续冒泡到父元素。

阻止事件默认行为：

事件的默认行为是指事件发生时，浏览器会默认执行的一些操作，例如提交表单、打开链接等。为了阻止事件的默认行为，可以使用事件对象的 preventDefault() 方法。例如：

document.getElementById("link").addEventListener("click", function(event) {
  // 阻止链接的默认跳转行为
  event.preventDefault();
});

上面的代码中，当链接被点击时，链接不会跳转到指定的地址。

需要注意的是，阻止事件的冒泡和默认行为可能会影响用户体验，因此需要谨慎使用。在一些场景下，可以使用阻止事件传播的方式来实现事件委托、事件代理等功能。

Webpack 是一个开源的前端打包工具，它主要用于将多个 JavaScript 文件打包成一个或多个文件，以便在浏览器中加载。Webpack 的核心功能是对模块进行打包，并支持多种资源的加载和打包，如 JavaScript、CSS、图片、字体等。

什么是 webpack？它有什么作用？

Webpack 的主要作用包括：

模块化：Webpack 支持各种模块化规范，包括 ES6、CommonJS、AMD 等，可以将应用程序拆分为多个模块，方便管理和维护。
资源加载：Webpack 可以处理各种类型的文件，包括 JavaScript、CSS、图片、字体等，可以将这些文件作为模块进行加载和打包。
代码压缩：Webpack 可以对代码进行压缩和混淆，减小文件体积，提高页面加载速度。
代码分割：Webpack 可以将应用程序拆分成多个 chunk，从而实现按需加载，减小首屏加载时间。
模块热替换：Webpack 支持模块热替换，可以在开发过程中快速预览应用程序的变化，提高开发效率。
优化打包速度：Webpack 可以使用多线程打包、缓存等技术，优化打包速度。

需要注意的是，Webpack 本身只是一个打包工具，对于项目的构建和管理，通常需要结合其他工具和插件一起使用，如 Babel、ESLint、PostCSS、Vue Loader 等。同时，Webpack 的配置也比较复杂，需要一定的学习成本。但是一旦熟练掌握，Webpack 可以大大提高项目的可维护性和开发效率。