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

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

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

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

优点:

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

缺点:

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

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

优点:

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

缺点:

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

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

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

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

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

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

阻止事件默认行为:

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

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

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

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

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

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

Webpack 的主要作用包括:

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

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