前端安全、瀏覽器渲染機制、js執行機制、頁面效能、錯誤監控
一、安全類
1、csrf：跨站請求偽造；
原理：
（1） 使用者C開啟瀏覽器，訪問受信任網站A，輸入使用者名稱和密碼請求登入網站A；
（2）在使用者資訊通過驗證後，網站A產生Cookie資訊並返回給瀏覽器，此時使用者登入網站A成功，可以正常傳送請求到網站A； （3）使用者未退出網站A之前，在同一瀏覽器中，開啟一個TAB頁訪問網站B；
（4）網站B接收到使用者請求後，返回一些攻擊性程式碼，併發出一個請求要求訪問第三方站點A；
（5）瀏覽器在接收到這些攻擊性程式碼後，根據網站B的請求，在使用者不知情的情況下攜帶Cookie資訊，向網站A發出請求。網站A並不知道該請求其實是由B發起的，所以會根據使用者C的Cookie
防禦：
（1）驗證 HTTP Referer 欄位，判斷頁面來源
（2）在請求地址中新增 token 並驗證；
（3）在 HTTP 頭中自定義屬性並驗證
2、xss：跨站指令碼攻擊；
原理：向頁面注入指令碼，（如：評論區）
防禦：
（1）對使用者輸入的資料進行HTML Entity編碼
（2）對資料過濾
二、渲染機制
1、DOCTYPE作用：用來宣告文件型別和DTD規範，用途：檔案的合法性驗證
HTML4.0有一個嚴格模式（不包括展示性的和棄用的元素）和一個傳統模式（包括）
2、瀏覽器如何渲染：
（1）解析HTML形成DOM Tree
（2）解析css產生css規則樹（css rule tree）
（3）根據DOM Tree和css規則樹來構造rendering Tree
（4）下一步操作稱之為Layout，用來計算每個節點在螢幕中的位置
（5）繪製，即遍歷render樹，使用UI後端層繪製每個節點
Reflow：重排，當某個部分發生了變化影響了佈局，就需要倒回去重新渲染
原因：
（1）增加、較少DOM節點
（2）修改css樣式的時候
（3）修改網頁的預設字型時
避免：
（1）HTML元素使用fixed或absolute，不會引起reflow
（2）使用預先定義好的css的class，修改DOM的className
Repaint：重繪，只改變某個元素的背景顏色，不影響元素周圍或內部佈局屬性，將只會引起瀏覽器的repaint，重畫某一部分
原因：
（1）操作DOM節點
（2）修改css樣式
減少repaint：
（1）新建一個節點，將最終的結果放進去，一次性插入
三、js執行機制
<script type="text/javascript"> // 最終輸出1、3、2
console.log(1);
setTimeout(function() {
console.log(2);
}, 0);
console.log(3);
</script>1、js是單執行緒的：同一時間只能做一件事
2、任務佇列：同步任務和非同步任務，
3、機制：從上往下執行，先執行同步任務，遇到非同步任務先掛起，執行完同步任務在回去執行非同步任務
4、非同步任務：DOM事件、setTimeout、setInterval、es6中的promise
for (var i = 0; i < 4; i++) { // 輸出4個4
setTimeout(function () {
console.log(i);
}, 1000); // 過1s後，才會放入非同步佇列中，
}將var改為let便會輸出0/1/2/3，作用域不同了
四、頁面效能
2、減少http請求
（1）HTML的map圖
<img usemap='#map1' src='./music.png'>
<map name="map1">
<area shape="rect" coords="0, 0, 45, 180" href="javascript:alert(1);" alt="">
<area shape="rect" coords="45, 0, 90, 180" href="javascript:alert(2);" alt="">
<area shape="rect" coords="90, 0, 135, 180" href="javascript:alert(3);" alt="">
<area shape="rect" coords="135, 0, 180, 180" href="javascript:alert(4);" alt="">
</map>（2）css精靈
<a href="javascript: alert(1);">
<span class="span1"></span>
</a>
<a href="javascript: alert(2);">
<span class="span2"></span>
</a>
<a href="javascript: alert(3);">
<span class="span3"></span>
</a>
<a href="javascript: alert(4);">
<span class="span4"></span>
</a>span {
display: inline-block;
width: 45px;
height: 45px;
background: url('./music.png');
}
.span1 {
background-position: 0 0;
}
.span2 {
background-position: -45px 0;
}
.span3 {
background-position: -90px 0;
}
.span4 {
background-position: -135px 0;
}（3）合併css或js檔案
（4）使用base64點陣圖片
3、快取
（1）強快取：直接從快取中取
（2）304協商快取：問一下伺服器快取中的能不能用
（3）http請求頭：
Cache-Control: no-store // 禁止瀏覽器快取
Cache-Control: no-cache // 不允許直接快取，即協商快取
Cache-Control: max-age // 秒，快取的有效時間
pragma: no-cache // 禁止瀏覽器快取
expires: 時間 // 格林威治時間，在之前有效優先順序：pragma>Cache-Control>expires
（4）響應頭
Last-Modified // 通知資源最後修改的時間
ETag // 文章內容修改4、非同步載入
<script src="./xxx.js" charset="utf-8" async></script><script src="./xxx.js" charset="utf-8" defer>defer：用於開啟新的執行緒下載指令碼檔案，並使指令碼在文件解析完成後執行。 async：HTML5新增屬性，用於非同步下載指令碼檔案，下載完畢立即解釋執行程式碼。5、預解析DNS
<meta http-quiv="x-dns-prefetch-control" content="on"> // 強制開啟預解析DNS，http是預設開啟的，https是預設關閉的
<link rel="dns-prefetch" href="//local_name.com"> // 將裡面的地址預解析五、錯誤監控
1、錯誤分類：
（1）即時執行錯誤
捕獲：
1）try...catch
2）window.onerror
（2）資源載入錯誤（沒有冒泡）
1）object.onerror
2）performance.getEntries()
performance.getEntries().forEach((item) => { console.log(item.name) } ) // 獲取所有已經載入的資源3）Error事件捕獲
<head>
<meta charset="utf-8">
<title>錯誤監控</title>
<script type="text/javascript">
window.addEventListener('error', function (e) {
console.log('捕獲', e);
}, true); // 一定要加true
</script>
</head>
<body>
<script src="//badu.com/test.js" charset="utf-8"></script>
</body>2、跨域錯誤能捕獲嗎？可以
（1）客戶端：在script標籤中加crossorigin屬性
<script crossorigin src="http://www.lmj.com/demo/crossoriginAttribute/error.js"></script>（2）服務端：在響應頭Access-Control-Allow-Origin:域名或*
3、上報錯誤的基本原理
（1）採用Ajax通訊的方式上報
（2）利用Image物件上報
(new Image()).src = 'http://baidu.com/tesjk?r=tksjk'; // 後面為上報的的地址