03前端实习面经之体坛

前端实习面试经验

本系列文章为本菜鸟记录自己的前端面试经验，也希望帮助到需要者。

---

---

公司

base北京

面试题

不知道什么原因先后来了两个面试官，第一个感觉是来帮忙的

1.介绍你的项目

2.项目用的框架，在线能登录吗？部署了吗

3.项目做了多久

4.研究生的课题是什么？

5.课题做的怎么样了？怎么做数据集？爬虫怎么写的，课题的方向是？

6.弹性布局

7.标准流代码怎么写

8.样式组件库等

9.echarts怎么使用

10.垃圾回收机制，以及时间周期，以及触发的标准

11.vuex是干什么的，以及怎么使用

12.router是干什么的

13.http协议有哪些有哪些，以及握手

14.nlp的一些问题

15.怎么实现九宫格

、、、、、第一个人问的很简单，但是有些问题也很奇怪，感觉是照着简历问的，接下来是第二个人

1.介绍自己

2.浮动的属性以及应用，比如左右布局

当时可能比较紧张，说自己没怎么使用过。面试官觉得很奇怪，一直引导我。

3.常用的定位属性

较为简单

4.相对定位和绝对定位的区别，讲一下固定定位

较为简单

5.怎么让两个块元素挨着一起

偏移、flex、浮动、变成行内块

6.class的权重，比如在用ui组件，当ui组组件的样式不满足的时候，我们怎么改呢

1. 另外写一个，但不要加scoped,将需要覆盖的元素样式写入进去，scoped属性限制了样式仅在当前文件作用域内有效，不会穿透到封装元素上，去掉scoped属性后就可以实现样式穿透，缺点是会覆盖全局样式，但我们可以在引入组件外包裹一个父元素，然后使用父子选择器来精确命中本组件内的UI组件元素，进而规避样式污染的问题

<style lang="less">
    // 需要覆盖的样式
    .wrapper .el-table--body {}
</style>
<style lang="less" scoped>
    // 本地样式
</style>

2. less 和 sass 中都提供了 /deep/ 深度穿透选择器，此时我们依旧可以保留scoped属性而不必担心样式污染。

<style lang="less" scoped>
    /deep/ .el-table--body {}
</style>

3. vue中提供了深度选择器>>>，但是sass等工具还无法识别他，需要写在单独的style里面

<style scoped>
    // 需要覆盖的样式
    .wrapper >>> .el-table--body {}
</style>
<style lang="less" scoped>

4. important也可以，但是会把权重调的太高了，可能导致局部所有的样式全被important了

7.讲一下浏览器的基本原理

8.vue2组件的通信

见02前端面试合合信息第6题所整理的

10.vue2生命周期

较为简单，不做整理。但是需要明白哪个周期做了什么

11.父子组件生命周期执行过程

较为简单，不做整理

12.vue的nextTick

• 定义

在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM

• 理解

vue在更新DOM是异步执行的。当数据发生变化时，vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新。

• 补充知识点

js的事件循环机制（Event Loop)
在浏览器这个进程里面，有许多线程，其中一个就是JS引擎线程，还有一个GUI渲染进程。这两个线程是互斥的，其中一个进程运行，另一个就挂起。浏览器就是要把js代码解析完后才去渲染页面，否则如果在渲染页面同时去修改页面的DOM元素，那么可能就会导致页面出错。
js引擎线程里就是基于事件循环来执行的。
它的执行顺序如下：

1. 所有同步代码都在主线程上执行，每执行一行同步任务，就把其推入执行栈中。
2. 遇到异步任务时，js就把异步任务交给浏览器的webAPI去处理（其实就是类似AJax\setTimeout这些），处理完后把异步任务的运行结果推入一个“异步任务队列”。但是异步任务队列里有宏任务队列和微任务队列，下面会说一些代表性的宏任务和微任务。
3. 当执行栈中所有同步任务执行完毕以后，系统就开始去执行异步任务队列里的异步事件。记住，微任务优先级高于红花任务，所以先执行微任务，再执行宏任务。又要注意，在执行宏任务时，每执行一个宏任务浏览器就又要去检查一遍微任务队列是否有新的微任务，有就执行，没有就继续执行宏任务。
4. 主线程不断重复执行上面三步
   
   宏任务微任务分类：
   宏任务：setTimeout、SetInterval、MessageChannel等
   微任务：Promise.then、async/await等。

• nextTick

nextTick内部其实就是根据这种机制来运行的。nextTick时让浏览器页面渲染后再执行其中的回调。
nextTick内部就是把自己写的哪个回调也当作一个异步任务（微任务或者宏任务），然后把他放在vue更新dom这个异步任务后面，通常是放在一个事件循环的最后执行，所以nextTick就具有了在更新dom后操作页面的能力

• 为什么要有nextTick

如果没有nextTick更新机制，那么num每次更新值都会触发视图更新。（比如一个循环里面去修改数据，那么视图就会更新循环的次数），有了nextTick机制，只需要更新一次，所以nextTick是一种优化策略。

13.js的常见数据类型

较为简单，不做整理。但是记得不要说漏了

14.复杂数据类型和基本数据类型的区别

说了堆栈，面试官问 这样会造成什么问题呢
说了 可能watch会无法监听到复杂数据类里面的变化，问该怎么解决？
讲了深度监听，但是问还有没有其他方法，我目前没有找到其他方法

15.axios与ajax的区别

• 简单记住：

axios是ajax的一个实现，ajax是异步请求数据的机制。axios是机制的实现。

• 区别

（1）Axios是一个基于Promise的HTTP库，而Ajax是对原生XHR的封装
（2）Ajax技术实现了局部数据的刷新，而Axios实现了对ajax的封装

• 区别总结

axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样，简单来说就是ajax技术实现了局部数据的刷新，axios实现了对ajax的封装，axios有的ajax都有，ajax有的axios不一定有，总结一句话就是axios是ajax，ajax不止axios。

注： 传统Ajax 指的是 XMLHttpRequest（XHR），axios和jQuery ajax都是对Ajax的封装。

• AJAX

（1）概念

Ajax是对原生XHR的封装，为了达到我们跨域的目的，增添了对JSONP的支持

是异步的javascript和xml，ajax不是一门新技术，而是多种技术的组合，用于快速创建动态页面，能够实现无刷新更新数据从而提高用户体验。

（2）原理

由客户端请求ajax引擎，再由ajax引擎请求服务器，服务器作出一系列响应之后返回给ajax引擎，由ajax引擎决定将这个结果写入客户端的什么位置。实现页面无刷新更新数据

（3）核心对象

XMLHttpReques

（4）AJAX优点

无刷新更新数据
异步与服务器通信
前端和后端负载平衡
基于标准被广泛支持
界面与应用分离

（5）AJAX缺点

不能使用Back和history功能，即对浏览器机制的破坏
安全问题ajax暴露了与服务器交互的细节
对搜索引擎的支持比较弱
破坏程序的异常处理机制
违背URL和资源定位的初衷
ajax不能很好的支持移动设备
太多客户端代码造成开发上的成本

（6）Ajax适用场景

表单驱动的交互
深层次的树的导航
快速的用户与用户之间的交流响应
对数据进行过滤和操作相关数据的场景
普通文本输入提示和自动完成的场景

（7）Ajax不适用场景

搜索
基本的导航
替换大量的文本

（8）Ajax请求的五个步骤

1.创建XMLHttpRequest异步对象
2.设置回调函数
3.使用open方法与服务器建立连接
4.向服务器发送数据
5.在回调函数中针对不同的响应状态进行处理

• Axios
  （1）概念

Axios是一个基于Promise的HTTP库，可以用在浏览器和node.js中

（2）特性

在浏览器中创建XMLHttpRequests
在node.js则创建http请求
支持Promise Api
支持拦截请求和响应
转换请求和响应数据
取消请求
自动转换成JSON数据格式
客户端支持防御XSRF

---

总结

这一次感觉比前两次面试好了很多，面试官也有所引导。基础的css样式等方面还需要加强学习！