前端面试-----常考题篇（一）

这章主要是总结一下我在春招面试中遇到的一些常考的基础知识点。本篇主要总结一些前端基础和理论相关问题。

下面引用一张牛客网的前端面试考点图，其中JS问的问题比较多，在我春招面试中的时候基本上5成问题都是关于js的。所以js我会将其放到专门一个系列中总结。

 

 

 

 

一、盒子模型

标准盒子模型：width = content;

怪异盒子模型(IE):width = content + padding + border;

如何设置这两种模型：

box-sizing:content-box;   /*标准模型*/

box-sizing:border-box;    /*怪异模型*/

 

二、浏览器内核

浏览器	内核
IE、百度浏览器	Trident内核、俗称IE内核
Chrome浏览器	以前是Webkit内核、现在是Blink内核
Safari浏览器	Webkit内核
Opera浏览器	最初是Presto、后来是Webkit、现在是Blink内核
360浏览器、猎豹浏览器	IE+Chrome双内核
搜狗、遨游、QQ浏览器	Trident(兼容模式)+Webkit(高速模式)
Firefox浏览器	Gecko内核

 css3对不同内核浏览器旧版本的兼容性支持

webkit内核: -webkit-     Gecko内核: -moz-    Presto内核: -o-    Trident内核: -ms-

 

三、MVC和MVVM

MVC（Model-View-Controller）

MVC是比较直观的架构模式，用户操作->View(负责接受用户的输入操作)->Controller(业务逻辑处理)->Model(数据持久化)->View(将结果反馈给View)

MVVM（Model-View-ViewModel）

MVVM是在MVC上进一步改进，它将“数据模型数据双向绑定”的思想作为核心，Model和ViewModel之间的交互是双向的，视图数据的变化会同时修改数据源，二数据源数据的变化也会立即反应view。

总的来说MVVM比MVC精简很多，一定程度上简化了界面与业务的依赖性，也解决了数据的频繁更新问题。

 

四、数据交换格式

XML：可扩展标记语言。

优点：1.格式统一、符合标准

           2.容易与其他系统进行远程交互，数据共享比较方便

缺点：1.XML文件庞大、文件格式复杂、传输占带宽

           2.服务器端和客户端都需要花费大量代码来解析XML，导致服务器端和客户端代码变得异常复杂不易维护

           3.客户端不同浏览器之间解析XML的方式不一致，需要重复编写很多代码

 

JSON：轻量级的文本数据交换格式

优点：1.数据格式比较简单，易于读写，格式都是压缩的，占用带宽小；

           2.易于解析，客户端可以通过简单的eval_r()进行JSON格式的读取；

           3.支持多种语言解析

           4.简化代码开发量且易于维护

缺点：1.没有XML通用性强

           2.json片段的创建和验证过程比一般XML稍显复杂。

 

五、Content-Type类型

 常见的媒体格式类型：

   text/html：HTML格式

   text/plain：纯文本格式

   text/xml：XML格式

   image/jpeg：jpg图片格式

   image/pmg：png图片格式

以application开头的媒体格式类型：

   application/xhtml+xml：XHTML格式

   application/xml：XML数据格式

   application/atom+xml：Atom XML聚合格式

   application/json：JSON数据格式

   application/pdf：pdf格式

   application/msword：Word文档格式

   application/octet-stream：二进制流数据

   application/x-www-form-urlencoded：表单默认提交数据格式（以key/value格式发送）

媒体上传文件格式

   multipart/form-data：表单中文件上传格式

 

五、垂直水平居中方法

 1.宽度和高度已知：直接计算

2.宽度和高度未知：

position:absolute; left:0; right:0; top:0;bottom:0;margin:auto;

3.利用flex布局：

父元素: display:flex; justify-content:center;align-items:center;

4.平移 定位+transform：

position:absolute; top:50%; left:50%;transform:translate(-50%,-50%);

5.table-cell布局

父元素: display:table-cell; vertical-align:middle;  子元素:margin:0 auto;

(table-cell中不要与float:left; position:absolute;一起使用，其对元素高度宽度敏感，不要使用百分比);

 

六、页面从输入URL到展现页面过程。

1.浏览器地址栏输入URL并按下回车

2.浏览器查找当前URL是否存在缓存，并比较缓存是否过期

3.DNS解析URL对应的IP。

4.根据IP和服务器建立TCP连接。（三次握手）

5.HTTP发起请求。

6.服务器处理请求并返回报文，浏览器接受HTTP响应。

7.渲染页面，构建DOM树。

8.关闭TCP连接。（四次挥手）

 注：HTTPS在传输数据之前需要客户端与服务器进行握手（TLS/SSL握手）,在握手过程中将确立双方加密传输数据的密码信息。

 

七、适配移动端页面meta设置

<meta name="viewport" content="width=device-width,user-scalable=no,initail-scale=1.0,maxinum-scale=1.0,mininim-scale=1.0">

注释：

width=device-width   宽度=设备宽度

user-scalable=no      用户缩放=不允许

initail-scale=1.0         初始化比例=1

maxinum-scale=1.0   最大比例=1

mininum-scale=1.0    最小比例=1

 

八、type=hidden隐藏域有什么作用

1.隐藏域对用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，利于处理和发送表单中的信息。

2.可以用于验证发送方身份，防止csrf攻击。

3.一个form中有多个提交按钮，可以用来区分哪个提交按钮提交上来的。

4.页面中有多个form，可以在form中添加隐藏域来是他们联系起来。

 

九、link和@import的区别

区别一：link是XHTML标签，除了加载css，还可以定义rss等其他事物；@import属于css提供的方式，只能加载css。

区别二：link引用CSS时，在页面载入时同时加载；@import需要在页面载入后才加载。

区别三：link是XHTML标签，无兼容问题；@import是在css2.1提出，低版本浏览器不支持

区别四：link支持使用javascript课控制DOM去改变样式，二@import不支持。

 

十、src和href的区别

src指向外部资源的位置，指向的内容回嵌入到文档中当前位置，请求时，岂会将资源下载并应用到文档中，并且下载中会展厅其他资源的下载和处理。（js、img、iframe等元素）

href指向网络资源所在位置，建立于当前元素（锚点）或当前文档（链接）之间的链接，并行下载资源并不会停止对当前文档的处理。

 

十一、TCP三次握手过程

 第一次握手：客户端发送syn包（seq=x）到服务器，并进入SYN_SEND状态，等待服务器确认。

第二次握手：服务器受到syn包，必须确认客户的SYN（ack=x+1），同时自己也要发送一个SYN包（seq=y），既SYN+ACK包，此时服务器进入SYN_RECE状态；

第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK（ack=y+1），此包发送完毕，客户端和客户端进入ESTABLISHED状态，完成三次握手。

 

十二、TCP四次挥手过程

第一次挥手：主动关闭方发送一个FIN，用来关闭主动方到被动方的数据传送，也就是主动关闭方告诉被动关闭方：我已经不会再发数据了（当然，在fin包之前发送出去的数据，如果没有收到对应的ack确认报文，主动关闭方依然会重发这些数据），但此时主动关闭方还可以接受数据。

第二次挥手：被动关闭方收到FIN包后，发送一个ACK给对方，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号）。

第三次挥手：被动关闭方发送一个FIN，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，我的数据也发送完了，不会再给你数据了。

第四次挥手：主动关闭方收到FIN后，发送一个ACK给被动关闭方，确认序号为收到序号+1，至此，完成四次挥手。

 

十三、304状态码的理解

304状态码：告诉浏览器可以从缓存中获取请求的资源。

详解：

客户端在请求一个文件的时候，发现自己缓存的文件有Last Modified，那么在请求中会包含If Modified Since，这个时间就是缓存文件的Last Modified。因此，如果请求中包含If Modified Since，就说明已经有缓存在客户端。服务端只要判断这个时间和当前请求的文件的修改时间就可以确定是返回304还是200状态码。

静态文件服务器回自动完成Last Modified和If Modified Since的比较，完成缓存或者更新。但对于动态页面，往往没有包含Last Modified信息，这样浏览器、网关等都会做缓存，也就是每次请求的时候都是完成一个200的请求。

 

十四、HTTP2.0和HTTP1.0的区别

HTTP2.0主要目标是改进传输性能，更有效利用网络资源，实现低延迟和高吞吐量。

特点：

1.二进制分帧：   HTTP2.0的所有帧都是采用二进制编码。

2.多路复用：      允许同时通过单一的HTTP2.0连接发起多重的请求-响应信息。

3.header压缩：  HTTP2.0使用encoder来减少需要传输的header大小。

4.服务端推送：   服务端可以对一个客户端发送响应，推送资源无需客户端明确请求，但遵守同源策略和请求-响应的循环，只能接请求的响应推送。

详细参考：https://blog.csdn.net/g6U8W7p06dCO99fQ3/article/details/78906348

 

十五、DOM和BOM的区别

DOM：Document Object Model 文档对象模型

      DOM是为了操作文档出现的API，document是其的一个对象

      DOM和文档有关，这里的文档指的是网页，也就是html文档。DOM和浏览器无关，他关注的是网页本身的内容。

BOM：Browser Object Model  浏览器对象模型

      BOM是为了操作浏览器出现API，window是其的一个对象

      window对象既为javascript访问浏览器提供API，同时在ECMAScript中充当Global对象