奇舞周刊第500期：TQL，巧用 CSS 实现动态线条 Loading 动画

记得点击文章末尾的“ 阅读原文 ”查看哟~

下面先一起看下本期周刊 摘要 吧~

奇舞推荐

■ ■ ■

 TQL，巧用 CSS 实现动态线条 Loading 动画

最近，群里有个很有意思的问题，使用 CSS 如何实现如下 Loading 效果：

 leaferjs，全新的 Canvas 渲染引擎

前几天群里有人发了一个新 Canvas 渲染引擎的图片，看数据和宣传口号相当炸裂，号称只用 1.5s 可以渲染 100 万个矩形，还是个国产的。

 第3003期】擎天柱与CSS变换切换

这可能就是前端魔法有趣的地方，只要有耐心有创意可以做太酷啦的作品

技术实践

■ ■ ■

 【第 3002 期】前端加载超大图片实现秒开解决方案

本文通过图像分割切片的方式，提供了一种解决加载超大图片秒开的方案，并介绍了其他图片加载加速的方法和实际应用案例。第一想法就是很多游戏的地图，拖曳地图展示局部区域。今日前端早读课文章由 @vjmap 分享。

 给你十万条数据，给我顺滑的渲染出来！

这是一道面试题，这个问题出来的一刹那，很容易想到的就是 for 循环 100000 次吧，但是这方案着实让浏览器崩溃啊！还有什么解决方案呢？

 JavaScript 中的生成器有什么用？

今天我们要讲的是 JavaScript 中一个不太常用的 Generator 语法。我很少看到有人在实际项目开发中使用它。可能是因为它的语法比较复杂，而且是 async/awiatcan，所以人们很少使用它。然而，Generatorit 仍然是。今天我们就从基础开始练习 Generator。

拓展边界

■ ■ ■

 在高德地图中实现降雨图层

有一天老板跑过来跟我说，我们接到一个水利局的项目，需要做一些天气效果，比如说降雨、河流汛期、洪涝灾害影响啥的，你怎么看。欸，我觉得很有意思，马上开整。

 ECMAScript 最新进展汇总！

2023年7月11日 - 7月13日，第 97 次 TC39 会议在挪威举行，下面就来看看在这次会议中哪些 ECMAScript 提案取得了新进展吧！

 WebGL 大场景性能优化

WebGL(Web 图形库) 是一个 JavaScript API，可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形，而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 非常一致的 API 来做到这一点，该 API 可以在 HTML5 元素中使用。这种一致性使 API 可以利用用户设备提供的硬件图形加速。[摘自 MDN]

关于奇舞团

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。