這本書全名其實叫做 前端三十 從HTML到瀏覽器渲染的前端開發者必備心法，原書內容是出自作者鐵人賽的文章。

作者對於前端底層的解說很用心，但就如同作者鐵人賽文章標題「成為更好的前端工程師」，這本書內容相當深入，而且可能為簡化篇幅，常用專有名詞在解釋專有名詞，以我的程度大部分其實很難迅速理解作者所要談的內容，感覺這本書比較適合對前端有一定了解的開發者。

所以這篇筆記主要是摘要裡面談到不熟的概念，統整目前至少要知道的一些知識，之後再搭配其他文章去理解，也方便以後回頭查看忘記哪些概念。

HTML

瀏覽器渲染

• Reflow
• Repaint

控制JS載入順序

• DOMContentLoaded 事件
  \<script>
• defer, async 屬性
• type="module"
  \<link>
• preload
• prefetch
• preconnct
  * Webpack: script-ext-html-webpack-plugin

CSS

Stacking context

Graphics Layer Tree

CSSOM Tree

• CSS樣式選取器解析順系是從右到左: p > h4 > .class > #id

  #id .class h4 + p {...}
  

CSS 優先級問題

• !important > inline > #id > .class, attribute, pseudo > tag > *

CSS 套用規則

1. 瀏覽器的預設值
2. 瀏覽器的使用者偏好設定
3. 開發者定義的CSS
4. inline style
5. !important

JavaScript

type
JS 基本型別: number, string, boolean, null, undefined, object, symbal(ES6)

string

• Template Literals ...

symbal(ES6)

• React 生成key

    let gen = (function* idMaker(){
        let i = 0;
        while(i++ < 0){
             yield Symbal(i)
        }
    })()
  
    let key1 = gen.next().value;  // Symbal(1)
  

  object

• array.length = 0 (清空陣列)
• RegExp
• Date
• Math

物件轉型成基本型別(ToPrimitive)

• valueOf
• toString
• PreferredType
• 自訂轉型：Symbal.toPrimitive

let obj = {
    name: 'string',
    number: 100,
    [Symbal.toPrimitive]: function(hint){
        return hint === 'string' ? this.name : this.number;
    }
}
console.log(+obj);   // 100
console.log(`${obj}`);   // string

型別判斷

• == (自動轉型再判斷)
• ===
• 兩物件屬性是否相等要自行寫判斷程式
• NaN == NaN, NaN === NaN 都是 false
• null == undefined (true)

Copy

• Call by value
• 物件拷貝
  • Shallow Copy
    • Object.assign({}, obj)
    • {...obj} (ES9)
  • Deep Copy
    • JSON.parse(JSON.stringify(obj))
    • 要小心有的JSON.stringify為瀏覽器自定義，可能會忽略key為Symbol的值、跳過undefined或是無限循環參考等
    • 較好的深拷貝要由開發者自己撰寫

Prototype 原型

• Prototype Chain 原型鍊
• 物件方法指定給原型，讓使用constructor產生的物件可共用方法
• Object.getPrototypeOf(obj) 取得物件原型 (不建議用proto)
• 原型繼承
  1. subObj.prototype = Object.create(parent.prototype)
  2. subObj.prototype.constructor = subObj //指回自己
  3. 要指回自己是因為Object.create會複製所有父物件原型的屬性、蓋掉子物件的
• 原型修改
  • 例如 Object.defineProperty
  • 應該是要避免對原型所設定的方法作修改，以免共用這個方法的物件都會受到修改的波及，而造成互有衝突。

class syntax (ES6)

DOM Event
註冊事件監聽器(Event Listener)

事件傳遞機制

1. Capture Phase
2. Target Phase
3. Bubbling Phase

事件代理

• 意即 子元素的事件註冊在父元素
• 例如li事件註冊在ul上，避免新增太多li，每個li都要註冊一個事件監聽器，耗用大量記憶體。
• 注意：React DOM Event 會把事件代理到根元素

Event loop & 執行順序

- Stack、Queue、Heap
- [JavaScript runtime 模擬器](http://latentflip.com/loupe/)

• setTimeout()

Function
Execution Context 執行環境

• Variable object
• Scope chain: outer environment
• this value

argument 物件

AJAX
HTML5 Web API 標準: micro task queue

小結一下目前比較需要加強的概念：

1. 瀏覽器渲染機制(reflow, repaint)
2. CSS選擇器套用優先順序、解析順序
3. JavaScript單執行緒特性、事件迴圈機制
4. JavaScript function: Execution context
5. JavaScript event: 傳遞機制、執行順序