前端面经1（2021-12）

最新推荐文章于 2024-07-16 17:18:30 发布

小雍雍

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量204

点赞数 1

分类专栏：面试文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/yongyafang123/article/details/121438387

版权

面试专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一家公司：

基本流程（总时长50分钟）

0、自我介绍
1、大学专业，学员人数，排名；怎学习的前端；
学校-专业-班级-人数，正常回答；问专业排名，回答每年会有国家励志奖学金；
2、三家公司详细介绍，后两家每个说了一个主要项目；
略（没有回答出亮点，只是叙述了，而且说的有点乱，可以提前整理一下）
3、html5、css3、ES6新特性？
一时想不起来有什么界定了，有点混；
HTML5：canvas、SVG、语义化标签（header、footer、section）
CSS3: 动画、flex布局、盒子框布局
ES6: 变量定义let、const与var的区别、异步处理函数promise
4、组件化？
组件就是独立可复用的代码片段，组件化开发能大幅度提高开发效率。以Vue来说，一般分为：页面组件、业务组件、通用组件；
vue中常见组件化技术有：属性prop，自定义事件，插槽等，它们主要用于组件通信、扩展等；
在我的项目中：多个项目公用的省市区通用组件、打卡逻辑业务组件等我会单独打出来一个包，然后其他项目以插件的形式引用即可，这样就可以做到一个地方修改，多处使用了，大大提高效率。
5、Vue响应式原理？
数据响应式即是当数据发生变化的时候，页面会做出相关响应更新的机制，这也就是MVVM框架解决的最重要的一个核心问题。以Vue为例，Vue2与Vue3有所不同，那我们先了解下在vue2环境下， Vue会根据数据类型来做不同的处理：如果是对象我们则采用defineProperty（）的方式定义数据拦截，当变化时，我们做出响应；如果是数组，我们则首先会覆盖其原型方法，做出扩展，当数据变化时我们及时做出响应。这就解决了数据响应式问题。但是存在缺点：如初始化的时候需要递归遍历所有数据会造成性能损失，而且新增和删除属性时需要用Vue.set/delete特定的api才行，对于es6中的set、map等结构还不支持。 Vue3重新编写了这部分内容，利用ES6中的proxy机制代理要响应的数据，不需要初始化递归遍历和特殊的api了。
6、key的作用？
key的作用主要是为了高效的更新虚拟DOM，原理是Vue在patch过程中通过key判断节点是否相同；从而避免频繁更新不同元素，还可以设置一些图片组件中key，使其区分开来，得以变化。
7、http缓存？
只针对get请求，其他的没有作用。强缓存（200）在请求meta中设置Expires或Cache-Control没有过期 ; 协商缓存（304）ETag/If-Not-Match 、Last-Modified/If-Modified-Since keep-alive ;
8、深拷贝浅拷贝？
浅拷贝是复制，两个对象指向同一个地址；深拷贝是新开栈，两个对象指向不同的地址。
9、最后是一个情景，问如何处理？（一个任务是微信小程序扫码文案自定义功能，目前是两种方案：一是原生实现，扫码速度比较快，但文案不能自定义；二是插件实现，扫码速度慢一点，但可以自定义文案。请问你会怎么处理？）
10、公司介绍，薪资咨询；
11、问了下echart等图表自定义功能，我说只会简单展示，没有自定义过。

TWO（40分钟）

1、JavaScript的事件委托（事件代理）原理

事件委托就是利用事件冒泡，只制定一个时间处理程序，就可以管理某一类型的所有事件。
为什么要用事件委托：访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间；如果要用事件委托，就会将所有的操作放到js程序里面，只对它的父级(如果只有一个父级)这一个对象进行操作，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；
事件委托的原理：事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。
事件委托的优点
　　使用事件委托对于web应用程序带来的几个优点：
　　1.管理的函数变少了。不用为每个元素都添加监听函数。同一个父节点下面类似的子元素，可以通过委托给父元素的监听函数来处理事件。
　　2.可以方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定。
　　3.JavaScript和DOM节点之间的关联变少了，这样也就减少了因循环引用而带来的内存泄漏发生的概率。
常见问题：如果我想让事件代理的效果跟直接给节点的事件效果一样怎么办? 比如上述例子我只想点击li才会触发? 方案：Event对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，即target可以表示为当前的事件操作的dom，但不是真正操作dom。标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名。这样改下就只有点击li会触发事件了，且每次只执行一次dom操作。实现了：只触发当前的li。
2、position相关：
相对定位relative: 未脱离文档流，会按照元素的原始位置对该元素进行移动;
绝对定位absolute: 脱离文档流，元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于ICB（inital container block, 初始包含块）
固定定位fixed: 脱离文档流，相对于浏览器窗口进行定位;
static没有定位：正常文档流；
粘性定位sticky：粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。（不常用）

3、数据改变后页面没有变化怎么处理，数组呢？。（在api文档中有说明，不用看源码）
数组呢？（面试官说这个在api文档中有说明，不用看源码，感觉我不太看文档，印象特别不好）

4、vue-router钩子动态路由设置；如何携带一个url？

------- 全局钩子，在main.js中使用，有两个：
页面进入之前：router.beforeEach((to, from, next)=>{})
页面离开之前：router.afterEach((to, from, next)=>{})

-------- 组件内部钩子，与methods方法同级，有三个：
beforeRouterEach((to, from, next)=>{}) 当前守卫执行前组件实例还没有被创建出来，所以实例this不能被获取；
beforeRouterLeave((to, from, next)=>{}) 可以获取实例this ；一般用作路由切换时关闭定时器，音频啥的，以免占用内存。或则是页面有未保存的内容，阻止页面跳转，去提示弹层。
beforeRouterUpdate((to, from, next)=>{}) 可以获取实例this

动态路由设置:

5、插件的Css如何修改？

在样式外新增一个样式不添加 scoped 的

6、浅拷贝，深拷贝？
浅拷贝是拷贝一层，属性为对象时，浅拷贝是复制，两个对象指向同一个地址, 如Object.assign({}, obj)
深拷贝是递归拷贝深层次，属性为对象时，深拷贝是新开栈，两个对象指向不同的地址，如JSON.parse(JSON.stringify(obj))

7、初始化data ，如何把数据改为最开始的？

8、creaded mounted 区别，分别做什么？

9、key的作用；

10、为什么data是一个函数而不是一个对象？如果用对象会怎么样呢？

11、input去前后空格，还有哪些修饰符？
分类：表单修饰符、事件修饰符、鼠标按键修饰符、键值修饰符、v-bind修饰符
如：表单修饰符：

THREE（30分钟）

1、伪类、伪元素？
伪类：伪类用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素，比如:visited，:active；后者包含那些满足一定逻辑条件的DOM树中的元素，比如:first-child，:first-of-type，：target。
伪元素：伪元素为DOM树没有定义的虚拟元素。不同于其他选择器，它不以元素为最小选择单元，它选择的是元素指定内容。比如::before表示选择元素内容的之前内容，也就是""；::selection表示选择元素被选中的内容。
常见的伪元素：::first-letter 、 ::first-line 、 ::after 、 ::before 、 ::selection
伪类：很多，常用的有 :active :hover :link :visited :focus :disable :checked …
**2、**flex布局一个盒子里面有两个小盒子，分别放在左上角、右下角即筛子格式；用子元素设置align-self:flex-end;即可。
3、宽高不定的父元素，实现里面一个子元素宽高都是父元素宽一半的正方形？
子元素设置属性：padding-top: 50%; width: 50%;即可。主要考察padding，然而我没有用过。

2、重绘和重排（回流）？获取DOM元素、canvas绘图会影响它们吗？
**回流：**回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流，如下面情况：
添

加或删除可见的DOM元素
元素的位置发生变化
元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
页面一开始渲染的时候（这避免不了）
浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
还有一些容易被忽略的操作：获取一些特定属性的值
offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight
这些属性有一个共性，就是需要通过即时计算得到。因此浏览器为了获取这些值，也会进行回流。除此还包括getComputedStyle方法，原理是一样的。
**重绘：**可以把页面理解为一个黑板，黑板上有一朵画好的小花。现在我们要把这朵从左边移到了右边，那我们要先确定好右边的具体位置，画好形状（回流），再画上它原有的颜色（重绘）
除此之外还有一些其他引起重绘行为：
颜色的修改
文本方向的修改
阴影的修改

注：触发回流一定会触发重绘；CSS动画使用translate、scale代替top、height，即用重绘代替回流；

3、data为什么必须是函数，methods呢？
因为组件可能是多例，如果一个页面引用两个次同一个组件，这里如果组件里面的data是对象的话，如果修改其中一个另一个也会被修改，就会造成污染，分离不开了。其实根实例里面的data也可以是对象，因为他是单例。
methods ？
4、为什么打包会有package.lock.js文件，作用是什么？
package.json:
1、主要用来定义项目中需要依赖的包，在创建项目的时候会生成。

2、记录项目中所需要的所有模块。当你执行npm install的时候，node会先从package.json文件中读取所有dependencies信息，然后根据dependencies中的信息与node_modules中的模块进行对比，没有的直接下载，已有的检查更新（最新版本的nodejs不会更新，因为有package-lock.json文件，下面再说）。另外，package.json文件只记录你通过npm install方式安装的模块信息，而这些模块所依赖的其他子模块的信息不会记录。

package-lock.json：
1、在 npm install时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。

2、package-lock.json文件锁定所有模块的版本号，包括主模块和所有依赖子模块。当你执行npm install的时候，node从package.json文件读取模块名称，从package-lock.json文件中获取版本号，然后进行下载或者更新。
因此，正因为有了package-lock.json文件锁定版本号，所以当你执行npm install的时候，node不会自动更新package.json文件中的模块，必须用npm install packagename（自动更新小版本号）或者npm install packagename@x.x.x（指定版本号）来进行安装才会更新，package-lock.json文件中的版本号也会随着更新。

5、有没有发布过插件，npm打包插件发布过程是什么？
首先有一个账号；npm login； npm publish

6、Import from 'element’的时候是引用的node-module中的那个文件？
首先是在项目webpack配置中看有没有设置alias别名信息，找到引用的文件之后，某一个插件的信息入口信息也是在package.json中配置的。实际还是考察上面那个问题，看自己是否做过插件。

7、父子生命周期执行顺序？
一个完整的父子组件生命周期：

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted->父beforeUpdate->子beforeUpdate->子updated->父updated->父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

8、自己封装过组件吗，vue.use做了什么

9、watch\compent区别，如果this.name = 2； =3； =4在两个里面都执行了赋值的3个命令，那么两个分别执行几次？
10、修改数据后，原生js获取dom变量，会变吗？怎么才会变，$nextTick（）的原理？
nextTick是Vue提供的一个全局API , 由于Vue的异步更新策略导致我们对数据的修改不会立即体现在dom变化上，此时如果想要立即获取更新后的dom状态，就需要使用这个方法。
Vue在更新dom的时候是异步执行的。只要侦听到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个watcher被多次触发，只会被推入到队列中一次。这种在缓存时去除重复数据对于避免不必要的计算和dom操作是非常重要的。nextTick方法会在队列中加入一个回调函数，确保该函数在前面的dom操作完成后才调用。
我也有简单了解nextTick的实现，它会在callback里面加入我们传入的函数，然后用timerFunc异步方式调用它们，首选的异步方式会是promise，这让我明白了为什么可以在nextTick中看到dom操作结果。
11、求一个杂序的数组中的第五大数据值
leetcode215题：
12、跨域处理

FOUR(31分钟):

0、自我介绍；
1、介绍一个你觉得优秀的项目；
2、es6新语法；
3、觉得jq与现在使用的Vue的不同？
4、数据常用的几个函数？
5、执行题目
for(let i = 0; i < 7; i++){
console.log(i)
}
console.log(i)
然后把var 换成let const等打印的结果分别是什么？

var a = 20
function change(){
var a = 30
}
change()
console.log(a) // 20 在函数中使用使用var声明变量时候，该变量是局部的
var a2 = 20
function change2(){
a2 = 30
}
change2()
console.log(a2) // 30 如果在函数内不使用var，该变量是全局的
6、介绍下全局作用域，局部作用域，形参，实参？
7、项目时间如果不够怎么处理？
8、离职原因？
9、Vue使用的难点？vue3了解吗？
10、自己封装的组件有哪些？npm打包的时候遇到什么问题？
11、

FIVE(26分钟)

15、画一条0.5px的直线？
transform: scale(0.5,0.5); // 2D缩放转化
1、静态动态元素的对比：vnode ===vnode
2、原型如何获取如何定义
3、Flex :

flex-basis
对于子项1，flex-basis 如果设置默认是auto，子项占用的宽度使用width 的宽度，width没设置也为 auto，所以子项占用空间由内容决定。
对于子项2，flex-basis 为auto，子项占用宽度使用width 的宽度，width 为70px，所以子项子项占用空间是70px。
对于子项3，flex-basis 为100px，覆盖width 的宽度，所以子项占用空间是100px。
flex-basis
对于子项1
flex-shrink
用来“吸收”超出的空间
4、Vue 优化
5、订阅发布了解吗
6、BFC
BFC = Block Formatting context 意思是“块级格式化上下文”，W3C的解释是：它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。
目的就是：形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局。
解决的问题：
1、解决浮动元素令父元素高度塌陷的问题
2、解决自适应布局的问题
3、解决外边距垂直方向重合问题