• 入门篇 02：运行多个 npm script 的各种姿势
  运行多个 npm script 的各种姿势 前端项目通常会包括多个 npm script，对多个命令进行编排是很自然的需求，有时候需要将多个命令串行，即脚本遵循严格的执行顺序； 有时候则需要让它们并行来提高速度，比如不相互阻塞的 npm script。 社区中也有比 npm 内置的多命令运行机制更好用的解决方案：npm-run-all。 哪来那么多命令？ 通常来说，前端项目会包含 ...
  2021-10-12 13:01:55 | FrontEnd
• 入门篇 01：创建并运行 npm script 命令
  入门篇 01：创建并运行 npm script 命令 首先介绍创建 package.json 文件的科学方法，目标是掌握 npm init 命令。 然后，通过在终端中运行自动生成的 test 命令，详细讲解 npm 脚本基本执行流程。 然后，动手给项目增加 eslint 命令，熟悉创建自定义命令的基本流程。 用 npm init 快速创建项目 开始探索 npm script 之前，...
  2021-10-12 13:01:55 | FrontEnd
• 为什么选择 npm script
  为什么选择 npm script 可能在你翻开这个页面的同时，心里在嘀咕，为什么要选择 npm script？ 我用着 grunt、gulp 不是挺好的么？ 如果你在心里这么问自己，我会很欣慰，因为理性的选择都应该从为什么开始。 在小册介绍中我提到的重量级构建工具所带来的问题，已有前人总结的非常不错，吐血推荐大家阅读原文：Why I left gulp and grunt for n...
  2021-10-12 13:01:55 | FrontEnd
• 前端性能优化-14-性能监测篇：Performance、LightHouse 与性能 API
  可视化监测 性能监测是前端性能优化的重要一环。监测的目的是为了确定性能瓶颈，从而有的放矢地开展具体的优化工作。 平时我们比较推崇的性能监测方案主要有两种：可视化方案、可编程方案。 这两种方案下都有非常优秀、且触手可及的相关工具供大家选择，本节我们就一起来研究一下这些工具的用法。 可视化监测：从 Performance 面板说起 Performance 是 Chrome 提供给我们的...
  2021-10-12 13:01:55 | FrontEnd
• 前端性能优化-13-事件的节流（throttle）与防抖（debounce）
  事件的节流（throttle）与防抖（debounce） 上一节我们一起通过监听滚动事件，实现了各大网站喜闻乐见的懒加载效果。 但我们提到，scroll 事件是一个非常容易被反复触发的事件。其实不止 scroll 事件，resize 事件、鼠标事件（比如 mousemove、mouseover 等）、键盘事件（keyup、keydown 等）都存在被频繁触发的风险。 频繁触发回调导致的...
  2021-10-12 13:01:55 | FrontEnd
• 前端性能优化-12-优化首屏体验——Lazy-Load 初探
  Lazy-Load 初探 首先要告诉大家的是，截止到上个章节，我们需要大家绞尽脑汁去理解的“硬核”操作基本告一段落了。从本节开始，我们会一起去实现一些必知必会、同时难度不大的常用优化手段。 这部分内容不难，但很关键。尤其是近期有校招或跳槽需求的同学，还请务必对这部分内容多加留心，说不定下一次的面试题里就有它们的身影。 Lazy-Load 初相见 Lazy-Load，翻译过来是“懒加载...
  2021-10-12 13:01:55 | FrontEnd
• 前端性能优化-11-最后一击——回流（Reflow）与重绘（Repaint）
  回流（Reflow）与重绘（Repaint） 开篇我们先对上上节介绍的回流与重绘的基础知识做个复习（跳读的同学请自觉回到上上节补齐 →_→）。 回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。 重绘：...
  2021-10-12 13:01:55 | FrontEnd
• 前端性能优化-10-千方百计——Event Loop 与异步更新策略
  异步更新策略 Vue 和 React 都实现了异步更新策略。 虽然实现的方式不尽相同，但都达到了减少 DOM 操作、避免过度渲染的目的。 通过研究框架的运行机制，其设计思路将深化我们对 DOM 优化的理解，其实现手法将拓宽我们对 DOM 实践的认知。 前置知识：Event Loop 中的“渲染时机” 搞懂 Event Loop，是理解 Vue 对 DOM 操作优化的第一步。 Mi...
  2021-10-12 13:01:55 | FrontEnd