成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

渲染機(jī)制

Big_fat_cat / 1020人閱讀

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

渲染機(jī)制

瀏覽器

1. 渲染機(jī)制

什么是 DOCTYPE 及作用

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

瀏覽器是怎么渲染過(guò)程

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

重排 Reflow

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

觸發(fā) Reflow：

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

重繪 Repaint

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

觸發(fā) Rrpaint:

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

布局 Layout

總結(jié)：

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


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


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


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


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


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


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

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

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

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

異步任務(wù)：

setTimeout 和 setInterval

DOM 事件

ES6 的 Promise

3. 頁(yè)面性能

提升頁(yè)面性能的方法：

資源壓縮合并，減少 HTTP 請(qǐng)求

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

異步加載的方式：



動(dòng)態(tài)腳本加載


defer


async



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



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


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

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

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


強(qiáng)緩存


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


協(xié)商緩存


與服務(wù)器協(xié)商
// 服務(wù)器下發(fā)的時(shí)間 如果過(guò)期
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

如果頁(yè)面是 HTTPS 協(xié)議開(kāi)頭的，強(qiáng)制打開(kāi) DNS 預(yù)解析
動(dòng)態(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. 錯(cuò)誤監(jiān)控

前端錯(cuò)誤的分類

及時(shí)運(yùn)行錯(cuò)誤：代碼錯(cuò)誤

1）try...catch

2) window.onerror

資源加載錯(cuò)誤

1) object.onerror

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

3) Error 事件捕獲

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

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

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

上報(bào)錯(cuò)誤的基本原理

采用 Ajax 通信的方式上報(bào)

利用 Image 對(duì)象上報(bào)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/93374.html

相關(guān)文章

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

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

    Cobub 評(píng)論0 收藏0

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

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

    tuantuan 評(píng)論0 收藏0

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

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

    nanchen2251 評(píng)論0 收藏0

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

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

    dantezhao 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Big_fat_cat

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<