【Develop】解析 CSR / SSR / SSG / ISR 網頁渲染架構
本篇重點
- 了解客戶端渲染 (CSR)、伺服器端渲染 (SSR)、靜態網站生成 (SSG) 以及增量靜態再生(ISR) 的工作流程與渲染機制
- 了解 ISR 的生成範圍、再生成觸發條件
- 網頁渲染趨勢朝向混合渲染 (Hybrid Rendering) 發展
- 渲染架構決策樹
【Html】解析 preconnect、preload、Fetch Priority API
本篇重點
- 資源連線與載入的時間線
- 縮短首次繪製時間（First Paint）的方法
rel="preconnect"、rel="preload"、fetchpriority的用意與差異- 有/無用這些屬性時，載入時間的差異
fetchpriority與preload的差異crossorigin屬性的用途與使用時機onload="this.rel='stylesheet'"的動態載入樣式
本篇重點
- JavaScript 中「字串」與「數字」如何進行比較？
- 字串之間的大小比較是依 Unicode 編碼，不是數值
- 字串與數字混合使用進行比較
- 避免型別產生的錯誤，提供處理方式
- 字串與數字在加減乘除的差異
本篇重點
- 常見的添加元素方法
- 添加到指定元素內部：
.append()、.prepend()、.appendTo()、.prependTo() - 添加到指定元素外部：
.after()、.before() - 介紹各方法的使用效果及適用情境
【PHP、JavaScript】三種實用的符號運算子 ?:、??、??=
本篇重點
- 介紹
?:、??、??=的使用方式 - JavaScript 沒有
?:符號相鄰的簡化用法，但可以使用||來達到類似效果 - PHP 和 JavaScript 判斷假值標準不完全相同
- 了解符號運算子的可使用版本
【HTML】解決 Lazy loading 導致滾動定位不準的問題
本篇重點
- 解決 Lazy loading 導致
.scrollIntoView()滾動定位不準的問題 - 檢查目標元素是否進入視窗的方式
.getBoundingClientRect()、window.innerHeight、.clientHeight的應用
本篇重點
- 屬性必須以
data-為前綴 - 建議使用 kebab-case 命名
data-*的常見應用時機- JavaScript 使用
dataset.取值 - jQuery 使用
.data()或是.attr()取值 - jQuery 的
.data()和.attr()不可混用
