前端面试题（十三）

news/2024/10/11 6:29:13/

68. 常见前端框架对比

  • React、Vue 和 Angular 的区别是什么？

    1. React：

      • 特点：基于组件化和声明式编程，核心思想是通过状态驱动视图更新，利用虚拟 DOM 来提高性能。
      • 生态系统：React 本身只是一个 UI 库，通常需要配合 React Router、Redux 等其他库来构建完整的应用。
      • 适用场景：适合灵活的项目架构，尤其是在需要构建复杂的 UI 界面时。

    2. Vue：

      • 特点：轻量级、易上手，采用双向数据绑定和基于模板的语法。Vue 的渐进式框架设计使得它既可以用于简单项目，也可以用于复杂的单页应用。
      • 生态系统：Vue 官方提供了完整的生态支持，如 Vue Router、Vuex、Vue CLI 等，开发体验较为完善。
      • 适用场景：适合从小型项目到中大型项目，尤其是团队成员有较多前端经验的情况下。

    3. Angular：

      • 特点：完整的前端框架，提供了依赖注入、双向数据绑定、路由等完整功能。Angular 的设计偏向于企业级应用，结构和规则较为严谨。
      • 生态系统：Angular 是一个一站式框架，内置了很多企业级功能，比如模块化设计、依赖注入等，开发体验相对笨重但功能完备。
      • 适用场景：适用于大型企业项目，特别是对代码质量和一致性要求较高的场景。

69. 事件机制

  • JavaScript 的事件机制是什么？

    • 事件机制 是指浏览器处理事件的过程，主要包含三个阶段：捕获阶段、目标阶段 和 冒泡阶段。
    1. 捕获阶段：事件从文档的根节点开始向目标元素传递。
    2. 目标阶段：事件在目标元素上触发。
    3. 冒泡阶段：事件从目标元素向上冒泡，直到文档的根节点。

  • 事件代理：

    • 事件代理 是一种提高性能的技巧，通过将事件监听器绑定到父元素上，而不是每个子元素。事件冒泡机制会将子元素的事件传递到父元素上，父元素可以通过 event.target 判断具体是哪个子元素触发了事件。

    • 例子：

      document.getElementById('parent').addEventListener('click', function(event) {if (event.target.tagName === 'LI') {console.log('Clicked item:', event.target.textContent);}
});

70. 虚拟 DOM

  • 什么是虚拟 DOM？

    • 虚拟 DOM (Virtual DOM) 是 React 和 Vue 等现代前端框架中使用的一种机制。它是一种轻量级的 JavaScript 对象，用来描述真实 DOM 结构。
    • 工作原理：当状态发生变化时，框架会生成新的虚拟 DOM，然后将新旧虚拟 DOM 进行比较 (diff)，最终只更新发生变化的部分，避免了直接操作真实 DOM 所带来的性能开销。

  • 虚拟 DOM 的优点：

    1. 性能优化：通过 diff 算法减少了对 DOM 的直接操作，避免了不必要的回流和重绘。
    2. 跨平台渲染：虚拟 DOM 并不依赖浏览器的 DOM，可以用于服务端渲染、移动端等多种平台。

  • 虚拟 DOM 的缺点：

    1. 初次渲染速度稍慢：相比直接操作 DOM，初次渲染时会有额外的虚拟 DOM 计算开销。
    2. 复杂场景下可能性能瓶颈：在某些极端场景下，虚拟 DOM 的 diff 算法可能并不比手动优化的 DOM 操作更快。

71. 浏览器渲染优化

  • 如何优化浏览器渲染性能？
    浏览器的渲染性能可以通过多种方式进行优化，主要目的是减少不必要的回流和重绘。

    1. 避免频繁操作 DOM：

      • 尽量将多次 DOM 操作合并为一次，或者使用文档片段 (DocumentFragment) 批量操作 DOM。
      • 例子：
        const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {const li = document.createElement('li');li.textContent = `Item ${i}`;fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment);

    2. 减少重排和重绘：

      • 重排 (Reflow) 是指浏览器重新计算元素的布局，而重绘 (Repaint) 是指重新绘制元素的外观。避免频繁触发这些操作可以提高性能。
      • 优化策略：
        • 将需要多次修改样式的操作合并在一次进行。
        • 使用 transform 和 opacity 进行动画，这些属性不会触发重排。

    3. 使用 CSS3 硬件加速：

      • 通过使用 transform、opacity 和 will-change 等 CSS 属性，可以触发 GPU 硬件加速，减少 CPU 的负担，提高动画和滚动的流畅度。

    4. 懒加载：

      • 对于图片和其他资源，只有在用户即将滚动到相应区域时才加载，减少首屏加载时间。
      • 例子：
        const img = document.createElement('img');
img.loading = 'lazy';
img.src = 'path/to/image.jpg';

72. Promise 和异步编程

  • Promise 的工作原理是什么？

    • Promise 是一种用于处理异步操作的机制，它代表一个尚未完成但将来可能会完成的操作。Promise 有三种状态：

      1. pending（进行中）：操作尚未完成。
      2. fulfilled（已完成）：操作成功完成，并有返回值。
      3. rejected（已失败）：操作失败，并有错误信息。

    • 例子：

      const promise = new Promise((resolve, reject) => {setTimeout(() => {resolve('Success!');}, 1000);
});
promise.then(result => console.log(result)); // 1 秒后输出 "Success!"

  • async/await 的作用是什么？

    • async/await 是基于 Promise 的语法糖，允许开发者以同步的方式编写异步代码，简化了 Promise 的链式调用。
    • 例子：
      async function fetchData() {try {const response = await fetch('https://api.example.com/data');const data = await response.json();console.log(data);} catch (error) {console.error(error);}
}

73. 浏览器中的事件循环

  • 什么是事件循环？

    • 事件循环 (Event Loop) 是 JavaScript 的执行机制，它负责协调代码执行、事件处理和任务调度。JavaScript 是单线程语言，因此使用事件循环来管理异步任务的执行。

  • 事件循环的工作原理：

    1. 宏任务 (Macro Task)：宏任务包括主代码块、setTimeout、setInterval 等。每次执行完宏任务后，事件循环会检查微任务队列。
    2. 微任务 (Micro Task)：微任务包括 Promise.then、MutationObserver 等。微任务的优先级高于宏任务，事件循环在执行完一个宏任务后会立即清空微任务队列。
    • 例子：
      console.log('start');
setTimeout(() => {console.log('timeout');
}, 0);
Promise.resolve().then(() => {console.log('promise');
});
console.log('end');
// 输出顺序：start -> end -> promise -> timeout

74. 防抖和节流

  • 防抖 (Debounce)：

    • 防抖 是指在事件被频繁触发时，只有在一定时间内没有再次触发该事件，才会执行相应的处理函数。防抖的本质是推迟执行，直到事件不再频繁触发为止。常用于减少输入框的频繁搜索请求或窗口大小调整操作。

    • 防抖的实现：

      function debounce(fn, delay) {let timer;return function (...args) {if (timer) clearTimeout(timer); // 如果有定时器，先清除它timer = setTimeout(() => {fn.apply(this, args); // 延迟执行目标函数}, delay);};
}// 使用示例
const handleResize = debounce(() => {console.log('窗口大小改变');
}, 500);window.addEventListener('resize', handleResize);

  • 节流 (Throttle)：

    • 节流 是指在一段时间内多次触发事件时，限制处理函数的执行频率，即保证在一定的时间间隔内只执行一次。常用于限制滚动事件、按钮重复点击等频繁触发的场景。

    • 节流的实现：

      function throttle(fn, interval) {let lastTime = 0;return function (...args) {const now = Date.now();if (now - lastTime >= interval) {lastTime = now;fn.apply(this, args); // 执行目标函数}};
}// 使用示例
const handleScroll = throttle(() => {console.log('页面滚动');
}, 200);window.addEventListener('scroll', handleScroll);

http://www.ppmy.cn/news/1537310.html

相关文章

JVM对象创建和内存分配机制

JVM对象创建和内存分配机制

对象的创建过程 确认类元信息是否存在。当 JVM 接收到 new 指令时&#xff0c;首先在 metaspace 内检查需要创建的类元信息是否存在。 若不存在&#xff0c;那么在双亲委派模式下&#xff0c;使用当前类加载器以 ClassLoader 包名&#xff0b;类名为 Key 进行查找对应的 class…
阅读更多...
云计算的江湖，风云再起

云计算的江湖，风云再起

大数据产业创新服务媒体 ——聚焦数据 改变商业 还记得当年英特尔的广告语吗&#xff1f;“Intel Inside”&#xff0c;这个标志性的标签几乎成了计算设备的象征。然而&#xff0c;随着AI大模型的迅速崛起&#xff0c;计算的核心从CPU悄然转向了GPU。一场前所未有的技术革命正…
阅读更多...
网关在不同行业自动化生产线的应用

网关在不同行业自动化生产线的应用

网关在不同行业自动化生产线的应用&#xff0c;展示了其作为信息与物理世界交汇点的广泛影响力&#xff0c;尤其在推动行业智能化、自动化方面发挥了不可估量的作用。以下是网关技术在污水处理、智慧农业、智慧工厂、电力改造及自动化控制等领域的深入应用剖析。 1. 污水处理 …
阅读更多...
Profile Specification

Profile Specification

SLEE&#xff08;Service Logic Execution Environment&#xff09;是一种用于电信服务的标准化运行环境&#xff0c;它让开发者能够高效地开发、部署和管理复杂的电信应用。而 Profile 是SLEE中的一个核心概念&#xff0c;类似于数据库中的表&#xff0c;用来存储和管理特定的…
阅读更多...
HTML该如何性能优化？

HTML该如何性能优化？

写在前面 HTML 默认情况下快速且易于访问。作为开发者&#xff0c;我们的工作是在创建或编辑 HTML 代码时确保保持这两个特性。例如当嵌入的 <video>文件大小过大&#xff0c;或者 JavaScript 解析阻塞了关键页面元素的渲染时&#xff0c;情况可能会比较复杂。 在开始优化…
阅读更多...
java脚手架系列4--测试用例、拦截器

java脚手架系列4--测试用例、拦截器

异常处理、拦截器、数据库连接 1 测试用例 单元测试是一个老生常谈的问题&#xff0c;无论是后端对自己的代码质量把的第一道关也好&#xff0c;也是对测试减缓压力。这里就不过多讲述测试用例的重要性&#xff0c;但是有2个框架我们必须了解一下。 1.1 JUnit和mockito 我们…
阅读更多...
React Native源码学习

React Native源码学习

核心组件 基础组件&#xff1a;View、Text、Image、TextInput、ScrollView&#xff08;性能没有FlatList好&#xff0c;因为它会一次性把子元素渲染出来&#xff09;、StyleSheet交互组件&#xff1a;button列表视图&#xff1a;FlatList&#xff08;优先渲染屏幕上可见的元素&…
阅读更多...
如何防止按钮重复提交

如何防止按钮重复提交

在前端开发中&#xff0c;防止按钮重复提交是一个常见的需求&#xff0c;可以避免因用户重复点击导致的多次请求发送&#xff0c;从而影响服务器性能或导致数据错误。下面介绍几种常见的方法&#xff0c;并给出相应的示例&#xff1a; 1. 禁用按钮 在用户提交表单后&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023