前端面试笔记

1. flex布局属性

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
设置在父容器上的属性：

• flex-direction 主轴排列方向
  flex-direction: row | row-reverse | column | column-reverse;
• flex-wrap 是否换行
  flex-wrap: nowrap | wrap | wrap-reverse;
• flex-flow : flex-direction 和 flex-wrap的简写形式
  flex-flow: <flex-direction> || <flex-wrap>;
• justify-content 主轴上的对齐方式
  justify-content: flex-start | flex-end | center | space-between | space-around;
• align-items 交叉轴上的对齐方式
  align-items: flex-start | flex-end | center | baseline | stretch;
• align-content 多根轴线的对齐方式
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;

设置在项目上的属性：

• order 项目的排列顺序，值越小，越靠前
  order: <integer>;
• flex-grow 项目放大比例，默认0，即如果存在剩余空间，也不放大。
• flex-shrink 项目缩小比例，默认为1，即如果空间不足，该项目将缩小。0 ，不缩小
• flex-basis 定义了在分配多余空间之前，项目占据的主轴空间。根据这个属性，计算主轴是否有多余空间。默认为auto,即项目本来大小。
• align-self 设置单个项目与其他项目不一样的对齐方式。可覆盖align-items属性。默认值为auto。
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
• flex
  是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

2. BFC

形成条件：

• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position：absolute，fixed；
• display 为以下其中之一的值： inline-block，table-cell，table-caption
• overflow 除了 visible 以外的值：hidden，auto，scroll

作用：

• 浮动元素无法撑起父元素
• 不被浮动元素覆盖
• BFC解决margin塌陷问题

3. http缓存：强缓存 弱缓存https://www.cnblogs.com/echolun/p/9419517.html

• 强缓存： 不发起http请求，直接使用本地缓存，比如浏览器地址栏回车，使用浏览器的刷新按钮，在Expires或max-age生效的情况下，触发的都是强缓存。
• 协商性缓存(弱缓存)： 在使用本地缓存前，先与服务器协商，核对缓存文件是否为最新。比如设置了 cache-control=no-cache，不管你做任何操作，都会发起请求，这一类就是协商性缓存了。

4. 跨域 iframe form

• 同源策略的本质是，一个域名的 JS ，在未经允许的情况下，不得读取另一个域名的内容。但浏览器并不阻止你向另一个域名发送请求。

• 跨域并非不一定是浏览器限制了发起跨站请求，而也可能是跨站请求可以正常发起，但是返回结果被浏览器拦截了。最好的例子是 CSRF 跨站攻击原理，请求是发送到了后端服务器无论是否跨域！
  注意：有些浏览器不允许从 HTTPS 的域跨域访问 HTTP，比如 Chrome 和 Firefox，这些浏览器在请求还未发出的时候就会拦截请求，这是一个特例。

  为什么form表单提交没有跨域问题，但ajax提交有跨域问题？

  • form表单提交是单向的：只能给服务器发送数据，但是无法获取服务器返回的数据，也就是无法读取HTTP应答包。
  • 而AJAX 是可以读取响应内容的，因此浏览器不能允许你这样做。

5. apply call bind 的区别

• call和apply改变了函数的this上下文后便执行该函数,而bind则是返回改变了上下文后的一个函数。
• call, bind从第二个参数开始以参数列表的形式展现,apply则是把参数放在一个数组里面作为它的第二个参数。

6. promise 的方法

https://blog.csdn.net/weixin_40693643/article/details/106616592

• Promise.all() // 实例中只要有一个被rejected,状态变为rejected，返回第一个rejected的实例的返回值；都为fulfilled,则返回所有实例的返回值数组；
• Promise.race() // 只要有一个实例率先改变状态，那个实例的返回值就被传出给回调函数；
• Promise.allSettled() // 等待所有实例返回结果，无论fulfilled还是rejected;状态总是fulfilled。返回给回调函数的是一个数组，里面是每个Promise实例
• Promise.any() // 参数实例只要有一个变为fulfilled状态，包装实例就会变成fulfilled。没有的话，则返回所有失败实例的返回值数组。

7. es6

https://es6.ruanyifeng.com/

8. 浏览器输入一个域名，过程

9. 简单请求 复杂请求 options

这两种请求的区别主要在于是否会触发CORS(Cross-Origin Resource Sharing)预检请求

简单请求：

1. 请求方法：

• GET
• POST
• HEAD
  特别适用在优先的速度和带宽下
  1.检查资源的有效性。
  2.检查超链接的有效性。
  3.检查网页是否被串改。
  4.多用于自动搜索机器人获取网页的标志信息，获取rss种子信息，或者传递安全认证信息等。

2. 不能自定义请求头header, 以下头部信息除外：

• Accept
• Accept-Language
• Content-Language
• Content-Type
• DPR
• Downlink
• Save-Data
• Viewport-Width
• Width

3. Content-Type 的值仅限于下列三者之一：

• text/plain
• multipart/form-data 文件上传时要使用的数据类型
• application/x-www-form-urlencoded 最常见的post的数据类型，也是表单提交的数据类型，jquery的ajax默认也是这个

复杂请求：
不符合简单请求的就是复杂请求。在实际进行请求之前，需要发起预检请求的请求。
案例：

• 跨域ajax两次请求 一次为option（复杂请求）

简单请求与复杂请求的跨域设置:
针对简单请求，在进行CORS设置的时候，我们只需要设置

Access-Control-Allow-Origin:*
// 如果只是针对某一个请求源进行设置的话，可以设置为具体的值
Access-Control-Allow-Origin: 'http://www.yourwebsite.com'

针对复杂请求，我们需要设置不同的响应头。因为在预检请求的时候会携带相应的请求头信息

Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-CUSTOMER-HEADER, Content-Type

相应的响应头信息为：

Access-Control-Allow-Origin: http://xxx.com
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
// 设置max age，浏览器端会进行缓存。没有过期之前真对同一个请求只会发送一次预检请求
Access-Control-Max-Age: 86400

11. https 与 http 的区别

• https协议需要到CA申请证书，一般免费证书较少，因而需要一定费用。
• http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl/tls加密传输协议。
• http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
• http的连接很简单，是无状态的；HTTPS协议是由SSL/TLS+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

12. http2

13. tcp 三次握手， 四次挥手

14. vue data数据更新了， beforeupdate update 执行了么

https://blog.csdn.net/wq_ocean_/article/details/108918689

• beforeUpdate是针对视图层，视图层的数据发生改变才会触发
• 在beforeUpdate里改变数据，还没有更新到视图层，因此在beforeUpdate里再次变化的数据是没有更新到视图层，不会再次触发beforeUpdate。
• 如果在updated里改变数据，此时数据已经更新至视图层，就会触发beforeUpdate

15. computed watch 区别

computed:

• 计算属性具有缓存。计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 lastName和firstName都没有发生改变，多次访问 fullName计算属性会立即返回之前的计算结果，而不必再次执行函数。

watch:

• 而侦听器watch是侦听一个特定的值，强调自身值得改变前后的动作，当该值变化时执行特定的函数。例如分页组件中，我们可以监听当前页码，当页码变化时执行对应的获取数据的函数。
• 两个参数:
  　　immediate：组件加载立即触发回调函数执行，
  　　deep: 深度监听，为了发现对象内部值的变化，

17. 判断对象，判断数组，判断数据类型的方法

判断数据类型：

• typeof 返回值类型有：string, number, boolean, undefined, object, function

• instanceof 检测对象的原型链是否指向构造函数的prototype对象的。

   var o = { 
             'name':'lee'
           };
   var a = ['reg','blue'];
   console.log(o instanceof Object);// true
   console.log(a instanceof Array);//  true
   console.log(o instanceof Array);//  false
  

• constructor 属性返回对创建此对象的数组函数的引用

  var o = { 
             'name':'lee'
          };
  var a = ['reg','blue'];
  console.log(o.constructor == Object);//true
  console.log(a.constructor == Array);//true
  

• object.isArray()

• Object.prototype.toString.call

  var o = { 
            'name':'lee'
          };
  var a = ['reg','blue'];
  function c(name,age){
           this.name = name;
           this.age = age;
   }
  var c = new c('kingw','27');
  console.log(Object.prototype.toString.call(a));//[object Array]
  console.log(Object.prototype.toString.call(o));//[Object Object]
  console.log(Object.prototype.toString.call(c));//[Object Function]
  console.log(Object.prototype.toString.call(new c));//[Object Object]