说一下你对EventLoop的理解

eventloop描述

负责收集事件（包括用户事件和非用户事件），对任务进行排队以便在合适的时候进行回调，然后它执行所有处于等待中的宏任务，其次是微任务，然后在下一次循环之前执行必要的渲染和绘制操作

主任务和宏任务、微任务是否都运行在同一线程中？是如何运行的？

是运行在同一线程中
js会自上而下按顺序执行，遇到宏任务和微任务时，EventLoop会将其存储到对应的队列中（队列是存储在js主线程中），等到本次循环结束后，开始依次执行

为什么会出现eventloop？
1. 因为js是一门单线程的非阻塞性语言，eventloop就是为了js异步编程提供的一种解决方案

js为什么是单线程的？
1. js出现是为了处理浏览器网页的交互，设计成单线程的原因就是不想让浏览器变得太复杂，因为多线程需要共享资源，且有可能修改彼此的运行结果，这对于一种网页脚本来说太复杂了

js是如何实现异步编程的？
1. js是单线程的，但是他的宿主（浏览器）是多线程的，浏览器提供了各种线程供eventloop调度来协调js单线程运行时不会阻塞

为什么要有宏任务和微任务两种，只有一种行不行？
1. 这只是浏览器的一种实现方式，为了方便控制代码的执行顺序。如果只有一种的话，像Promise.resolve(console.log(111))、await fun()这种其实是同步的代码就比较怪异

宏任务和微任务的区别
1. 宏任务，如定时器、事件等，需要花费大量资源
2. 微任务，如js本身的语法，promise.resolve()、async/await等，花费资源较少

思考

// 1. 思考如下代码，会不会导致页面闪一下
document.body.appendChild(el)
el.style.display = 'none'
// 回答：不会，因为脚本会在执行完成之后再执行渲染。执行任务阶段，浏览器不会考虑页面的渲染

// 2. 思考如下代码，会不会有性能问题
document.addEventListener('click', ()=>{
    el.style.display = 'block'
    el.style.display = 'none'
    el.style.display = 'block'
    el.style.display = 'none'
    el.style.display = 'block'
    el.style.display = 'none'
    el.style.display = 'block'
    el.style.display = 'none'
    el.style.display = 'block'
    el.style.display = 'none'
})
// 回答：不会，原因同上

// 3. 思考如下代码，会不会按照预期执行，先向右移动1000px，再向左移动500px
button.addEventListener('click', ()=>{
    box.style.transform = 'translateX(1000px)'
    box.style.transition = 'transform 1s esea-in'
    box.style.transform = 'translateX(-500px)'
})
// 回答：不会

// 4. 思考如下代码的打印结果
button.addEventListener('click', ()=>{
    Promise.resolve().then(()=>console.log('microtask 1'))
    console.log('listener 1')
})
button.addEventListener('click', ()=>{
    Promise.resolve().then(()=>console.log('microtask 2'))
    console.log('listener 2')
})
// 如果通过点击dom触发，打印顺序为：listener 1 -> microtask 1 -> listener 2 -> microtask 2
button.click()
// 如果通过js触发，打印顺序为：listener 1 -> listener 2  -> microtask 1 -> microtask 2
// ⭐️微任务会在堆栈中没有其他任务的时候执行
// 1.当listener1执行完后，堆栈中就没有任务了，所以会执行微任务microtask1
// 2.button.click会在队列中等待两个listener全部执行完再结束，所以会一直阻塞微任务的执行

参考文献：

深入：微任务与 Javascript 运行时环境

JavaScript 和 JavaScript 引擎在浏览器和节点中是如何工作的？

http1.1 和 http2 和 http3的区别

http原理学习

描述一下同源策略、跨域及解决方案

参考：前端常见跨域解决方案

跨域描述：通俗来讲就是一个域下的脚本或文档，请求另一个域下的资源。
同源策略：浏览器出于安全考虑，产生的一种约定。同源即“协议+域名+端口”三者相同
常见的跨域解决方案：
1. jsonp：通常为了减轻服务器压力，我们会把js、css、img等静态资源分离到另一台服务器上，在html页面中再通过相应的标签从不同域名下加载对应个资源，而浏览器允许这种方式，基于此，我们可以通过动态创建script标签，在请求一个带参数的网址来实现跨域。
2. 跨域资源共享（CORS）：普通的跨域问题只需要服务端设置Access-Control-Allow-Origin即可，前端无需设置，如果要带cookie请求，则双方都需要设置
说一下XSS攻击

描述：是指页面被注入了恶意的代码
注入方法：
1. 攻击者通过输入框，提交css、js等恶意代码，并存储到数据库中
解决方案：
1. 后端需要将接口中的数据进行敏感字符过滤，才可以进行下一步操作
2. 前端需要在html拼接的时候注意，不要拼接不可信的字段
参考：前端安全系列（一）：如何防止XSS攻击？

说一下CSRF攻击

描述：攻击者诱导受害者进入第三方网站，在第三方网站中，像被攻击网站发送跨站请求。利用受害者在被攻击网站中已经获取注册凭证，绕过后台的身份校验，达到冒充受害者对被攻击网站进行某项操作的目的。
攻击方法：
1. 在第三方网站中
2. 无法在被攻击网站中解决，只能加强网站的防御措施
解决方案：
1. 同源策略
2. token验证
参考：前端安全系列（二）：如何防止CSRF攻击？