瀏覽器性能

Coly 發(fā)布于2019-08-23 12:21 / 521人閱讀

摘要：因為當(dāng)文件放在頂部時，頁面會逐步呈現(xiàn)，有較好的用戶體驗，如果將文件放在底部，瀏覽器為了避免回流，會阻塞內(nèi)容的呈現(xiàn)。瀏覽器可能需要在本地存儲各種各樣的數(shù)據(jù)，例如等。

瀏覽器是怎么渲染的？

DOM樹+CSS規(guī)則樹—>渲染樹—調(diào)用系統(tǒng)GUI的API來繪制頁面
1）瀏覽器下載html文件之后，會根據(jù)html文件構(gòu)建DOM樹，其中css會構(gòu)建css規(guī)則樹，js會修改dom樹和css規(guī)則樹；
2）通過計算css樣式，形成渲染樹，然后進(jìn)行布局和繪制頁面；
3）CSS文件要放在頂部，JS文件要放在底部。因為當(dāng)CSS文件放在頂部時，頁面會逐步呈現(xiàn)，有較好的用戶體驗，如果將CSS文件放在底部，瀏覽器為了避免回流，會阻塞內(nèi)容的呈現(xiàn)。可能導(dǎo)致白屏和內(nèi)容閃爍的情況。JS文件要放在底部是因為JS文件可能對DOM樹進(jìn)行修改，所以瀏覽器在加載JS文件時是阻塞的。而其他文件都可以并行下載。JS文件如果放在頂部會阻塞內(nèi)容的逐步呈現(xiàn)，并且阻塞后面組件的下載。
4）回流reflow和重繪repaint
由于html默認(rèn)采用的是流式布局，所以當(dāng)元素的幾何尺寸發(fā)生變化時，會產(chǎn)生回流。回流會從當(dāng)前元素遞歸往下重新計算元素的位置。比如說對DOM進(jìn)行增、刪、改、移動或者動畫、還有resize時都會觸發(fā)回流reflow。
而當(dāng)元素幾何尺寸沒有發(fā)生變化，僅僅是顏色和背景色發(fā)生變化時，會產(chǎn)生重繪。
瀏覽器會對某些操作進(jìn)行異步回流
避免回流：不要一條一條修改樣式，可以預(yù)先定義好class的css然后修改類名；對DOM進(jìn)行離線修改；盡量修改層級較低的DOM；為動畫的組件采用非流式布局；不使用table布局；

瀏覽器的組件

用戶界面 用戶界面包含了地址欄，前進(jìn)后退按鈕，書簽菜單等等，除了請求頁面之外所有你看到的內(nèi)容都是用戶界面的一部分

瀏覽器引擎 瀏覽器引擎負(fù)責(zé)讓 UI 和渲染引擎協(xié)調(diào)工作

渲染引擎 渲染引擎負(fù)責(zé)展示請求內(nèi)容。如果請求的內(nèi)容是 HTML，渲染引擎會解析 HTML 和 CSS，然后將內(nèi)容展示在屏幕上

網(wǎng)絡(luò)組件 網(wǎng)絡(luò)組件負(fù)責(zé)網(wǎng)絡(luò)調(diào)用，例如 HTTP 請求等，使用一個平臺無關(guān)接口，下層是針對不同平臺的具體實現(xiàn)

UI后端 UI 后端用于繪制基本 UI 組件，例如下拉列表框和窗口。UI 后端暴露一個統(tǒng)一的平臺無關(guān)的接口，下層使用操作系統(tǒng)的 UI 方法實現(xiàn)

Javascript 引擎 Javascript 引擎用于解析和執(zhí)行 Javascript 代碼

數(shù)據(jù)存儲 數(shù)據(jù)存儲組件是一個持久層。瀏覽器可能需要在本地存儲各種各樣的數(shù)據(jù)，例如 Cookie 等。瀏覽器也需要支持諸如 localStorage，IndexedDB，WebSQL 和 FileSystem 之類的存儲機制

垃圾回收

原理：找出不再使用的變量，然后釋放其占用的內(nèi)存（垃圾收集器周期性地執(zhí)行）
垃圾回收

方法：
1) 標(biāo)記清除：目前主流的垃圾收集算法，將當(dāng)前不使用的值加上標(biāo)記，然后進(jìn)行內(nèi)存回收。（通過變量在執(zhí)行環(huán)境中的生存周期）
2) 引用計數(shù)：記錄所有值被引用的次數(shù)，當(dāng)引用次數(shù)為0時，進(jìn)行內(nèi)存回收。存在的問題：循環(huán)引用會導(dǎo)致內(nèi)存泄露。所以最好手動解除引用。

說明：
1) 在標(biāo)記清除時，如何確定變量不再被使用？
JS中分為全局執(zhí)行環(huán)境和函數(shù)的執(zhí)行環(huán)境，代碼運行時，會先將全局執(zhí)行環(huán)境壓入棧中，然后當(dāng)執(zhí)行流進(jìn)入函數(shù)時，會創(chuàng)建函數(shù)的執(zhí)行環(huán)境和相應(yīng)的作用域鏈。
每個函數(shù)都有自己的執(zhí)行環(huán)境，對應(yīng)著相應(yīng)的作用域鏈。對變量的查找和賦值都沿著自己的作用域鏈向上查找。
創(chuàng)建函數(shù)時，會創(chuàng)建一個預(yù)先包含全局變量對象的作用域鏈；當(dāng)執(zhí)行函數(shù)時，會創(chuàng)建本地活動對象（包括arguments和局部變量），并將其推入作用域鏈前端。當(dāng)執(zhí)行函數(shù)時，對變量的查找會沿著作用域鏈向上搜索，直到作用域鏈的最頂端—全局變量對象。當(dāng)函數(shù)執(zhí)行完畢后，本地活動對象會在內(nèi)存中銷毀。而閉包中，當(dāng)外層函數(shù)執(zhí)行完畢后，外層函數(shù)的作用域鏈被銷毀，但被閉包函數(shù)引用的活動對象還存在內(nèi)存中。
不確定：任何函數(shù)（包括閉包函數(shù)）在執(zhí)行完畢后，只能銷毀本地活動對象，所以為了銷毀閉包引用的活動對象，需要銷毀閉包函數(shù)，即解除引用null。

2) 如何引用計數(shù)？
將引用類型值賦給已聲明的變量，引用計數(shù)加1，若該變量的值變?yōu)榱似渌瑒t引用計數(shù)值減1。當(dāng)引用計數(shù)為0時，進(jìn)行內(nèi)存回收。

自我理解代碼執(zhí)行過程：將全局執(zhí)行環(huán)境推入執(zhí)行棧中，將所有var 變量和函數(shù)聲明提升到其作用域的頂部，創(chuàng)建函數(shù)時，會創(chuàng)建一個預(yù)先包含全局變量對象的作用域鏈；然后從第一行代碼開始順序執(zhí)行，所有函數(shù)都會當(dāng)函數(shù)執(zhí)行時，則將函數(shù)的執(zhí)行環(huán)境推入棧中，并形成其作用域鏈，函數(shù)在聲明時會形成一個包含全局對象的作用域鏈，當(dāng)函數(shù)執(zhí)行時，會將當(dāng)前活動對象加入到作用域鏈中，對變量的查找都是沿著作用鏈進(jìn)行查找的。

性能問題：垃圾收集器的執(zhí)行間隔：IE6根據(jù)內(nèi)存分配量運行，當(dāng)內(nèi)存量大時，一般整個程序所需要的內(nèi)存量就很大，這樣會造成垃圾收集器的頻繁執(zhí)行。IE7重寫了之后采用的規(guī)則：觸發(fā)垃圾收集的臨界值動態(tài)變化。初始觸發(fā)垃圾收集的臨界值與IE6相同，若回收的內(nèi)存分配量低于15%，則臨界值加倍；若回收的內(nèi)存分配量大于85%，則臨界值保持不變。

google V8引擎

V8內(nèi)存回收
V8優(yōu)化技術(shù)及注意事項

瀏覽器內(nèi)核有哪些

IE（Trident）；firefox（Gecko）；Safari和chrome（WebKit）；Opera（Presto）

gbk與utf-8

GBK、Unicode、ASCII碼都為字符集，UTF-8為編碼方式；
ASCII碼一共規(guī)定了128個字符的編碼；
GBK包含全部中文字符；2個字節(jié)表示中文；
unicode 中所有符號都全球唯一；
UTF-8作為Unicode的實現(xiàn)方式之一，包含全世界所有國家需要用到的字符。一個字節(jié)表示英文，3個字節(jié)表示中文。UTF8占用的數(shù)據(jù)庫比GBK大。

更多博客：https://github.com/Lmagic16/blog