《瀏覽器工作原理與實踐》讀書筆記 3

2022-03-04 05:57:36 字數 1751 閱讀 6698

//getinput

//等待使用者從鍵盤輸入乙個數字,並返回該輸入的數字

int getinput()

//主線程(main thread)

void mainthread()

}

2.為了能夠接收其它執行緒(比如資源載入、互動事件、渲染事件、檔案讀寫等)傳送的訊息,就在上面的事件迴圈機制上面加上訊息佇列。訊息佇列是一種資料結構,用來存放要執行的任務。

3.如何退出事件迴圈呢?很簡單,加乙個退出標記,每次事件迴圈的時候判斷這個標記,如果有的話就退出迴圈。

4.為了保證任務的實時性(快速執行,不被訊息佇列中的任務延誤)和效率(不影響當前正在執行的訊息佇列中的任務),我們把訊息佇列中的每個任務都加入乙個微任務佇列,而訊息佇列中的每個任務被稱為巨集任務。

5.其實除了有訊息佇列之外,chrome 還維護了乙個延遲佇列,用來存放 settimeout 的任務,執行完訊息佇列中的每個任務之後,就回去判斷延遲佇列中的任務該不該執行。(所以只有訊息佇列中的當前正在執行的任務會影響 settimeout 的延遲時間)

6.對於 settimeout 有以下幾點需要注意:

1.如果 settimeout 存在巢狀呼叫,那麼系統會設定最短時間間隔為 4 毫秒

2.未啟用的頁面,settimeout 執行最小間隔是 1000 毫秒

3.延時執行時間有最大值

4.使用 settimeout 設定的**函式中的 this 不符合直覺

7.使用 xhr 傳送 http 請求的 demo:

function getwebdata(url)

console.log("done")

break;}}

xhr.ontimeout = function(e)

xhr.onerror = function(e)

/*** 3:開啟請求

*/xhr.open('get', url, true);//建立乙個get請求,採用非同步

/*** 4:配置引數

*/xhr.timeout = 3000 //設定xhr請求的超時時間

xhr.responsetype = "text" //設定響應返回的資料格式

xhr.setrequestheader("x_test","time.geekbang")

/*** 5:傳送請求

*/xhr.send();

}

9.產生微任務一般有兩種方式:使用 mutationobserver 監控某個dom節點;使用 promise。

10.mutationobserver 使用非同步 + 微任務的模式:使用非同步解決了同步操作的效能問題;使用微任務解決了實時性的問題。

11.promise 主要是通過下面2點來解決巢狀**問題的:1.**函式的延時繫結。(先建立 promise 物件,然後使用executor執行業務邏輯,最後使用then來繫結**函式)2.將**函式的返回值穿透到最外層。

12.promise 的好處:1.消滅了巢狀**。2.更好的信任度,**函式只會執行一次。3.更好的流程處理。4.更好的錯誤處理。(可以通過監聽 unhandledrejection 來捕獲未處理的 promise 錯誤)

13.生成器是乙個帶星號的函式,而且是可以暫停執行和恢復執行的。執行生成器**的函式叫做執行器。(參考著名的 co 框架)

14.協程是比執行緒更輕量級的存在,它完全受程式所控制,不被作業系統核心管理,也不會像執行緒切換那樣消耗資源。

瀏覽器工作原理與實踐(二)

tcp協議如何保證頁面能被完整送達瀏覽器?在衡量web頁面效能的時候有乙個重要的指標叫 fp 是指從頁面載入到首屏繪製的時長,這個指標影響了使用者的跳出率,更快的頁面影響意味著更多的pv 更高的參與度以及更高的轉化率。影響fp的乙個重要因素是網路載入速度。優化web頁面的載入速度,你需要對網路有充分...

瀏覽器工作原理

首先對上篇blog 進行乙個補充 以我做的 基於執行緒池和資料庫連線池的web 伺服器 為例,說說http 通訊的流程,大體分為三個階段 a 連線 伺服器通過乙個serversocket 類物件對8000 埠進行監聽,監聽到之後建立 連線,開啟乙個socket 虛擬檔案。b 請求 建立與建立sock...

瀏覽器工作原理

介紹 渲染引擎又叫排版引擎或者瀏覽器核心 主流的渲染引擎有 解析html構造dom樹 document object model,文件物件模型 dom是w3c組織推薦的處理可擴充套件置標語言的標準程式設計介面。構建渲染數,渲染數並不等同於dom數,因為像head標籤或者display none這樣的...