代码执行时机将决定着是否能够正常执行,当依赖文件没加载完成就开始执行、使用对应模块,那么将会导致执行异常。这在 “存在资源加载失败时,加载重试影响原来文件的执行顺序” 的场景下尤为常见。

webpack 构建除了进行模块依赖管理,实际上,也天然地管理了 entry 与 chunk 多文件的执行时机,但缺少了对 external 文件管理,当 external 文件加载失败或未完成时,执行、使用对应模块同样将导致异常。为此,wait-external-webpack-plugin 应运而生,以 webpack 插件的形式,补充 external 的执行管理。本文将进行简要说明。

原文地址

gka-animation

“抓娃娃” 并不陌生,存在两种结果: 抓到与抓不到。在 Web 动画中,如上图,“抓到” 与 “抓不到” 对应着两个动画,可以使用不同的动画图片资源来实现,似乎毫无异义。

细做观察,不难发现:两个动画中 “动画初始到抓取” 及 “抓取结束到动画结束” 的区间中存在相同动画 (滑动和晃动抓杆)。既然动画相同,那么可以通过引用同一份动画图片资源,不做相同图片的重复加载,从而减少总资源大小。

“两个动画间存在部分相同的动画,相同部分可以引用同一份动画图片资源,来减少图片的总大小。”

肉眼进行辨别哪些动画是一样的?那是不可能的。gka 提供一键式制作多个动画的方式,支持多种图片优化方案 (含图片去重)。

gka 是一款简单的、高效的帧动画生成工具,图片处理工具。

官方文档:https://gka.js.org

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

原文地址

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

TAT.joeyguo 快速制作高性能帧动画解决方案
In Web开发 on 2017年08月08日 by view: 3,353
0

原文地址

帧动画中含有大量的图片,通过图片优化、减少图片整体大小,将能够节省资源,提高性能。下面将一一列举优化方式及解决方案。

使用 gka 一键图片优化并生成动画文件

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

原文地址

雪碧图并不陌生,将多张图片合在一起来减少请求数,从而提升网站的性能。在你的网站未支持 HTTP2 前,还是值得这么处理。

为了适应不同的设备分辨率,一般会做几套不同大小的图去适配,那如何用一套图来自适应缩放呢?

本文对等比缩放的雪碧图动画的原理进行分步讲解,并使用 gka 进行一键生成。
GitHub: https://github.com/gkajs/gka

原文地址

那一天,我收到设计姐提供的图片

big 1

ganjuebudui 1

立志成为一位优秀工程师的我,看图深思..

为了节省流量(流量就是金钱)
为了让图片更快加载(更好的体验)

TAT.joeyguo 使用 gka 一键生成帧动画
In Web开发,资源工具 on 2017年07月09日 by view: 6,710
4

gka

简单的、高效的帧动画生成工具


gka

gka 是一款简单的、高效的帧动画生成工具。

通过对图片集进行处理,一键式生成序列帧动画文件,并内置相关优化。

  • 一键式 : 图片文件批量序列化重命名,生成 css keyframes,生成帧动画预览文件
  • 性能佳 : 支持图片压缩✓,支持合图模式✓,相同帧图片复用
  • 多模板 : 内置多种文件输出模板,支持自定义模板

最新更新,请访问 github 地址 https://github.com/joeyguo/gka

< TFC2017 /> 大会官网:https://TFC.tencent.com

腾讯Web前端大会 < TFC2017 /> 将在深圳热力开启。本次大会将邀请全国各地开发者,共同探讨 Web 前端最新技术、海量用户服务优化和运营心得,以及未来行业发展风向。

本次大会将是腾讯规模最大的 Web 前端盛会。主办方腾讯, 中国顶级互联网公司之一,创造了许多亿万海量用户级的优秀 Web 应用,积累了深厚的 Web 前端开发经验 。

大会讲师将会广邀国内外的前端知名大牛,他们有著名流行框架的作者、知名前端书籍的作者、Web 工程化方面的权威等。其中还有部分讲师是从腾讯上千名前端工程师中精挑细选的优秀高级工程师,将为你带来最具实践价值、最接地气的前端开发经验分享,内容不仅涵盖 Web 新技术、Node.js、框架、工程化、 图形处理等前端前沿内容 ,还包含极致的性能优化、海量用户运营等具有腾讯前端特色的宝贵经验。

无论您是资深的前端大咖,还是初出茅庐的前端菜鸟,相信都可以通过本次大会获得非常有价值的帮助。

原文地址

在上篇 《脚本错误量极致优化-监控上报与 Script error》 中,主要提到了 js 脚本错误上报的方式,并讲解了如何使用 crossorigin 来解决 Script error 报错信息的方案,于是我们就可以查看到脚本报错信息了。而此时可能会遇到另一个问题:”JS 代码压缩后,定位具体出错代码困难!“。本篇 《脚本错误量极致优化-让脚本错误一目了然》 将结合示例,通过多种解决方案逐一分析,让脚本错误 一目了然。