青舟同学

作为前端同学，或多或少都会接到动画需求。目前动画效果越来越酷炫，动画的绘制难度也逐渐增大。在上述两篇文章中都各自讲述了 APNG、Lottie 的原理、优缺点等，今天要讲的主题是 Video 实现动画

Lottie 是一个复杂帧动画的解决方案，它提供了一套从设计师使用 AE（Adobe After Effects）到各端开发者实现动画的工具流。在设计师通过 AE 完成动画后，可以使用 AE 的扩展程序 Bodymovin 导出一份 JSON 格式的动画数据，然后开发同学可以通…

作为前端同学，或多或少都会接到动画需求。如果是有规律性的动画还是相对容易实现的，但如果是比较复杂的帧动画，我们用 CSS 实现的话，就非常容易造成如下情况，设计师是卖家秀，我们开发的是买家秀。 或许你会想到用 GIF 实现，但是 GIF 经常会有杂边，无法满足设计师对精致度的要…

缓存技术一直一来在WEB技术体系中扮演非常重要角色，是快速且有效地提升性能的手段。 如上图，在网页展示出来的过程中，各个层面都可以进行缓存。 之前在学习缓存的过程中，一直没有实践过，有些概念经常会忘记。 今天主要通过Node实践的方式学习浏览器缓存，顺便分析一下Koa处理缓存的…

一种是页面刷新，不保留页面状态，就是简单粗暴，直接window.location.reload()。 另一种是基于WDS (Webpack-dev-server)的模块热替换，只需要局部刷新页面上发生变化的模块，同时可以保留当前的页面状态，比如复选框的选中状态、输入框的输入等。…

Webpack的成功之处，不仅在于强大的打包构建能力，也在于它灵活的插件机制。 在学习Webpack的时候，经常可以看到上述介绍。也就是说学Webpack的前提是要学习Tapable。才能更好的学习Webpack原理。 其实tapable的核心思路有点类似于node.js中的e…

1. Vue响应式原理-理解Observer、Dep、Watcher 2. Vue响应式原理-如何监听Array的变化 3. Vue响应式原理-如何监听Array的变化？详细版 4. Vue异步更新 && nextTick源码解析 当我们触发这个事件，视图中的a和b肯定会发现一…

相信初学Vue的同学一定踩过这个坑，改变数组的索引，没有触发视图更新。 以上案例摘抄Vue官方文档 - 数组更新检测。 Vue官方文档也有给出，使用Vue.set即可达到触发视图更新的效果。 Vue官方给出了解释，不能检测。 那原因是什么？我在学习的过程中发现很多文章都在断章取…

在上一篇Vue响应式原理-理解Observer、Dep、Watcher简单讲解了Observer、Dep、Watcher三者的关系。 今天我们就进一步了解Observer里还做了什么事。 data 中的数据如果是一个数组怎么办？我们发现Object.defineProperty…