参考自 (MDN). 处理 HTML 标记并构造 DOM 树。 处理 CSS 标记并构造 CSSOM 树。 将 DOM 与 CSSOM 合并成一个渲染树。 根据渲染树来布局，以计算每个节点的几何信息。 将各个几点绘制到屏幕上。 从 DOM 树的根节点开始遍历每个 可见 节点。 …

从最初接触css和html的时候，就听说过回流和重绘，当时只是简单的知道一个是尺寸位置等变化引起，另一个是因为外观样式变化引起，并没有做深入的考究，究竟哪些情况会引起重绘，哪些情况会引起回流，没有做过详细的总结，今天我们就来一起复习总结一下。 渲染引擎首先通过网络获得所请求文档…

在上两章节中我们已经介绍过了 JavaScript 打包机制 以及 webpack 所有的内置配置，但当项目业务功能达到一定规模时，默认的配置已经不足以满足开发、用户的期望，我们就需要对 webpack 配置进行优化。 如何知道具体该如何优化喃，最直观的方式是分析它的输出文件，…

之前写了篇文《这一次，彻底理解Promise原理》，剖析了Promise的相关原理,反应不错，这次把学习到的相关的知识也写下。 我们都知道，Promise解决了回调地狱的问题，但是如果遇到复杂的业务，代码里面会包含大量的 then 函数，使得代码依然不是太容易阅读。 基于这个原…

如果我们可以把js文件缓存下来，请求的时候，先去缓存里面取，如果没有的话，再去服务器里面取。这样的话，我们的页面也会快一些！ 6.服务端根据if-modified-since / if-none-match 进行判断过期没有，如果没有过期，就命中协商缓存，服务器不会返回，而是告…

2019.10.24, 在 React Conf 2019 首日， React 官方正式发布了关于 Concurrent 模式的第一个早期社区预览文档, 正式和 React 的大众开发者见面, 令人兴奋。 跟去年的 React Hooks 一样, 尽管 Concurrent 还…

前端页面性能是一个非常核心的用户体验指标。本文介绍阿里UC 岳鹰全景监控平台 如何设计一个通用、低侵入性、自动上报的页面性能监控方案。主要采用的是Navigation Timing API以及sendBeacon等方法。 一个页面性能差的话会大大影响用户体验。用户打开页面等待的…

通过插件我们可以扩展webpack，在合适的时机通过Webpack提供的 API 改变输出结果，使webpack可以执行更广泛的任务，拥有更强的构建能力。 本文将尝试探索 webpack 插件的工作流程，进而去揭秘它的工作原理。同时需要你对webpack底层和构建流程的一些东西…