入门篇 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