成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

渲染機(jī)制

Big_fat_cat / 984人閱讀

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

渲染機(jī)制

瀏覽器

1. 渲染機(jī)制

什么是 DOCTYPE 及作用

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

瀏覽器是怎么渲染過程

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

重排 Reflow

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

觸發(fā) Reflow：

當(dāng)你增加、刪除、修改 DOM 結(jié)點(diǎn)時，會導(dǎo)致 Reflow 或 Repaint
移動 DOM 位置
當(dāng)你修改 CSS 樣式時
當(dāng)你 Resize 窗口時，或是滾動的時候
當(dāng)你修改網(wǎng)頁的默認(rèn)字體時

重繪 Repaint

定義：頁面要呈現(xiàn)的內(nèi)容全部畫在屏幕上。

觸發(fā) Rrpaint:

DOM 改動
CSS 改動
例：當(dāng)添加 DOM 時，最好一次添加，避免多次。

布局 Layout

總結(jié)：

當(dāng)用戶輸入一個 URL，瀏覽器就會發(fā)送一個請求，請求URL對應(yīng)的資源


HTML解析器會將這個文件解析，構(gòu)建成一棵DOM樹


構(gòu)建 DOM 樹時，遇到 JS 和CSS元素，HTML 解析器就將控制權(quán)轉(zhuǎn)讓給JS或者CSS解析器


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


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


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


最后瀏覽器根據(jù)這棵 layout 樹，將頁面渲染到屏幕上去
2. js 運(yùn)行機(jī)制

js 單線程：一個時間之內(nèi) js 只能做一件事

任務(wù)隊列：同步任務(wù)和異步任務(wù)

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

異步任務(wù)：

setTimeout 和 setInterval

DOM 事件

ES6 的 Promise

3. 頁面性能

提升頁面性能的方法：

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

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

異步加載的方式：



動態(tài)腳本加載


defer


async



異步加載的區(qū)別：



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


async 是在加載完之后立即執(zhí)行，如果是多個，執(zhí)行順序和加載順序無關(guān)

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

與緩存相關(guān)的HTTP頭


強(qiáng)緩存


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


協(xié)商緩存


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

利用 CDN：網(wǎng)絡(luò)加速

預(yù)解析 DNS

如果頁面是 HTTPS 協(xié)議開頭的，強(qiáng)制打開 DNS 預(yù)解析
動態(tài)腳本加載： 
 
    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 用法： 




    
    
    性能優(yōu)化
4. 錯誤監(jiān)控

前端錯誤的分類

及時運(yùn)行錯誤：代碼錯誤

1）try...catch

2) window.onerror

資源加載錯誤

1) object.onerror

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

3) Error 事件捕獲

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

1) 在 script 標(biāo)簽增加 crossorigin 屬性

2) 設(shè)置 js 資源響應(yīng)頭加 Access-Control-Allow-Origin:

上報錯誤的基本原理

采用 Ajax 通信的方式上報

利用 Image 對象上報

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93374.html

相關(guān)文章

  • webkit渲染機(jī)制淺析

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

    Cobub 評論0 收藏0

  • 前端頁面渲染機(jī)制-筆記

    摘要：前端頁面渲染機(jī)制筆記瀏覽器基礎(chǔ)結(jié)構(gòu)用戶界面用戶所看到及與之交互的功能組件，如地址欄返回前進(jìn)按鈕瀏覽器引擎用戶界面和呈現(xiàn)引擎之間傳遞指令渲染引擎呈現(xiàn)引擎負(fù)責(zé)解析用戶請求的內(nèi)容網(wǎng)絡(luò)負(fù)責(zé)處理網(wǎng)絡(luò)相關(guān)的事物后端負(fù)責(zé)繪制提示框等瀏覽器組件，底層使用 前端頁面渲染機(jī)制-筆記 瀏覽器基礎(chǔ)結(jié)構(gòu) 1.用戶界面（user interface）：用戶所看到及與之交互的功能組件，如地址欄、返回、前進(jìn)按鈕 2...

    tuantuan 評論0 收藏0

  • 前端頁面渲染機(jī)制-筆記

    摘要：前端頁面渲染機(jī)制筆記瀏覽器基礎(chǔ)結(jié)構(gòu)用戶界面用戶所看到及與之交互的功能組件，如地址欄返回前進(jìn)按鈕瀏覽器引擎用戶界面和呈現(xiàn)引擎之間傳遞指令渲染引擎呈現(xiàn)引擎負(fù)責(zé)解析用戶請求的內(nèi)容網(wǎng)絡(luò)負(fù)責(zé)處理網(wǎng)絡(luò)相關(guān)的事物后端負(fù)責(zé)繪制提示框等瀏覽器組件，底層使用 前端頁面渲染機(jī)制-筆記 瀏覽器基礎(chǔ)結(jié)構(gòu) 1.用戶界面（user interface）：用戶所看到及與之交互的功能組件，如地址欄、返回、前進(jìn)按鈕 2...

    nanchen2251 評論0 收藏0

  • JS JavaScript事件循環(huán)機(jī)制

    摘要：事件循環(huán)機(jī)制首先區(qū)分進(jìn)程和線程進(jìn)程是資源分配的最小單位系統(tǒng)會給它分配內(nèi)存不同的進(jìn)程之間是可以同學(xué)的，如管道命名管道消息隊列一個進(jìn)程里有單個或多個線程瀏覽器是多進(jìn)程的，因為系統(tǒng)給它的進(jìn)程分配了資源內(nèi)存打開會有一個主進(jìn)程，每打開一個頁就有一個獨(dú) JS JavaScript事件循環(huán)機(jī)制 首先區(qū)分進(jìn)程和線程 進(jìn)程是cpu資源分配的最小單位（系統(tǒng)會給它分配內(nèi)存） 不同的進(jìn)程之間是可以同學(xué)的，如...

    dantezhao 評論0 收藏0

發(fā)表評論

0條評論

Big_fat_cat

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<