收錄在此的一定都是我看過的，并且認為還不錯的。贈人玫瑰而已。

2022-03
再更此文，學無止境

TS相關(guān)

• 不一樣的 TypeScript 入門手冊

JS基礎(chǔ)

• 冴羽大大的博客 - JavaScript深入系列、JavaScript專題系列、ES6系列
  屬于比較成系統(tǒng)的js進階博客，建議細讀。
  
  原型和原型鏈圖片記錄

• 面試官：說說執(zhí)行上下文吧
  這個系列算是對冴羽大大文章的一次重構(gòu)，更偏面試向，可以看看。
• 這一次，徹底弄懂 JavaScript 執(zhí)行機制
  有很多Event Loop相關(guān)文章，但是這篇是相關(guān)譯文之中比較優(yōu)秀的。
• 做完這48道題徹底弄懂JS繼承(1.7w字含辛整理-返璞歸真)
• js 深淺拷貝
• 函數(shù)柯里化
• 迭代器和生成器

# js基礎(chǔ)題

• 函數(shù)聲明和函數(shù)表達式有什么區(qū)別與聯(lián)系，應(yīng)該怎樣選擇和使用？

# 變量提升、閉包等題

• let深入理解---let存在變量提升嗎？

ES6相關(guān)

• 關(guān)于 ES6 中 Promise 的面試題
  文章題型比較全，但是有一些題目的答案不一定準確。

• BAT前端經(jīng)典面試問題：史上最最最詳細的手寫Promise教程
  手寫promise的常規(guī)教程，值得多讀幾遍。

• Promise 必知必會（十道題）
  一些promise 的細節(jié)把握，建議配合event loop的微任務(wù)和宏任務(wù)一起食用。

• 因為 Promise.prototype.then和Promise.prototype.catch 方法返回promise 對象， 所以它們可以被鏈式調(diào)用。

• 箭頭函數(shù)和普通函數(shù)的區(qū)別

• ESM CommonJs

# Symbol 及其 Polyfill

• ES6 Symbol之淺入解讀
• Symbol Polyfill 填坑之旅
  指的一說的是 babel默認不自帶symbol的polyfill，需要引入例如core.js之類的第三方庫;

Vue

# 響應(yīng)式、雙向綁定

• 50行代碼的MVVM，感受閉包的藝術(shù)
  簡單的demo之中感受Object.defineProperty劫持get/set的過程，以及為變量注冊觀察者來實現(xiàn)響應(yīng)式的過程；可以使用Proxy來替換Object.defineProperty 來做延伸學習。
• 不好意思！耽誤你的十分鐘，讓MVVM原理還給你
  原理解釋上更接近vue源碼，啟發(fā)computed和mounted如何實現(xiàn)。
• 面試官: 實現(xiàn)雙向綁定Proxy比defineproperty優(yōu)劣如何?
• 為什么Vue3.0不再使用defineProperty實現(xiàn)數(shù)據(jù)監(jiān)聽？
  1. Object.defineProperty 并非不能監(jiān)控數(shù)組下標的變化，Vue2.x 中無法通過數(shù)組索引來實現(xiàn)響應(yīng)式數(shù)據(jù)的自動更新是 Vue 本身的設(shè)計導(dǎo)致的，不是 defineProperty 的鍋。
  2. Object.defineProperty 和 Proxy 本質(zhì)差別是，defineProperty 只能對屬性進行劫持，所以出現(xiàn)了需要遞歸遍歷，新增屬性需要手動 Observe 的問題。
  3. Proxy 作為新標準，瀏覽器廠商勢必會對其進行持續(xù)優(yōu)化，但它的兼容性也是塊硬傷，并且目前還沒有完整的 polyfill 方案。
• 深入剖析Vue源碼 - 揭秘Vue的事件機制

# 生命周期

• Vue 生命周期源碼剖析
• 你真的理解$nextTick么

# 數(shù)據(jù)狀態(tài) - 這一部分每臺看懂，需要找時間看明白

• Vuex、Flux、Redux、Redux-saga、Dva、MobX
  文章整體寫的很好，從多個角度對比里現(xiàn)在流行的數(shù)據(jù)管理機制，但是對只比較熟悉vue的朋友不太友好，做了解項。著重看實現(xiàn)原理與比較。
• [譯] 使用原生 JavaScript 構(gòu)建狀態(tài)管理系統(tǒng)
• Vuex 源碼解析
  被問到了一個vuex源碼如何注入的問題，有點束手無策；

# 組件通信

• vue中8種組件通信方式, 值得收藏!

# 虛擬dom和diff算法

• 面試官: 你對虛擬DOM原理的理解?
• 讓虛擬DOM和DOM-diff不再成為你的絆腳石
• 虛擬 DOM 到底是什么？(長文建議收藏)
  前兩篇主要側(cè)重于對某個diff算法的理解； 相比來說第三篇更加學院派也更加全面。每次看diff算法都看不太明白，TODO。一般diff算法會單獨拿出來說，比較react 和 vue 的演進過程，相比來說virutal-dom更容易懂一些。

# computed 和 watch

• Vue.js的computed和watch是如何工作的？
  借鑒：計算屬性本質(zhì)上是一個computed watch，偵聽屬性本質(zhì)上是一個user watch。且它們其實都是vue對監(jiān)聽器的實現(xiàn)，只不過computed主要用于對同步數(shù)據(jù)的處理，watch則主要用于觀測某個值的變化去完成一段開銷較大的復(fù)雜業(yè)務(wù)邏輯。。能用computed的時候優(yōu)先用computed，避免了多個數(shù)據(jù)影響其中某個數(shù)據(jù)時多次調(diào)用watch的尷尬情況。

css基礎(chǔ)

本著css是硬橋硬馬的功夫，還是多實踐方能大成。

• position-sticky 奇淫巧技，目前這種的話還是考慮如何實現(xiàn)一個sticky-footer吧。
• Retina屏的移動設(shè)備如何實現(xiàn)真正1px的線？
  文章有點古老，又看了下m.taobao已經(jīng)不是用修改viewport來實現(xiàn)的了。算是一個小tips
• 回流與重繪：CSS性能讓JavaScript變慢？

前端工程化

# Webpack

• Webpack源碼解讀：理清編譯主流程
  簡單總結(jié)一下 webpack 編譯模塊的基本流程：

  1. 調(diào)用webpack函數(shù)接收config配置信息，并初始化compiler，在此期間會apply所有 webpack 內(nèi)置的插件;
  2. 調(diào)用compiler.run進入模塊編譯階段；
  3. 每一次新的編譯都會實例化一個compilation對象，記錄本次編譯的基本信息；
  4. 進入make階段，即觸發(fā)compilation.hooks.make鉤子，從entry為入口： a. 調(diào)用合適的loader對模塊源碼預(yù)處理，轉(zhuǎn)換為標準的JS模塊； b. 調(diào)用第三方插件acorn對標準JS模塊進行分析，收集模塊依賴項。同時也會繼續(xù)遞歸每個依賴項，收集依賴項的依賴項信息，不斷遞歸下去；最終會得到一顆依賴樹；
  5. 最后調(diào)用compilation.seal render 模塊，整合各個依賴項，最后輸出一個或多個chunk；
  以上為簡單的時序圖

  該作者的編譯主流程以及后續(xù)文章讀完讓我對webpack有了新的認識，并且去學習了webpack源碼，受益匪淺。

# HMR

• 輕松理解webpack熱更新原理
• Webpack HMR 原理解析
• 第 70 題： 介紹下 webpack 熱更新原理，是如何做到在不刷新瀏覽器的前提下更新頁面

# babel

• babel 怎么把字符串解析成 AST，是怎么進行詞法/語法分析的
• babel 7 簡單升級指南
  了解babel7相比babel6都有哪些提升；

Node

• Nodejs 進階：解答 Cluster 模塊的幾個疑問
  node中Cluster是如何開啟多進程的？一個端口是否可以被多個進程監(jiān)聽? 可以

操作系統(tǒng)及網(wǎng)絡(luò)

• 前端入門操作系統(tǒng)知識，這一篇就夠啦！
  這一篇我是沒看完的，找時間回來補，希望不會打臉；
• 什么是進程？什么是線程？兩者的關(guān)系？
  簡單好記的理解
• JavaScript 單線程機制面試題
• 通殺 Event Loop 面試題
• 從 8 道面試題看瀏覽器渲染過程與性能優(yōu)化
  進程、線程 => 到瀏覽器的多進程，多線程 => 再到j(luò)s執(zhí)行的單線程，其中涉及到event loop，render tree， 渲染的過程中會涉及到的重繪與回流。能聊明白就算是ok；
• Cookie 相關(guān)問題
  發(fā)生跨域xhr請求時，即使請求URL的域名和路徑都滿足 cookie 的 Domain和Path，默認情況下cookie也不會自動被添加到請求頭部中。
• 把圖片變?yōu)閎ase64的利與弊
• Service Worker相關(guān)
• 瀏覽器緩存
• 瀏覽器緩存 - 2 了解下 Memory cache 和 Disk Cache 的區(qū)別
• 四種緩存機制 - Service Worker / Memory Cache / Disk Cache / Push Cache
• 一個 TCP 連接上面能發(fā)多少個 HTTP 請求

復(fù)習導(dǎo)圖

• 2020年前端面試復(fù)習必讀文章【超百篇文章/贈復(fù)習導(dǎo)圖】
  這篇文章很細致的歸納了前端復(fù)習思路，以導(dǎo)圖的形式展現(xiàn)出來。
• 寫給初中級前端的高級進階指南
• 2萬字 | 前端基礎(chǔ)拾遺90問

面經(jīng)

• 字節(jié)跳動面試官：請你實現(xiàn)一個大文件上傳和斷點續(xù)傳
  這道題對于沒有了解過視頻上傳原理的同學還是比較有難度的，是其中可以演化為一下幾種問法：

  • 實現(xiàn)一個大文件的上傳切片；
  • 手寫一個基于XMLHttpRequest的request請求；
  • promise.all并發(fā)限制；
    23行代碼實現(xiàn)一個帶并發(fā)數(shù)限制的fetch請求函數(shù)；
    有一說一，第二個鏈接評論中的方式更為簡單；
  • 用node接收多個文件進行拼接；
  • 如何實現(xiàn)斷點續(xù)傳、暫停、進度條、秒傳等等，是一個很綜合的面試題；

• 實現(xiàn)cacheRequest()，相同資源ajax只發(fā)一次請求
  考慮pending過程中如何處理cache的過程值得學習；

• JSBridge的原理