內(nèi)容
- 瀏覽器渲染
- 執(zhí)行上下文
- js 事件循環(huán)機制
- this 作用域
- new
- 原型 原型鏈
- 防抖&節(jié)流
- 閉包
- 深淺拷貝
- 繼承: call apply bind
- Promise & Generator & async await
- 跨域
- 移動端適配 rm rem pm
- vue
- vuex
- webpack
- es6
內(nèi)容拓展
瀏覽器渲染
- DNS 查詢
- TCP 連接
- HTTP 請求即響應(yīng)
- 服務(wù)器響應(yīng)
- 客戶端渲染
其中瀏覽器對內(nèi)容的渲染包括：
- 處理 HTML 標(biāo)記并構(gòu)建 DOM 樹。
- 處理 CSS 標(biāo)記并構(gòu)建 CSSOM 樹。
- 將 DOM 與 CSSOM 合并成一個渲染樹。
- 根據(jù)渲染樹來布局，以計算每個節(jié)點的幾何信息。
- 將各個節(jié)點繪制到屏幕上。
框架
MVVM： Model：數(shù)據(jù)模型； View：界面； ViewModel：作為橋梁負責(zé)溝通 View 和 Model
核心：數(shù)據(jù)雙向綁定
類型：
- 臟數(shù)據(jù)檢測
調(diào)用watch 函數(shù)，然后再次調(diào)用 $digest 循環(huán)直到發(fā)現(xiàn)沒有變化。循環(huán)至少為二次 ，至多為十次。
- 數(shù)據(jù)劫持
vue 實現(xiàn)雙向綁定：
- 實現(xiàn)一個監(jiān)聽器Observer，用來劫持并監(jiān)聽所有屬性，如果有變動的，就通知訂閱者。
- 實現(xiàn)一個訂閱者Watcher，可以收到屬性的變化通知并執(zhí)行相應(yīng)的函數(shù)，從而更新視圖。
- 實現(xiàn)一個解析器Compile，可以掃描和解析每個節(jié)點的相關(guān)指令，并根據(jù)初始化模板數(shù)據(jù)以及初始化相應(yīng)的訂閱器。
瀏覽器
1. 事件機制
- window 往事件觸發(fā)處傳播，遇到注冊的捕獲事件會觸發(fā)
- 傳播到事件觸發(fā)處時觸發(fā)注冊的事件
- 從事件觸發(fā)處往 window 傳播，遇到注冊的冒泡事件會觸發(fā)
**2. 注冊事件 **
addEventListener
stopPropagation：阻止事件冒泡的，也可以阻止捕獲事件
stopImmediatePropagation：實現(xiàn)阻止事件，還能阻止該事件目標(biāo)執(zhí)行別的注冊事件
3. 事件代理
如果一個節(jié)點中的子節(jié)點是動態(tài)生成的，那么子節(jié)點需要注冊事件的話應(yīng)該注冊在父節(jié)點上
優(yōu)點：節(jié)省內(nèi)存；不需要給子節(jié)點注銷事件
4. 跨域
瀏覽器出于安全考慮，有同源策略。如果協(xié)議、域名或者端口有一個不同就是跨域，Ajax 請求會失敗。
解決方法： - JSONP：只限于 get 請求，利用 <script> 標(biāo)簽沒有跨域限制的漏洞。通過 <script> 標(biāo)簽指向一個需要訪問的地址并提供一個回調(diào)函數(shù)來接收數(shù)據(jù)當(dāng)需要通訊時。
- CORS
- document.domain： 只能用于二級域名相同的情況下
- postMessage：通常用于獲取嵌入頁面中的第三方頁面數(shù)據(jù)。一個頁面發(fā)送消息，另一個頁面判斷來源并接收消息
5. Event loop - 概念
瀏覽器會先執(zhí)行一個宏任務(wù)，接下來有異步代碼的話就先執(zhí)行微任務(wù)
微任務(wù)（microtask-> jobs）：process.nextTick ，promise ，Object.observe ，MutationObserver
宏任務(wù)（macrotask-> task）：script ， setTimeout ，setInterval ，setImmediate ，I/O ，UI rendering - 順序
- 執(zhí)行同步代碼，這屬于宏任務(wù)
- 執(zhí)行棧為空，查詢是否有微任務(wù)需要執(zhí)行
- 執(zhí)行所有微任務(wù)
- 必要的話渲染 UI
- 然后開始下一輪 Event loop，執(zhí)行宏任務(wù)中的異步代碼
- 渲染機制
- 處理 HTML 并構(gòu)建 DOM 樹。
- 處理 CSS 構(gòu)建 CSSOM 樹。
- 將 DOM 與 CSSOM 合并成一個渲染樹。
- 根據(jù)渲染樹來布局，計算每個節(jié)點的位置。
- 調(diào)用 GPU 繪制，合成圖層，顯示在屏幕上。
性能
1. DNS 預(yù)解析
2. 緩存：強緩存和協(xié)商緩存
強緩存: 通過兩種響應(yīng)頭實現(xiàn): Expires 和 Cache-Control
Expires: Wed, 22 Oct 2018 08:41:00 GMT //表示資源會在 Wed, 22 Oct 2018 08:41:00 GMT 后過期
Cache-control: max-age=30 // 優(yōu)先級高于 Expires 。該屬性表示資源會在 30 秒后過期，需要再次請求
協(xié)商緩存:協(xié)商緩存需要請求，如果緩存有效會返回 304。 Last-Modified 表示本地文件最后修改日期,If-None-Match 會將當(dāng)前 ETag 發(fā)送給服務(wù)器，詢問該資源 ETag 是否變動，有變動的話就將新的資源發(fā)送回來。并且 ETag 優(yōu)先級比 Last-Modified 高
緩存策略：
- 對于某些不需要緩存的資源，可以使用 Cache-control: no-store ，表示該資源不需要緩存
- 對于頻繁變動的資源，可以使用 Cache-Control: no-cache 并配合 ETag 使用，表示該資源已被緩存，但是每次都會發(fā)送請求詢問資源是否更新。
- 對于代碼文件來說，通常使用 Cache-Control: max-age=31536000 并配合策略緩存使用，然后對文件進行指紋處理，一旦文件名變動就會立刻下載新的文件。
3. 使用 HTTP / 2.0
優(yōu)點：引入了多路復(fù)用，能夠讓多個請求使用同一個 TCP 鏈接，極大的加快了網(wǎng)頁的加載速度。并且還支持 Header 壓縮，進一步的減少了請求的數(shù)據(jù)大小。
3. 預(yù)加載
<link rel="preload" />
4. 預(yù)渲染
<link rel="prerender" />
5. 優(yōu)化渲染
- 懶執(zhí)行
- 懶加載
原理：只加載自定義區(qū)域（通常是可視區(qū)域，但也可以是即將進入可視區(qū)域）內(nèi)需要加載的東西。對于圖片來說，先設(shè)置圖片標(biāo)簽的 src 屬性為一張占位圖，將真實的圖片資源放入一個自定義屬性中，當(dāng)進入自定義區(qū)域時，就將自定義屬性替換為 src 屬性，這樣圖片就會去下載資源，實現(xiàn)了圖片懶加載。
// 圖片的預(yù)加載
var images = new Array();
function preloader() {
if(document.images){
for (i = 0; i < document.images.length; i++) {
images[i] = new Image();
images[i].src = document.images[i].src
}
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(preloader);
6. 使用 Webpack 優(yōu)化項目
- 對于 Webpack4，打包項目使用 production 模式，這樣會自動開啟代碼壓縮
- 使用 ES6 模塊來開啟 tree shaking，這個技術(shù)可以移除沒有使用的代碼
- 優(yōu)化圖片，對于小圖可以使用 base64 的方式寫入文件中
- 按照路由拆分代碼，實現(xiàn)按需加載
- 給打包出來的文件名添加哈希，實現(xiàn)瀏覽器緩存文件
安全
1. XSS 跨網(wǎng)站指令碼(Cross-site scripting)
攻擊：通過修改 HTML 節(jié)點或者執(zhí)行 JS 代碼來攻擊網(wǎng)站
防御：1. 轉(zhuǎn)義輸入輸出的內(nèi)容，對于引號，尖括號，斜杠進行轉(zhuǎn)義；富文本通過白名單過濾
**2. CSP(內(nèi)容安全策略) : **用于檢測并削弱某些特定類型的攻擊，包括跨站腳本 (XSS) 和數(shù)據(jù)注入攻擊等，通過HTTP Header 中的 Content-Security-Policy 來開啟 CSP，
2. CSRF 跨站請求偽造(Cross-site request forgery) : 挾制用戶在當(dāng)前已登錄的 Web 應(yīng)用程序上執(zhí)行非本意的操作的攻擊方法(利用用戶的登錄態(tài)發(fā)起惡意請求)
攻擊：假設(shè)網(wǎng)站中有一個通過 Get 請求提交用戶評論的接口，那么攻擊者就可以在釣魚網(wǎng)站中加入一個圖片，圖片的地址就是評論接口;如果接口是 Post 提交的，就相對麻煩點，需要用表單來提交接口
防御:
- Get 請求不對數(shù)據(jù)進行修改
- 不讓第三方網(wǎng)站訪問到用戶 Cookie (設(shè)置SameSite)
- 阻止第三方網(wǎng)站請求接口 (驗證 Referer)
- 請求時附帶驗證信息，比如驗證碼或者 token (每次發(fā)起請求時將 Token 攜帶上，服務(wù)器驗證 Token 是否有效)
3. 密碼安全
防御: 對密碼加鹽，然后進行幾次不同加密算法的加密。
// 加鹽也就是給原密碼添加字符串，增加原密碼長度 sha256(sha1(md5(salt + password + salt)))
