前端工程师面试题（前端工程师面试题及答案）



1、CSS选择器样式优先级
2、CSS实现三列布局（左右固定宽度，中间自适应）
在 CSS 中，实现一个三列布局，其中左右两列宽度固定，中间列自适应，通常使用 或者 布局可以轻松完成。这里分别给出两种方法：

方法一：Flexbox布局

HTML 示例：

方法二：Grid布局

HTML 示例：

3、如果要做优化，CSS提高性能的方法有哪些？
内联首屏关键CSS
异步加载CSS
资源压缩
合理使用选择器
减少使用昂贵的属性
不要使用@import

1、防抖和节流，应用场景
防抖和节流都是防止某一时间频繁触发，但是原理却不一样。
防抖是将多次执行变为只执行一次，节流是将多次执行变为每隔一段时间执行。
防抖(debounce)：
search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
节流(throttle)：
鼠标不断点击触发，mousedown(单位时间内只触发一次)
监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
2、什么是闭包
「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是一个闭包。
3、继承有哪些方法
原型链继承
借用构造函数继承（伪造对象、经典继承）
实例继承（原型式继承）
组合式继承
寄生组合继承
es6继承 extends
4、什么是深/浅拷贝，有哪些实现方式
基本数据类型：string、number、boolean、undefined、null、Symbol（ES6，符号类型）
引用数据类型：object、array、function
JS数据类型分为基本数据类型和引用数据类型，基本数据类型保存的是值，引用类型保存的是引用地址(this指针)。浅拷贝共用一个引用地址，深拷贝会创建新的内存地址。
JSON字符串转换为JSON对象：

将JSON对象转化为JSON字符串：

1.splice改变原数组，slice不改变原数组。2.splice除了可以删除之外，还可以插入。3.splice可传入3个参数，slice接受2个参数。

v-show是css切换，v-if是完整的销毁和重新创建，如果频繁切换时用v-show，运行时较少改变用v-if

做一个唯一标识， Diff 算法就可以正确的识别此节点。作用主要是为了高效的更新虚拟 DOM。

computed:
支持缓存，数据变，直接会触发相应的操作；
监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
当一个属性发生变化时，需要执行对应的操作；即一个属性受多个属性影响，多对一或者一对一的关系；
监听的是这个属性自身的变化，且不会操作缓存
监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
是一个计算属性,类似于过滤器,对绑定到view的数据进行处理
　　　　当一个属性受多个属性影响的时候就需要用到computed
　　　　最典型的例子： 购物车商品结算的时候
watch:
1.是观察的动作，
2.应用：监听props，$emit或本组件的值执行异步操作
3.无缓存性，页面重新渲染时值不变化也会执行
watch是一个观察的动作
　　　　当一条数据影响多条数据的时候就需要用watch
　　　　例子：搜索数据

12、vuex中state存储的数据如果页面刷新此时数据还会有吗?（刷新之后销毁了）

v-text/v-html/v-for/v-show/v-if/v-else/v-cloak/v-bind/v-on/v-model/v-slot…

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 数据劫持，来劫持各个属性的setter，getter，在数据更新时发布消息给订阅者，触发相应监听回调。

当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），

最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

自定义指令通常包含两个部分：前缀和指令名称，它们分别用于标记指令的使用和指令本身的定义。

1. v-指令前缀：这是 Vue 的标志，告诉 Vue 这是一个自定义指令，Vue 将会解析并处理这个前缀。
2. 指令名称：是你为这个特殊行为起的名字，比如 。
3. 指令实现：通常分为两个部分：
   • 指令表达式（）：这里定义了当指令被激活时关联的计算属性或方法。
   • 指令选项（如 ）：可以提供额外配置，例如是否双向绑定数据、触发哪个方法等。
     在Vue.js中，声明一个自定义指令可以帮助你在模板中添加更丰富的功能，比如处理元素的交互或修改数据。以下是在Vue中声明一个自定义指令的基本步骤：
     
     

1. 定义指令：

• 使用方法创建一个指令对象。这个对象包含两个属性：和（可选），分别表示指令被绑定到元素上和元素的数据变化时的钩子。

2. 指令绑定：

• 在模板中使用自定义指令，使用v-前缀加上自定义指令名称，后跟属性名（通常是表达式）。

3. 示例中的参数：

• ：被指令作用的DOM元素。
• ：一个对象，包含了指令相关的配置信息，如、等。
• ：虚拟节点，提供了更多关于组件的信息。

把对象直接转换成字符串

当js试图得到一个对象的属性时，会先去这个对象的本身去寻找，如果这个对象本身没有找到这个属性，那么js就会去它构造函数的’prototype’属性中去寻找,也就是去’proto‘中寻找，如果’prototype’属性本身中依旧没有找到，’prototype’中依旧有一个‘proto’。

浏览器发起请求-> 解析域名得到ip进行TCP连接 ->浏览器发送HTTP请求和头信息发送->服务器对浏览器进行应答，响应头信息和浏览器所需的内容-> 关闭TCP连接或保持-> 浏览器得到数据数据进行操作。

什么时候需要用的Vue.nextTick()？
1、Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。
2.vue改变dom元素结构后使用vue.$nextTick()方法来实现dom数据更新后延迟执行后续代码

JavaScript的事件循环（Event Loop）是其异步执行的核心机制之一，用于处理非阻塞I/O操作和回调函数。简单来说，它是浏览器或Node.js环境中的一个重要调度器，负责监听并管理任务队列。

1. 任务队列：分为两种类型：宏任务（macro-task）和微任务（micro-task）。宏任务包括setTimeout、setInterval、DOM操作、网络请求等；微任务如Promise.resolve、MutationObserver等。
2. 执行栈：当前正在运行的同步代码所构成的栈。
3. 事件循环过程：
   • 执行栈中的同步代码执行完毕后，会检查是否有微任务，如果有则先执行微任务直到队列为空。
   • 接着，执行下一个宏任务。这个过程中如果遇到新的微任务，会插入到微任务队列中，并继续执行当前宏任务。
   • 当宏任务完成，再次检查微任务队列，如有微任务，则执行它们，如此反复。
4. 轮询检测：事件循环不是被动等待，而是通过定期的轮询检查是否有可执行的任务。

了解了事件循环机制有助于优化异步代码，避免阻塞UI线程，提高应用性能。相关问题：

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdkf/40535.html