十道前端面试题（9）

1. 前端性能理解，优化有哪些
2. 为什么浏览器会产生同源策略
3. 如何获取元素的父节点和兄弟节点
4. jsonp的原理是什么，处理script标签还可以通过什么实现？（静态资源标签）
5. HTTP请求头，响应头里面有哪些
6. margin坍塌
7. 写一个API实现insertAfter
8. promise的状态有哪些
9. preventDefault和stopPropagation的区别
10. 事件冒泡，事件捕获相关，以及事件委托？

---

1. 前端性能理解，优化有哪些？(点击查看 >>)

---

2. 为什么浏览器会产生同源策略

1. 什么是同源策略？
   同源策略限制了从同一个源加载的文档或脚本如何与来自另外一个源的资源进行交互。它是一个用于隔离潜在恶意文件的重要安全机制。
2. “源”都有哪些？

• 主机（域名）
• 协议
• 端口

3. 为什么会产生同源策略？

• 设置同源策略主要是为了安全。
• 如果没有同源限制存在的浏览器中的cookie等其他数据可以任意读取，不同域下DOM可以任意操作，泄漏隐私数据。

---

3. 如何获取元素的父节点和兄弟节点（点击查看 >>）

---

4. jsonp的原理是什么，处理script标签还可以通过什么实现？（静态资源标签）

jsonp 的跨域：
主要是利用script标签的src属性中的链接可以访问跨域的js脚本进行跨域请求，只能用于get请求。

原理

1. 使用script标签发送请求，这个标签支持跨域访问
2. 在script标签里面给服务器端传一个callback
3. callback 的值对应到页面定义的一个全局函数
4. 服务端返回的是一个函数的调用。调用的时候会把数据作为参数包在这个函数里面。

jQuery给封装的使用jsonp跨请求方法的使用如下：

$ajax({
	url: '.....',
	type: 'get',
	dataType: 'jsonp',
	success: function(data){
       console.log(data);
	}
})

通过设置ajax方法中的dataType属性的值为jsonp就可以进行跨域了。

---

5. HTTP请求头，响应头里面有哪些

http请求头：
（主要是key:value的形式），比如：
User-Agent：产生请求的浏览器类型。
Accept：客户端可识别的内容类型列表。
Host：主机地址

http响应头：
包含数据类型，日期，长度，内容类型，长度等，如：

 Server : Apache Tomcat/5.0.12
Date:Mon,6Oct2003 13:13:33 GMT
Content-Type:text/html
Last-Moified:Mon,6 Oct 2003 13:23:42 GMT
Content-Length:112

---

6. margin坍塌

margin坍塌问题：

• 在文档流中，父元素的高度默认是被子元素撑开的
• 也就是说子元素多高，父元素就多高
• 但是当子元素设置浮动之后，子元素会完全脱离文档流
• 此时将会导致子元素无法撑开父元素的高度，导致父元素高度塌陷

---

7. 写一个API实现insertAfter

• DOM API中有一个insertBefore()方法，在已知子节点的前面插入一个新的子节点
• 但是没有提供insertAfter()方法（在已知子节后面插入一个新的子节点）

// newNode表示要插入的新节点
// currentNode表示当前现有节点
function insertafter(newNode,currentNode){
	// 获取当前节点的父节点
	const parent = currentNode.parentNode;
	if(parent.lastChild === currentNode){
		parent.appendChild(newNOde);   //如果当前元素是父节点的最后一个节点，则将新节点放在最后
	} else {
		parent.insertBefore(newNode, currentNode.nextSibling);  //否则就将新节点插入到当前节点的下一个节点的前面
	}
}

---

8. promise的状态有哪些

• pending 初始化
• fulfilled （resolved）成功
• rejected失败

---

9. preventDefault和stopPropagation的区别

• preventDefault阻止事件默认行为
• stopPropagation阻止事件冒泡

---

10. 事件冒泡，事件捕获相关，以及事件委托？

• 事件冒泡：从当前触发事件目标一级一级向上传递，依次触发，直到document为止
• 事件捕获：会从document开始触发，一级一级向下传递，依次触发，直到真正的事件目标为止。
• 事件委托：又叫事件代理，利用事件冒泡的原理，指指定一个事件处理程序，就可以管理某一类的所有事件