前端小白面试经历

前端面试经历（2021春招实习面经）

腾讯

其实这是我第一次投简历面试，时间没把握好，赶在最后一天投递了简历（内推）。结果第二天早上11点就接到了电话，也没有很充分的准备（而且还是像腾讯这样的大厂），讲真我觉得有点对不起面试官，耽误了他的时间，确实准备的不充分。
把面试经历写下来，也算是一种学习提升。

4.18中午11点（QQ看点电话面试，30min）

面试官是一个很温柔的哥哥，但是由于之前准备的真的不是很充分，所以感觉面试官可能能和我聊的不是很多，再加上这是第一次面试，真的紧张到爆炸。

1. 自我介绍。

2. 用户输入URL网址到网页加载出来经历了哪些过程？

当我们输入地址的时候，浏览器就开始在匹配可能的url（在书签、历史记录等），并且给出提示，让用户可以补全url。网址完全输入，按下回车后：
（1）浏览器进行DNS解析。浏览器会先在本地的hosts文件中看看有没有和这个域名对应的ip，如果打开这个ip没有的话浏览器会发送DNS请求到DNS服务器（先去本地DNS服务器去查找，有则返回，没有的话本地DNS服务器继续想根根DNS服务器发送请求），然后将获取到的ip返回，并且本地的DNS服务器还将这个对应关系保存在缓存中，方便下次查询。这里的查询是迭代查询，查询的递交者是客户端。
（2）拿到对应的ip后，浏览器与服务器通过三次握手建立TCP/IP连接后，发送http请求，进行网络通信，浏览器从应用层到传输层（TCP）、到网络层（IP）、到链路层（网络），客户端发送请求的阶段结束。
（3）服务器接收到客户端发送的http请求后，查找客户端请求的资源，然后再从链路层到网络层、到传输层、到应用层，将响应报文返回，通过四次挥手断开TCP/IP连接。
（4）浏览器收到html、css、js等文件后，解析html构建DOM树、构建render树、布局render树、绘制render树，然后解析css文件构建渲染树，这个过程完成后，浏览器开始布局渲染树并将其绘制到页面中。在首次加载时会经历回流和重绘，速度较慢。js的加载可以看成是这个同步的主线程上的一个任务队列。有的网页页面很大，可以用预加载和懒加载提升用户体验。
（from： https://www.cnblogs.com/wuqilang/p/11192313.html）

3. HTTP协议工作原理？

HTTP是面向事务的应用层协议，它使用TCP连接进行可靠传输，服务器默认监听在80端口。
一次HTTP操作称为一个事务，其工作整个过程如下：
（1）地址解析。如用客户端浏览器请求一个页面，先从url中分解出协议名、主机名、端口、对象路径等部分，再由域名系统DNS解析域名,得主机的IP地址。
（2）封装HTTP请求数据包。把分解出来的信息结合本机自己的信息，封装成一个HTTP请求数据包。
（3）封装成TCP包，建立TCP连接（TCP的三次握手）
（4）客户机发送请求命令。建立连接后，客户机发送一个请求给服务器，请求方式的格式为：统一资源标识符（URL）、协议版本号，后边是MIME信息包括请求修饰符、客户机信息和可内容。
（5）服务器响应。服务器接到请求后，给予相应的响应信息，其格式为一个状态行，包括信息的协议版本号、一个成功或错误的代码，后边是MIME信息包括服务器信息、实体信息和可能的内容。实体消息是服务器向浏览器发送头信息后，它会发送一个空白行来表示头信息的发送到此为结束，接着，它就以Content-Type应答头信息所描述的格式发送用户所请求的实际数据。
（6）服务器断开TCP连接
（感觉这篇文章描述很详细）

4. js的循环事件机制和对js单线程的理解。

（1）单线程
JavaScript属于单线程作业，即在同一时间只能执行一个代码块，这些代码块的执行阻塞了异步事件的处理。
任务分为同步任务（在主线城市排队执行的任务）和异步任务（进入一个任务队列而不是主线程）。

①所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
②主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，
就在"任务队列"之中放置一个事件。
③一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪
些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
④主线程不断重复上面的第三步。

只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。这个过程会不断重复。
（2）事件循环

5. js作用域了解吗？

• 全局作用域：在代码程序的任何地方都能被访问，window对象的内置属性都拥有全局作用域。
• 函数作用域：在固定的代码片段才能被访问（函数外部不可以访问函数内声明的变量）

6. 了解原型和原型链吗？

• 原型：构造一个对象时参考的已有对象，被参考对象称为原型。在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。每个对象(除null外)都会有的属性，叫做__proto__，这个属性会指向该对象的原型。
• 原型链：简单的回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么假如我们让原型对象等于另一个类型的实例，结果会怎样？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立。如此层层递进，就构成了实例与原型的链条。这就是所谓的原型链的基本概念。——摘自《javascript高级程序设计》
• 原型与原型链

7.js中的this指针

• 在普通函数中，它的值在函数调用时决定；如果是直接调用，那么this就是global，在浏览器中就是window。
• 箭头函数里，this会捕获其外界环境量的this，就像闭包捕获外界环境中的普通变量一样；
• 在构造函数中，this就是刚刚被创建的新对象。

8. Vue生命周期？

vue的生命周期中会有很多钩子函数：

1. beforeCreate
   在这两个钩子之间的生命周期，初始化事件，进行数据观测。在created的时候数据已经和data属性进行绑定（视图会随着data中的属性值发生改变的同时进行改变）。
   注意此时没有el（vue实例挂载的元素节点，值可以是 CSS 选择符，或实际 HTML 元素，或返回 HTML 元素的函数，实例挂载后可以通过vm.$el访问）选项。
2. created
   （1） 首先判断对象是否有el对象，如果有继续向下编译，如果没有，则停止编译，即停止了生命周期，直到该vue实例上调用vm.$mount(el)。
   （2） template参数选项的有无对生命周期的影响：

• 如果vue实例对象中有template参数选项，则将其作为模板编译成render函数。
• 如果没有template选项，则外部HTML作为模板编译。
• 优先级：render函数选项 > template函数选项 > outer HTML

3. beforeMount
   给vue实例对象添加$ el成员，并且替换掉挂载的DOM元素（虚拟DOM）。Create vm.$el and replace “el” with it.
4. mounted
   模板编译、挂载之后。在mounted之前，先用虚拟DOM技术将位置占住，然后等到mounted挂载的时候将值渲染进去。
5. beforeUpdate
   当vue发现data中数据发生改变后，会触发对应组件进行重新渲染
6. updated
   完成重新渲染，视图更新。
7. beforeDestory
   在实例销毁前调用（此时实例还是可用的）。
8. destoryed
   在vue实例销毁后调用。调用后，vue实例指示的所有东西都会解绑定，所有事件监听器被移除，所有子实例也会被销毁。
   （可以结合这里的后台输出理解）

9. 熟悉css吗？对于垂直居中有几种方案？

10. 介绍一下之前做过的项目。

11. 有什么想问我的。