1 瀏覽器的組成
-
用戶界面－ 包括
地址欄、后退/前進按鈕、書簽目錄等，也就是除了用來顯示所請求頁面的主視窗之外的其他部分 -
瀏覽器引擎－ 用來查詢及操作渲染引擎的介面
-
渲染引擎（瀏覽器內核）－ 用來顯示請求的內容，例如，如果請求內容為html，它
負責決議html及css，并將決議后的結果顯示出來 -
網路－ 用來完成網路呼叫，例如http請求，它具有平臺無關的介面，可以在不同平臺上作業
-
UI 后端－ 用來繪制類似組合選擇框及對話框等基本組件，具有不特定于某個平臺的通用介面，底層使用作業系統的用戶介面
-
JS解釋器－ 用來解釋執行JS代碼
-
資料存盤－ 屬于持久層，瀏覽器需要在硬碟中保存類似cookie的各種資料，HTML5定義了Storage技術，這是一種輕量級完整的客戶端存盤技術
2 主流的渲染引擎
瀏覽器的渲染引擎也叫排版引擎，或者是瀏覽器內核
主流的 渲染引擎 有
- Chrome瀏覽器: Blink引擎（WebKit的一個分支），
- Safari瀏覽器: WebKit引擎，windows版本2008年3月18日推出正式版，但蘋果已于2012年7月25日停止開發Windows版的Safari，
- FireFox瀏覽器: Gecko引擎，
- Opera瀏覽器: Blink引擎(早期版使用Presto引擎），
- Internet Explorer瀏覽器: Trident引擎 ，
- Microsoft Edge瀏覽器: EdgeHTML引擎（Trident的一個分支），
3 渲染引擎作業原理
渲染引擎決議的基本流程：
1. 決議HTML構建Dom樹，DOM 是W3C組織推薦的處理可擴展置標語言的標準編程介面，
2. 構建渲染樹，渲染樹并不等同于Dom樹，因為像`head`標簽 或 `display: none`這樣的元素就沒在渲染樹中了，但是它們在Dom樹中，
3. 對渲染樹進行布局，定位坐標和大小、確定是否換行、確定position、overflow、z-index等等，這個程序叫`layout` 或 `reflow`，
4. 繪制渲染樹，呼叫作業系統底層API(UI Backend)進行繪圖操作，
webkit內核作業流程
gecko內核作業流程
4 性能優化：重繪與回流（重排）
回流（reflow）與重繪（repaint），在性能優化的時候十分重要,面試也經常被提及，
回流(reflow):當渲染樹(render tree)中一部分(或全部)元素的規模尺寸，布局，隱藏等改變而需要重新構建，
重繪(repaint)：當渲染樹(render tree)中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，比如background-color，
小結: 影響布局的操作會發生回流；不影響布局而只是修改顏色等屬性則發生重繪;
? 每個頁面至少需要一次回流+重繪
? 回流必將引起重繪
回流(重排)發生的條件
1、添加或者洗掉可見的DOM元素；
2、元素位置改變；
3、元素尺寸改變——邊距、填充、邊框、寬度和高度
4、內容改變——比如文本改變或者圖片大小改變而引起的計算值寬度和高度改變；
5、頁面渲染初始化；
6、瀏覽器視窗尺寸改變——resize事件發生時；
【重排和重繪案例.html】
var s = document.body.style;
s.padding = "2px"; // 回流+重繪
s.border = "1px solid red"; // 再一次 回流+重繪
s.color = "blue"; // 再一次重繪
s.backgroundColor = "#ccc"; // 再一次 重繪
s.fontSize = "14px"; // 再一次 回流+重繪
// 添加node，再一次 回流+重繪
document.body.appendChild(document.createTextNode('abc!'));
優化方案
原理：盡量減少重繪與回流的次數
方案1
直接使用className修改樣式，少用style設定樣式.
div.classList.add('test'); //一次重排 重繪
方案2
把要頻繁操作的元素從渲染樹中去除;比如使用display:none;
div.style.display = 'none';//第一次 重排 重繪
div.style.width = 200px;
div.style.heigt= 200px;
div.style.color = 'red';
div.style.margin = 20px;
div.style.display = 'block';//第二次 重排 重繪
這里總共發生兩次重繪和重排
方案3
布局經常改變的盒子進行定位脫標， 比如影片 先定位 ，建議使用css3影片和變換 transform
方案4
使用DocumentFragment(虛擬dom)進行快取操作,引發一次回流和重繪
var pNode,fragment = document.createDocumentFragment();
//動態創建20個p標簽，先用DocumentFragment 物件來快取
for(var i=0; i<20; i++){
pNode = document.createElement('p');
pNode.innerHTML = i;
fragment.appendChild(pNode);
}
document.body.appendChild(fragment);
優化總結
- 加類名：把多個css屬性放到一個類中,減少回流和重繪的次數
- 將樣式修改代碼加到兩個display:none中間
- 讓布局經常改變的盒子脫離標準流
- 使用虛擬dom DocumentFragment
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/243204.html
標籤：其他
上一篇：swiper插件簡單使用
下一篇：JS撰寫的科學計算器