讀書筆記-前端三十1: HTML, CSS, JS


這本書全名其實叫做 前端三十 從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/)

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: 傳遞機制、執行順序

#frontend #book #note






你可能感興趣的文章

Day 20 & 21-Snake Game

Day 20 & 21-Snake Game

F2E合作社|modal燈箱效果|Bootstrap 5網頁框架開發入門

F2E合作社|modal燈箱效果|Bootstrap 5網頁框架開發入門

[筆記] React 隨手記 (React 應用篇.map)

[筆記] React 隨手記 (React 應用篇.map)






留言討論