渲染機制 頁面效能 錯誤監控

2021-09-12 19:20:26 字數 2845 閱讀 6854

什麼是doctype及作用

必須按規範來說

瀏覽器渲染過程

dom + cssom -> reder tree -> layout

定義:dom結構中的各個元素都有自己的盒子(模型),這些都需要瀏覽器根據各種樣式來計算並根據計算結果將元素放到它該出現的位置,這個位置稱之為reflow。

觸發:

當你增加、刪除、修改dom結點時,會導致reflow或repaint.

當你移動dom的位置,或搞個動畫的時候

修改css樣式的時候

當調整視窗大小,或者滾動的時候有可能會觸發。

重繪repaint

定義:

當各種盒子的位置、大小以及其他屬性,例如顏色、字型大小都確定下來後,瀏覽器於是把這些元素都按照各自的特性繪製一遍,於是頁面的內容出現了。只要頁面顯示的發生了變化都是repaint。

觸發repaint:

dom改動

css改動

避免發生repaint:

把所有的dom都新增到document fragment裡面。

布局layout

......有機會還需要繼續了解

題目一:

console.log(1);

settimeout(function(),0);

console.log(3);

//1,3,2

//settimeout是非同步任務,所以不會和console.log同步執行。所以當執行完console.log(2)後再執行settimeout,0秒後輸出3.

//最後的列印順序是什麼?這道題需要了解js執行機制

js是單執行緒:所謂單執行緒就是同一時間只能做一件事,

任務佇列:

同步任務和非同步任務:

settimeout、 setinterver是非同步任務,而console.log是同步任務。

題目二:

console.log('a');

while(true)

console.log('b');

//輸出a

//因為while會不斷迴圈導致console.log(b)無法執行。

題目三:

console.log('a');

settimeout(function(),0);

while(1)

//1是true,0是false.

題目四:

for(var i=0;i<4;i++),1000);

}//4,4,4,4

//非同步佇列執行時間

//非同步任務的放入時間和執行時間

//和上面幾題是兩個概念

如何理解js單執行緒

在乙個時間內只能幹一件事

什麼是任務佇列

任務佇列有同步任務和非同步任務.

什麼是event loop(事件迴圈)

什麼時候會開啟非同步任務:

settimeout和setinterval

dom事件:需要用到addeventlistener,當觸發某個事件,放入非同步任務佇列中

es6中的promise

理解哪些語句加入到非同步佇列

*理解語句放入非同步佇列的時機

提公升頁面效能的方法有哪些

資源壓縮合併,減少http請求.(把資源檔案變小)

非核心**非同步載入->非同步載入的方式->非同步載入的區別

*利用瀏覽器快取->快取的分類->快取原理

使用cdn(屬於網路優化)

預解析dns

注:當一次開啟時,瀏覽器快取起不到任何作用,但是使用cdn可以起到作用。

非同步載入的方式:

動態指令碼載入(動態建立結點)

defer

async

非同步載入的區別:

defer在html解析之後才會執行,如果是多個,按照載入順序依次執行。

async是在載入完之後立即執行,如果是多個,執行順序和載入順序無關。

瀏覽器快取的分類

強快取:

協商快取:

前端錯誤的分類:

即時執行錯誤:**錯誤

資源載入錯誤

每種錯誤的捕獲方式

即時錯誤的捕獲方式:

try...catch

window.onerror

資源載入錯誤:

object.onerror

performance.getentries()

error事件捕獲

延伸:跨域的js執行錯誤可以捕獲嗎,錯誤提示什麼,應該怎麼處理?

在script標籤新增crossorigin屬性

設定js資源響應頭access-control-allow-origin:*

上報錯誤的基本原理

採用ajax通訊的方式上報

利用image物件上報

渲染機制 頁面效能 錯誤監控

什麼是doctype及作用 必須按規範來說 瀏覽器渲染過程 dom cssom reder tree layout 定義 dom結構中的各個元素都有自己的盒子 模型 這些都需要瀏覽器根據各種樣式來計算並根據計算結果將元素放到它該出現的位置,這個位置稱之為reflow。觸發 當你增加 刪除 修改dom...

效能優化 頁面渲染 重繪 回流

參考 高效能web開發 深入理解頁面呈現 重繪 回流 因為一些原因要重新構建渲染數的時候,就叫做回流,第一次構建的時候也叫做回流。引起回流的操作 回流一定會導致重繪 影響元素幾何屬性發生變化 重繪 瀏覽器會使渲染樹中受到影響的部分失效,並重新構造這部分渲染樹,完成回流後,瀏覽器會重新繪製受影響的部分...

錯誤處理機制跳轉錯誤頁面

錯誤處理機制 string errorinfo url ctx.request.rawurl.tostring source exception.source message exception.message if m.contains 不存在 錯誤處理機制 要的趕緊貼上到記事本 就寫乙個方法,頁...