成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

我不該動你的，Event Loops（深坑）

wenhai.he / 1048人閱讀

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

我不該動你的，Event Loops 寫在前面的話

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

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

但為了使自己養(yǎng)成經(jīng)?？偨Y(jié)的習慣，還是寫點什么吧。

故事的開始

計算 fib(45) 是一個相當耗時的工作，在我的chrome里約需要15s左右。

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

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

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

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

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

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

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

運行結(jié)果如下，

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

事情就這樣結(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點的意思，怎么理解起來像是每執(zhí)行一次 Event Loops 的 task，最后都會更新視圖。

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

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

會不會兩次 setTimeout 被合并了？

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

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

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

同時我懷疑，之前代碼

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)

會不會被優(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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90571.html

相關(guān)文章

  • 你不得不知的Event Loop

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

    call_me_R 評論0 收藏0

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

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

    13651657101 評論0 收藏0

  • javasscript - 收藏集 - 掘金

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

    Rango 評論0 收藏0

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

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

    joywek 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<