渲染機制

Big_fat_cat 發布于2019-08-22 15:19 / 970人閱讀

摘要：渲染機制瀏覽器渲染機制什么是及作用告訴瀏覽器文件是什么文檔類型，瀏覽器根據它來判斷用什么引擎來解析渲染文件。觸發改動改動例當添加時，最好一次添加，避免多次。

渲染機制

瀏覽器

1. 渲染機制

什么是 DOCTYPE 及作用

DTD 告訴瀏覽器文件是什么文檔類型，瀏覽器根據它來判斷用什么引擎來解析渲染文件。
DOCTYPE 用來聲明文檔類型和 DTD 規范。

瀏覽器是怎么渲染過程

HTML 5:
HTML 4.01 Strict: 嚴格模式不包含展示性和棄用的元素
HTML 4.01 Transitional:寬松模式

重排 Reflow

定義：DOM 結構中的各個元素都有自己的盒子模型，這些都是需要瀏覽器根據各種樣式來計算并根據計算結果將元素放到它該出現的位置。

觸發 Reflow：

當你增加、刪除、修改 DOM 結點時，會導致 Reflow 或 Repaint
移動 DOM 位置
當你修改 CSS 樣式時
當你 Resize 窗口時，或是滾動的時候
當你修改網頁的默認字體時

重繪 Repaint

定義：頁面要呈現的內容全部畫在屏幕上。

觸發 Rrpaint:

DOM 改動
CSS 改動
例：當添加 DOM 時，最好一次添加，避免多次。

布局 Layout

總結：

當用戶輸入一個 URL，瀏覽器就會發送一個請求，請求URL對應的資源

HTML解析器會將這個文件解析，構建成一棵DOM樹

構建 DOM 樹時，遇到 JS 和CSS元素，HTML 解析器就將控制權轉讓給JS或者CSS解析器

JS或者CSS解析器解析完這個元素時候，HTML又繼續解析下個元素，直到整棵DOM樹構建完成

DOM 樹構建完之后，瀏覽器把 DOM 樹中的一些不可視元素去掉，然后與 CSSOM 合成一棵 render 樹

接著瀏覽器根據這棵 render 樹，計算出各個節點(元素)在屏幕的位置。這個過程叫做 layout，輸出的是一棵 layout 樹

最后瀏覽器根據這棵 layout 樹，將頁面渲染到屏幕上去

2. js 運行機制

js 單線程：一個時間之內 js 只能做一件事

任務隊列：同步任務和異步任務

Event Loop：瀏覽器的引擎遇到了 setTimeout,識別是異步任務，瀏覽器把這個 time
模塊拿走，時間到了再放到異步隊列中去。

異步任務：

setTimeout 和 setInterval

DOM 事件

ES6 的 Promise

3. 頁面性能

提升頁面性能的方法：

資源壓縮合并，減少 HTTP 請求

非核心代碼異步加載-》異步加載的方式-》異步加載的區別

異步加載的方式：

動態腳本加載

defer

async

異步加載的區別：

defer 是在HTML解析完后才會執行，如果是多個，按照加載的順序依次執行

async 是在加載完之后立即執行，如果是多個，執行順序和加載順序無關

利用瀏覽器緩存-》緩存的分類-》緩存的原理

與緩存相關的HTTP頭

強緩存

// 表示絕對時間，服務器下發的
Expires Expires:Thu,21 Jan 2017 23:39:02 GMT
// 比較的是本地的時間，會有偏差，3600s內無需請求
Cache-Control Cache-Control:max-age=3600
// 兩者時間如果都下發了，規定選取后者。

協商緩存

與服務器協商
// 服務器下發的時間如果過期
Last-Modified If-Modified-Since Last-Modified:Web,26 Jan 2017 00:35:11 GMT
//Hash值判斷還可不可以使用-->
Etag If-None-Match

利用 CDN：網絡加速

預解析 DNS

如果頁面是 HTTPS 協議開頭的，強制打開 DNS 預解析

動態腳本加載：

 
    var oHead = document.getElementsByTagName("HEAD").item(0); 
    var oscrīpt= document.createElement("scrīpt"); 
    oscrīpt.type = "text/javascrīpt"; 
    oscrīpt.src="test.js"; 
    oHead.appendChild( oscrīpt);

defer 與 async 用法：





    
    
    性能優化

4. 錯誤監控

前端錯誤的分類

及時運行錯誤：代碼錯誤

1）try...catch

2) window.onerror

資源加載錯誤

1) object.onerror

2) performance.getEntries() 返回的是數組 performance.getEntries().forEach(item=>{console.log(item.name)})

3) Error 事件捕獲

延伸：跨域的 js 運行錯誤可以捕獲嗎,錯誤提示什么，應該怎么處理？

1) 在 script 標簽增加 crossorigin 屬性

2) 設置 js 資源響應頭加 Access-Control-Allow-Origin:

上報錯誤的基本原理

采用 Ajax 通信的方式上報

利用 Image 對象上報

GPU云服務器云服務器云渲染平臺視頻渲染生成機制實現機制事件機制

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93374.html

webkit渲染機制淺析

摘要：模塊和將下面的渲染機制，安全機制，插件機制等等隱藏起來，提供一個接口層。進行網頁的渲染進程，可能有多個。最后進程將結果由線程傳遞給進程最后，進程接收到結果并將結果繪制出來。這是之前在簡書上面的處女作，也搬過來了，以后就一直在 segmentfault 上面寫文章了，webkit技術內幕-朱永盛是我大四買的書，很舊的一本書了，當時只看了一點點，一直沒繼續看完它，現在才看完，，，說來慚愧...

Cobub 2019-08-02 11:03 評論0 收藏0
前端頁面渲染機制-筆記

摘要：前端頁面渲染機制筆記瀏覽器基礎結構用戶界面用戶所看到及與之交互的功能組件，如地址欄返回前進按鈕瀏覽器引擎用戶界面和呈現引擎之間傳遞指令渲染引擎呈現引擎負責解析用戶請求的內容網絡負責處理網絡相關的事物后端負責繪制提示框等瀏覽器組件，底層使用前端頁面渲染機制-筆記瀏覽器基礎結構 1.用戶界面（user interface）：用戶所看到及與之交互的功能組件，如地址欄、返回、前進按鈕 2...

tuantuan 2019-08-02 16:12 評論0 收藏0
前端頁面渲染機制-筆記

摘要：前端頁面渲染機制筆記瀏覽器基礎結構用戶界面用戶所看到及與之交互的功能組件，如地址欄返回前進按鈕瀏覽器引擎用戶界面和呈現引擎之間傳遞指令渲染引擎呈現引擎負責解析用戶請求的內容網絡負責處理網絡相關的事物后端負責繪制提示框等瀏覽器組件，底層使用前端頁面渲染機制-筆記瀏覽器基礎結構 1.用戶界面（user interface）：用戶所看到及與之交互的功能組件，如地址欄、返回、前進按鈕 2...

nanchen2251 2019-08-29 18:33 評論0 收藏0
JS JavaScript事件循環機制

摘要：事件循環機制首先區分進程和線程進程是資源分配的最小單位系統會給它分配內存不同的進程之間是可以同學的，如管道命名管道消息隊列一個進程里有單個或多個線程瀏覽器是多進程的，因為系統給它的進程分配了資源內存打開會有一個主進程，每打開一個頁就有一個獨 JS JavaScript事件循環機制首先區分進程和線程進程是cpu資源分配的最小單位（系統會給它分配內存）不同的進程之間是可以同學的，如...

dantezhao 2019-08-23 14:49 評論0 收藏0