前端面试题（七）

目录

1.浏览器输入URL发生了什么？

2.new会发生什么？

3.token能放在cookie中吗？

4.盒模型

5.组件通信的方式

6.v-if 和 v-show区别

1.说一下浏览器输入URL发生了什么？

输入地址，浏览器查找域名的IP地址。浏览器向该IP地址的web服务器发送一个HTTP请求，在发送请求之前浏览器和服务器建立TCP的三次握手，判断是否是HTTP缓存，如果是强制缓存且在有效期内，不再向服务器发请求，如果是HTTP协商缓存向后端发送请求且和后端服务器对比，在有效期内，服务器返回304，直接从浏览器获取数据，如果不在有效期内服务器返回200，返回新数据。请求发送出去服务器返回重定向，浏览器再按照重定向的地址重新发送请求。如果请求的参数有问题，服务器端返回404，如果服务器端挂了返回500。如果有数据一切正常，当浏览器拿到服务器的数据之后，开始渲染页面同时获取HTML页面中图片、音频、视频、CSS、JS，在这期间获取到JS文件之后，会直接执行JS代码，阻塞浏览器渲染，因为渲染引擎和JS引擎互斥，不能同时工作，所以通常把Script标签放在body标签的底部。 渲染过程就是先将HTML转换成dom树，再将CSS样式转换成stylesheet，根据dom树和stylesheet创建布局树，对布局树进行分层，为每个图层生成绘制列表，再将图层分成图块，紧接着光栅化将图块转换成位图，最后合成绘制生成页面。

2.说一说new会发生什么？

`new`关键字会进行如下的操作：1.创建一个空对象（即`{}`）；2.为新创建的对象添加属性`__proto__`，将该属性链接至构造函数的原型对象；3.将新创建的对象作为`this`的上下文；4.如果该函数没有返回对象，则返回`this`。`new`关键字后面的构造函数不能是箭头函数。

3.说一下token能放在cookie中吗？

能。token一般是用来判断用户是否登录的，它内部包含的信息有：uid（用户唯一的身份标识）、time（当前时间的时间戳）、sign（签名，token的前几位以哈希算法压缩成的一定长度的十六进制字符串）。token可以存放在Cookie中，token是否过期，一般由后端来判断，所以token存储在cookie中只要不设置cookie的过期时间就可以，如果token失效，就让后端在接口中返回固定的状态表示token失效，需要重新登录，再重新登录的时候，重新设置cookie中的token就行。

token认证流程：1.客户端使用用户名跟密码请求登录。2. 服务端收到请求，去验证用户名与密码。3.验证成功后，服务端签发一个token，并把它发送给客户端。4.客户端接收token以后会把它存储起来，比如放在cookie里或者localStorage里。5.客户端每次发送请求时都需要带着服务端签发的token（把token放到HTTP的Header里）。6.服务端收到请求后，需要验证请求里带有的token，如验证成功则返回对应的数据。

4.说一说盒模型？

CSS盒模型定义了盒的每个部分包含margin，border，padding，content。根据盒子大小的计算方式不同盒模型分成了两种，标准盒模型和怪异盒模型。标准模型，给盒设置 width和height，实际设置的是content box。padding和border再加上设置的宽高一起决定整个盒子的大小。怪异盒模型，给盒设置width和height，包含padding和border，设置的width和height就是盒子实际的大小，默认情况下，盒模型都是标准盒模型。设置标准盒模型：`box-sizing:content-box`；设置怪异盒模型：`box-sizing:border-box`。

5.说一说组件通信的方式？

12种方式实现vue组件通信 - 简书我们知道vue组件通信有很多种，这里我把自己所知道12种vue组件通信总结出来 1：父子组件通信 ，（v-bind和props实现父子传值） parent.vue child...https://www.jianshu.com/p/23b97e324b50

6.说一说 v-if 和 v-show区别？

作用：都是控制元素隐藏和显示的指令。

区别：v-show：控制的元素无论是true还是false，都被渲染出来了，通过display：none控制元素隐藏；v-if：控制的元素是true，进行渲染，如果是false不渲染，在dom树结构中不显示。应用：v-show：适合使用在频繁切换显示/隐藏的元素上；v-if：适合使用在切换不频繁，且元素内容很多，渲染一次性能消耗很大的元素上。