how browsers work

瀏覽器工作原理

https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#The_rendering_engine

單線程, 多進程

0. Browser process
1. Render process
2. GPU process
3. Utility process
4. Plugins process

https://imweb.io/topic/58e3bfa845e5c13468f567d5

Chrome 多進程
js 單線程

瀏覽器多進程架構

跟現在的很多多線程瀏覽器不一樣，Chrome瀏覽器使用多個進程來隔離不同的網頁；
因此在Chrome中打開一個網頁相當於起了一個進程，

那么Chrome為什么要使用多進程架構?

在瀏覽器剛被設計出來的時候，那時的網頁非常的簡單，每個網頁的資源占有率是非常低的，因此一個進程處理多個網頁時可行的;
然后在今天，大量網頁變得日益復雜。把所有網頁都放進一個進程的瀏覽器面臨在健壯性，響應速度，安全性方面的挑戰;

因為如果瀏覽器中的一個tab網頁崩潰的話，將會導致其他被打開的網頁應用;
另外相對於線程，進程之間是不共享資源和地址空間的,所以不會存在太多的安全問題，
而由於多個線程共享着相同的地址空間和資源,所以會存在線程之間有可能會惡意修改或者獲取非授權數據等復雜的安全問題;

瀏覽器內核

瀏覽器內核是多線程? process 進程

瀏覽器內核是多線程，在內核控制下各線程相互配合以保持同步，一個瀏覽器通常由以下常駐線程組成：

GUI 渲染線程
JavaScript引擎線程
定時觸發器線程
事件觸發線程
異步http請求線程

Chrome瀏覽器為每個tab頁面單獨啟用進程，因此每個tab網頁都有由其獨立的渲染引擎實例;

DOM tree + CSSOM tree => Render tree

---

https://juejin.im/entry/5b2f6dc9f265da596a367cb2

https://zhuanlan.zhihu.com/p/47407398

https://time.geekbang.org/column/intro/100033601

https://blog.fundebug.com/2019/01/03/understand-browser-rendering/

---