基礎篇 瀏覽器中的Event loop

2021-09-13 11:36:49 字數 930 閱讀 1067

在講event loop之前,我們先思考乙個問題

原因可能是如果js是多執行緒,在多個執行緒中處理dom就可能會發生問題(乙個執行緒新增新節點,另乙個執行緒中刪除節點),當然可以引入讀寫鎖解決這個問題

好了,接下來我們開始講event loop

簡單的說,就是js在執行的過程中會產生執行環境,這些執行環境會被順序的加入到執行棧中。如果遇到非同步的**,會被掛起並加入到task(有多種task)佇列中。一旦執行棧為空,event loop就會從task佇列中拿出需要執行的**並放入執行棧中執行,所以本質上來說,js中的非同步行為還是同步的。
我們看下以下**,以下**輸出'1', '3', '2'

console.log('1');

settimeout(()=>, 0);

console.log('3');

//'1'

//'3'

//'2'

之前對settimeout理解有偏差,雖然設定了為0,其實還是非同步,是因為html5標準規定這個函式的第二個引數不得小於4ms,不足會自動增加。

巨集任務macrotask,es6中稱為task。以下這些行為屬於巨集任務

誤區:很多人認為微任務快於巨集任務,其實是錯誤的。因為巨集任務匯中包括了script,瀏覽器會先執行乙個巨集任務,接下來有非同步**的話就先執行微任務。
正確的一次event loop順序應該是這樣的:

執行同步**(這屬於巨集任務)

執行棧為空,查詢是否有微任務需要執行

執行所有微任務

必要的話渲染ui

開始下一輪event loop,執行巨集任務中的非同步**

通過上述的event loop順序可知,如果巨集任務中的非同步**有大量的計算並且需要操作dom的話,為了更快的介面響應,我們可以把操作dom放入微任務中。

瀏覽器快取篇

在前端開發中,快取有利於加快網頁的載入速度,同時快取能夠被反覆利用,所以可以減少流量和頻寬的開銷。瀏覽器的快取問題,主要指的是http的快取 即協議層。而h5新增的storage和資料庫快取,那是應用層快取,並不被計入本篇的分析內容裡面。下面我們正式開始來進行快取的分析。協議層的快取,其實,可以被分...

瀏覽器大戰中的搜狗瀏覽器

abc 智慧型狂拼 紫光華宇,其中簡體中文全拼和智慧型 abc智慧型對於語句的輸入支援有限,而智慧型狂拼和紫光華宇詞儘管可以根據本地詞頻來智慧型新增詞語但本身詞庫更新慢,使用搜狗輸入法的原因是它每次上網時都會自動更新一些流行的詞語,使我們輸入更方便了。其實對於瀏覽器,我很少在意的,也不經常換,我自己...

HTML解析篇 瀏覽器

渲染引擎的職責就是渲染,即在瀏覽器視窗中顯示所請求的內容。預設情況下,渲染引擎可以顯示html xml文件及,它也可以借助外掛程式 一種瀏覽器擴充套件 顯示其他型別資料,例如使用pdf閱讀器外掛程式,可以顯示pdf格式,將由專門一章講解外掛程式及擴充套件,這裡只討論渲染引擎最主要的用途 顯示應用了c...