【Html】解析 <script> 載入機制與 defer、async 屬性
本篇重點
- 資源連線與載入的時間線
- 縮短首次繪製時間（First Paint）的方法
rel="preconnect"、rel="preload"、fetchpriority的用意與差異- 有/無用這些屬性時，載入時間的差異
fetchpriority與preload的差異crossorigin屬性的用途與使用時機onload="this.rel='stylesheet'"的動態載入樣式
【Html】解析 preconnect、preload、Fetch Priority API
本篇重點
- 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()取值
本篇重點
- PHP 的
usort()陣列自定義排序 - JavaScript 的
.sort()陣列自定義排序 - 自定義排序比較函數的規則
- PHP
usort()和 JavaScript.sort()的反向排序 - 陣列自定義排序應用範例
