瀏覽器解析的構(gòu)成
- 調(diào)用棧- v8引擎的地盤
- webAPL- 所以耗時的API都在這里
- 回調(diào)隊(duì)列- 異步完成后進(jìn)入回調(diào)隊(duì)列，等待調(diào)用
- 事件循環(huán)- 負(fù)責(zé)指揮回調(diào)隊(duì)列中的任務(wù)。
js是
單線程辽话，非阻塞，異步礼仗，并發(fā)的語言甩苛。
js特點(diǎn)：
- 單線程：一個時間點(diǎn)只能執(zhí)行一條指令
- 非阻塞：讓耗時的指令出棧，由瀏覽器處理
- 異步機(jī)制
什么叫調(diào)用棧
調(diào)用棧是JavaScript維護(hù)出來的一種棧結(jié)構(gòu)赏参，作用就是用來分類管理代碼的執(zhí)行上下文的志笼。 存儲順序是按照代碼中函數(shù)的調(diào)用順序。 通常把這種用來管理執(zhí)行上下文的棧稱為執(zhí)行上下文棧把篓，又稱調(diào)用棧纫溃。
什么時候代碼運(yùn)行會變慢
- 操作document
- 發(fā)起http請求的時候
- 定時器
阻塞其實(shí)就是在棧中運(yùn)行很慢的那些東西。
同步是棧韧掩，異步是隊(duì)列
js在同一時間只能做一件事紊浩。
同步就是在瀏覽器執(zhí)行js代碼的時候，將所有同步的代碼放到一個執(zhí)行棧中當(dāng)中疗锐，遇到異步代碼就把異步代碼放到任務(wù)隊(duì)列中坊谁，這樣就形成了異步操作，同步與異步的差別就在于這條流水線上各個流程的執(zhí)行順序不同滑臊。
| 同步JS | 異步JS |
|---|---|
| 指令按照程序中給定順序執(zhí)行 | 指令可以并行執(zhí)行 |
| 下一個指令都必須等待上一個指令完成再執(zhí)行 | 下一個指令可以在上一個指令執(zhí)行的同時執(zhí)行 |
大多時候口芍，js都作為同步執(zhí)行 在執(zhí)行某些特定的耗時指令時才發(fā)生異步
執(zhí)行棧：學(xué)過數(shù)據(jù)結(jié)構(gòu)的應(yīng)該都知道，棧的順序是filo(first in last on)简珠，就是說棧里的代碼是先進(jìn)后出的
任務(wù)隊(duì)列:這里用到的就是隊(duì)列阶界，隊(duì)列的順序是fifo(first in first on)，隊(duì)列里的代碼是先進(jìn)先出
js的異步操作有哪些
- setTimeout聋庵、setInterval
- Ajax請求一般采用異步膘融，當(dāng)然也可以設(shè)置為同步
- promise.then
- 回調(diào)函數(shù)可以理解為異步，但不是嚴(yán)格的異步操作祭玉。
5.事件監(jiān)聽氧映。即監(jiān)聽某個事件，當(dāng)事件發(fā)生時脱货，再執(zhí)行相應(yīng)的操作（比如點(diǎn)擊岛都、mouseover等）律姨。
HTTP請求的狀態(tài)碼
XHR.redyState:存儲的xhr對象生命周期
1
2
3
4
XHR.status:存儲的是HTTP協(xié)議的狀態(tài)碼
200 請求成功 ok
300 請求跳轉(zhuǎn)
400 請求失敗
403 被禁止 forbidden
404 未找到 page not found
請求的監(jiān)聽事件
- XHR.redyState：當(dāng)你希望捕捉請求對象的不同狀態(tài)，那么就使用 XHR.redyState
- XHR.status：當(dāng)你希望捕捉http的狀態(tài)臼疫，那么就使用XHR.status
xhr.readystate&&xhr.status ：捕捉兩種狀態(tài)
readystatechangge和Load區(qū)別
readystatechange 事件先于 load 事件執(zhí)行择份。load 事件就相當(dāng)于 readyState 的值為 4 后觸發(fā)的事件。如果不需要跟蹤請求返回之前的過程時，用 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()
//項(xiàng)目中如何寫請求
示例：load失敗
load 事件：
- 就算沒有拿到數(shù)據(jù)xhr.readyState返回4
- xhr.status：404
- xhr.statusText：Not Found
xhr.statusText：返回一個包含的響應(yīng)的狀況的消息以返回通過HTTP服務(wù)器尔破。 不像 XMLHTTPRequest.status它指示一個數(shù)值狀況代碼讨越，這個字符串中包含的 http的響應(yīng)的狀態(tài)。
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請求
