亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

我不該動(dòng)你的，Event Loops（深坑）

wenhai.he / 1093人閱讀

摘要：我不該動(dòng)你的，寫在前面的話本意是想好好研究下，看了幾篇博客后，才意識(shí)到作為前端打字員的我有多無知，這坑忒深了。這樣的話，如果是第一種解釋，應(yīng)該在運(yùn)行之前，頁面就變成了紅色否則就應(yīng)該采取第二種解釋。

我不該動(dòng)你的，Event Loops 寫在前面的話

本意是想好好研究下 Event Loops， 看了幾篇博客后，才意識(shí)到作為前端打字員的我有多無知，這坑忒深了。

macrotask？，microtask？，MutationObserver？ 這些都是啥？規(guī)范還沒寫清楚？不同瀏覽器運(yùn)行的還未必一樣？

但為了使自己養(yǎng)成經(jīng)常總結(jié)的習(xí)慣，還是寫點(diǎn)什么吧。

故事的開始

計(jì)算 fib(45) 是一個(gè)相當(dāng)耗時(shí)的工作，在我的chrome里約需要15s左右。

問，頁面什么時(shí)候會(huì)變成紅色？在執(zhí)行 console.now(1) 之前就變成紅色了嗎？

可以看到即使在 console.now(1) 執(zhí)行之后，頁面仍舊沒有變紅。

關(guān)于這個(gè)現(xiàn)象，可以有兩種解釋：

document.getElementsByTagName("body")[0].style.backgroundColor = "red" 被當(dāng)作一個(gè)異步事件，作為一個(gè) task，被添加到 event loops

渲染引擎要等到 JS 引擎空閑時(shí)才開始工作

到底是哪一種？所以將上述代碼修改下

又增加了一個(gè) setTimeout。這樣的話，如果是第一種解釋，應(yīng)該在 console.now(3) 運(yùn)行之前，頁面就變成了紅色；否則就應(yīng)該采取第二種解釋。

運(yùn)行結(jié)果如下，

可以看到在 console.now(3) 之后，頁面依舊沒有變色，看來就是渲染引擎要等到JS引擎完全空閑時(shí)才工作。

事情就這樣結(jié)束了嗎

沒有，直到我看到文檔

An event loop must continually run through the following steps for as long as it exists:



Let oldestTask be the oldest task on one of the event loop"s task queues, if any, ignoring, in the case of a browsing context event loop, tasks whose associated Documents are not fully active. The user agent may pick any task queue. If there is no task to select, then jump to the microtasks step below.


Set the event loop"s currently running task to oldestTask.


Run oldestTask.


Set the event loop"s currently running task back to null.


Remove oldestTask from its task queue.



Microtasks: Perform a microtask checkpoint.


Update the rendering: If this event loop is a browsing context event loop (as opposed to a worker event loop), then run the following substeps.
…...

這段話第7點(diǎn)的意思，怎么理解起來像是每執(zhí)行一次 Event Loops 的 task，最后都會(huì)更新視圖。

后來看到從event loop規(guī)范探究javaScript異步及瀏覽器更新渲染時(shí)機(jī)中

渲染更新（Update the rendering）會(huì)在event loop中的tasks和microtasks完成后進(jìn)行，但并不是每輪event loop都會(huì)更新渲染，這取決于是否修改了dom和瀏覽器覺得是否有必要在此時(shí)立即將新狀態(tài)呈現(xiàn)給用戶。

會(huì)不會(huì)兩次 setTimeout 被合并了？

這樣調(diào)整之后，在運(yùn)行 console.now(3) 之前，頁面的顏色就變了

這樣看來，就是在每一次task之后就可能會(huì)更新視圖，而不是等到JS引擎空閑

在執(zhí)行完setTimeout0后，Event Loops 中實(shí)際上仍有 setTimeout1 待執(zhí)行，但是瀏覽器先渲染了視圖，再執(zhí)行了setTimeout ，這就推翻了之前渲染引擎要等到 JS 引擎空閑(Event Loops為空)時(shí)才開始工作。

同時(shí)我懷疑，之前代碼

setTimeout(function () {
      console.now(0)
      document.getElementsByTagName("body")[0].style.backgroundColor = "red"
      console.now(1)
      fib(45)
      console.now(2)
    }, 1000)
    setTimeout(function () {
      console.now(3)
      fib(45)
      console.now(4)
    }, 1000)

會(huì)不會(huì)被優(yōu)化成

setTimeout(function () {
      console.now(0)
      document.getElementsByTagName("body")[0].style.backgroundColor = "red"
      console.now(1)
      fib(45)
      console.now(2)
      console.now(3)
      fib(45)
      console.now(4)
    }, 1000)
坑深，今天先到這，休息下了 參考資料

https://github.com/aooy/blog/...

https://www.404forest.com/201...

http://javascript.ruanyifeng....

https://www.html5rocks.com/zh...

https://github.com/fredshare/...

http://lynnelv.github.io/js-e...

https://www.w3.org/TR/html5/w...

https://jakearchibald.com/201...

https://zhuanlan.zhihu.com/p/...

https://developers.google.com...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/90571.html

相關(guān)文章

  • 你不得不知的Event Loop

    摘要：具體的可以用下面的圖來大致說明一下同步和異步任務(wù)分別進(jìn)入不同的執(zhí)行環(huán)境，同步的進(jìn)入主線程，即主執(zhí)行棧，異步的進(jìn)入。主線程內(nèi)的任務(wù)執(zhí)行完畢為空，會(huì)去讀取對(duì)應(yīng)的任務(wù)，推入主線程執(zhí)行。 前言 眾所周知，JavaScript是一門單線程語言，雖然在html5中提出了Web-Worker，但這并未改變JavaScript是單線程這一核心?？煽碒TML規(guī)范中的這段話： To coordinate ...

    call_me_R 評(píng)論0 收藏0

  • 從event loop規(guī)范探究javaScript異步及瀏覽器更新渲染時(shí)機(jī)

    摘要：規(guī)范中定義了瀏覽器何時(shí)進(jìn)行渲染更新，了解它有助于性能優(yōu)化。結(jié)合一些資料，對(duì)上邊規(guī)范給出一些理解有誤請(qǐng)指正每個(gè)線程都有自己的。列為，列為，列為。我們都知道是單線程，渲染計(jì)算和腳本運(yùn)行共用同一線程網(wǎng)絡(luò)請(qǐng)求會(huì)有其他線程，導(dǎo)致腳本運(yùn)行會(huì)阻塞渲染。 本文轉(zhuǎn)自blog 轉(zhuǎn)載請(qǐng)注明出處 異步的思考 event loops隱藏得比較深，很多人對(duì)它很陌生。但提起異步，相信每個(gè)人都知道。異步背后的靠山就是...

    13651657101 評(píng)論0 收藏0

  • javasscript - 收藏集 - 掘金

    摘要：跨域請(qǐng)求詳解從繁至簡前端掘金什么是為什么要用是的一種使用模式，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。異步編程入門道典型的面試題前端掘金在界中，開發(fā)人員的需求量一直居高不下。 jsonp 跨域請(qǐng)求詳解——從繁至簡 - 前端 - 掘金什么是jsonp？為什么要用jsonp?JSONP(JSON with Padding)是JSON的一種使用模式，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題...

    Rango 評(píng)論0 收藏0

  • python并發(fā)4：使用thread處理并發(fā)

    摘要：如果某線程并未使用很多操作，它會(huì)在自己的時(shí)間片內(nèi)一直占用處理器和。在中使用線程在和等大多數(shù)類系統(tǒng)上運(yùn)行時(shí)，支持多線程編程。守護(hù)線程另一個(gè)避免使用模塊的原因是，它不支持守護(hù)線程。 這一篇是Python并發(fā)的第四篇，主要介紹進(jìn)程和線程的定義，Python線程和全局解釋器鎖以及Python如何使用thread模塊處理并發(fā) 引言&動(dòng)機(jī) 考慮一下這個(gè)場(chǎng)景，我們有10000條數(shù)據(jù)需要處理，處理每條...

    joywek 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<