Interview Summary
前端面试总结
1、盒子模型
所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
不同部分的说明：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
2、https加密
https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议，比http协议的安全性更高。
Https协议需要ca证书，费用较高。https则是具有安全性的ssl加密传输协议。
3、css实现两栏布局、左边固定、右边自适应
https://segmentfault.com/a/1190000010698609
4、vue与react的区别
https://blog.csdn.net/qq_37617413/article/details/90669216
5、vue的双向绑定原理
vue的数据双向绑定主要通过Object.defineProperty()方法来进行数据劫持以及发布者-订阅模式来实现的，
- 具体怎么实现的呢？
要想实现数据的双向绑定首先就要通过数据拦截来进行监听数据的改变，这个时候就要设置一个监听器Observer来进行监听，如果属性发生改变的话就告诉订阅者Watcher看看是否需要改变，同时的话订阅者可以有好多个，我们就用一个订阅者管理器(Dep)来管理这些订阅者。紧接着我们还要有个指令解析器来对每个节点进行扫描和解析（解析节点的指令如v-on）,把他们初始化成一个订阅器Watcher,并且绑定相应的函数，Watcher会对比前后两个的数值是否发生变化，然后确定是否通知视图进行重新渲染；
6、vuex的核心属性
- state:vuex的基本数据，提供唯一 的公共数据源，所有共享的数据都要统一放在store中的state中，使用单一状态树，包含我们所需要的基本状态参数
- getter：相当于State的计算属性
- mutation:更新数据的方法，同步方式
- action:功能和mutaion大致相同，action是通过提交mutation来更改状态。
- module:整个store对象集中到一个很大的对象，将store分割到很多模块，使得每个模块拥有自己的属性
7、box-sizing的使用场景
首先盒子模型：ie盒子模型和标准W3C盒子模型
- 标准盒子模型：width=content height=content
- ie盒子模型：width=margin+border+padding+content
1、考虑到盒子的大小设置会比较麻烦，有时设置的width，结果最后大小不是之前设置的大小，所以这时就要box-sizing登场了，当我们设置box-sizing:border-box以后，如果我们想要一个宽度100的盒子，直接设置width为100，就不用考虑该盒子是否为标准盒子了。这是box-sizing最实用的一个属性。等于：siting-width=border+padding+content-width;（为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度）
2、当box-sizing设置成content-box后，等于标准情况：siting-width=conten-width;（在宽度和高度之外绘制元素的内边距和边框。）
8、弹性flex布局
通过修改父元素div的
display:flex，让父元素成为一个flex容器，从而可以自由的操作容器中子元素（项目）的排列方式。
- 为什么现在我们都用flex布局
例如我们让多个div横向排列，传统做法是使用浮动，但浮空后因为脱离文档流的缘故，父元素会失去高度，这又涉及了清除浮动等一系列的问题。
而flex布局相对简单很多，修改父元素display:flex，你会发现div自动就排列成了一行，而且没有浮动之后的副作用，从回流角度考虑，flex的性能更优于float；随着浏览器不断兼容以及旧版本的淘汰，flex布局注定会成为更为流行的布局方案。
给予容器控制内部元素高度和宽度的能力。
在webkit内核的浏览器使用时，必须加上**-webkit-**前缀
- Google Chrome 谷歌浏览器
- Safari浏览器
- 搜狗高速浏览器
- 遨游浏览器3
- QQ浏览器
- 360极速浏览器
- 世界之窗浏览器
- 阿里云浏览器
使用flex的容器，它内部的元素自动成为flex项目。容器拥有两根隐形的轴，水平的主轴和竖直的交叉轴，主轴与左边框的交点为main start,主轴与右边框的交点为main end,交叉轴的起点为cross start,交叉轴结束的位置成位cross end,项目的主轴宽度为main size,交叉轴方向上的宽度为cross size.同时flex item的float、clear、vertical-align属性将失效。
felx的相关的示意图见下链：
https://images2015.cnblogs.com/blog/1008386/201608/1008386-20160829212313605-763604383.png
容器的属性
flex-direction:
- row:主轴为水平方向，项目沿主轴从左至右排列
- column:主轴为竖直方向，项目沿主轴从上至下排列
- row-reverse:主轴水平，项目从右至左排列，与row反向
- column-reverse:主轴竖直，项目从下至上排列，与column反向
flex-wrap
- nowrap:自动缩小项目，不换行
- wrap:换行，且第一行在上方
- wrap-reverse:换行，第一行在下面
flex-flow
是flex-direction和flex-wrap的简写形式，有row wrap|column wrap-reverse等, 默认值为row nowrap
justify-content
决定item在主轴上的对齐方式，可能的值有flex-start(默认）
- flex-start:左对齐
- flex-end:右对齐
- center:居中对齐
- space-between:两端对齐
- space-around:沿轴线均匀分布
align-items
决定item在交叉轴上的对齐方式
- flex-start:顶端对齐
- flex-end:底部对齐
- center:竖直方向上居中对齐
- baseline:item第一行文字的底部对齐
- stretch:当item未设置高度时，item将和容器等高对齐
align-content
该属性定义了当有很多根主轴时，即item不止一行时，多行在交叉轴轴上的对齐方式。注意当有多行时，align-items属性将失效
- flex-start:左对齐
- flex-end:右对齐
- center:居中对齐
- space-between:两端对齐
- space-around:沿轴线均匀分布
项目属性
order
order的值越小，项目排列越靠前
flex-grow
定义了当flex容器有多余空间时，item是否放大。默认值为0，即当有多余空间时也不放大，数值为对应的项目的放大比列。
flex-shrink
定义了当容器空间不足时，item是否缩小。默认值为1，当空间不足时，项目自动缩小。其可能的值为整数，表示不同的项目的缩小比例
flex-basis
表示项目的主轴占据的空间，默认值为auto。
flex
属性是flex-grow、flex-shrink和flex-basis三属性的简写总和
align-self
auto: 和父元素align-self的值一致
flex-start:顶端对齐
flex-end:底部对齐
center:竖直方向上居中对齐
baseline: 项目的第一行文字的底部对齐
stretch: 当项目未设置高度时，item将和容器等高对齐
9、什么是闭包
「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是一个闭包。
希望能够把变量给隐藏了。
参考链接：https://zhuanlan.zhihu.com/p/22486908
10、箭头函数和普通函数
箭头函数本身没用prototype所以箭头函数本身没用this
箭头函数的this永远指向其上下文，call()、bind()、apply()改变不了其this的指向
普通函数的this指向调用它的那个对象
箭头函数相当于一个匿名函数，不能作为构造函数，不能new
箭头函数对比：https://www.cnblogs.com/shamszhang/p/10530298.html
11、flex:1代表什么
https://zhuanlan.zhihu.com/p/136223806
13、控制元素显示和隐藏的两种方法
- 方法一
1 | |
- 方法二
1 | |
17、post和get的区别
- GET在浏览器回退时是无害的，而POST会再次提交请求。
- GET产生的URL地址可以被Bookmark，而POST不可以。
- GET请求会被浏览器主动cache，而POST不会，除非手动设置。
- GET请求只能进行url编码，而POST支持多种编码方式。
- GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
- GET请求在URL中传送的参数是有长度限制的，而POST么有。
- 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
- GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
参考链接：https://www.cnblogs.com/logsharing/p/8448446.html
20、defer和async的区别
当浏览器碰到script脚本，没用deffer和async，浏览器会立刻加载并执行指定的脚本
有async加载和渲染后续文档元素的过程将和script.js的加载与执行并行进行（异步）
有defer，加载后续文档元素的过程将和script.js的加载并行进行异步
示例图链接：https://segmentfault.com/img/bVWhRl?w=801&h=814/view
21、keep-alive
https://www.cnblogs.com/sysuhanyf/p/7454530.html
22、http状态码
| 分类 | 分类描述 |
|---|---|
| 1** | 信息，服务器收到请求，需要请求者继续执行操作 |
| 2** | 成功，操作被成功接收并处理 |
| 3** | 重定向，需要进一步的操作以完成请求 |
| 4** | 客户端错误，请求包含语法错误或无法完成请求 |
| 5** | 服务器错误，服务器在处理请求的过程中发生了错误 |
Http状态码分类
| 状态码 | 状态码英文名称 | 中文描述 |
|---|---|---|
| 100 | Continue | 继续。客户端应继续其请求 |
| 101 | Switching Protocols | 切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到HTTP的新版本协议 |
| 200 | OK | 请求成功。一般用于GET与POST请求 |
| 201 | Created | 已创建。成功请求并创建了新的资源 |
| 202 | Accepted | 已接受。已经接受请求，但未处理完成 |
| 203 | Non-Authoritative Information | 非授权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本 |
| 204 | No Content | 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档 |
| 205 | Reset Content | 重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域 |
| 206 | Partial Content | 部分内容。服务器成功处理了部分GET请求 |
| 300 | Multiple Choices | 多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择 |
| 301 | Moved Permanently | 永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替 |
| 302 | Found | 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI |
| 303 | See Other | 查看其它地址。与301类似。使用GET和POST请求查看 |
| ==304== | Not Modified | 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源 |
| 305 | Use Proxy | 使用代理。所请求的资源必须通过代理访问 |
| 306 | Unused | 已经被废弃的HTTP状态码 |
| 307 | Temporary Redirect | 临时重定向。与302类似。使用GET请求重定向 |
| 400 | Bad Request | 客户端请求的语法错误，服务器无法理解 |
| 401 | Unauthorized | 请求要求用户的身份认证 |
| 402 | Payment Required | 保留，将来使用 |
| 403 | Forbidden | 服务器理解请求客户端的请求，但是拒绝执行此请求 |
| 404 | Not Found | 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置”您所请求的资源无法找到”的个性页面 |
| 405 | Method Not Allowed | 客户端请求中的方法被禁止 |
| 406 | Not Acceptable | 服务器无法根据客户端请求的内容特性完成请求 |
| 407 | Proxy Authentication Required | 请求要求代理的身份认证，与401类似，但请求者应当使用代理进行授权 |
| 408 | Request Time-out | 服务器等待客户端发送的请求时间过长，超时 |
| 409 | Conflict | 服务器完成客户端的 PUT 请求时可能返回此代码，服务器处理请求时发生了冲突 |
| 410 | Gone | 客户端请求的资源已经不存在。410不同于404，如果资源以前有现在被永久删除了可使用410代码，网站设计人员可通过301代码指定资源的新位置 |
| 411 | Length Required | 服务器无法处理客户端发送的不带Content-Length的请求信息 |
| 412 | Precondition Failed | 客户端请求信息的先决条件错误 |
| 413 | Request Entity Too Large | 由于请求的实体过大，服务器无法处理，因此拒绝请求。为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则会包含一个Retry-After的响应信息 |
| 414 | Request-URI Too Large | 请求的URI过长（URI通常为网址），服务器无法处理 |
| 415 | Unsupported Media Type | 服务器无法处理请求附带的媒体格式 |
| 416 | Requested range not satisfiable | 客户端请求的范围无效 |
| 417 | Expectation Failed | 服务器无法满足Expect的请求头信息 |
| 500 | Internal Server Error | 服务器内部错误，无法完成请求 |
| 501 | Not Implemented | 服务器不支持请求的功能，无法完成请求 |
| 502 | Bad Gateway | 作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应 |
| 503 | Service Unavailable | 由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中 |
| 504 | Gateway Time-out | 充当网关或代理的服务器，未及时从远端服务器获取请求 |
| 505 | HTTP Version not supported | 服务器不支持请求的HTTP协议的版本，无法完成处理 |
24、vue是什么时候从后台获取数据的
beforeCreate 和 created 都是早期钩子，是我们获取数据的较好时机，如果获取的数据与绑定事件有关，可以放到 created 里面，无关的话，都可以，在服务器端的应用场景中， beforeCreate 可能会用到的多一些。
beforeMount 和 mounted 多用于页面组件上有新的用户交互，触发新的请求时候使用，比如在 mounted 里手动去触发滚动条的位置，而 beforeMount 里面，可以做比如通过域名识别来获取微信认证信息的操作。
应该beforecreate和created
本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！