技術
- js裏的異步操作是如何進行的(敘述原理)
- 害我舉了一個ajax的例子,面試官好像沒有特別滿意,引導我往線程的方向去思考。
- 雖然JavaScript是單線程的,可是瀏覽器內部不是單線程的。我們假設JavaScript只執行自己程序的代碼,當遇到異步操作時把他丟給瀏覽器,由瀏覽器的線程去執行,自己繼續往下執行。讓瀏覽器執行完異步之後,再把異步執行完的東西給JavaScript,讓JavaScript去執行。
WebAPIs
:瀏覽器爲異步任務單獨開闢的線程(服務JavaScript的,處理JavaScript的異步)
虛線那一塊(看圖)
:堆(heap)和棧(stack)共同組成了js主線程(這個就是我們JavaScript的線程)
callback queue(最下面的那個長方形)
:任務隊列,裏面放着各種事件,比如我們點擊所觸發的事件,瀏覽器會幫我們以任務的形式,把他放入任務隊列中
event loop(那個轉圈圈)
:任務循環,又叫事件循環。 - 流程:
當我們的程序運行時,執行我們JavaScript的主線程,堆(heap)和棧(stack)共同組成了JavaScript的主線程,函數的執行就是通過進棧和出棧實現的。比如圖中有一個foo()函數,主線程把它推入棧中,在執行函數體時,發現還需要執行上面的那幾個函數,所以又把這幾個函數推入棧中,等到函數執行完,就讓函數出棧。當棧中的函數需要異步的時候,主線程會把需要異步的部分推給WebAPIs(瀏覽器開闢的線程),由WebAPIs去執行。
當所有函數都執行完畢後,所有的函數就都被推出了棧。這個時候,程序就會通過event loop(事件循環)去callback queue(任務隊列)中尋找下一個任務推入棧中。而WebAPIs(瀏覽器開闢的線程)執行完主程序推給他的異步之後,將處理後的結果以事件的形式丟到callback queue(任務隊列)中,這個事件就是我們寫代碼的時候的回調函數。而這個時候任務隊列裏的任務正在往棧(stack)中推,所以異步之後的事件也會被推到棧(stack)中執行,但這個時候他已經不在是異步的了而是同步的,JavaScript的主線程是可以執行的。由此無論是同步還是異步,所有的函數全部執行完畢。(event loop(事件循環)總是會循環的查找任務隊列裏是否還有任務,有就往棧(stack)中推)
再上一個圖方便理解
- 小結: javascript的單線程和異步機制,總的來說JavaScript一直是單線程的,並不會去實現異步,瀏覽器纔是實現異步的那個傢伙,只是瀏覽器會通過事件驅動把異步之後的操作通過回調函數的形式丟到任務隊列,在由JavaScript的主線程去執行回調函數。由此整個主程序都是同步,但由於瀏覽器線程的幫助,實現了異步的功能。
- 閉包(這裏我就不多說了 再去看看pink老師的課程8)
- 彈性盒子如何實現元素的垂直居中
- computed、methods和watch的區別
- 瀏覽器輸入url到客戶端顯示頁面的過程
- 這個問題我覺得自己在客戶端渲染這邊沒有答好:
一個渲染引擎大致包括HTML解釋器、CSS解釋器、佈局和JavaScript引擎。
HTML解釋器
:解釋HTML語言的解釋器,本質是將HTML文本解釋成DOM樹(文檔對象模型)。
CSS解釋器
:解釋樣式表的解釋器,其作用是將DOM中的各個元素對象加上樣式信息,從而爲計算最後結果的佈局提供依據。
佈局
:將DOM和css樣式信息結合起來,計算它們的大小位置等佈局信息,形成一個能夠表示這所有信息的內部表示模型即渲染樹。
JavaScript引擎
:JavaScript可以修改網頁的內容,也能修改CSS的信息,JavaScript引擎解釋JavaScript代碼並把代碼的邏輯和對DOM和CSS的改動信息應用到佈局中去,從而改變渲染的結果。
- 基本過程
(1) 解析HTML文件,創建DOM樹
(2) 解析CSS,形成CSS對象模型
(3) 將CSS與DOM合併,構建渲染樹(renderingtree)
(4) 佈局和繪製
對渲染樹上的每個元素,計算它的座標,稱之爲佈局。瀏覽器採用一種流方法,佈局一個元素只需通過一次,但是表格元素需要通過多次。
最後,渲染樹上的元素最終展示在瀏覽器裏,這一過程稱爲“painting”。
當用戶與網頁交互,或者腳本程序改動修改網頁時,前文提到的一些操作將會重複執行,因爲網頁的內在結構已經發生了改變。
- 塊級作用域(考察ES6中的let const)
hr
- 川大保研
- 籃球
- 對中國移動的瞭解 對物聯網的瞭解 對哪個技術最感興趣
- 轉行的原因
- 期望城市和薪資
最後希望給我一個二面的機會8
參考資料:
https://www.cnblogs.com/zhengyufeng/p/10895895.html
https://blog.csdn.net/weixin_39307273/article/details/104918716