前端面试题之第一弹

一、什么是BFC？什么情况下触发BFC

——首先我们需要了解什么是BFC

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

——通俗理解

1. BFC 是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其他环境中的物品。
2. 如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。
3. 浮动元素会创建 BFC，则浮动元素内部子元素主要受该浮动元素影响，所以两个浮动元素之间是互不影响的。

——那么在什么情况下会触发BFC呢？

1. 根元素或包含根元素的元素
2. 浮动元素 float = left | right 或inherit (≠ none)
3. 绝对定位元素 position = absolute 或 fixed
4. display = inline-block | flex | inline-flex | table-cell 或 table-caption
5. overflow = hidden | auto 或 scroll (≠ visible)

——BFC的特性(附加：便于理解)

1. BFC 是一个独立的容器，容器内子元素不会影响容器外的元素。反之亦如此
2. 盒子从顶端开始垂直地一个接一个地排序，盒子之间垂直的间距是由 margin 决定的。
3. 在同一个BFC区域不会和 float box 发生重叠。
4. BFC 能够识别并包含浮动元素，当计算其区域的高度时，浮动元素也可以参与计算了。

二、在地址栏输入网址敲回车发生了什么？

1. 输入URL地址后，首先进行DNS解析，将相应的域名解析为IP地址。

2. 客户端根据IP地址去寻找相应的服务器。

3. 与服务器进行TCP的三次握手 (以下均为简述,详细请自行百度)
   —所谓三次握手就是客户端在请求与服务器相连接时，彼此共计发送了三次数据包。
   —首先是客户端向服务器发送连接请求。
   —服务器确认连接请求并向客户端发送连接请求。
   —客户端确认请求

4. 客户端找到相应的资源库。

5. 根据资源库返回页面信息。

6. 浏览器根据自身的执行机制解析页面 (浏览器的执行机制?重绘?重排?..)
   —浏览器解析页面时，会找到每一个文件夹(css、js、html、img…)，每一个文件夹下的资源会重新走到第二步，去找相应的服务器，然后一步步执行。

7. 最后服务器将解析信息返回给客户端，进行TCP的四次挥手。
   —所谓四次挥手就是客户端与服务端在断开连接时，彼此交互传输了四次数据包
   —断开连接通常也是由客户端首先发起的，当客户端的socket调用close关闭连接的时候会发送数据包给服务端。
   —服务端收到客户端的数据包的时候会回复给客户端一个数据包，表示确认收到客户端关闭连接的请求。
   —服务端的recv解堵塞，当服务端的套接字调用close的时候会给客户端发送一个数据包通知客户端将要关闭发送。但是此时服务端会保留资源，直到收到客户端的确认包。
   —当客户端接收到数据包的时候再给服务端发送确认包，此时客户端的资源也会被保留一段时间。

8. 客户端显示自己请求，即服务端返回的东西

三、手写promise封装ajax请求

<script type="text/javascript">
		var ajaxOptions = {
			url: 'url', //发送到服务器端的url
			method: 'GET', //GET/POST
			async: true, //异步为true，同步为false
			data: null, //数据
			dataType: 'json', //数据类型
		}

		function ajax(protoOptions) {
			//定义空对象，并在循环中赋值
			var options = {};
			for (var i in ajaxOptions) {
				options[i] = protoOptions[i] || ajaxOptions[i];
			}
			//返回一个异步回调
			return new Promise(function(resolve, reject) {
				var xhr = new XMLHttpRequest(); //XMLHttpRequest 对象用于在后台与服务器交换数据
				//XMLHttpRequest.open()方法用于初始化一个HTTP请求参数
				//第一个参数是请求方式
				//第二个参数是请求地址
				//第三个参数是是否异步
				xhr.open(options.method, options.url, options.async);
				xhr.onreadystatechange = function() { //每当readyState的值变化，onreadystatechange函数会自动执行
					if (this.readyState === 4) {
						if (this.status === 200) {
							//服务器响应的状态信息
							//0：请求未初始化
							//1：服务器连接已建立
							//2：请求已接收
							//3：请求处理中
							//4：请求已完成且响应已就绪
							//status是接口返回的状态码，200为请求成功
							resolve(JSON.parse(this.response)); //请求成功后返回数据
						} else {
							var resJson = {
								code: this.status,
								response: this.response
							}
							reject(resJson, this)
						}
					}
				}
				xhr.send()
				//XMLHttpRequest.send()方法用于发送HTTP请求
				//如果是异步请求(默认为异步请求)，则此方法会在请求发送后立即返回
				//如果是同步请求，则此方法直到响应到达后才返回
			})
		}
		//使用方法
		let data = {
			method: //请求方式 GET/POST
			url:    //接口地址
			async:  //异步为true，同步为false
		}
		ajax(data).then(res => { //成功的回调
				console.log(res)
			})
			.catch(res => { //错误的回调
				console.log(res)
			})
	</script>

未完待续…