簡介 Debounce 和 Throttle 常用在 input、scroll、resize 等事件進行控制，防止事件過多觸發，減少資源消耗或是商業邏輯上的維護成本。這兩者最大的差異在於觸發的時機。 debounce(func, wait, options)：建立並回傳函數的防彈跳版本，將延遲函數的執行（真正的執行）在函數最後一次調用時刻的 wait 毫秒之後，對於必須在一些輸入（多是一些用戶操作）停止之後再執行的行為有幫助。將一個連續的調用歸類為一個，如果連續在 wait 毫秒內調用，只有最...
SSR SSG CSR ISR DPR
格式：clamp(MIN, VAL, MAX)相當於：max(MIN, min(VAL, MAX)) 這幾天在前端社群上看到有人討論字型的大小調整，看到有人介紹到這個 CSS 函數。發現真的很方便，可以提供一小部分來代替 media query 的功能呢。在 Mozilla 的介紹這邊有個 Demo 的小區塊。 例如這個範例：clamp(1.8rem, 2.5vw, 2.8rem)，當發現 2.5vw 算起來小於或大於設定值時，就會以上下限的值來使用。 只有 IE 不支援此 CSS，沒關係 IE...
https://html.spec.whatwg.org/multipage/structured-data.html#structured-cloning
CSS 中的 :has() 是一種可以透過子級元素來限定父級元素的選擇器。一般來說在選擇元素的時候，都是從最上層父級慢慢往下指定：.class1 > .class2 #id。 :has() 則是反過來 /* Matches <a> elements that contain an <img> child */ a:has(img) { … } /* Matches <a> elements that directly contain an <img> child */ a:has(> img)...
最近在 10 / 18，W3C 中的 Web Platform Incubator Community Group 發布了一項 HTML Sanitizer API 規範草案，此草案的目的是為了解決瀏覽器 XSS 攻擊的問題。不過因為才剛公佈，所以還沒有瀏覽器有支援。 如果想要體驗的話，可以調整瀏覽器的設定：Chrome ：about://flags/#enable-experimental-web-platform-featuresFirefox：about:config将dom.securi...