簡介

了解了瀏覽器原理后對自己前端知識的幫助

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

主要內(nèi)容

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

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

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

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

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

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

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

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

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

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

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

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

安全問題：
線程之間共享進(jìn)程中的數(shù)據(jù)，進(jìn)程之間的內(nèi)容相互隔離。也就是說單線程瀏覽器中的頁面是可以通過一些手段獲取到瀏覽器的所有權(quán)限，然后再通過瀏覽器攻擊到操作系統(tǒng)的。這就導(dǎo)致了單線程瀏覽器不安全的題。
因為瀏覽器插件可以使用 C/C++ 等代碼編寫，通過插件可以獲取到操作系統(tǒng)的任意資源，當(dāng)你在頁面運行一個插件時也就意味著這個插件能完全操作你的電腦。如果是個惡意插件，那么它就可以釋放病毒、竊取你的賬號密碼，引發(fā)安全性問題。
至于頁面腳本，它可以通過瀏覽器的漏洞來獲取系統(tǒng)權(quán)限，這些腳本獲取系統(tǒng)權(quán)限之后也可以對你的電腦做一些惡意的事情，同樣也會引發(fā)安全問題?？偠灾褪菫g覽器對于腳本與插件的運行沒有一個隔離環(huán)境的存在，導(dǎo)致了各種安全問題的出現(xiàn)。

目前瀏覽器對于安全問題的解決：
最后我們再來看看上面的兩個安全問題是怎么解決的。 采用多進(jìn)程架構(gòu)的額外好處是可以使用安全沙箱，你可以把沙箱看成是操作系統(tǒng)給進(jì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ò)獲取的，會存在一些惡意代碼利用瀏覽器漏洞對系統(tǒng)進(jìn)行攻擊，所以運行在渲染進(jìn)程里面的代碼是不被信任的。這也是為什么 Chrome 會讓渲染進(jìn)程運行在安全沙箱里，就是為了保證系統(tǒng)的安全。

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

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

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

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

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

渲染流程

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

渲染進(jìn)程.PNG

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

重排：通過js 或者css改變元素在幾何方面的屬性，會跟新整個渲染流水
重繪：改變了元素的顏色

優(yōu)化方法

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

借鑒他人

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