面试题及答案

面试题集：

1.浏览器的原理
浏览器工作原理的实质就是实现http协议的通讯，具体过程以下三点：
①连接，服务器通过一个ServerSocket类对象对某端口进行监听，监听之后进行连接，打开一个socket虚拟文件。
②请求，创建与监理socket连接相关的流对象后，浏览器获取请求，为get请求，则从请求信息中获取所访问的html文件名，向服务器发送请求。
③响应，服务器收到请求后，搜索相关的目录文件，若不存在，返回错误的信息。若存在，则读取html文件，进行加http头等处理响应给浏览器，浏览器解析html文件，若其中还包含图片，视频等资源，则浏览器再次访问web服务器，获取图片视频等，并对其进行组装显示给用户。
2.页面渲染的过程
①构建DOM
②加载次级的资源
③JS 的下载与执行
④样式计算
⑤获取布局
⑥绘制各元素
⑦合成帧
3.http1和http2的区别
①HTTP2使用的是二进制传送，HTTP1.X是文本（字符串）传送
②HTTP2支持多路复用
③HTTP2头部压缩
④HTTP2支持服务器推送
4.状态码
①2xx （3种）
200 OK：表示从客户端发送给服务器的请求被正常处理并返回；
204 No Content：表示客户端发送给客户端的请求得到了成功处理，但在返回的响应报文中不含实体的主体部分（没有资源可以返回）；
206 Patial Content：表示客户端进行了范围请求，并且服务器成功执行了这部分的GET请求，响应报文中包含由Content-Range指定范围的实体内容。
②3xx （5种）
301 Moved Permanently：永久性重定向，表示请求的资源被分配了新的URL，之后应使用更改的URL；
302 Found：临时性重定向，表示请求的资源被分配了新的URL，希望本次访问使用新的URL；
301与302的区别：前者是永久移动，后者是临时移动（之后可能还会更改URL）
303 See Other：表示请求的资源被分配了新的URL，应使用GET方法定向获取请求的资源；
302与303的区别：后者明确表示客户端应当采用GET方式获取资源
304 Not Modified：表示客户端发送附带条件（是指采用GET方法的请求报文中包含if-Match、If-Modified-Since、If-None-Match、If-Range、If-Unmodified-Since中任一首部）的请求时，服务器端允许访问资源，但是请求为满足条件的情况下返回改状态码；
307 Temporary Redirect：临时重定向，与303有着相同的含义，307会遵照浏览器标准不会从POST变成GET；（不同浏览器可能会出现不同的情况）；
③4xx （4种）
400 Bad Request：表示请求报文中存在语法错误；
401 Unauthorized：未经许可，需要通过HTTP认证；
403 Forbidden：服务器拒绝该次访问（访问权限出现问题）
404 Not Found：表示服务器上无法找到请求的资源，除此之外，也可以在服务器拒绝请求但不想给拒绝原因时使用；
④5xx （2种）
500 Inter Server Error：表示服务器在执行请求时发生了错误，也有可能是web应用存在的bug或某些临时的错误时；
503 Server Unavailable：表示服务器暂时处于超负载或正在进行停机维护，无法处理请求；
4.解决1px在移动端上显示的问题
5.router-link的属性
6.路由的模式有哪两种，区别是什么
7.动态路由和路由的懒加载是怎样实现的
8.vue的生命周期
9.原型链以及原型链最终指向什么
10.vuex中的mutation和action以及对应的映射函数
11.路由的传值方式有哪些
12.vue3与vue2的区别
13.vue与react的区别
14.虚拟dom的实现原理
15.get post的区别
16.前端优化方法
17.常用的设计模式，设计模式使用的例子
18.https加密的原理
19.event loop循环的原理
20.宏任务和微任务
21.nextTick与定时器的区别，以及nextTick的原理
22.自己如何实现深拷贝
23.webpack的配置
24.数据类型检验方式
①typeof:
注意：typeof null ->“object” 因为null是一个空对象指针；typeof不能具体的细分对象、数组、正则等,因为不管检测哪一个返回的都是"object"
②instanceof
注意：检测当前实例是否属于某一个类,属于的话返回true,不属于返回false；
instanceof的局限性:只要在这个实例的原型链上的类,用instanceof检测的时候都为true
③constructor
注意：ary.constructor===Array ->true 说明ary是Array这个类的一个实例(constructor可以让用户自己来修改,所有我们一般不用这个来检测)
④toString
注意：在Object.prototype上有一个toString方法,这个方法执行的时候,会返回方法中this关键字对应数据值的数据类型；
这样的话,我们就可以让Object.prototype.toString执行,并且通过call/apply来改变里面的this关键字,也就是想检测谁的数据类型,我们就可以让this变为谁

25.es5和es6中的数据类型有哪些？
字符串（String）、数字（Number）、布尔（Boolean）、空（Null）、未定义（Undefined）、Symbol、对象（Object）、数组（Array）、函数（Function）
26.模块化开发的理解
27.git中tag和版本回滚
28.获取两个数组中的公共值
29.webpack中出口的属性，以及要将其打包成不同的模式怎么做
30监测数据类型的几种方式
①typeof:用于检测简单数据类型：String，Number，Boolean，Undefined，Null检测出来为Object，复杂数据类型除了Function可以检测出来，其他的Array，Object都为Object,例如：

 console.log(typeof 'aaaa') // String

console.log(typeof null) // Object

②intanceof：主要用于区分引用数据类型，检测方法是检测的类型在当前实例的原型链上，用其检测出来的结果都是true，不太适合用于简单数据类型的检测，检测过程繁琐且对于简单数据类型中的undefined, null, symbol检测不出来

 let person = {
    name: 'candy',
    age: 3
  }
  console.log(person instanceof Object) //true
  let arr = ['123', 'sda', 'sss']
  console.log(arr instanceof Array) //true

③constructor：用于检测引用数据类型，检测方法是获取实例的构造函数判断和某个类是否相同，如果相同就说明该数据是符合那个数据类型的，这种方法不会把原型链上的其他类也加入进来，避免了原型链的干扰。

  const str = 'person'
  console.log(str.constructor === String) //true
  const arr = []
  console.log(arr.constructor === Array) //true
  const num = 123
  console.log(num.constructor === Number) //true
  const obj = {}
  console.log(obj.constructor === Object) //true
  const boolean = true
  console.log(boolean.constructor === Boolean) //true
  const nul = null
  console.log(nul.constructor === Null) //Cannot read properties of null (reading 'constructor')
  const und = undefined
  console.log(und.constructor === Undefined) // Cannot read properties of undefined (reading 'constructor')

④Object.prototype.toString.call(数据)：适用于所有书库类型的判断，返回的是该数据类型的字符串

  console.log(Object.prototype.toString.call({})) //[object Object]
  console.log(Object.prototype.toString.call([])) //[object Array]
  console.log(Object.prototype.toString.call('123')) //[object String]
  console.log(Object.prototype.toString.call(123)) //[object Number]
  console.log(Object.prototype.toString.call(true)) //[object Boolean]
  console.log(Object.prototype.toString.call(undefined)) //[object Undefined]
  console.log(Object.prototype.toString.call(null)) // [object Null]

加分项：instanceof的实现原理：验证当前类的原型prototype是否会出现在实例的原型链__proto__上，只要在它的原型链上，则结果都为true。因此，instanceof 在查找的过程中会遍历左边变量的原型链，直到找到右边变量的 prototype，找到返回true，未找到返回false。 Object.prototype.toString.call()原理：Object.prototype.toString 表示一个返回对象类型的字符串，call()方法可以改变this的指向，那么把Object.prototype.toString()方法指向不同的数据类型上面，返回不同的结果