渲染機制/頁面性能/錯誤監控

渲染機制

什麼是doctype及做用
必須按規範來講

瀏覽器渲染過程
dom + cssom -> reder tree -> layout

重排reflow

定義：DOM結構中的各個元素都有本身的盒子(模型)，這些都須要瀏覽器根據各類樣式來計算並根據計算結果將元素放到它該出現的位置，這個位置稱之爲reflow。
觸發：
當你增長、刪除、修改DOM結點時，會致使reflow或repaint.
當你移動DOM的位置，或搞個動畫的時候
修改CSS樣式的時候
當調整窗口大小，或者滾動的時候有可能會觸發。

重繪repaint

定義：
當各類盒子的位置、大小以及其餘屬性，例如顏色、字體大小都肯定下來後，瀏覽器因而把這些元素都按照各自的特性繪製一遍，因而頁面的內容出現了。只要頁面顯示的發生了變化都是repaint。
觸發repaint：
DOM改動
CSS改動
避免發生repaint：
把全部的DOM都添加到document fragment裏面。
佈局layout

*js運行機制

......有機會還須要繼續瞭解
題目一：

console.log(1);
setTimeout(function(){
   console.log(2);
},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(){
   console.log(B);
},0);
while(1){
}
//1是true,0是false.

題目四：

for(var i=0;i<4;i++){
setTimeout(function(){
   console.log(i);
},1000);
}
//4，4，4，4
//異步隊列執行時間
//異步任務的放入時間和執行時間
//和上面幾題是兩個概念

如何理解js單線程
在一個時間內只能幹一件事

什麼是任務隊列
任務隊列有同步任務和異步任務.

什麼是Event Loop(事件循環)

何時會開啓異步任務：
setTimeout和setInterval
DOM事件：須要用到addEventlistener,當觸發某個事件，放入異步任務隊列中
ES6中的promise

理解哪些語句加入到異步隊列

*理解語句放入異步隊列的時機

頁面性能

提高頁面性能的方法有哪些

1. 資源壓縮合並，減小HTTP請求.(把資源文件變小)
2. 非核心代碼異步加載->異步加載的方式->異步加載的區別
3. *利用瀏覽器緩存->緩存的分類->緩存原理
4. 使用CDN(屬於網絡優化)
5. 預解析DNS

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//host_name_to_prefetch.com">
注：當一次打開時，瀏覽器緩存起不到任何做用，可是使用CDN能夠起到做用。

2)異步加載

異步加載的方式：

1. 動態腳本加載(動態建立結點)
2. defer
3. async

異步加載的區別:

1. defer在HTML解析以後纔會執行，若是是多個，按照加載順序依次執行。
2. async是在加載完以後當即執行，若是是多個，執行順序和加載順序無關。

3)瀏覽器緩存

瀏覽器緩存的分類
強緩存：

協商緩存：

錯誤監控

前端錯誤的分類：

1. 即時運行錯誤：代碼錯誤
2. 資源加載錯誤

每種錯誤的捕獲方式
即時錯誤的捕獲方式：

1. try...catch
2. window.onerror

資源加載錯誤：

1. object.onerror
2. performance.getEntries()
3. Error事件捕獲

延伸：跨域的js運行錯誤能夠捕獲嗎，錯誤提示什麼，應該怎麼處理？

1. 在script標籤添加crossorigin屬性
2. 設置js資源響應頭Access-Control-Allow-Origin:*

上報錯誤的基本原理

1. 採用Ajax通訊的方式上報
2. 利用Image對象上報