• 为什么选择 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
• 前端性能优化-09-对症下药——DOM 优化原理与基本实践
  DOM 优化原理与基本实践 从本节开始，我们要关心的两大核心问题就是：“DOM 为什么这么慢”以及“如何使 DOM 变快”。 后者是一个比“生存还是毁灭”更加经典的问题。不仅我们为它“肝肠寸断”，许多优秀前端框架的作者大大们也曾为其绞尽脑汁。 这一点可喜可贺——研究的人越多，产出优秀实践的概率就越大。因此在本章的方法论环节，我们不仅会根据 DOM 特性及渲染原理为大家讲解基本的优化思路...
  2021-10-12 13:01:55 | FrontEnd
• 前端性能优化-08-知己知彼——解锁浏览器背后的运行机制
  浏览器背后的运行机制 从本章开始，我们的性能优化探险也正式进入到了“深水区”——浏览器端的性能优化。 平时我们几乎每天都在和浏览器打交道，在一些兼容任务比较繁重的团队里，苦逼的前端攻城师们甚至为了兼容各个浏览器而不断地去测试和调试，还要在脑子中记下各种遇到的 BUG 及解决方案。 即便如此，我们好像并没有去主动地关注和了解下浏览器的工作原理。 我想如果我们对此做一点了解，在项目过程中...
  2021-10-12 13:01:55 | FrontEnd