前端中的進(jìn)程、線程、事件系統(tǒng)

用戶84 發(fā)布于2019-08-23 10:49 / 1324人閱讀

摘要：一瀏覽器的進(jìn)程和線程前端研發(fā)人員不要忘記了瀏覽器是安裝在電腦手機(jī)上的應(yīng)用。附錄中的事件系統(tǒng)環(huán)境中的事件系統(tǒng)多了兩個(gè)和案例四輸出結(jié)果

一、瀏覽器的進(jìn)程和線程

??????前端研發(fā)人員不要忘記了瀏覽器是安裝在PC電腦（手機(jī)）上的應(yīng)用。既然是客戶端應(yīng)用，就免不了一個(gè)問題：線程和進(jìn)程。

一個(gè)程序可以有多個(gè)進(jìn)程；

一個(gè)進(jìn)程和多個(gè)線程；

多個(gè)進(jìn)程之間可以相互通信；

多個(gè)線程之間可以相互通信；

不同進(jìn)程之間的線程不能相互通信。

??????好，知道了這些基本的知識(shí)，我們來看一下瀏覽器（以谷歌瀏覽器為例）這個(gè)最基本的應(yīng)用程序有哪些進(jìn)程，又有哪些線程。
Chrome的進(jìn)程：大家可以打開任務(wù)管理器看看，有哪些進(jìn)程

??????從圖中可以看到，在chrome中每打開一個(gè)標(biāo)簽頁，每一個(gè)擴(kuò)展程序都是一個(gè)進(jìn)程。
Chrome的線程：對于一個(gè)進(jìn)程來說，又有哪些線程呢？

GUI 渲染線程

JavaScript引擎線程

定時(shí)觸發(fā)器線程

事件觸發(fā)線程

異步http請求線程

??????那么當(dāng)你打開一個(gè)頁面，就啟動(dòng)了一個(gè)進(jìn)程，那么這個(gè)進(jìn)程有上面幾個(gè)線程。這幾個(gè)線程之間相互合作，但是GUI和JavaScript之間是相互獨(dú)立的，而且Javascript是單線程的。原因很簡單，涉及UI操作的不能同時(shí)處理，不然給用戶呈現(xiàn)的頁面會(huì)是什么樣子。
??????既然知道了，瀏覽器作為應(yīng)用程序具備的基本要素。那么我們想看看瀏覽器內(nèi)部具體的工作方式。
了解一個(gè)程序，首先了解程序的模塊劃分和工作流程。
瀏覽器主要?jiǎng)澐诌@幾個(gè)模塊瀏覽器部件：那么這幾個(gè)部件相互耦合，為用戶提供頁面。

1、用戶界面

2、瀏覽器引擎

3、渲染引擎

4、網(wǎng)絡(luò)

5、用戶界面后端

6、Javascript解釋器

7、數(shù)據(jù)持久化存儲(chǔ)

二、瀏覽器頁面渲染的方式（頁面初始化）

我們重點(diǎn)來看一下瀏覽器的渲染是怎么操作的

三、瀏覽器的事件系統(tǒng)（頁面操作）Macro和Micro

異步并不是不執(zhí)行，而是執(zhí)行放入隊(duì)列。

四、案例（可能是你們最想看的）

//案例一：
setTimeout(() => {
    console.log(promise);
    console.log("settimeout1");
  }, 0);
let promise = new Promise(function(resolve, reject) {
    console.log("Promise");
    setTimeout(()=>{
        resolve("success");
    },0);
    //resolve("success");
  }).then((msg)=>{
    console.log("resolved."+msg);
  });
  
  setTimeout(() => {
    console.log(promise);    
    console.log("settimeout2");
}, 0);
  console.log(promise);
  console.log("Hi!");
//輸出結(jié)果
Promise                //Promise會(huì)立即執(zhí)行
Promise {  }  //此時(shí)promise狀態(tài)為pending
Hi!                    //打印hi
Promise {  }  
settimeout1            //主線程執(zhí)行完畢，依次將三個(gè)settimeout放入macro隊(duì)列中，打印第一個(gè)
Promise {  }
settimeout2            //打印第二個(gè)
resolved.success       //promise執(zhí)行成功

//案例二：

如果promise中直接resolve("success")，運(yùn)行結(jié)果是怎么樣？
Promise
Promise {  }
Hi!
resolved.success
Promise { undefined }
settimeout1
Promise { undefined }
settimeout2

//案例三：

如果在React中的事件系統(tǒng)是什么樣子的呢？
class Father extends Component {
  render() {
    let promise = new Promise(function(resolve, reject) {
      resolve("success1");
    }).then((msg)=>{
      console.log("resolved."+msg);
    });
    return (
      
    );
  }
  componentDidMount(){
    console.log("Did Mount");
  }
  componentWillMount(){
    let promise = new Promise(function(resolve, reject) {
      resolve("success2");
    }).then((msg)=>{
      console.log("resolved."+msg);
    });
    console.log("Will Mount");
  }
}

//輸出結(jié)果
Will Mount
Did Mount
resolved.success2
resolved.success1
可以看到react并沒有將micro任務(wù)合并到渲染里面

為什么會(huì)提及React，因?yàn)镽eact 的處理方式和我們和瀏覽器的實(shí)現(xiàn)流程比較類似。
React初始化《======》瀏覽器初始加載
React更新 ??《======》瀏覽器的事件系統(tǒng)
所以React從很大程度上做了一層抽象，讓我們面向組件的函數(shù)編程，而不是面向?yàn)g覽器的編程。

附錄：Node中的事件系統(tǒng)Node

node環(huán)境中的事件系統(tǒng)多了兩個(gè) process.nextTick和setImmediate

//案例四：
setTimeout(() => {
    console.log(promise);
    console.log("settimeout1");
  }, 0);
let promise = new Promise(function(resolve, reject) {
    console.log("Promise");
    /*setTimeout(()=>{
        resolve("success");
    },0);*/
    resolve("success");
  }).then((msg)=>{
    console.log("resolved."+msg);
  });
  
  setTimeout(() => {
    console.log(promise);    
    console.log("settimeout2");
}, 0);
console.log(promise);
console.log("Hi!");
process.nextTick(()=>{console.log("nextTick")});
setImmediate(()=>{console.log("Immediate")}) ;
//輸出結(jié)果
Promise
Promise {  }
Hi!
nextTick
resolved.success
Promise { undefined }
settimeout1
Promise { undefined }
settimeout2
Immediate

云服務(wù)器 GPU云服務(wù)器進(jìn)程線程進(jìn)程線程數(shù) 中的事件 linux進(jìn)程與線程

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

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

發(fā)表評論

登陸后可評論

0條評論

用戶84

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 2741·2023-04-26 02:02
tensorflow-hub

閱讀 2621·2023-04-25 20:38
物聯(lián)網(wǎng)-thingsboard源碼編譯安裝踩坑記錄

閱讀 4162·2021-09-26 09:47
【IoT】產(chǎn)品設(shè)計(jì)：OEM、ODM、EMS 的區(qū)別是什么？

閱讀 3150·2021-09-10 10:50
測試管理之項(xiàng)目軟件測試風(fēng)險(xiǎn)管理實(shí)踐

閱讀 3813·2021-09-07 09:58
總結(jié)了17年初到18年初百場前端面試的面試經(jīng)驗(yàn)(含答案)

閱讀 3359·2019-08-30 15:54
前端每日實(shí)戰(zhàn)：74# 視頻演示如何用純 CSS 創(chuàng)作一臺(tái) MacBook Pro

閱讀 2721·2019-08-30 15:54
學(xué)習(xí)CSS中的BFC

閱讀 1941·2019-08-29 17:03

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

前端中的進(jìn)程、線程、事件系統(tǒng)

相關(guān)文章

深入前端-徹底搞懂JS的運(yùn)行機(jī)制

深入前端-徹底搞懂JS的運(yùn)行機(jī)制

大話javascript 4期：事件循環(huán)（1）

**從瀏覽器多進(jìn)程到JS單線程，JS運(yùn)行機(jī)制最全面的一次梳理**

**瀏覽器進(jìn)程線程1**

發(fā)表評論

0條評論

用戶84

男|高級講師

TA的文章

tensorflow

tensorflow-hub

物聯(lián)網(wǎng)-thingsboard源碼編譯安裝踩坑記錄

【IoT】產(chǎn)品設(shè)計(jì)：OEM、ODM、EMS 的區(qū)別是什么？

測試管理之項(xiàng)目軟件測試風(fēng)險(xiǎn)管理實(shí)踐

總結(jié)了17年初到18年初百場前端面試的面試經(jīng)驗(yàn)(含答案)

前端每日實(shí)戰(zhàn)：74# 視頻演示如何用純 CSS 創(chuàng)作一臺(tái) MacBook Pro

學(xué)習(xí)CSS中的BFC

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

前端中的進(jìn)程、線程、事件系統(tǒng)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

前端中的進(jìn)程、線程、事件系統(tǒng)