异步解析
1.进程 & 线程
概念 与 区别
概念：
1、进程是操作系统分配资源的最小单位，进程是资源的使用单位；
2、线程是进程的子单位，线程是资源的使用单位；
区别：
1、线程是进程的一部分，所以线程有时被称为轻量级进程或者轻权进程；
2、一个没有线程的进程，叫做单线程进程；如果一个进程有至少一个线程，那么这个进程就叫做多线程进程；
3、系统运行时会为每一个进程分配不同的内存区域，但不会为线程分配内存，线程只只能共享进程的内存；
面试题
1、浏览器新打开一个窗口，这个窗口是属于哪个进程的？ --进程
2、窗口（进程）间通信 --(主要指的是同源)本地存储、Web Socket、Web Worker;
-本地存储：cookie、localStorage区别
-cookie ：大小限制4kb，过期时间，可能会被劫持 -localStorage ：大小无限制，手动清理、只存储在浏览器端；
-安全性、应用场景：
*cookie安全性较低，容易受到跨站脚本（xss）攻击，应用于登陆认证、个性化体验、购物车等场景；
*localStorage安全性较高，可能遭受同一网址的跨站点脚本攻击（通过编码和过滤避免注入危险数据），应用于长期存储、本地应用程序、网页存储数据；
3、浏览器原理
a、客户端与服务端通信：浏览器作为客户端，在用户输入url、点击按钮或者其他交互操作是发起的http请求到指定的web服务器。这个过程通常涉及TCP/IP协议栈，首先建立连接，然后通过http协议进行数据交换。
b、http请求与响应：在发送请求时，浏览器会包括一些关键信息，如请求方法（GET、POST灯）、资源路径（URL）、以及请求头（如User-Agent、Cookie、Authorization等信息）。服务器接收到请求后，基于http状态码（例如200表示成功响应，404表示未找到页面）返回相应的响应内容，这包括HTML文档、图片JavaScript文件、样式表css等资源。
c、解析与渲染HTML：当浏览器接收到HTML文档后，它首先解析文档结构，并应用css样式进行布局显示。这个过程涉及到DOM（document object model），即文档对象模型，它是html文档的树状结构表示形式，允许脚本动态改变HTML内容和文档的行为。
d、资源加载与缓存管理：浏览器在解析网页时同时异步加载依赖的资源，如JavaScript文件、图像、视频等。为了提高性能，浏览器还利用了多种技术进行资源预加载、缓存策略、同源策略等来减少网络延迟时间。
e、JavaScript运行环境：现代浏览器支持ECMAScript（ES）标准的JavaScript语言，用于创建交互页面应用。JavaScript可以在客户端运行允许开发者编写功能丰富的动态页面，增强用户体验并提供实时交互能力。
f、网页安全与隐私保护：为了保障用户的网络安全与隐私，浏览器实现了多种机制，如同源政策限制跨域访问，https加密传输防止数据泄密，以及对恶意脚本的检测和阻止等。
EVENT-LOOP（事件循环）
a、执行栈
b、面试题
- JS堆栈执行顺序以及堆栈溢出 (--后进先出) => 白屏
- 执行顺序题：先同步再异步，异步分为：宏任务和微任务，先执行宏任务，在宏任务执行末尾执行微任务，微任务执行完成后，执行下一个宏任务。
setTimeout(() => {
console.log('宏任务1')
})
new Promise((resolve, reject) => {
console.log('微任务1')
resolve()
}).then(() => {
console.log('微任务2')
}).then(() => {
console.log('微任务3')
})
console.log('同步任务')
Promise
a、回调地狱的 解决方案
b、promise拯救的回调导致的无穷嵌套
const wait500 = (fn) => {
new Promise((resolve, reject) => {
console.log('500ms')
setTimeout(() => {
resolve(fn+500)
},500)
})
}
const wait1000 = (fn) => {
new Promise((resolve, reject) => {
console.log('1000ms')
setTimeout(() => {
resolve(fn+1000)
},1000)
})
}
const p = new Promise((resolve, reject) => {
resolve(1)
})
p.then(wait500).then(wait1000).then(res => {
console.log(res)
})
Promise.all([wait500(1), wait1000(1)]).then(res =>{
console.log(res)
})
Promise.race([wait500(1), wait1000(1)]).then(res =>{
console.log(res)
})
c、面试 - Promise A+
- promise有哪些状态？对应值有哪些？
- 状态： pending、fulfilled、rejected；对应值：undefined、value、reason；
- promise的默认状态是什么？状态是如何让流转？
- promise的默认状态是pending；状态流转：pending => fulfilled | pending => rejected;
- promise的返回值？
- then；接收 onFulfilled和 onRejected,如果then.promise已经成功，执行onFulfilled,参数value如果then.promise已经失败，执行onRejected，参数reason，then中有任何error异常 => onRejected;
- 手写promise
const PENDING = 'PENDING';
const FULFILLED = 'FULFILLED';
const REJECTED = 'REJECTED';
class Promise {
constructor(executor) {
this.status = PENDING;
this.value = undefined;
this.reason = undefined;
this.onResolvedCallbacks = [];
this.onRejectedCallbacks = [];
const resolve = value => {
this.status = FULFILLED;
this.value = value;
this.onResolvedCallbacks.forEach(fn => fn())
}
const reject = reason => {
this.status = REJECTED;
this.reason = reason;
this.onREjectedCallbacks.forEach(fn => fn())
}
try{
executor(resolve, reject);
} catch(err) {
reject(err);
}
}
if(this.status === FULFILLED) onFulfilled(this.value);
if(this.status === REJECTED) onRejected(this.reason);
if(this.status === PENDING) {
this.onResolvedCallbakcs.push(() => {
onFulfilled(this.value)
})
this.onRejectedCallbacks.push(() => {
onRejected(this.reason)
})
}
}
