瀏覽器工作原理
理解瀏覽器工作原理，包括瀏覽器的構成和渲染引擎的工作方式等。
這裏簡單提取了筆記，方便複習的時候快速過一遍。
https://blog.csdn.net/qq_18738333/article/details/87382924
JavaScript
入門
隨便選個傻瓜教程過一遍
進階
學一些可以裝逼的名詞
js版本
兼容瀏覽器和移動端設備（如iOS9.x不支持ES6）需要知道的，以及var和let等等這些面試會問到的基礎問題
類型工具
compile to js語言
主要爲了解決js的類型檢查等問題，爲了更好地支持複雜應用的開發。
TypeScript作爲JavaScript的超集，能很好兼容工程中原本的js代碼，layabox遊戲引擎用TS開發的體驗比用JS好很多。
未來是flutter的！！
Dark有空還是要看一看的。
Dart programming language | Dart
HTML
幾乎不用學
CSS
相對單位em和rem，看下《CSS in Depth》第二章《Working with relative units》的系列譯文。
別說你懂CSS相對單位
Flex 佈局教程：語法篇
Flex 佈局，可以簡便、完整、響應式地實現各種頁面佈局。Flex 佈局將成爲未來佈局的首選方案。
前端佈局基礎概述
- 前端佈局方案主要有三種：
- 傳統佈局方案（藉助浮動、定位等手段）
- flex佈局方案
- grid佈局方案
- IE盒模型和W3C盒模型的區別：
IE盒模型寬高計算的是border-box，W3C盒模型計算的是content-box。
盒模型選擇：默認(W3C)優於配置，如果非要用IE盒模型，注意引用的外部組件是否發生錯誤。
在封裝組件時，記得強聲明box-sizing，哪怕你使用默認的content-box。
- 元素的分類及其佈局特性
block-level（塊級）元素、inline-level（行內級）元素和inline-block-level（行內塊級）元素。
塊級元素：display屬性取block、table、flex、grid和list-item等值的獨佔一行顯示的元素。
行內級元素：display屬性取inline值的可在同一行內排列顯示的元素。
行內塊級元素：display屬性取inline-block、inline-table、inline-flex和inline-grid等值的兼具塊級元素和行內級元素佈局特性的元素。（特性爲行內級元素+可以設置任何尺寸屬性（但width默認爲0））
- 格式化上下文
格式化上下文，它指的是具有某種CSS格式化規則（佈局規則）的上下文環境，在這個上下文環境內的所有子元素，都將根據其特定的CSS格式化規則來進行排列。
常見的格式化上下文有BFC（CSS2.1 規範）、IFC（CSS2.1 規範）、 FFC（CSS3規範新增）和GFC（CSS3規範新增）。
BFC, 全稱是block formatting context，它是一個獨立封閉的渲染區域，在這個區域內的所有元素，從區域的頂部起，一個接一個地根據自身的佈局特性進行排列：在這個區域內的塊級元素 ，按從上到下的順序顯示，相鄰的塊級元素可以使用margin隔離，但在垂直方向上相鄰的塊級元素會發生margin合併；在這個區域內的inline-level或inline-level-block元素，則按從左到右的順序顯示。
觸發條件：
只要元素滿足下面任一條件即可觸發 BFC 特性：
- body 根元素
- 浮動元素：float 除 none 以外的值
- 絕對定位元素：position (absolute、fixed)
- display 爲 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
IFC, 全稱是inline formatting context，其內部的元素，在水平方向上，一個接一個地顯示；在垂直方向上，每個元素可以設置不同的對齊方式；IFC內部的元素，被一行行的矩形框所包含，這些虛擬的矩形框，我們稱爲行框（line box）。
FFC（flex formatting context）和GFC（grid formatting context），分別是flex佈局和grid佈局的內容。
- 包含塊
我們在設置元素尺寸屬性（width、height、padding、margin和border）的百分比值或偏移屬性（top、right、bottom和left）的值時，通常會有一個“相對參考系”，這個就是包含塊。
- static和relative定位元素的包含塊，爲其塊級祖先元素（通常是塊級父元素）的content box；
- absolute定位元素的包含塊，爲最近的非靜態定位祖先元素的padding box，查無非靜態定位祖先元素，那麼它的包含塊是ICB（即根元素的包含塊，也稱爲初始包含塊）；
- fix定位元素的包含塊，爲當前viewport（視窗）；
詳細細節看文章，很詳細。
HTTP
HTTP cookies
HTTP Cookie（也叫Web Cookie或瀏覽器Cookie）是服務器發送到用戶瀏覽器並保存在本地的一小塊數據，它會在瀏覽器下次向同一服務器再發起請求時被攜帶併發送到服務器上。
理解OAuth 2.0
OAuth是一個關於授權（authorization）的開放網絡標準，在全世界得到廣泛應用，目前的版本是2.0版。
HTTP 緩存
每個瀏覽器都自帶了 HTTP 緩存實現功能。 您只需要確保每個服務器響應都提供正確的 HTTP 標頭指令，以指示瀏覽器何時可以緩存響應以及可以緩存多久。
前端模塊化
前端模塊化詳解(完整版)
瞭解各種模塊化規範
個人認爲沒有歷史包袱的話，用webpack實現模塊化是最好的選擇。
vue.js
完美的編程體驗，如果準備開始一個新的前端項目，這是最好的選擇。期待vue.js 3.0。
Vue.js 技術揭祕
高質量的源碼解讀，帶教學視頻。
前端監控
上報性能數據和錯誤信息等，用於快速發現和定位問題。
各種平臺很多，接入也都比較簡單。
工具
神器，功能多到學不完。