2024年最全前端面试总结（持续更新）(1)，阿里技术终面

最新推荐文章于 2024-09-30 15:42:36 发布

2401_84412050

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量360

点赞数 5

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84412050/article/details/138861908

版权

程序员专栏收录该内容

205 篇文章 1 订阅

订阅专栏

总结

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。
算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

const router = new VueRouter({

mode: ‘history’,

routes: […]

})

webpack打包模式有几种(三种)

=====================================================================================

–mode development //开发环境模式

在这里插入图片描述

–mode production //生产模式

在这里插入图片描述

无模式到时候不输入 mode 值但是会有警告

es6新数据类型（Symbol）

===================================================================================

symbol这个类型一旦定义出来是属于独一无二的，他是通过Symbol函数生成的。例如： let a = Symbol()，因为他是独一无二的所以即便创建两个传的参数都一样的symbol返回值也是不相等的例如：

在这里插入图片描述

所以symbol一般可以用在对象的key值，这样的话就不会出现key值重复，且该对象的这个key value值是唯一的

var username = Symbol();

var obj = {

age:23,

sex:“man”,

}

如何避免回流

=========================================================================

首先回流是指渲染树中的一些元素的几何属性发生变化，如大小、位置等，而这些属性会影响到布局的操作，进行了重新绘制（会消耗性能）

避免的话：

如果想设定元素的样式，直接改变class名
避免设置多项内联样式，就是说少使用style
少用tabel
细小的复杂模块，元素多地方小比较固定，使用定位
将一些公用的css抽离做一个cmmon.css引入

map和object区别

===============================================================================

键值对的key不一样 object只能是Symbol或者是字符串，map随意
map的键值是有序的，因此，当对它进行遍历时，Map 对象是按插入的顺序返回键值
Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算

VUE路由router和route的区别

=======================================================================================

router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样
route相当于当前正在跳转的路由对象。。可以从里面获取name,path,params,query等

另外跳转路由的时候，query传参是针对path的，params传参是针对name的

vue computed和watch区别及methods函数区别

===================================================================================================

computed依赖缓存，如果默认依赖的属性不发生改变，则直接从缓存取最终的值就不需要再重新计算了，相对比watch和methods的方法需要再重新执行一次函数。对于使用意义上也有区别，watch是监听回调，进行一系列操作，而computed是需要计算一个属性要显示到页面上，所以要有return返回值

另外看一下以下两种操作：

在这里插入图片描述

上述的效果都是一样，主要是想告诉大家类似的去操作methods中方法也会达到效果

js创建数组时设置length

===================================================================================

let a = new Array(8)
let b = [] b.length = 20

这种创建完的数组打印出来是这样的：[empty × 20]

webpack 中 loader 和 plugin 的区别是什么

===================================================================================================

1，loader 用于对模块的源代码进行转换。loader 可以使你在 import 或 “load(加载)” 模块时预处理文件,说白了就是单纯对文件操作。

2，plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务

Vue.nextTick(callback) 使用原理

==============================================================================================

Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新。

当你设置绑定的数据让其变化的时候，DOM 并不会马上更新，在下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情，就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

vue中v-for与v-if 尽量不放一起（同一个标签元素里！！同一行）

=======================================================================================================

v-for 优先级是比 v-if 高，如果放在一起的话会带来性能方面的浪费（每次渲染都会先循环再进行条件判断）

所以尽量放不同的标签里，解决办法：

则在外层嵌套的这一层进行 v-if 判断，然后再内部进行 v-for 循环
如果条件出现再循环内部，可通过计算属性 computed 提前过滤掉那些不需要显示的项，然后v-for。

vue中：key的作用

==============================================================================

首先介绍一下diff算法：

vue也好 react也好，他们都是操作虚拟dom的，其原理就是diff算法。
当页面的数据发生变化时，Diff算法只会比较同一层级的节点。同时，在比较的时候，如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点以后的子节点。
如果节点类型相同，则会重新设置该节点的属性，从而实现节点的更新
说白了就是更佳优化了对虚拟dom的检索及更新操作，减少计算时的消耗。
核心概念就是两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构，同一层级的一组节点，他们可以通过唯一的id进行区分，这个id就是key