国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Js基礎知識（四） - js運行原理與機制

shevy / 2273人閱讀

摘要：定時器線程由于是單線程運行，所以不能抽出時間來計時，只能另開辟一個線程來處理定時器任務，等計時完成，把定時器要執(zhí)行的操作添加到事件任務隊列尾，等待引擎線程來處理。已經(jīng)知道了是單線程運行的，也知道中有同步操作和異步操作。

js運行機制 
本章了解一下js的運行原理，了解了js的運行原理才能寫出更優(yōu)美的代碼，提高運行效率，還能解決開發(fā)中遇到的不理解的問題。
進程與線程

進程是cpu資源分配的最小單位，進程可以包含多個線程。 瀏覽器就是多進程的，每打開的一個瀏覽器窗口就是一個進程。

線程是cpu調度的最小單位，同一進程下的各個線程之間共享程序的內存空間。

可以把進程看做一個倉庫，線程是可以運輸?shù)呢涇嚕總€倉庫有屬于自己的多輛貨車為倉庫服務（運貨），每個倉庫可以同時由多輛車同時拉貨，但是每輛車同一時間只能干一件事，就是運輸本次的貨物。這樣就好理解了吧。

渲染進程

瀏覽器包括4個進程：

主進程（Browser進程），瀏覽器只有一個主進程，負責資源下載，界面展示等主要基礎功能

GPU進程，負責3D圖示繪制

第三方插件進程，負責第三方插件處理

渲染進程（Renderer進程），負責js執(zhí)行，頁面渲染等功能，也是本章重點內容

渲染進程主要包括GUI渲染線程、Js引擎線程、事件循環(huán)線程、定時器線程、http異步線程。

GUI渲染線程

先看看瀏覽器得到一個網(wǎng)站資源后干了哪些事：

首先瀏覽器會解析html代碼（實際上html代碼本質是字符串）轉化為瀏覽器認識的節(jié)點，生成DOM樹，也就是DOM Tree

然后解析css，生成CSSOM（CSS規(guī)則樹）

把DOM Tree 和CSSOM結合，生成Rendering Tree(渲染樹)

GUI就是來干這個事情的，如果修改了一些元素的顏色或者背景色，頁面就會重繪（Repaint），如果修改元素的尺寸，頁面就會回流（Reflow），當頁面需要Repaing和Reflow時GUI多會執(zhí)行，進行頁面繪制。

這里提示一點：Reflow比Repaint的成本更高，在js性能優(yōu)化中會將如何避免Reflow和Repaint

JS引擎線程

js引擎線程就是js內核，負責解析與執(zhí)行js代碼，也稱為主線程。瀏覽器同時只能有一個JS引擎線程在運行JS程序，所以js是單線程運行的。

需要注意的是，js引擎線程和GUI渲染線程同時只能有一個工作，js引擎線程會阻塞GUI渲染線程


    
        
 a 

        
        
 div2

在瀏覽器渲染的時候遇到

這是網(wǎng)絡上對Event Loop的解釋圖，相信大家現(xiàn)在能明白這張圖的含義了。

有關定時器（setTimeout、setInterval）的更多趣事 定時器會按照規(guī)定時間執(zhí)行嗎？

定時器是規(guī)定在一段時間之后執(zhí)行一段代碼，但是在js執(zhí)行中不會準確無誤的按照預期的時間去執(zhí)行定時器里面的代碼。

一個原因是W3C標準規(guī)定setTimeout中最小的時間周期是4毫秒，凡是低于4ms的時間間隔都按照4ms來處理。

其實還有一個重要的原因，如果仔細看上面的文章，大家應該會想到在js執(zhí)行的時候，主線程碰到定時器的時候，是不會直接處理的，應該是先把定時器事件交給定時器線程去處理，這時主線程繼續(xù)執(zhí)行下面的代碼，同時定時器線程開始計時處理，等到計時完畢，事件循環(huán)線程會把定時器要執(zhí)行的操作放在事件隊列末尾，等主線程空閑的時候再來執(zhí)行事件隊列里面的操作。

應該使用setTimeout還是setInterval

使用setTimeout模擬setInterval代碼類似以下代碼：

var say = function() {
    setTimeout(say, 1000)
    console.log("hello world")
}

setTimeout(say, 1000)

這樣js碰到定時器，會交給定時器線程處理，然后等計時完畢，定時器里面的操作添加到事件隊列，等主線程空閑去執(zhí)行，主線程執(zhí)行的時候又會發(fā)遇到定時器，這是又開始執(zhí)行上面的一系列操作。

你會發(fā)現(xiàn)，這樣做會在每一次定時器執(zhí)行完畢才開始下一個定時器，其中的誤差只是等待主線程空閑所需要等待的時間。

而setInterval是規(guī)定每隔固定的時間就往定時器線程中推入一個事件，這樣做有一個問題，就是累積效應。

累積效應：就是如果定時器里面的代碼執(zhí)行所需的時間大于定時器的執(zhí)行周期，就會出現(xiàn)累計效應，簡單來說就是上一次定時器里面的操作還沒執(zhí)行完畢，下一次定時器事件又來了

累積效應會導致有些事件丟失，具體為什么會丟失，感興趣的可以看這篇文章，所以為了保險起見，盡量去使用setTimeout而不使用setInterval。

如果有對setTimeout非常感興趣的同學，我非常推薦大家去看看80% 應聘者都不及格的 JS 面試題這篇文章。

macrotask與microtask

microtask是Promise里一個新的概念。

macrotask

macrotask中的事件都是放在一個事件隊列中的，而這個隊列由事件觸發(fā)線程維護

macrotask（又稱之為宏任務），可以理解是每次執(zhí)行棧執(zhí)行的代碼就是一個宏任務（包括每次從事件隊列中獲取一個事件回調并放到執(zhí)行棧中執(zhí)行）

每一個task會從頭到尾將這個任務執(zhí)行完畢，不會執(zhí)行其它

瀏覽器為了能夠使得JS內部task與DOM任務能夠有序的執(zhí)行，會在一個task執(zhí)行結束后，在下一個 task 執(zhí)行開始前，對頁面進行重新渲染

microtask

microtask（又稱為微任務），可以理解是在當前 task 執(zhí)行結束后立即執(zhí)行的任務

microtask中的所有微任務都是添加到微任務隊列（Job Queues）中，等待當前macrotask執(zhí)行完畢后執(zhí)行，而這個隊列由JS引擎線程維護

在當前task任務后，下一個task之前，在渲染之前執(zhí)行

所以它的響應速度相比setTimeout（setTimeout是task）會更快，因為無需等渲染

也就是說，在某一個macrotask執(zhí)行完后，就會將在它執(zhí)行期間產(chǎn)生的所有microtask都執(zhí)行完畢（在渲染前）

請看網(wǎng)絡盜圖：

所以js運行過程：

執(zhí)行一個宏任務（棧中沒有就從事件隊列中獲取）

執(zhí)行過程中如果遇到微任務，就將它添加到微任務的任務隊列中

宏任務執(zhí)行完畢后，立即執(zhí)行當前微任務隊列中的所有微任務（依次執(zhí)行）

當前宏任務執(zhí)行完畢，開始檢查渲染，然后GUI線程接管渲染

渲染完畢后，JS線程繼續(xù)接管，開始下一個宏任務（從事件隊列中獲取）

有關macrotask和microtask的分析借鑒于從瀏覽器多進程到JS單線程，JS運行機制最全面的一次梳理

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51804.html

相關文章

  • Js基礎知識（四） - js運行原理與機制

    摘要：定時器線程由于是單線程運行，所以不能抽出時間來計時，只能另開辟一個線程來處理定時器任務，等計時完成，把定時器要執(zhí)行的操作添加到事件任務隊列尾，等待引擎線程來處理。已經(jīng)知道了是單線程運行的，也知道中有同步操作和異步操作。 js運行機制 本章了解一下js的運行原理，了解了js的運行原理才能寫出更優(yōu)美的代碼，提高運行效率，還能解決開發(fā)中遇到的不理解的問題。 進程與線程 進程是cpu資源分配的...

    LMou 評論0 收藏0

  • Js基礎知識（四） - js運行原理與機制

    摘要：定時器線程由于是單線程運行，所以不能抽出時間來計時，只能另開辟一個線程來處理定時器任務，等計時完成，把定時器要執(zhí)行的操作添加到事件任務隊列尾，等待引擎線程來處理。已經(jīng)知道了是單線程運行的，也知道中有同步操作和異步操作。 js運行機制 本章了解一下js的運行原理，了解了js的運行原理才能寫出更優(yōu)美的代碼，提高運行效率，還能解決開發(fā)中遇到的不理解的問題。 進程與線程 進程是cpu資源分配的...

    leap_frog 評論0 收藏0

  • KOA2框架原理解析和實現(xiàn)

    摘要：實現(xiàn)的四大模塊上文簡述了源碼的大體框架結構，接下來我們來實現(xiàn)一個的框架，筆者認為理解和實現(xiàn)一個框架需要實現(xiàn)四個大模塊，分別是封裝創(chuàng)建類構造函數(shù)構造對象中間件機制和剝洋蔥模型的實現(xiàn)錯誤捕獲和錯誤處理下面我們就逐一分析和實現(xiàn)。 什么是koa框架？ ? ? ? ?koa是一個基于node實現(xiàn)的一個新的web框架，它是由express框架的原班人馬打造的。它的特點是優(yōu)雅、簡潔、表達力強、自由度...

    tracymac7 評論0 收藏0

  • KOA2框架原理解析和實現(xiàn)

    摘要：實現(xiàn)的四大模塊上文簡述了源碼的大體框架結構，接下來我們來實現(xiàn)一個的框架，筆者認為理解和實現(xiàn)一個框架需要實現(xiàn)四個大模塊，分別是封裝創(chuàng)建類構造函數(shù)構造對象中間件機制和剝洋蔥模型的實現(xiàn)錯誤捕獲和錯誤處理下面我們就逐一分析和實現(xiàn)。 什么是koa框架？ ? ? ? ?koa是一個基于node實現(xiàn)的一個新的web框架，它是由express框架的原班人馬打造的。它的特點是優(yōu)雅、簡潔、表達力強、自由度...

    liangzai_cool 評論0 收藏0

發(fā)表評論

0條評論

shevy

男|高級講師

TA的文章

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