原文地址

在 《前端资源加载失败优化》文章中，我们聊到了前端资源加载失败的监控方式，以及资源加载失败时的优化方案。通过对加载失败的资源更换域名动态重新加载、同时确保最终代码正常的执行顺序，从而有效地减少了因为资源加载失败导致的网页异常。到此，资源文件成功加载了！但加载到的是否就是正确的资源呢？是否会在加载过程中被半路劫持？此时又该如何监控？是否还能做更多的防护措施呢？本文将逐步进行分析。

原文地址

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