一些很基础容易忽略但是容易被问起的前端面试题总结

1.css盒子模型

css盒子模型就是用来装页面上的匀速的矩形区域，CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。

标准W3C盒子模型：包括 margin、border、padding、content组成，并且content部分不包含其他部分

IE盒子模型：包括 margin、border、padding、content组成，和标准的W3C盒子模型不同的是，IE盒模型的content部分包含了border和padding。

两者的区别：
从图中我们可以看出，这两种盒子模型最主要的区别就是width的包含范围，在标准的盒子模型中，width值content的部分宽度。在IE盒子模型中，width表示 content+padding+border这三个部分的宽度，故这使得在计算盒子模型整个盒子宽度的时候存在着差异；

盒模型的转换
在CSS中对相应的div盒子进行box-sizing属性的设置，就可以让盒模型在标准和怪异中进行转换。

1、box-sizing:content-box; 盒模型设置为w3c标准盒子模型

2、 box-sizing:border-box; 盒模型设置为怪异（IE）盒子模型 

2.浏览器输入url到页面展示出来的全过程

基本流程：
1、用户在浏览器中输入url地址

2、浏览器解析域名得到服务器ip地址

浏览器会首先从缓存中找是否存在域名，如果存在就直接取出对应的ip地址，如果没有就开启一个DNS域名解析器。DNS域名解析器会首先访问顶级域名服务器，将对应的ip发给客户端；然后访问根域名解析器，将对应的ip发给客户端；最后访问本地域名服务器，得到最终的ip地址。

3、TCP三次握手建立客户端和服务器的连接

因为HTTP是基于TCP的可靠传输，所以在发送http数据报之前，需要先进行TCP的三次握手建立连接。三次握手过程如下：

第一次握手：客户端--->服务端 ack=1,seq=x（x随机生成）

第二次握手：服务端--->客户端 ACK=1,ack=x+1,seq=y（y随机生成）

第三次握手：客户端--->服务端 ACK=1,ack=y+1,seq=x+1

完成第三次握手时，实际上客户端已经与服务器建立了连接，所以第三次握手的报文已经可以携带数据了。

4、客户端发送HTTP请求获取服务器端的静态资源

5、服务器发送HTTP响应报文给客户端，客户端获取到页面静态资源

6、TCP四次挥手关闭客户端和服务器的连接

数据传输完毕后，TCP会进行四次挥手断开连接，释放资源。四次挥手过程如下：

第一次挥手：客户端--->服务器 FIN=1,ack=1,seq=u 客户端状态变为FIN_WAIT_1

第二次挥手：服务器--->客户端 ACK=1,ack=u+1,seq=v 服务器状态变为CLOSE_WAIT，TCP进入半关闭状态

第三次挥手：服务器--->客户端 FIN=1,ACK=1,ack=u+1,seq=w 服务器状态变为LAST_ACK

第四次挥手：客户端--->服务器 ACK=1,ack=w+1,seq=u+1 客户端状态变为TIME_WAIT，此时TCP未释放，需要等待计时器计时完成后，客户端状态变为CLOSED

7、浏览器解析文档资源并渲染页面

浏览器解析文档资源并渲染页面流程：

（1）解析html资源，构建DOM Tree

（2）解析css资源，构建CSS Rule Tree

（3）JS通过DOM API和CSS OM API来操作DOM Tree和CSS Tree

（4）解析完成后综合DOM Tree和CSS Tree会生成Render Tree，计算每个元素的位置，这个过程就是回流（layout or reflow）

（5）调用操作系统Native GUI的绘制

（6）页面绘制完成

3.js数据类型

基本数据类型：string(字符串)、number(数字)、boolean(布尔)、null(空)、undefined(未定义)、symbol(独一无二的)

引用数据类型：object(对象)，(array)数组，(function)函数

4.js基本数据类型和引用数据类型的区别

js基本数据类型和引用数据类型的区别主要为：基本数据类型是Number、String、Boolean、Null、 Undefined、Symbol，指存放在栈中的简单数据段，数据大小确定;而引用数据类型是object，指存放在堆内存中的对象，变量是保存在栈内存中的一个指针，并且每个空间大小不一样。

基础数据类型：在存储时变量中存储的是值本身
引用数据类型：存储时变量中存储的是地址

5.内存中有堆和栈的区别

堆：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收；

栈：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈。