自由量级前端一面凉经

自由量级前端一面凉经总结涵盖项目、前端技术、CSS、JavaScript、操作系统、网络、算法等多方面问题，以下为详细解答：

• 为什么想搞前端

  可以从个人兴趣出发，比如喜欢创造用户直接交互的界面，享受将设计稿转化为实际可操作页面的过程，看到自己的作品能被用户直接使用和反馈会很有成就感。

  前端发展前景好，随着互联网的普及和移动设备的广泛应用，前端技术在各个领域都有广泛的应用，如电商、社交、教育等，有较多的就业机会和发展空间。

• 为什么想做这样一个项目呢

  结合项目特点阐述，比如项目是一个在线协作编辑工具，是因为发现现有的协作工具在某些功能上不够完善，不能满足特定场景下的需求，所以想通过自己的努力开发一个更符合需求的工具。

  也可以说通过做这个项目可以锻炼自己在前端技术方面的能力，如实现复杂的交互逻辑、优化页面性能等。

• 项目部署了吗？建议部署一下方便看

  如果已经部署，可以介绍部署的平台和过程，如使用Vercel、Netlify等平台，简单说明部署的步骤和遇到的问题及解决方法。

  如果还未部署，可以说明计划使用的部署平台和预计的部署时间，同时解释未部署的原因，如还在进行一些功能的优化或测试。

• 项目里的撤销重做是怎么做的

  设置一个状态栈来存储前后的状态。当用户进行操作时，将当前状态压入撤销栈；当用户执行撤销操作时，从撤销栈中弹出状态并恢复到该状态，同时将该状态压入重做栈；当用户执行重做操作时，从重做栈中弹出状态并恢复到该状态，同时将该状态压入撤销栈。

• 栈里面是增量存储的吗？怎么实现增量存储的呢

  可以是增量存储。实现增量存储的方法可以是只存储状态之间的差异（diff），而不是整个状态对象。例如，使用深度比较算法来比较当前状态和上一个状态的差异，只将差异部分存储到栈中。

• 假如数据结构比较复杂，层层嵌套的话，怎样实现增量存储

  同样存diff。对于复杂嵌套的数据结构，可以使用递归的方式遍历数据结构，比较每个节点的变化，只将发生变化的节点及其路径信息存储下来作为diff。在恢复状态时，根据diff信息对原始数据进行相应的修改。

• 为什么选择用react来做

  React具有组件化的开发模式，可以将页面拆分成多个独立的组件，每个组件负责自己的状态和逻辑，提高了代码的可维护性和复用性。

  React的虚拟DOM机制可以有效地减少对实际DOM的操作，提高页面的渲染性能。

  React拥有丰富的生态系统和社区支持，有大量的第三方库和工具可供使用，能够快速开发各种功能。

• 项目导出功能是怎么做的

  如果是导出数据，可以根据数据的格式（如JSON、CSV等）使用相应的库或方法将数据转换为指定的格式，然后通过创建下载链接或使用Blob对象等方式让用户下载导出的文件。

  如果是导出页面内容，可以使用html2canvas等库将页面渲染为图片，然后进行下载；或者使用一些打印相关的API实现页面内容的打印导出。

• 闭包陷阱是什么

  闭包陷阱主要指的是由于闭包的特性导致的一些内存泄漏或意外的变量引用问题。例如，在一个函数内部定义了一个闭包，闭包中引用了外部函数的变量，如果外部函数已经执行完毕，但闭包仍然被其他变量引用，那么外部函数的变量就无法被垃圾回收机制回收，从而导致内存泄漏。

• 组件间通信有什么常用的方法吗

  props：父组件通过props向子组件传递数据和回调函数，实现父子组件之间的通信。

  Context：可以在组件树中跨层级传递数据，避免了层层传递props的繁琐。

  事件总线：通过创建一个全局的事件总线对象，组件可以在上面发布和订阅事件，实现任意组件之间的通信。

  状态管理库：如Redux、MobX、Zustand等，通过集中管理应用的状态，实现组件之间的通信和状态共享。

• 假如不用zustand这种库，不使用api，怎么实现跨组件的通信呢？简单想个思路

  可以使用一个全局的对象来存储共享状态，然后在需要通信的组件中通过引用这个全局对象来获取和更新状态。例如，在一个单独的文件中定义一个全局变量，然后在各个组件中导入并使用它。但这种方式需要注意状态的同步和更新问题，避免出现数据不一致的情况。

• 学过设计模式吗？知不知道设计者模式

  常见的前端设计模式有单例模式、观察者模式、工厂模式等。设计者模式可能是指设计模式中的创建型、结构型、行为型等分类中的相关模式。例如，单例模式确保一个类只有一个实例，并提供一个全局访问点；观察者模式定义了一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都会得到通知并自动更新。

• 绑定监听器，另一边又触发的这个监听器，这套机制了解吗

  这类似于观察者模式或发布 - 订阅模式。在一个系统中，可以定义一个事件中心，组件可以在事件中心上绑定监听器，当其他组件触发相应的事件时，事件中心会通知所有绑定了该事件监听器的组件，从而实现组件之间的交互和通信。

• useRef和useState有什么区别，useState重渲染

  useState：用于管理组件的状态，当状态发生变化时，会触发组件的重新渲染。它返回一个状态值和一个更新状态的函数。

  useRef：返回一个可变的ref对象，其.current属性被初始化为传入的参数（初始值为undefined）。ref对象在组件的整个生命周期内保持不变，修改ref对象的.current属性不会触发组件的重新渲染。通常用于存储一些不需要触发渲染的变量，如DOM元素的引用、定时器ID等。

• 用过useMemo吗

  useMemo用于优化性能，它可以缓存计算结果，只有当依赖项发生变化时才会重新计算。例如，在一个组件中有一个复杂的计算逻辑，每次渲染都会执行这个计算，使用useMemo可以将计算结果缓存起来，只有当相关的依赖项发生变化时才重新计算，从而避免不必要的计算，提高组件的性能。

• 有深入了解一些react内部的东西吗

  可以提及对React的虚拟DOM、Diff算法、生命周期方法、Hooks的实现原理等方面的了解。例如，虚拟DOM是通过JavaScript对象来模拟实际的DOM结构，Diff算法用于比较新旧虚拟DOM之间的差异，然后只对实际DOM进行必要的更新，从而提高渲染性能。

• 了解webpack和vite的区别吗

  构建原理：Webpack是一个模块打包工具，它会对项目中的所有模块进行依赖分析，然后按照配置的规则进行打包和转换。Vite则利用了浏览器原生支持ES模块的特性，在开发环境下直接启动一个服务器，按需编译和加载模块，大大提高了开发启动速度。

  开发体验：Vite在开发环境下具有极快的启动速度和热更新速度，因为它不需要进行完整的打包过程。而Webpack在开发环境下启动和热更新相对较慢，尤其是对于大型项目。

  生产构建：Webpack在生产构建方面更加成熟和稳定，有丰富的插件和配置选项来优化构建结果。Vite的生产构建也在不断发展和完善，但相对来说可能在一些复杂的场景下还需要进一步优化。

• 那你了解Tree Shaking吗

  Tree Shaking是一种用于消除JavaScript上下文中未引用代码的优化技术。在Webpack等打包工具中，通过分析模块之间的依赖关系，找出那些没有被使用到的代码（即“死代码”），然后在打包过程中将其排除，从而减少打包后的文件体积，提高应用的加载速度。

• 实现一个水平垂直居中有哪些方法

  相对绝对定位 + transform：

• 详细讲一下相对绝对定位实现居中的操作

  首先将父元素设置为相对定位（position: relative），这样子元素的绝对定位是相对于父元素进行的。

  然后将子元素设置为绝对定位（position: absolute），并通过top: 50%和left: 50%将子元素的上边缘和左边缘分别定位到父元素的中间位置。

  但是这样定位后，子元素并不是真正在父元素的中心，因为top和left是基于子元素的左上角进行定位的。所以需要使用transform: translate(-50%, -50%)将子元素向左和向上移动自身宽度和高度的一半，从而实现真正的水平垂直居中。

• 怎么最方便的调top和left调到居中? 有一个通用的方法

  最方便的方法就是上述提到的相对绝对定位结合transform的方法，即先设置top: 50%和left: 50%，再使用transform: translate(-50%, -50%)进行调整。这是一种通用的、兼容性较好的实现水平垂直居中的方法。

• 知道css的盒模型吗？有哪两种盒模型

  CSS盒模型是指一个元素在页面中所占据的空间，它由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。

  两种盒模型分别是标准盒模型（content - box）和IE盒模型（border - box）。在标准盒模型中，元素的宽度和高度只包括内容区域的宽度和高度，不包括内边距、边框和外边距；而在IE盒模型中，元素的宽度和高度包括内容区域、内边距和边框的宽度和高度，不包括外边距。可以通过box - sizing属性来设置盒模型的类型，如box - sizing: content - box（默认值）或box - sizing: border - box。

• 选择器的优先级怎么计算的

  选择器的优先级由四个部分组成，分别用a、b、c、d表示，优先级从高到低依次为：

  a：内联样式（style属性）的优先级最高，a = 1。

  b：ID选择器的数量，b的值等于ID选择器的个数。

  c：类选择器、属性选择器和伪类选择器的数量，c的值等于它们的个数之和。

  d：元素选择器和伪元素选择器的数量，d的值等于它们的个数之和。

  计算选择器的优先级时，按照a、b、c、d的顺序依次比较，数值大的优先级高；如果数值相同，则后面的选择器会覆盖前面的选择器。

• 如果两个类名+伪类，类+类的选择器，怎么计算优先级呢

  对于类名+伪类的选择器，假设有两个类名和一个伪类，那么c的值为3（两个类选择器和一个伪类选择器），b = 0，d = 0，a = 0，优先级表示为0,0,3,0。

  对于类+类的选择器，假设有两个类选择器，那么c的值为2，b = 0，d = 0，a = 0，优先级表示为0,0,2,0。

  比较两个选择器的优先级，先比较b的值，如果b相同再比较c的值，以此类推。所以类名+伪类的选择器优先级高于类+类的选择器。

• 讲讲promise

  Promise是一种用于处理异步操作的对象，它代表一个异步操作的最终完成（或失败）及其结果值。Promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。

  可以使用Promise构造函数创建一个新的Promise对象，并在构造函数中传入一个执行器函数，执行器函数接收两个参数：resolve和reject。当异步操作成功时，调用resolve函数并将结果值作为参数传递；当异步操作失败时，调用reject函数并将错误信息作为参数传递。

  Promise提供了then、catch、finally等方法用于处理异步操作的结果。then方法用于指定Promise对象在变为fulfilled状态时执行的回调函数，catch方法用于指定Promise对象在变为rejected状态时执行的回调函数，finally方法用于指定无论Promise对象最终状态如何都会执行的回调函数。

• 怎么理解的闭包

  闭包是指有权访问另一个函数作用域中变量的函数。在一个函数内部定义的函数可以访问外部函数的变量，即使外部函数已经执行完毕，内部函数仍然可以访问这些变量，这就是闭包的特性。闭包可以用于创建私有变量、实现函数柯里化、模块化开发等。

• 了解浏览器的事件循环吗

  浏览器的事件循环是一种机制，用于协调和管理异步任务的执行。JavaScript是单线程的，为了不阻塞主线程的执行，异步任务（如定时器、网络请求、事件处理等）会被放入相应的任务队列中。

  事件循环分为宏任务队列和微任务队列。宏任务包括setTimeout、setInterval、I/O操作等，微任务包括Promise.then、MutationObserver等。

  事件循环的执行顺序是：首先执行主线程上的同步任务，当同步任务执行完毕后，检查微任务队列，如果有微任务，则依次执行微任务，直到微任务队列为空；然后检查宏任务队列，取出一个宏任务执行，执行完毕后再次检查微任务队列，重复上述过程。

• 浏览器为什么要设计这套事件循环机制呢

  由于JavaScript是单线程的，如果所有任务都在主线程上顺序执行，当遇到耗时较长的异步任务（如网络请求）时，会导致主线程被阻塞，页面无响应，用户体验极差。

  事件循环机制可以将异步任务放入任务队列中，让主线程继续执行其他任务，当异步任务完成后，再通过事件循环将结果返回给主线程进行处理，从而避免了主线程的阻塞，提高了页面的响应速度和用户体验。

• 设计两个队列，让异步任务执行的效率更高

  可以设计一个高优先级队列和一个低优先级队列。将一些紧急或重要的异步任务放入高优先级队列，将一些普通的异步任务放入低优先级队列。

  在事件循环中，优先检查高优先级队列，如果有任务则执行；当高优先级队列为空时，再检查低优先级队列并执行其中的任务。这样可以确保重要的任务能够及时得到处理，提高异步任务的执行效率。

• JavaScript是单线程的吗？如果实现多线程怎么做

  JavaScript是单线程的，这意味着在同一时间只能执行一个任务。这是为了避免多线程操作DOM时可能出现的冲突和竞争问题。

  如果需要实现多线程，可以使用Web Worker。Web Worker允许在后台线程中运行脚本，与主线程相互独立，不会阻塞主线程的执行。通过创建Web Worker对象，将需要并行执行的代码放在一个单独的JS文件中，然后在主线程中与Web Worker进行通信，实现多线程的效果。

• 讲讲进程和线程的区别

  进程：是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配和调度的基本单位，拥有独立的内存空间和系统资源。

  线程：是进程的一个执行单元，是CPU调度和分派的基本单位，它比进程更小，能够基本上并行执行，并且共享进程的内存空间和系统资源。一个进程可以包含多个线程，线程之间可以方便地进行通信和数据共享。

• UDP 和 TCP的区别

  连接方式：TCP是面向连接的协议，在通信之前需要建立连接（三次握手），通信结束后需要释放连接（四次挥手）；UDP是无连接的协议，不需要建立连接，直接发送数据。

  可靠性：TCP提供可靠的传输服务，通过确认机制、重传机制、流量控制和拥塞控制等保证数据的可靠传输；UDP不保证数据的可靠传输，数据可能会丢失、乱序或重复。

  传输效率：由于TCP需要进行连接建立和释放、确认和重传等操作，传输效率相对较低；UDP没有这些额外的开销，传输效率较高。

  应用场景：TCP适用于对数据可靠性要求较高的场景，如文件传输、网页浏览等；UDP适用于对实时性要求较高、对数据可靠性要求不高的场景，如视频流、音频流、实时游戏等。

• 说下OSI模型有哪七层

  OSI（开放系统互联）模型从下到上依次为：

  物理层：负责传输比特流，定义了物理设备的标准，如网线的接口类型、光纤的接口类型、传输介质的传输速率等。

  数据链路层：将物理层接收到的信号进行处理，封装成帧，负责帧的传输和错误检测，如以太网协议、PPP协议等。

  网络层：负责将数据包从源主机传输到目标主机，进行路由选择和分组转发，如IP协议、ICMP协议等。

  传输层：提供端到端的可靠传输服务，负责数据的分段和重组、流量控制和错误恢复，如TCP协议、UDP协议等。

  会话层：负责建立、管理和终止应用程序之间的会话，提供会话管理和数据交换的功能。

  表示层：负责对数据进行格式转换、加密和解密等操作，确保数据在不同系统之间能够正确理解和处理。

  应用层：为用户的应用程序提供网络服务，如HTTP协议、FTP协议、SMTP协议等。

• 在浏览器中访问url是跑在哪一层？如果在命令行ping一个地址，这个是跑在哪一层呢

  在浏览器中访问URL，涉及到多个层次的协议。从应用层来看，使用的是HTTP或HTTPS协议；传输层使用TCP协议；网络层使用IP协议；数据链路层和物理层负责实际的网络传输。所以可以说访问URL涉及到了OSI模型的所有七层，但主要的应用层协议是HTTP/HTTPS。

  在命令行中ping一个地址，使用的是ICMP协议，ICMP协议是网络层协议，所以ping操作主要运行在网络层。

• TCP是跑在哪一层？知道ICMP吗

  TCP是传输层协议，它负责提供端到端的可靠传输服务。

  ICMP（Internet控制报文协议）是网络层协议，用于在IP主机、路由器之间传递控制消息，如网络通不通、主机是否可达、路由是否可用等网络本身的问题。ping命令就是基于ICMP协议实现的。

• 知道红黑树吗

  红黑树是一种自平衡的二叉查找树，它通过特定的规则和操作来保持树的平衡，从而保证查找、插入和删除操作的时间复杂度为O(log n)。

  红黑树的规则包括：每个节点是红色或黑色；根节点是黑色；每个叶子节点（NIL节点）是黑色；如果一个节点是红色，则它的两个子节点都是黑色；从任一节点到其每个叶子节点的所有路径都包含相同数目的黑色节点。

  红黑树常用于实现关联数组、集合等数据结构，如C++中的STL中的map和set就是基于红黑树实现的。

• 讲讲二叉搜索树

  二叉搜索树（BST）是一种二叉树，它满足以下性质：对于树中的每个节点，其左子树中的所有节点的值都小于该节点的值，其右子树中的所有节点的值都大于该节点的值。

  二叉搜索树的查找、插入和删除操作的平均时间复杂度为O(log n)，但在最坏情况下（树退化为链表），时间复杂度会变为O(n)。为了保持较好的性能，可以使用自平衡的二叉搜索树，如红黑树、AVL树等。

• 算法：排序+数组扁平化

  排序算法：常见的排序算法有冒泡排序、选择排序、插入排序、快速排序、归并排序等。例如，快速排序的实现思路是选择一个基准元素，将数组分为两部分，一部分小于基准元素，一部分大于基准元素，然后递归地对这两部分进行排序。

  数组扁平化：将一个多维数组转换为一维数组。可以使用递归的方法，遍历数组的每个元素，如果元素是数组，则递归调用扁平化函数；如果不是数组，则将元素添加到结果数组中。也可以使用ES6的flat方法，如arr.flat(Infinity)可以将数组无限扁平化。