原创 瀏覽器窗口尺寸相關的 API 整理圖

整理瀏覽器中和屏幕尺寸相關的 API: 其中和文檔相關的屬性,例如 innerWidth、innerHeight、event.x、event.y 的單位爲 CSS 像素,如果頁面存在縮放,則需乘上縮放比。 假如當前頁面縮放比爲 125%

原创 如何讓 JS 代碼不可斷點

繞過斷點 調試 JS 代碼時,單步執行(F11)可跟蹤所有操作。例如這段代碼,每次調用 alert 時都會被斷住: debugger alert(11) alert(22) alert(33) alert(44) 有沒有什麼辦法能讓單步執

原创 JS 字符串轉 GBK 編碼超精簡實現

前言 JS 中 GBK 編碼轉字符串是非常簡單的,直接調用 TextDecoder 即可: const gbkBuf = new Uint8Array([196, 227, 186, 195, 49, 50, 51]) new Te

原创 前端性能優化 —— 使用 BMP 圖片代替 canvas.toDataURL

前端開發中有時需要將 canvas 的內容導出成圖片文件,例如供 CSS 使用,通常會使用 canvas.toDataURL,兼容性好並且簡單。 不過 canvas.toDataURL 顯然是非常低效的:首先要將圖像編碼成 PNG 格式,然

原创 免費 CDN 玩法 —— 文件一鍵上傳到 NPM

前言 unpkg、jsdelivr 等站點可加速 NPM 包文件,適合作爲個人網站或演示案例的免費 CDN。 雖然上傳文件到 NPM 很簡單,創建 package.json 然後 npm publish 即可,但之後更新卻很麻煩 —— 即使

原创 函數式編程 —— 將 JS 方法函數化

前言 JS 調用方法的風格爲 obj.method(...),例如 str.indexOf(...),arr.slice(...)。但有時出於某些目的,我們不希望這種風格。例如 Node.js 的源碼中有很多 類似這樣的代碼: const

原创 免費 CDN 玩法 —— 將整個網站打包成一個圖片文件

資源合併 前端開發者都知道,過多的請求對性能影響很大。而且有些 CDN 不僅按流量收費,請求數也收費,如果網頁裏有大量小文件,顯然不划算。 爲此不少開發者將零碎的小文件進行合併優化,例如 JS/CSS 合併在一起,圖片合併成精靈圖等。 不過

原创 代碼縮進爆炸攻擊

前言 曾經有次被 💩 一樣的代碼 🤮 到了 —— 幾百行代碼寫在一個函數裏,邏輯混亂不堪,更要命的是,代碼里居然沒有 continue 之類的語句,所有判斷都新增一層縮進,以至於這坨代碼看上去是這樣的: for (...) { if

原创 使用 Service Worker 緩解網站 DDOS 攻擊

前言 傳統的 DDOS 防禦開銷很大,而且有時效果並不好。 例如使用 DNS 切換故障 IP 的方案,由於域名會受到緩存等因素的影響通常有分鐘級延時,前端難以快速生效。例如使用 CDN 服務,雖可抵擋大多網絡層攻擊,但對應用層攻擊卻常有疏漏

原创 如何熱更新長緩存的 HTTP 資源

前言 HTTP 緩存時間一直讓開發者頭疼。時間太短,性能不夠好;時間太長,更新不及時。當遇到嚴重問題需緊急修復時,儘管後端文件可快速替換,但前端文件仍從本地緩存加載,導致更新長時間無法生效。 對於這個問題,很多網站都有相應的解決方案。 傳統

原创 低成本防禦網站 DDOS 攻擊

前言 傳統的 DDOS 防禦通常使用“硬抗”的方式,導致開銷很大,而且有時效果並不好。例如使用 DNS 切換故障 IP 的方案,由於域名會受到緩存等因素的影響通常有分鐘級延時,前端難以快速生效。例如使用 CDN 服務,雖可抵擋大多網絡層攻擊

原创 低成本打造一個帶寬無限的網站 —— No.3 前端反向代理

前端代理 HTML5 時代的黑科技層出不窮,但最具創新的也許要數 Service Worker,它甚至可以顛覆傳統的 B/S 網絡架構。 顧名思義,Service 是服務程序,而 Worker 常用於多線程。因此 Service Worke

原创 低成本打造一個帶寬無限的網站 —— No.1 免費空間的遐想

免費空間 自從學習網頁製作那天起,就開始期待有朝一日能有個自己的網站。 儘管當時有不少免費空間,對於簡單的個人網站也夠用了,然而像我這樣挑剔的,試用後幾乎都不怎麼滿意 —— 要麼會偷偷插些廣告,這對於有潔癖的我是無法容忍的;要麼奇慢無比,而

原创 JS 端口敲門探索

傳統的端口敲門 端口敲門是一種特殊的安全認證方案。它沒有固定的標準,每個人的實現各不相同。當然,即使沒聽說過這個名詞,不少人也有類似的想法和實現。 例如我曾經使用 Windows 服務器時,一直對遠程桌面頗爲不滿。不是因爲這個服務做得不好,

原创 網站圖片無縫兼容 WebP/AVIF

前言 WebP 格式發佈已有十餘年,但不少站點至今仍未使用,只爲兼顧極少數低版本瀏覽器。至於去年發佈的 AVIF 格式,使用的站點就更少了。 然而圖片往往是流量大戶,與其費盡心機優化腳本體積,可能還不如轉換一張大圖帶來的收益更多。據 can