原文地址

在 《前端資源加載失敗優化》文章中，我們聊到了前端資源加載失敗的監控方式，以及資源加載失敗時的優化方案。通過對加載失敗的資源更換域名動態重新加載、同時確保最終代碼正常的執行順序，從而有效地減少了因為資源加載失敗導致的網頁異常。到此，資源文件成功加載了！但加載到的是否就是正確的資源呢？是否會在加載過程中被半路劫持？此時又該如何監控？是否還能做更多的防護措施呢？本文將逐步進行分析。

原文地址

Web 項目上線后，開始開門迎客，等待著來自大江南北、有著各式各樣網絡狀態的用戶蒞臨。在千差萬別的網絡狀態中，訪問頁面難免會遇到前端資源加載失敗的情況，占比或許不高，但一遇到，輕則頁面樣式錯亂，重則白屏打不開，影響用戶體驗感受，緊急情況下甚至影響了用戶的工作，屬于非常嚴重的問題。本文將從如何監控加載失敗、加載失敗如何優化、始終加載失敗又該如何處理等問題逐一分析。

在 《XSS 終結者-CSP 理論與實踐》 中，講述了 CSP 基礎語法組成與使用方式。通過一步步的方案制定，最終我們利用 CSP 提供的域名白名單機制，有效地將異常的外聯腳本攔在門外。然而在線上環境千千萬萬，雖然我們限制了外聯腳本，但卻仍被內聯腳本鉆了空子。

腳本錯誤量極致優化-定位壓縮且無 SourceMap 文件的腳本錯誤

”JS 代碼壓縮后，定位具體出錯代碼困難！“ 的問題，我們可以通過 SourceMap 快速定位，處理得到源文件的具體錯誤信息。具體方式可以查看 《腳本錯誤量極致優化-讓腳本錯誤一目了然》

然而當項目外鏈第三方資源或公共庫時，這種壓縮且無提供 SourceMap 的文件出現異常，又該如何更好的定位錯誤位置呢？

代碼執行時機將決定著是否能夠正常執行，當依賴文件沒加載完成就開始執行、使用對應模塊，那么將會導致執行異常。這在 “存在資源加載失敗時，加載重試影響原來文件的執行順序” 的場景下尤為常見。

webpack 構建除了進行模塊依賴管理，實際上，也天然地管理了 entry 與 chunk 多文件的執行時機，但缺少了對 external 文件管理，當 external 文件加載失敗或未完成時，執行、使用對應模塊同樣將導致異常。為此，wait-external-webpack-plugin 應運而生，以 webpack 插件的形式，補充 external 的執行管理。本文將進行簡要說明。

原文地址

“抓娃娃” 并不陌生，存在兩種結果: 抓到與抓不到。在 Web 動畫中，如上圖，“抓到” 與 “抓不到” 對應著兩個動畫，可以使用不同的動畫圖片資源來實現，似乎毫無異義。

細做觀察，不難發現：兩個動畫中 “動畫初始到抓取” 及 “抓取結束到動畫結束” 的區間中存在相同動畫 (滑動和晃動抓桿)。既然動畫相同，那么可以通過引用同一份動畫圖片資源，不做相同圖片的重復加載，從而減少總資源大小。

“兩個動畫間存在部分相同的動畫，相同部分可以引用同一份動畫圖片資源，來減少圖片的總大小?！?

肉眼進行辨別哪些動畫是一樣的？那是不可能的。gka 提供一鍵式制作多個動畫的方式，支持多種圖片優化方案 (含圖片去重)。

gka 是一款簡單的、高效的幀動畫生成工具，圖片處理工具。

官方文檔：https://gka.js.org

Github：https://github.com/gkajs/gka

原文地址

多倍圖的適配在前端開發還是比較常見的，像在 Retina 屏幕，一般會使用二倍圖從而讓圖片保持清晰，而在開發幀動畫中使用的圖片實際上同樣需要做這樣的適配處理。gka 提供一鍵式的制作多倍圖幀動畫的方式。

gka 是一款簡單的、高效的幀動畫生成工具，圖片處理工具。

官方文檔：https://gka.js.org

Github：https://github.com/gkajs/gka

原文地址

CreateJS 是基于 HTML5 開發的一套模塊化的庫和工具，用于快捷地開發基于 HTML5 的游戲、動畫和交互應用。

gka 為 createjs 開發定制模板 gka-tpl-createjs ，僅需一行命令，優化圖片資源，生成雪碧圖及 createjs 動畫文件。關于 gka 更多了解，請點擊 https://github.com/gkajs/gka

原文地址

幀動畫中含有大量的圖片，通過圖片優化、減少圖片整體大小，將能夠節省資源，提高性能。下面將一一列舉優化方式及解決方案。

使用 gka 一鍵圖片優化并生成動畫文件

GitHub: https://github.com/gkajs/gka

原文地址

雪碧圖并不陌生，將多張圖片合在一起來減少請求數，從而提升網站的性能。在你的網站未支持 HTTP2 前，還是值得這么處理。

為了適應不同的設備分辨率，一般會做幾套不同大小的圖去適配，那如何用一套圖來自適應縮放呢？

本文對等比縮放的雪碧圖動畫的原理進行分步講解，并使用 gka 進行一鍵生成。
GitHub: https://github.com/gkajs/gka