前端面经1

AndrewPerfect

已于 2024-08-26 17:31:45 修改

阅读量785

点赞数 30

分类专栏：前端文章标签：前端

于 2024-07-27 16:42:42 首次发布

本文链接：https://blog.csdn.net/Oxford1151/article/details/140457660

版权

前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1、js是单线程还是多线程？

单线程执行。一次只能执行一个任务，处理任务的方式是通过一个任务队列（也称为消息队列）来实现的。如果某个操作（如网络请求或定时器）需要花费较长时间才能完成，它不会阻塞其他代码的执行。相反，这些操作会被挂起，并在它们完成时，将回调函数添加到任务队列中等待执行。

Web Workers 提供了一种在后台线程中运行脚本的方法。这些后台线程可以执行复杂的计算或处理任务，而不会阻塞用户界面。如大文件的处理、复杂的数学计算或图像处理等。Web Workers 不能直接访问 DOM，它们必须通过消息传递机制与主线程进行通信。

2、单线程JS如何实现异步执行，更底层一点描述？

单线程JavaScript环境中，异步执行通常是通过事件循环（Event Loop）和非阻塞I/O操作来实现的。promise、async/await

3、JS引擎方面有哪些?

V8是一个由Google开发的高性能JavaScript引擎，采用即时编译（JIT）技术将JavaScript代码转换为本机机器码，以实现快速执行和优化。V8引擎可以独立运行，也可以嵌入到C++应用程序中执行。

JavaScriptCore是苹果公司为其Safari浏览器开发的JavaScript引擎，是WebKit渲染引擎的一部分。

4、浏览器缓存机制？

Service Worker：首先检查Service Worker是否有可用的缓存资源。
Memory Cache：然后检查内存缓存中是否有该资源的副本。
Disk Cache：如果内存缓存中没有找到，浏览器会查看硬盘缓存。
Push Cache：如果以上缓存都没有命中，且使用了HTTP/2协议，浏览器会尝试使用推送缓存。
网络请求：如果所有缓存都没有命中，浏览器会向服务器发起网络请求。

5、Vue的虚拟DOM树机制？

虚拟DOM（Virtual DOM）是一个用JavaScript对象（通常是VNode节点）来模拟真实DOM结构的机制。它是Vue.js等现代前端框架为提高页面渲染效率而采用的一种技术。虚拟DOM的引入旨在减少直接操作DOM的次数，因为DOM操作是昂贵的，涉及到浏览器的渲染过程，频繁的操作会导致性能问题。创建一系列的VNode节点（标签名、属性、子节点）构建虚拟DOM树，并将虚拟DOM树挂载到DOM元素上实现首次渲染。

6、Vue如何利用虚拟DOM提高性能？

减少直接操作 DOM：最后只将必要的变更应用到真实的 DOM 上。

高效的 DOM 更新：Vue 使用高效的算法（如 diff 算法）来比较新旧虚拟 DOM 树，以计算出最小的 DOM 更新集合。Vue 的 diff 算法只关注同级节点的比较，而不是对整个树进行深度遍历。这意味着，只要子节点的位置没有变动，Vue 就不会去动它们，这进一步减少了不必要的 DOM 操作。

组件化的开发模式：

异步更新队列：Vue 实现了一个异步更新队列，这意味着所有的数据变化不会立即导致 DOM 更新。Vue 会等待一个“tick”（即异步操作完成后），然后将所有的数据变化合并，只执行一次 DOM 更新。

优化策略：Vue 还提供了一些优化策略，如 v-if 和 v-show 的使用（v-if 是真正的条件渲染，而 v-show 只是简单地切换 CSS 属性），以及 key 属性的使用（帮助 Vue 跟踪每个节点的身份，从而重用和重新排序现有元素），这些都可以进一步提高性能。

7、Vue和MVC架构相比有什么优势？

Vue 和 MVC（Model-View-Controller）架构之间的比较，实际上是在比较一个前端框架（Vue）和一个广泛使用的软件设计模式（MVC）之间的不同点。MVC 是一种设计思想，用于将应用程序分割成三个主要逻辑组件：模型（Model）、视图（View）和控制器（Controller），以提高代码的可维护性、可扩展性和可重用性。而 Vue 是一个用于构建用户界面的渐进式JavaScript框架，它本身也遵循了类似 MVC 的设计模式，但更侧重于视图层（View）的抽象和管理。

vue优势：

轻量级和高效

数据绑定和组件化

易于学习和使用

灵活性

生态系统丰富

8、webpack的工作机制？

初始化与配置

确定入口：入口点（Entry）

编译模块：Webpack会递归地分析模块之间的依赖关系，构建出一个依赖图。对于非JavaScript文件（如CSS、图片等），Webpack会使用配置的Loader进行转换。

打包输出：生成Chunk，Webpack会根据依赖图将模块组织成不同的代码块（Chunk），每个Chunk可以是一个独立的文件，也可以与其他Chunk组合成一个捆绑包（Bundle）。

插件扩展

优化输出文件

9、Vue数据双向绑定怎么实现？

它通过 MVVM（Model-View-ViewModel）模式实现。在 Vue 中，这种双向绑定主要是通过 v-model 指令在表单输入和应用状态之间创建的。

通过其响应式系统和 v-model 指令共同实现的。Vue 的响应式系统确保了数据的实时性和一致性，而 v-model 则提供了一种简洁的语法来声明双向绑定关系。

10、Vue2的生命周期（vue3改了！！！）

创建阶段：

beforeCreate：Vue实例刚刚被创建，数据观测(data observer)和event/watcher事件配置都还未开始。此时，实例的data、methods、computed等属性都还未被初始化，无法访问到它们。

created：Vue实例的data、methods、computed等属性已经被初始化完成，但是模板还没有被编译成DOM节点，因此还无法访问到DOM元素。这个钩子适合进行异步请求（如从服务器获取数据）或开启定时器等操作。

beforeMount：模板已经被编译成渲染函数，但是还没有挂载到页面上，因此还无法看到渲染后的DOM元素。

mounted：Vue实例已经被挂载到页面上，可以访问到渲染后的DOM元素。这个钩子适合进行DOM操作、开启定时器、监听事件等操作。

更新阶段：

beforeUpdate：当Vue实例的数据发生变化时，会触发更新操作。在更新之前，会调用beforeUpdate钩子。页面上的DOM元素还未更新，但是Vue实例的data中的数据已经是更新后的数据。

updated：当Vue实例的数据更新完成，并且DOM元素也重新渲染后，会调用updated钩子。

销毁阶段：

beforeDestroy：Vue实例仍然完全可用，可以访问到所有的数据和DOM元素。比如清除定时器、解绑事件监听器等。

destroyed：Vue实例的所有指令都已经解绑，所有的事件监听器也都被移除，所有的子实例也都被销毁。

11、浏览器里面还有什么线程？

主线程（UI）、JavaScrip引擎线程、定时器触发线程、事件触发线程、Web Worker线程、GUI渲染线程、网络线程等。

12、html常用的单位？

绝对长度单位

像素（px）

点（pt）

派卡（pc）

英寸（in）

厘米（cm）和毫米（mm）

相对长度单位

em 相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。例如，如果当前元素的字体大小为16px，那么width: 2em; 表示元素的宽度为32px（16px × 2）。

rem：相对于根元素（即<html>元素）的字体大小

百分比（%）

视口相关单位

视口宽度（vw）相对于浏览器视口宽度的百分比

视口高度（vh）

13、怎么让1rem=1px（根元素字体大小设置为6.25%）

浏览器会将根元素的字体大小设置为16px，16*0.0625=1

font-size: 6.25%;

14、position属性？（详细说说relative和absolute的区别，分别是相对于谁的偏移）

1、relative是相对自身

相对自身定位：当一个元素设置 position: relative 时，它仍然保持在文档流中的原位置，但可以通过 top、right、bottom、left 属性相对于自身原位置进行偏移。
不脱离文档流：虽然它的显示位置发生了变化，但它仍占据原来的位置，其他元素会按其原位置来排布。

2、absolute 是相对父元素

相对最近的已定位父元素进行定位：当一个元素设置为 position: absolute 时，它将脱离文档流，并相对于最近的已定位的祖先元素（即 position 为 relative、absolute、fixed 或 sticky 的祖先元素）进行定位。
脱离文档流：设置 absolute 后，元素会从文档流中移除，其他元素会按照它消失后的情况重新布局。