前端面试题（十三）

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.mfbz.cn/a/889317.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

使用Pytorch+Numpy+Matplotlib实现手写字体分类和图像显示

使用Pytorch+Numpy+Matplotlib实现手写字体分类和图像显示

文章目录 1.引用2.内置图片数据集加载3.处理为batch类型4.设置运行设备5.查看数据6.绘图查看数据图片(1)不显示图片标签(2)打印图片标签(3)图片显示标签 7.定义卷积函数8.卷积实例化、损失函数、优化器9.训练和测试损失、正确率(1)训练(2)测试(3)循环(4)损失和正确率曲线(5)输出…
阅读更多...
Spark_累加器

Spark_累加器

分布式共享只写变量 实现原理&#xff1a;  累加器用来把Executor端变量信息聚合到Driver端&#xff0c;在Driver程序中定义的变量&#xff0c;在Executor端的每个Task都会得到这个变量的一份新的副本&#xff0c;每个task更新这些副本的值后&#xff0c;传回Driver端进行mer…
阅读更多...
执行node.js获取本机Ip命令，报：Error: Cannot find module ‘ip‘错误

执行node.js获取本机Ip命令，报：Error: Cannot find module ‘ip‘错误

Error: Cannot find module ip是由于没有改模块的依赖包&#xff0c;需要进行安装&#xff0c;以管理员的身份打开命令行&#xff0c;执行npm install ip 获取当前电脑的ip地址 方法一&#xff1a; const ip require("ip")/*** 1:获取当前电脑的ip地址*/ console.…
阅读更多...
PPT技巧：保护PPT文件的方法有哪些？

PPT技巧：保护PPT文件的方法有哪些？

PPT文件制作好之后保证文件不出错应该是很重要的&#xff0c;毕竟是要拿出去展示的&#xff0c;今天分享PPT加密方法给大家。希望能够帮助大家保护好自己的PPT文件。 打开密码 如果想要其他人需要输入正确的密码才能够打开文件查看并编辑&#xff0c;我们可以给PPT文件设置打…
阅读更多...
Github优质项目推荐 - 第六期

Github优质项目推荐 - 第六期

文章目录 Github优质项目推荐 - 第六期一、【WiFiAnalyzer】&#xff0c;3.4k stars - WiFi 网络分析工具二、【penpot】&#xff0c;33k stars - UI 设计与原型制作平台三、【Inpaint-Anything】&#xff0c;6.4k stars - 修复图像、视频和3D 场景中的任何内容四、【Malware-P…
阅读更多...
gitee开源商城diygw-mall

gitee开源商城diygw-mall

DIYGW可视化开源商城系统。所的界面布局显示都通过低代码可视化开发工具生成源码实现。支持集成微信小程序支付。 DIYGW可视化开源商城系统是一款基于thinkphp8 framework、 element plus admin、uniapp开发而成的前后端分离系统。 开源商城项目源码地址&#xff1a;diygw商城…
阅读更多...
stm32定时器中断和外部中断

stm32定时器中断和外部中断

一&#xff0c;中断系统的介绍 中断&#xff1a;在主程序运行过程中&#xff0c;出现了特定的中断触发条件&#xff08;中断源&#xff09;&#xff0c;使得CPU暂停当前正在运行的程序&#xff0c;转而去处理中断程序&#xff0c;处理完成后又返回原来被暂停的位置继续运行 中…
阅读更多...
知识图谱入门——7：阶段案例：使用 Protégé、Jupyter Notebook 中的 spaCy 和 Neo4j Desktop 搭建知识图谱

知识图谱入门——7：阶段案例：使用 Protégé、Jupyter Notebook 中的 spaCy 和 Neo4j Desktop 搭建知识图谱

在 Windows 环境中结合使用 Protg、Jupyter Notebook 中的 spaCy 和 Neo4j Desktop&#xff0c;可以高效地实现从自然语言处理&#xff08;NLP&#xff09;到知识图谱构建的全过程。本案例将详细论述环境配置、步骤实现以及一些扩展和不足之处。 源文件已上传我的资源区。 文章…
阅读更多...
【深海王国】初中生也能画的电路板？目录合集

【深海王国】初中生也能画的电路板？目录合集

Hi٩(๑ ^ o ^ ๑)۶, 各位深海王国的同志们&#xff0c;早上下午晚上凌晨好呀~辛勤工作的你今天也辛苦啦 (o゜▽゜)o☆ 今天大都督为大家带来系列文章《初中生也能画的电路板》&#xff0c;帮你一周内快速入门PCB设计&#xff0c;手把手教你从元器件库添加、电路原理图绘制、…
阅读更多...
初阶C语言-结构体

初阶C语言-结构体

一.结构体的声明 1.结构体类型的声明 1.1结构的基础知识 结构是一些值的集合&#xff0c;这些值称为称为变量。结构的每个成员可以是不同类型的变量。 1.2结构的声明 struct tag //struct是结构体关键字&#xff0c;tag是结构体类型名称 { member - list;//成员变…
阅读更多...
minio集群部署

minio集群部署

最近接触到minio&#xff0c; 将本地集群部署&#xff0c;分别在ubuntu、centos stream9上进行了搭建&#xff0c;目前看里面的小坑不小&#xff0c;记录以下教程&#xff0c;以备忘、以供他人借鉴。 #### 准备 1、因新版本的minio要求&#xff0c;集群部署必须使用挂载非 roo…
阅读更多...
AAA Mysql与redis的主从复制原理

AAA Mysql与redis的主从复制原理

一 &#xff1a;Mysql主从复制 重要的两个日志文件&#xff1a;bin log 和 relay log bin log&#xff1a;二进制日志&#xff08;binnary log&#xff09;以事件形式记录了对MySQL数据库执行更改的所有操作。 relay log&#xff1a;用来保存从节点I/O线程接受的bin log日志…
阅读更多...
Java中System类和RunTime类的Api

Java中System类和RunTime类的Api

目录 System 类 1)out 2)err 3)in 4)currentTimeMillis() 5)nanoTime() 6)arraycopy(Object 要从里面复制东西的数组, int 要从里面复制东西数组的索引起始位置, Object 获得复制元素的数组, int 获得复制元素数组的起始索引, int 要复制东西的个数) 7)gc() 8)exit(int status)…
阅读更多...
51单片机的无线通信智能车库门【proteus仿真+程序+报告+原理图+演示视频】

51单片机的无线通信智能车库门【proteus仿真+程序+报告+原理图+演示视频】

1、主要功能 该系统由AT89C51/STC89C52单片机LCD1602显示模块红外传感器光照传感器时钟模块步进电机蓝牙按键、LED、蜂鸣器等模块构成。适用于智能车库自动门、无线控制车库门等相似项目。 可实现功能: 1、LCD1602实时显示北京时间和自动/手动模式&#xff0c;以及验证是否成…
阅读更多...
【Arduino IDE安装】Arduino IDE的简介和安装详情

【Arduino IDE安装】Arduino IDE的简介和安装详情

目录 &#x1f31e;1. Arduino IDE概述 &#x1f31e;2. Arduino IDE安装详情 &#x1f30d;2.1 获取安装包 &#x1f30d;2.2 安装详情 &#x1f30d;2.3 配置中文 &#x1f30d;2.4 其他配置 &#x1f31e;1. Arduino IDE概述 Arduino IDE&#xff08;Integrated Deve…
阅读更多...
使用 Go 和 Gin 框架构建简单的用户和物品管理 Web 服务

使用 Go 和 Gin 框架构建简单的用户和物品管理 Web 服务

使用 Go 和 Gin 框架构建简单的用户和物品管理 Web 服务 在本项目中&#xff0c;我们使用 Go 语言和 Gin 框架构建了一个简单的 Web 服务&#xff0c;能够管理用户和物品的信息。该服务实现了两个主要接口&#xff1a;根据用户 ID 获取用户名称&#xff0c;以及根据物品 ID 获…
阅读更多...
模拟实现消息队列（基于SpringBoot实现）

模拟实现消息队列（基于SpringBoot实现）

项目代码 提要&#xff1a;此处的消息队列是仿照RabbitMQ实现&#xff08;参数之类的&#xff09;&#xff0c;实现一些基本的操作&#xff1a;创建/销毁交互机&#xff08;exchangeDeclare&#xff0c;exchangeDelete&#xff09;&#xff0c;队列&#xff08;queueDeclare&a…
阅读更多...
【电路笔记】-求和运算放大器

【电路笔记】-求和运算放大器

求和运算放大器 文章目录 求和运算放大器1、概述2、反相求和放大器3、同相求和放大器4、减法放大器5、应用5.1 音频混合器5.2 数模转换器 (DAC)6、总结1、概述 在我们之前有关运算放大器的大部分文章中，仅将一个输入应用于反相或非反相运算放大器的输入。在本文中，将讨论一种…
阅读更多...
Python：条件分支 if 语句全讲解

Python：条件分支 if 语句全讲解

Python&#xff1a;条件分支 if 语句全讲解 如果我拿出下面的代码&#xff0c;阁下该做何应对&#xff1f; if not reset_excuted and (terminated or truncated):... else:...---- 前言&#xff1a; 消化论文代码的时候看到这个东西直接大脑冻结&#xff0c;没想过会在这么…
阅读更多...
5个免费ppt模板网站推荐！轻松搞定职场ppt制作！

5个免费ppt模板网站推荐！轻松搞定职场ppt制作！

每次过完小长假&#xff0c;可以明显地感觉到&#xff0c;2024这一年很快又要结束了&#xff0c;不知此刻的你有何感想呢&#xff1f;是满载而归&#xff0c;还是准备着手制作年终总结ppt或年度汇报ppt呢&#xff1f; 每当说到制作ppt&#xff0c;很多人的第一反应&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023