瀏覽器是什么吊履，瀏覽器是用戶用來查看網(wǎng)頁的軟件程序，它是由多個進(jìn)程構(gòu)成调鬓，那么什么是進(jìn)程艇炎？什么又是線程呢？
進(jìn)程與線程科學(xué)定義：
- 進(jìn)程 進(jìn)程是cpu資源分配的最小單位（是能擁有資源和獨立運(yùn)行的最小單位）
- 線程 線程是cpu是調(diào)度的最小單位 （線程是建立在進(jìn)程的基礎(chǔ)上的一次程序運(yùn)行單位腾窝，一個進(jìn)程中可以有多個線程）
總的來說軟件服務(wù)好比一座工廠冕臭，進(jìn)程好比一個加工車間，而線程則是加工車間中的一條流水線燕锥，多條線程構(gòu)成一個進(jìn)程辜贵，多個進(jìn)程構(gòu)成一個軟件服務(wù)，
以chorme瀏覽器為例归形，他分為Browser主進(jìn)程托慨，GPU進(jìn)程，第三方插件進(jìn)程暇榴、瀏覽器渲染進(jìn)程厚棵。其中我們前端開發(fā)
人員最需要關(guān)注的是它的瀏覽器渲染進(jìn)程蕉世，該進(jìn)程主要由下列幾個線程構(gòu)成：
1.JS引擎線程；2.GUI渲染線程婆硬；3.事件觸發(fā)線程狠轻；4.定時器觸發(fā)線程；5彬犯，異步請求線程向楼；
通常我們說JS是單線程運(yùn)行的，是因為JS程序的可執(zhí)行代碼在JS引擎線程中執(zhí)行谐区，其中的異步任務(wù)會丟到其他的線程中執(zhí)行湖蜕，待拿到返回結(jié)果，再通知JS引擎線程運(yùn)行其回調(diào)宋列。需要注意的一點是GUI渲染進(jìn)程和JS引擎互斥昭抒，一個運(yùn)行另一個就需要掛起，他們中的一方要是運(yùn)行的時間過長炼杖，則會引起程序的卡頓灭返。
打開網(wǎng)頁的全過程：
1.在地址欄中輸入URL；
2.對輸入的URL進(jìn)行DNS解析坤邪，獲取目標(biāo)服務(wù)器IP地址婆殿，優(yōu)先瀏覽器DNS緩存查詢>本地host文件查詢，如沒有則進(jìn)行遞歸或迭代查詢罩扇，本地區(qū)的域名服務(wù)器>根DNS域名服務(wù)器>頂級域名服務(wù)器>依次向下>>>;
3.像目標(biāo)IP發(fā)送http請求婆芦；
4.建立tcp鏈接；
5.接受返回數(shù)據(jù)喂饥，（http1.1長鏈接消约，默認(rèn)不會斷開tcp握手）
6.瀏覽器渲染線程解析html文件，方向由上至下员帮；
7. 解析HTML文件標(biāo)簽對并渲染或粮，具體規(guī)則如下：
- 1.解析到DOM（文檔對象模型 Document Object Model）標(biāo)簽，置入DOM樹捞高，HTML標(biāo)簽對以棧的形式解析氯材，解析到標(biāo)簽頭先入棧并構(gòu)成一個DOM節(jié)點，解析到該標(biāo)簽尾硝岗，則需要判斷當(dāng)前棧頂是不是該標(biāo)簽頭氢哮，是則認(rèn)為解析完畢出棧。因為HTML標(biāo)簽是成對出現(xiàn)的且標(biāo)簽對之間無法穿插只能是包含關(guān)系型檀，所以以這種形式解析dom節(jié)點的話冗尤，必然會將其子節(jié)點全部解析完成才開始進(jìn)行其兄弟節(jié)點的解析；
- 2.解析到CSS標(biāo)簽（link）,首先將CSS文件下載完畢，然后進(jìn)行解析生成CSSOM（層疊樣式表對象模型 Cascading Style Sheets Object Model）CSSOM和DOM是完全獨立的數(shù)據(jù)模型 裂七，因此它們是彼此分開解析的 皆看。 但是它們都具有相似的樹結(jié)構(gòu) ，并且具有相同的目的：為瀏覽器提供一種結(jié)構(gòu)背零，以呈現(xiàn)和標(biāo)識頁面上的不同元素腰吟。注意下載和解析CSS文件都會阻止頁面渲染，從而阻塞JS運(yùn)行徙瓶，這是因為DOM 和 CSSOM 要最終合并成為 render tree 用于頁面渲染毛雇，其中一項未解析完畢則無法正常渲染,而頁面渲染和JS代碼運(yùn)行互斥，所以也阻塞JS運(yùn)行倍啥。
- 3.合成render tree，利用以獲得的DOM 和 CSSOM 合成render tree澎埠，其中包含完整的界面展示信息虽缕。
- 4.生成Layout布局階段，生成盒模型蒲稳，確定各節(jié)點大小位置層級等氮趋；
- 5.進(jìn)行painting繪制階段，將各節(jié)點繪制到界面上（類似片元著色器）
- 6.解析到JS標(biāo)簽江耀，將JS文件下載完畢然后執(zhí)行剩胁，此過程阻塞DOM解析和CSS解析，因為JS代碼種可能對DOM和樣式有操作祥国，避免引起沖突昵观。
注意上述解析規(guī)則并不是等待所有數(shù)據(jù)全部返回才開始解析，而是當(dāng)它接收到可解析數(shù)據(jù)就會開始解析舌稀。
CSS解析與JS代碼執(zhí)行都會阻塞渲染啊犬，他們阻塞關(guān)系如下：
CSS阻塞渲染規(guī)律：
1.CSS加載和解析不會阻塞DOM TREE構(gòu)建，他們是兩個并行的線程在處理壁查；
2.CSS加載和解析會阻塞RENDER TREE合成觉至，因為CSSOM是構(gòu)成渲染樹的一部分；
3.CSS加載和解析阻塞JS代碼執(zhí)行睡腿，因為JS代碼與渲染互斥语御，可能有DOM操作或者樣式操作上的沖突；
JS阻塞渲染規(guī)律：
1.JS加載和運(yùn)行阻塞DOM TREE和RENDER TREE的構(gòu)建席怪；
2.JS執(zhí)行需等待CSSOM構(gòu)建完成应闯；
3.上述2點可以理解為GUI線程與JS引擎線程互斥，在瀏覽器解析HTML文件并渲染的過程里挂捻，只有執(zhí)行js代碼交由JS主線程處理（異步任務(wù)除外）孽锥，其他過程有GUI線程處理。
總結(jié)：日常盜圖
