【无标题】
1.JS为什么要区分微任务和宏任务
当代码执行到某个异步任务（例如 Promise、setTimeout 等）时，该异步任务将被放入事件队列中，等待下一次事件循环来处理它。在事件循环中，JavaScript 引擎会不断地从事件队列中取出任务并执行，这个过程被称为“事件循环”。
在每个事件循环中，会先执行当前所有微任务队列中的任务，然后再执行一个宏任务队列中的任务。在微任务队列中的任务包括：Promise 中的回调函数、使用 MutationObserver 监听的 DOM 变化等。而宏任务队列中的任务则包括：setTimeout、setInterval、setImmediate、requestAnimationFrame、UI 渲染等。
2. 有什么用
使用
识别不安全的生命周期方法和过时的 API。
检测意外的副作用。
检测过时的用法和可能导致问题的代码。
强制执行不安全的操作的严格检查，例如使用 setState 和 forceUpdate 时的不当用法。
3.ajax 的 readyState 有哪几个状态，含义分别是什么？
Ajax（Asynchronous JavaScript and XML）通过XMLHttpRequest对象实现异步数据传输。而XMLHttpRequest对象有一个readyState属性，用来表示当前异步请求的状态。readyState的取值有五个，含义如下：
0（未初始化）：XMLHttpRequest对象被创建，但尚未调用open()方法；
1（载入）：已经调用open()方法，但尚未调用send()方法，也就是尚未开始发送请求；
2（载入完成）：已经调用send()方法，请求已经开始，但是尚未接收到响应；
3（交互）：正在接收响应数据，但是尚未完成响应的解析；
4（完成）：响应已经完成，且响应数据已经解析完成，可以使用XMLHttpRequest对象获取完整的响应数据。
4. 描述一下代码的执行结果和原因
setTimeout(function){
console.log(1);
},0)
new Promise(function execulor(resolve){
console.log(2)
for(var i = 0；i<10000;i+=1){
i ==9999 && resolve()
}
console.log(3)
}).then(function(){
console.log(4)
})
console.log(5)
执行结果：23514
setTimeout 函数会被添加到回调队列中，等待当前调用栈为空时执行，因为其设置了0毫秒的延迟。
创建了一个新的 Promise 对象，并且在其构造函数中执行了一些代码。在这里，会输出数字2和数字3。然后，使用一个 for 循环，执行一些操作，直到循环次数达到9999时，Promise 对象的 resolve() 方法被调用，这会将其状态设置为已完成。
console.log(5) 被执行，输出数字5。
因为 Promise 对象的状态已经被设置为已完成，所以 .then() 方法中的回调函数会被添加到回调队列中，等待当前调用栈为空时执行。此时，回调队列中包含了 setTimeout() 的回调函数和 Promise 对象的 .then() 方法中的回调函数。
setTimeout() 的回调函数被添加到调用栈中并被执行，输出数字1。
.then() 方法中的回调函数被添加到调用栈中并被执行，输出数字4。
##5. 下列说法正确的是（）
A.样式文件的加载会阻塞脚本的执行
B.iframe 会阻塞主页面的 load 事件
C. 中的资源下载会阻塞页面解析
D.页面文档完全加载并解析完毕之后会触发 DOMContentLoaded 事件
答案：A、B、D
css加载不会阻塞DOM树的解析
css加载会阻塞DOM树的渲染
css加载会阻塞后面js语句的执行
一、iframe会阻塞主页面的onload事件；
二、搜索引擎检索程序无法解读这种页面，不利于SEO；
三、会影响页面的并行加载。
并行加载：同一时间对同一域名下的加载数量是有限制的：
MDN解析：当初始HTML文档已完全加载和解析时，将触发DOMContentLoaded事件，而不需要等待样式表，图像和子框架页面加载（事件可以用来检测HTML页面是否完全加载完毕(fully-loaded)）。
5.知识点
1.浏览器在渲染一个页面时，会将页面分为很多个图层，每个图层上有多个节点，在渲染dom时，经历以下过程:
DOM分割图层 ------ 图层节点样式重计算(Recalculate style) ----- 为每个节点生成图形和位置 (Layout，回流/重排/重布局) ----- 将节点绘制并填充到图层中(Paint Setup和Paint, 重绘) ------ 图层作为纹理上传到CPU处理 ------ 结合多个图层到页面上生成最终屏幕图像(图层重组)
2.触发创建单独图层
①3D或透视变换(perspective transform) CSS属性
②opacity做css动画或使用一个动画webkit变换的元素
③z-index在复合层上面渲染的元素
④拥有3D上下文或加速2D上下文的节点
⑤使用加速视频解码的节点
故transform和opacity改变的仅是图层的结合不会触发回流和重绘：
opactity是GPU在绘画时简单的降低了之前已经画好的纹理的alpha值来达到效果，故不会触发回流和重绘
transform可以修改节点位置、旋转、大小等，使用left和top会触发重布局，修改时代价很大，故取而代之使用translate会提高性能
translate可以让浏览器创建图层，可以消除在动画开始之前的图层创建时间，使得动画尽快开始，不会随着抗锯齿而导出突变，但是创建过多的图层会导致崩溃所以要结合实际情况考虑，节制！
3.触发回流属性(修改节点大小和位置):
盒子模型相关属性、定位属性及浮动、节点内部文本结构(大小、排列方式)属性
4.触发重绘属性(节点内部渲染效果):
color、border-style、border-radius、visibility、text-decoration、background相关、outline相关、box-shadow
5.关于动画:
JS动画:
缺点：JS在浏览器的主线程中运行，其中还有很多需要运行的JS、样式计算、布局、绘制对其进行干扰，会导致线程堵塞(掉帧)
优点: 动画可控制
CSS动画:
缺点：缺乏对动画的控制
优点: 优化性能好，在主线程之外运行(丝滑)
6.HTTP 2.0新特性:
增加二进制分帧;压缩头部（header compression）;多路复用（multiplexing）;请求优先级;服务器提示（server push）
7.请问何为混合应用 (Hybrid APP) ，与原生 Native 应用相比它的优劣势。
混合应用（Hybrid APP）是一种应用程序，它结合了原生应用程序和Web应用程序的特点。它通常使用Web技术（如HTML、CSS、JavaScript）开发，然后使用平台特定的工具将其封装成原生应用程序的形式，以便在不同平台上运行。
与原生应用程序相比，混合应用程序具有以下优劣势：
优势：
跨平台支持：混合应用程序可以在多个平台上运行，例如Android和iOS，因此可以更容易地开发一次，然后在多个平台上部署。
更便宜的开发成本：混合应用程序使用通用的Web技术进行开发，因此相对于原生应用程序而言，开发成本更低。
更快的开发速度：由于混合应用程序使用Web技术进行开发，因此开发速度更快，可以更快地将应用程序推向市场。
更好的维护：由于混合应用程序的代码使用通用的Web技术进行开发，因此维护代码更容易。
劣势：
性能较低：由于混合应用程序需要使用中间层进行交互，因此性能比原生应用程序稍差一些。
依赖于平台：虽然混合应用程序可以跨平台运行，但它们仍然依赖于特定平台的工具和API。
可访问性差：混合应用程序的可访问性不如原生应用程序，因为它们需要通过中间层进行交互，而中间层可能会影响应用程序的可访问性。
总之，混合应用程序在开发成本、跨平台支持和维护方面具有优势，但在性能、平台依赖性和可访问性方面可能存在一些劣势。因此，在选择应用程序类型时，开发人员需要考虑到自己的需求，并选择最适合自己需求的应用程序类型。
8.typeof 和instanceOf的区别
typeof 和 instanceof 是 JavaScript 中常用的两个运算符，它们的作用不同：
typeof 运算符用于检查一个值的类型，返回一个表示该值类型的字符串。例如，typeof 42 返回 “number”，typeof “hello” 返回 “string”，typeof true 返回 “boolean”。
instanceof 运算符用于检查一个对象是否是某个构造函数的实例，返回一个布尔值。例如，[] instanceof Array 返回 true，{} instanceof Object 返回 true，“hello” instanceof String 返回 false（因为字符串字面量不是字符串对象）。
它们的区别主要在于检查的内容不同。typeof 检查一个值的类型，而 instanceof 检查一个对象是否属于某个构造函数的实例。
需要注意的是，typeof 运算符对于不同的值类型返回的字符串不同，但是对于 null 值返回的是 “object”。这是一个历史遗留问题，因为在 JavaScript 的早期版本中将 null 值错误地识别为一个对象。另外，typeof 运算符对于函数返回的是 “function”，而函数实际上是 JavaScript 中的一种特殊对象类型。
9.获取DOM元素的方法介绍
getElementById() 方法返回的是具有指定 ID 的元素对象，如果没有找到对应的元素，则返回 null。
getElementsByTagName() 方法返回的是具有指定标签名的元素对象的集合，返回的是一个类数组对象，如果没有找到对应的元素，则返回空集合（空数组）。
getElementsByName() 方法返回的是具有指定名称的元素对象的集合，返回的是一个类数组对象，如果没有找到对应的元素，则返回空集合（空数组）。
getElementsByClassName() 方法返回的是具有指定类名的元素对象的集合，返回的是一个类数组对象，如果没有找到对应的元素，则返回空集合（空数组）。
需要注意的是，返回的集合并不是一个数组，而是一个类数组对象，它们通常都具有 length 属性和可以通过索引访问的元素。要将其转换为数组可以使用 Array.from() 方法或者 Array.prototype.slice.call() 方法。