FishPlusOrange
FishPlusOrange
在开发过程中，通过 `@keyframes`，我们多多少少都写过一些自定义 CSS3 动画。有时候动画虽小，但是极大提高了用户体验。所以在浏览器兼容性允许的情况下，我一般都会对 CSS3 动画有所考虑。 以前我写 CSS3 动画都是先定义一个 `@keyframes`，然后使用 `animation` 设置基础属性完成该动画。对于 `animation` 一些“冷门”属性没有太多了解，比如 `animation-fill-mode`，当初只是简单看了一下属性描述。所以，这里再看 `animation-fill-mode` 属性并进行简单的总结。 `animation-fill-mode` 属性是什么？MDN 上面是这样描述的： > The animation-fill-mode CSS property sets how a CSS animation...
使用 vue-cli 构建的项目有两个存放静态文件的目录，分别是 `src/assets` 和 `static/`。那么二者有什么区别呢？ 首先，我们需要理解 Webpack 是如何处理静态资源的。在 `*.vue` 组件中，所有的 `templates` 和 `css` 都会被 `vue-html-loader` 和 `css-loader` 所解析以寻找资源路径。比如 `` 和 `background: url(./logo.png)`，`./logo.png` 是一个相对资源路径，其被 Webpack 解析成模块依赖。 由于 `logo.png` 不是 JavaScript，当被视为模块依赖时，需要使用...
使用 Webpack 添加 hash 是实现前端静态资源在浏览器长缓存方案之一。以下介绍一下 Webpack 中 hash、chunkhash 以及 contenthash 的区别： ### hash hash 可以理解是**整个项目的 hash 值**，其根据每次编译 compilation 的内容计算得到，每次编译之后都会生成新的 hash，即修改任何文件都会导致所有文件的 hash 发生改变： ```javascript output: { filename: '[name].[hash].js', path: path.join(__dirname, 'dist')...
优化首屏渲染速度对提升用户体验有很多大的帮助，尤其是 SPA 项目。以下介绍一下本人在做 Vue SPA 项目过程中尝试过的首屏渲染优化方法。 ### 异步组件 异步组件可以理解为组件的懒加载，在大型应用中，我们可以将应用发分割成小的代码块，只有在需要的时候才从服务器加载一个模块。Vue 提供了相关的支持： > 为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。 以**业务组件**为例（基于 Vue CLI，使用局部注册，以下例子同）： ```javascript export default { components: { AsyncComponent: (resolve, reject) => { setTimeout(() =>...
什么是 `nextTick`？Vue 官方给出定义： > 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 单看定义比较抽象，个人理解 `nextTick` 主要用于在数据变化所引起的 DOM 更新完成后立即调用回调函数。说到这里可能有的人会有疑问：不是应该我修改数据之后，Vue 自动就进行相应的 DOM 更新了吗？答案是否的。 这里就要涉及到 Vue 的**异步更新队列**，Vue 响应式系统并不是在数据变化之后立即更新 DOM，而是按照一定策略**异步执行** DOM 更新。 当监听到数据变化，Vue 开启一个队列，缓冲在同一事件循环中发生的所有数据改变（在缓冲过程中 Vue 会进行去重以避免不必要的计算和 DOM 操作）。在下一个的事件循环中，Vue 刷新队列并执行实际...
对于前端开发来说，tree shaking 这个名词多多少少都有所了解。 tree shaking 是一个术语，通常用于描述移除 JS 上下文中没用的代码，这样可以有效地缩减打包体积。 Webpack 官方文档有一段很形象的描述： > 你可以将应用程序想象成一棵树。绿色表示实际用到的源码和 library，是树上活的树叶。灰色表示无用的代码，是秋天树上枯萎的树叶。为了除去死去的树叶，你必须摇动这棵树，使它们落下。 tree shaking 这个概念最早由 ES2015 模块打包工具 [rollup](https://github.com/rollup/rollup) 提出。 关于 tree shaking 的实现原理可以阅读一下这篇文章：[tree shaking 性能优化实践-原理篇](https://juejin.im/post/5a4dc842518825698e7279a9)。 这里主要从 Webpack 的角度来谈 tree...