1.什么是 XSS 攻击？

xss是跨站脚本攻击，是一种代码注入工具。攻击者在网站注入恶意脚本，使其在用户的浏览器上运行，从而盗取用户信息，如cookie等。

2.如何防御 XSS 攻击？

3.什么是 CSRF 攻击？

CSRF跨站请求伪造攻击，诱导用户进入一个第三方网站，该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了攻击状态，那么攻击者就可以利用这个登录状态，绕过后台的用户验证，冒充用户向服务器执行一些操作。

攻击类型

4.如何防御 CSRF 攻击？

5.什么是中间人攻击？如何防范中间人攻击？

中间人攻击，MITM，是指攻击者与通讯的两端分别创建独立的连接，并交换其所收到的数据，使通讯的两端认为他们正在通过私密的连接与对方直接对话。但事实上整个会话都被攻击者完全控制。在中间人攻击中，攻击者可以拦截通讯双方的通话并插入到内容。

截获服务器发送给客户端的公钥，生成一个伪造的公钥，然后获取客户端生成的加密hash值，用私钥解密获取真正的密钥，生成假的加密hash值给服务器。服务器把加密数据发送给客户端。

防范：

6. 有哪些可能引起前端安全的问题?

7. 网络劫持有哪几种，如何防范？

8. 进程与线程的概念

10. 浏览器渲染进程的线程有哪些

线程有：

11. 进程之间的通信方式

12. 僵尸进程和孤儿进程是什么？

13. 死锁产生的原因？ 如果解决死锁的问题？

原因：多个进程在运行过程中争夺资源造成的僵局。

预防死锁的方法：

14. 如何实现浏览器内多个标签页之间的通信?

本质是通过中介者模式来实现的。

15. 对Service Worker的理解

service worker是运行在浏览器后的独立线程，一般用来实现缓存。

//index.js
if(navigator.serviceWorker){
	navigator.serviceWorker
	.register("sw.js")
	.then(function(registration){
		console.log("service worker 注册成功")
	})
	.catch(function(err){
		console.log("service worker 注册失败")
	})
}
//sw.js
self.addEventListener("install", e=>{
	e.waitUntil(
		caches.open("my-cache").then(function(cache){
			return cache.addAll(['./index.html', "./index.js"])
		})
	)
})

self.addEventListener("fetch", e=>{
	e.respondWidth(
		caches.match(e.request).then(function(response){
			if(response){
				return response
			}
			console.log("fetch source")
		})
	)
})

16. 对浏览器的缓存机制的理解

通过HTTP header来实现

17. 浏览器资源缓存的位置有哪些？

18. 协商缓存和强缓存的区别

19. 为什么需要浏览器缓存？

20. 对浏览器内核的理解

内核分成两个部分：

21. 常见的浏览器内核比较

22. 常见浏览器所用内核

23. 浏览器的主要组成部分

24. 浏览器的渲染过程

25. 浏览器渲染优化

26、渲染过程中遇到 JS 文件如何处理？

会阻塞文档解析，等js引擎运行结束，再从中断的地方继续解析文档。

27. CSS 如何阻塞文档解析？

js脚本可能会请求样式信息，浏览器会先下载和构建cssom，然后再执行js，最后再继续文档的解析

28.什么情况会阻塞渲染？

渲染前要生成渲染树，所以html和css会阻塞渲染。如果先渲染的快，应该一开始降低需要渲染的文件大小。
解析script标签也会暂停构建DOM。

29. 浏览器本地存储方式及使用场景

30. Cookie、LocalStorage、SessionStorage区别

特性 cookie localstorage sessionstorage
存储容量 4kb ≥5MB ≥5MB
数据创术 每个HTTP请求都会发送到服务器 不会发送到服务器 不会
生命周期 可以设置过期时间 永久存储 页面会话期间有效
访问权限 可以通过设置secure和httponly属性来控制访问 同源策略 同源策略
存储类型 键值对 键值对 键值对
与浏览器同步 是 是 是
存储位置 本地 本地 本地
使用 跟踪用户会话、持久登录 本地数据持久化 会话数据持久化

31. 前端储存的⽅式有哪些？

32. IndexedDB有哪些特点？

33.什么是同源策略

同源策略限制了从同一个源加载的文档或脚本如何与另一个源的资源进行交互。这是浏览器 第一个用于隔离恶意资源的重要安全机制。同源指的是：协议、端口号、域名必须一致

34.如何解决跨越问题

35.正向代理和反向代理的区别

36.Nginx的概念及其工作原理

nginx是一个轻量级的web服务器，用于反向代理、负载平衡和HTTP缓存。

37.事件是什么？事件模型？

事件是用户操作网页发生的交互动作。
事件模型：

element.onclick = function(){

}
element.addEventListener("click", function, false)
element.attachEvent("onclick", function(){

})

38. 如何阻止事件冒泡

39.对事件委托的理解

事件委托利用了浏览器事件冒泡，事件在冒泡过程中会上传到父节点，父节点可以通过事件对象捕获到目标节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件委托。
使用事件委托可以不必为每个子元素都绑定一个监听事件，这样减少了内存上的消耗。并且使用事件代理还可以实现事件的动态绑定，

40.事件委托的使用场景

document.addEventListener("click", function(e){
	if(e.target.nodeName == "A"){
		console.log("a");
	}
})
document.addEventListener("click", function(e){
	var node = e.target;
	while(node.parentNode.nadeName != "BODY"){
		console.log("a");
		break;
	}
	node = node.parentNode;
})

41.对事件循环的理解

在浏览器执行代码的过程中，首先执行全局的同步代码，执行过程，首先执行全局的同步代码，执行过程发现有宏任务或微任务，就会放进各自的任务队列去等待完成，随着同步的任务执行完成，先会去查看微任务队列是否存在任务，如果不存在就会开始将宏任务的第一个任务取出，去执行。如果存在那就会优先执行微任务队列的任务。当执行宏任务的时候，如果宏任务中也包含微任务，那就会继续把微任务放进微任务队列，然后一次去执行微任务队列，直到所有的宏任务和微任务都执行完成，浏览器的一次事件循环就结束了。

42.宏任务和微任务分别有哪些

微任务：

43.什么是执行栈

存储函数调用的栈结构，遵循先进后出的原则

44.Node 中的 Event Loop 和浏览器中的有什么区别？process.nextTick 执行顺序？

Node.js事件循环和浏览器中的事件循环因为运行环境和目标不同，所以有差异。

process.nextTick属于微任务

45.事件触发的过程是怎样的

事件触发有三个阶段：

46.V8的垃圾回收机制是怎样的

V8是chrome浏览器和node.js等js运行时的核心组件之一，它主要有以下几种回收机制：

47.哪些操作会造成内存泄漏？

48.渲染合成层是什么？

渲染合成层是指web页面中用于提高性能和优化渲染的一种技术，是浏览器中的一块特殊图层，通常由浏览器自动创建和管理，用于存储特定类型的内容或执行特定操作。

渲染合成层的作用包括但不限于：

49.iframe如何理解？ 有什么特点？一般应用在什么场景？？

iframe是在当前页面嵌入另一个文档的html标签。

特点和场景：

50.为什么浏览器要限制并发连接数？

控制资源的使用和网络性能的平衡

51.理解浏览器的多线程架构及渲染流程

5大进程：

52.如何理解 preload 指令

用于预加载资源的html指令。

53.如何理解 requestAnimationFrame 接口？如何优化渲染性能

是一个监听帧的接口，在浏览器进入下一帧触发回调

54.如何理解 GPU 渲染加速？什么是合成层 CompositeLayers

GPU渲染加速是指计算机的图形计算单元来加速网页渲染过程中的图形和动画绘制，提高页面的渲染性能和用户体验。通常来说，GPU有比CPU更强大的并行计算能力和图形处理能力，能够更高效地处理复杂的图形任务。

合成层是将页面的内容分解为多个层，使用GPU进行加速合成。

55.什么是内容安全策略（CSP）

内容安全策略CSP是一个额外的安全层，用于检测并削弱某些特定类型的攻击。告诉客户端，哪些外部资源是可以加载和执行的。

csp可以由http头和html meta标签来指定

"Content-Security-Policy": 策略集
<meta http-equiv="content-security-policy" content="策略集" >

56.浏览器的安全沙箱策略

浏览器的安全策略是一种安全机制，用于限制网页内容和计算机系统的访问权限，防止恶意网页对系统进行攻击或滥用系统资源。这种策略基于以下原则：