原创 前端黑魔法 —— 隱藏網絡請求的調用棧

前言 瀏覽器網絡控制檯會記錄每個請求的調用棧(Initiator/啓動器),可協助調試者定位到發起請求的代碼位置。 爲了不讓破解者輕易分析程序,能否隱藏請求的調用棧? 事件回調 事實上,使用之前 《如何讓 JS 代碼不可斷點》 文中的方案

原创 前端黑魔法 —— 如何讓自己的函數變成原生函數

前言 熟悉 JS 的都知道,原生函數轉成字符串,顯示的是 native code: alert + '' // "function alert() { [native code] }" 如果用自己的函數對其重寫,顯示的則是自己的代碼

原创 HTTP 網關 GZIP 頁面零開銷注入 JS

前言 HTTP 代理給頁面注入 JS 是很常見的需求。由於上游服務器返回的頁面可能是壓縮狀態的,因此需解壓才能注入,同時爲了節省流量,返回下游時還得再壓縮。爲了注入一小段代碼,卻將整個頁面的流量解壓再壓縮,白白浪費大量性能。 是否有高效的解

原创 瀏覽器窗口尺寸相關的 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