——本文是对之前同名文章的修正，将所有webpack3的内容更新为webpack4，以及加入了笔者近期在公司工作中学习到的自动化思想，对文章内容作了进一步提升。 作为互联网项目，最重要的便是用户体验。在举国“互联网+”的热潮中，用户至上也已经被大多数企业所接收，特别是在如今移动…

在实际工作中，我们很少会遇到一次性需要向页面中插入大量数据的情况，但是为了丰富我们的知识体系，我们有必要了解并清楚当遇到大量数据时，如何才能在不卡主页面的情况下渲染数据，以及其中背后的原理。 我们对十万条记录进行循环操作，JS的运行时间为187ms，还是蛮快的，但是最终渲染完成…

几乎在每一本JS相关的书籍中，都会说JS是单线程的，JS是通过事件队列(Event Loop)的方式来实现异步回调的。 对很多初学JS的人来说，根本搞不清楚单线程的JS为什么拥有异步的能力，所以，我试图从进程、线程的角度来解释这个问题。 计算机的核心是CPU，它承担了所有的计算…

作为一个合格的前端工程师，浏览器相关的工作原理是我们进行性能优化的基石，我之前也强调过知识体系的重要性，这部分原理性的内容就是知识体系中的重要部分，必须牢牢掌握才能面对瞬息万变的实际场景，针对性地给出实际方案，而不是背诵各种开发军规和性能优化的条例，这样很难发现真正的问题所在,…

长列表渲染、无限下拉也算是前端开发老生常谈的问题之一了，本文将介绍一种简洁、巧妙、高效的方式来实现。话不多说，看下图，也许你可以发现什么？ 说明了要素，也许你可以尝试着开始思考，看你是否能猜到具体的实现方案。 一直以来，检测元素的可视状态或者两个元素的相对可视状态都不是件容易事…

在工作中，有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况，对于此，我们称这种列表叫做长列表。比如，在一些外汇交易系统中，前端会实时的展示用户的持仓情况(收益、亏损、手数等)，此时对于用户的持仓列表一般是不能分页的。 在高性能渲染十万条数据(时间分片)一文中，提到了可…

本篇是基于 FDCon2019 上《让你的网页更丝滑by刘博文》的复盘文。该课题也是博主感兴趣的领域, 后续会结合 React 的 Schedule 与该文进行进一步整合。 当前市面上的设备频率在 60 HZ 以上。 结合如下代码块, 可以看到 100ms 以下的点击是顺畅的,…

几周前，我开始查看我网站的一些性能指标。具体来说，我想看看我的网站在最新的性能指标 —— 首次输入延迟 （FID）上的表现如何。 我的网站只是一个博客（并没有运行很多的 JavaScript），所以我原本预期会得到相当不错的结果。 用户一般对于小于 100 毫秒的输入延迟没有感…

推荐大家时间充裕的话可以自己阅读英文原文，此文是根据掘金翻译的四篇文章 + 其他的翻译文章 + 自己翻译修改得出的。因为翻译大家懂得，会有一些错误的地方，欢迎大家指出，本人不保证翻译没有错误，但已经尽力去翻译了，所以欢迎大家直接阅读英文原文！！欢迎大家直接阅读英文原文！！欢迎大…