【Html】解析 <script> 載入機制與 defer、async 屬性
本篇重點
- 資源連線與載入的時間線
- 縮短首次繪製時間（First Paint）的方法
rel="preconnect"、rel="preload"、fetchpriority的用意與差異- 有/無用這些屬性時，載入時間的差異
fetchpriority與preload的差異crossorigin屬性的用途與使用時機onload="this.rel='stylesheet'"的動態載入樣式
【Html】解析 preconnect、preload、Fetch Priority API
【HTML】解決 Lazy loading 導致滾動定位不準的問題
本篇重點
- 解決 Lazy loading 導致
.scrollIntoView()滾動定位不準的問題 - 檢查目標元素是否進入視窗的方式
.getBoundingClientRect()、window.innerHeight、.clientHeight的應用
本篇重點
- 屬性必須以
data-為前綴 - 建議使用 kebab-case 命名
data-*的常見應用時機- JavaScript 使用
dataset.取值 - jQuery 使用
.data()或是.attr()取值
本篇重點
- 了解
<a>的rel屬性 <a>常見的rel屬性值和用途- 不同情境下
<a>rel屬性的使用方式 - 現代瀏覽器在大部分情況下已經自動為帶有
target="_blank"的連結加上rel="noopener" - 調用
window.opener的方法
