浏览器解析的构成
- 调用栈- v8引擎的地盘
- webAPL- 所以耗时的API都在这里
- 回调队列- 异步完成后进入回调队列，等待调用
- 事件循环- 负责指挥回调队列中的任务。
js是
单线程，非阻塞，异步，并发的语言。
js特点：
- 单线程：一个时间点只能执行一条指令
- 非阻塞：让耗时的指令出栈，由浏览器处理
- 异步机制
什么叫调用栈
调用栈是JavaScript维护出来的一种栈结构，作用就是用来分类管理代码的执行上下文的。 存储顺序是按照代码中函数的调用顺序。 通常把这种用来管理执行上下文的栈称为执行上下文栈，又称调用栈。
什么时候代码运行会变慢
- 操作document
- 发起http请求的时候
- 定时器
阻塞其实就是在栈中运行很慢的那些东西。
同步是栈，异步是队列
js在同一时间只能做一件事。
同步就是在浏览器执行js代码的时候，将所有同步的代码放到一个执行栈中当中，遇到异步代码就把异步代码放到任务队列中，这样就形成了异步操作，同步与异步的差别就在于这条流水线上各个流程的执行顺序不同。
| 同步JS | 异步JS |
|---|---|
| 指令按照程序中给定顺序执行 | 指令可以并行执行 |
| 下一个指令都必须等待上一个指令完成再执行 | 下一个指令可以在上一个指令执行的同时执行 |
大多时候，js都作为同步执行 在执行某些特定的耗时指令时才发生异步
执行栈：学过数据结构的应该都知道，栈的顺序是filo(first in last on)，就是说栈里的代码是先进后出的
任务队列:这里用到的就是队列，队列的顺序是fifo(first in first on)，队列里的代码是先进先出
js的异步操作有哪些
- setTimeout、setInterval
- Ajax请求一般采用异步，当然也可以设置为同步
- promise.then
- 回调函数可以理解为异步，但不是严格的异步操作。
5.事件监听。即监听某个事件，当事件发生时，再执行相应的操作（比如点击、mouseover等）。
HTTP请求的状态码
XHR.redyState:存储的xhr对象生命周期
1
2
3
4
XHR.status:存储的是HTTP协议的状态码
200 请求成功 ok
300 请求跳转
400 请求失败
403 被禁止 forbidden
404 未找到 page not found
请求的监听事件
- XHR.redyState：当你希望捕捉请求对象的不同状态，那么就使用 XHR.redyState
- XHR.status：当你希望捕捉http的状态，那么就使用XHR.status
xhr.readystate&&xhr.status ：捕捉两种状态
readystatechangge和Load区别
readystatechange 事件先于 load 事件执行。load 事件就相当于 readyState 的值为 4 后触发的事件。如果不需要跟踪请求返回之前的过程时，用 load 事件更省事儿。
示例：成功
const xhr =new XMLHttpRequest()
const url = "https://jsonplaceholder.typicode.com/todos"
xhr.addEventListener("load",()=>{
if(xhr.readyState === 4 && xhr.status === 200){
// console.log(xhr.response);
console.log(xhr.readyState,xhr.status);//4 200
}else{
console.log(xhr.readyState,xhr.status);
}
})
xhr.addEventListener("readystatechange",function(){
if(xhr.readyState === 4 && xhr.status === 200){
// console.log(xhr.response);
console.log(xhr.readyState,xhr.status);//1 0=>2 200 => 3 200 => 4 200
}else{
console.log(xhr.readyState,xhr.status);
}
})
xhr.open("GET",url,true)
xhr.send()
//项目中如何写请求
示例：load失败
load 事件：
- 就算没有拿到数据xhr.readyState返回4
- xhr.status：404
- xhr.statusText：Not Found
xhr.statusText：返回一个包含的响应的状况的消息以返回通过HTTP服务器。 不像 XMLHTTPRequest.status它指示一个数值状况代码，这个字符串中包含的 http的响应的状态。
const xhr =new XMLHttpRequest()
const url = "https://jsonplaceholder.typicode.com/todos"
xhr.addEventListener("load",()=>{
if(xhr.readyState === 4 && xhr.status === 200){
console.log(JSON.parse(xhr.response));
console.log(xhr.readyState,xhr.status);//4 200
}else{
console.log(xhr.readyState,xhr.status,xhr.statusText);//4 404 Not Found
}
})
示例：封装一个HTTP请求
