簡(jiǎn)介

了解了瀏覽器原理后對(duì)自己前端知識(shí)的幫助

1. 你可以知道你寫的前端代碼摔癣，是瀏覽器通過怎么的配合畴蒲，展示到頁面
2. 你寫的每一行代碼將變得有意義劲室，對(duì)于瀏覽器的優(yōu)化啊 對(duì)于頁面加載速度呀 優(yōu)化頁面解析速度
3. 了解了web性能優(yōu)化仿耽，寫代碼過程中有意無意中會(huì)盡量?jī)?yōu)化岩榆，而不是一味寫代碼 只是完成工作任務(wù)

主要內(nèi)容

這篇筆記主要是瀏覽器渲染進(jìn)程色徘，進(jìn)程線程配合展示頁面 | 瀏覽器對(duì)于代碼的解析 主要是V8引擎的任務(wù)

瀏覽器頁面是消息隊(duì)列和事件循環(huán)系統(tǒng)來驅(qū)動(dòng)的

渲染進(jìn)程中消息隊(duì)列.PNG

什么是進(jìn)程 什么是線程

進(jìn)程：一個(gè)進(jìn)程是一個(gè)運(yùn)行程序 進(jìn)程之間互補(bǔ)干擾
線程：依賴進(jìn)程存在 線程之間內(nèi)存共享
進(jìn)程間通信：IPC通信機(jī)制
之間關(guān)系：

1. 進(jìn)程中的任意一線程執(zhí)行出錯(cuò) 都會(huì)導(dǎo)致整個(gè)進(jìn)程崩潰
2. 進(jìn)程關(guān)閉之后恭金，操作系統(tǒng)會(huì)回收進(jìn)程所占的內(nèi)存

目前瀏覽器進(jìn)程架構(gòu)

瀏覽器進(jìn)程2.PNG

最新Chrome 瀏覽器包括：
1個(gè)瀏覽器主進(jìn)程、GPU進(jìn)程褂策、網(wǎng)絡(luò)進(jìn)程横腿、渲染進(jìn)程、插件進(jìn)程

1. 瀏覽器進(jìn)程：主要負(fù)界面顯示斤寂、用戶交互耿焊、子進(jìn)程管理、提供存儲(chǔ)功能
2. 渲染進(jìn)程：將html遍搞、css罗侯、js轉(zhuǎn)換為用戶可以交互的界面JavaScript 引擎 V8 都是運(yùn)行在該進(jìn)程中，默認(rèn)情況下溪猿，Chrome會(huì)為每個(gè)Tab標(biāo)簽創(chuàng)建一個(gè)渲染進(jìn)行·钩杰。處于安全考慮，渲染進(jìn)程都是運(yùn)行在沙箱模式下诊县。
3. 其他不介紹 可參考瀏覽器進(jìn)程與線程

以前瀏覽器進(jìn)程框架帶了的安全問題（瀏覽器沙盒 自己所困惑的點(diǎn)列出來）

在單進(jìn)程瀏覽器中讲弄，頁面是通過各個(gè)線程配合生效的

安全問題：
線程之間共享進(jìn)程中的數(shù)據(jù)，進(jìn)程之間的內(nèi)容相互隔離依痊。也就是說單線程瀏覽器中的頁面是可以通過一些手段獲取到瀏覽器的所有權(quán)限避除，然后再通過瀏覽器攻擊到操作系統(tǒng)的。這就導(dǎo)致了單線程瀏覽器不安全的題胸嘁。
因?yàn)闉g覽器插件可以使用 C/C++ 等代碼編寫瓶摆，通過插件可以獲取到操作系統(tǒng)的任意資源，當(dāng)你在頁面運(yùn)行一個(gè)插件時(shí)也就意味著這個(gè)插件能完全操作你的電腦性宏。如果是個(gè)惡意插件赏壹，那么它就可以釋放病毒、竊取你的賬號(hào)密碼衔沼，引發(fā)安全性問題蝌借。
至于頁面腳本，它可以通過瀏覽器的漏洞來獲取系統(tǒng)權(quán)限指蚁，這些腳本獲取系統(tǒng)權(quán)限之后也可以對(duì)你的電腦做一些惡意的事情菩佑，同樣也會(huì)引發(fā)安全問題∧總而言之稍坯，就是瀏覽器對(duì)于腳本與插件的運(yùn)行沒有一個(gè)隔離環(huán)境的存在，導(dǎo)致了各種安全問題的出現(xiàn)搓劫。

目前瀏覽器對(duì)于安全問題的解決：
最后我們?cè)賮砜纯瓷厦娴膬蓚€(gè)安全問題是怎么解決的瞧哟。 采用多進(jìn)程架構(gòu)的額外好處是可以使用安全沙箱，你可以把沙箱看成是操作系統(tǒng)給進(jìn)程上了一把鎖枪向，沙箱里面的程序可以運(yùn)行勤揩，但是不能在你的硬盤上寫入任何數(shù)據(jù)，也不能在敏感位置讀取任何數(shù)據(jù)秘蛔，例如你的文檔和桌面陨亡。Chrome 把插件進(jìn)程和渲染進(jìn)程鎖在沙箱里面，這樣即使在渲染進(jìn)程或者插件進(jìn)程里面執(zhí)行了惡意程序深员，惡意程序也無法突破沙箱去獲取系統(tǒng)權(quán)限

目前瀏覽器進(jìn)程中 關(guān)注渲染進(jìn)程安全問題
[目前多進(jìn)程架構(gòu)]中總結(jié)的各進(jìn)程主要功能负蠕，這里值得我們注意的是渲染進(jìn)程所有的內(nèi)容都是通過網(wǎng)絡(luò)獲取的，會(huì)存在一些惡意代碼利用瀏覽器漏洞對(duì)系統(tǒng)進(jìn)行攻擊倦畅，所以運(yùn)行在渲染進(jìn)程里面的代碼是不被信任的遮糖。這也是為什么 Chrome 會(huì)讓渲染進(jìn)程運(yùn)行在安全沙箱里，就是為了保證系統(tǒng)的安全叠赐。

消息記錄
smy:
沙盒只是隔離自己的操作系統(tǒng) 本地電腦
smy:
但是不能保證瀏覽器上的東西是否安全
smy:
比如你使用了瀏覽器記住密碼功能
平易近人:
所以js的東西就只會(huì)在瀏覽器里亂動(dòng)

用戶輸入url 瀏覽器進(jìn)程配合圖

輸入url進(jìn)程圖.PNG

瀏覽器開發(fā)者工具所看到的進(jìn)程

Chrome 的默認(rèn)策略是欲账，每個(gè)標(biāo)簽對(duì)應(yīng)一個(gè)渲染進(jìn)程。但如果從一個(gè)頁面打開了另一個(gè)新頁面燎悍，而新頁面和當(dāng)前頁面屬于同一站點(diǎn)的話敬惦，那么新頁面會(huì)復(fù)用父頁面的渲染進(jìn)程。官方把這個(gè)默認(rèn)策略叫 process-per-site-instance谈山。

渲染流程

html 加載DOM樹 ——> dom是保存在內(nèi)存中的樹狀結(jié)構(gòu)
css——>styleSheeps 樣式 屬性值也要標(biāo)準(zhǔn)化 樣式計(jì)算
布局計(jì)算
分層計(jì)算 圖層樹
圖層繪制
Gpu光柵化
合成

渲染進(jìn)程.PNG

了解了重排俄删、重繪后的 web性能優(yōu)化方法

重排：通過js 或者css改變?cè)卦趲缀畏矫娴膶傩裕瑫?huì)跟新整個(gè)渲染流水
重繪：改變了元素的顏色

優(yōu)化方法

1. 避免使用js改變樣式 盡力多使用class
2. 減少dom操作 使用高級(jí)api document.create.DocumentFragment.replaceChild()
   3.暫存引用 變量賦值 let a =div.offLeft 用變量a 操作接下來的事情
   4.脫離文檔流 例如：個(gè)別圖層
   5.table(盡量避免table布局) 外面很小的改動(dòng)可能對(duì)造成table從新布局（改動(dòng)table內(nèi)部元素除外）
   6.對(duì)dom屬性的讀寫要分離

借鑒他人

深入瀏覽器之瀏覽器中的進(jìn)程與線程