在做首屏性能优化的时候，我们针对一些首屏使用不到的资源，通常采用异步组件。只在需要的时候才从服务器加载一个模块。Vue 允许我们以一个工厂函数的方式定义我们的组件，这个工厂函数会异步解析我们的组件。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，并且会把结果缓存起来供…

性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，请读者带着批判性的眼光来阅读本文。 本文相关的优化建议的引用资料出处均会在建议后面给出，或者放在文末。 1. …

今天我们将研究一下能显著提升页面性能的方法 —— 资源提示与指令。你也许听说过 preload，prefetch 和 preconnect，可是我们想研究的更深一点，搞清他们之间的区别并且充分的利用它们。它们带来的好处包括允许前端开发人员来优化资源的加载，减少往返路径并且在浏览…

本文主要介绍preload的使用，以及与prefetch的区别。然后会聊聊浏览器的加载优先级。 preload 提供了一种声明式的命令，让浏览器提前加载指定资源(加载后并不执行)，在需要执行的时候再执行。提供的好处主要是 目前我们支持的浏览器主要为高版本 Chrome，所以可放…

Web Worker (工作线程) 是 HTML5 中提出的概念，分为两种类型，专用线程（Dedicated Web Worker） 和共享线程（Shared Web Worker）。专用线程仅能被创建它的脚本所使用（一个专用线程对应一个主线程），而共享线程能够在不同的脚本中使…

当浏览器截获到一个页面请求后，将会按照顺序做如下图所示的4件事。 首先会将所有需要加载的资源进行分类。 然后根据浏览器相关的安全策略，来决定资源的加载权限。 接着对各个资源的加载优先级进行计算和排序。 最后一步，根据加载优先级顺序来加载资源。 chrome浏览器会将资源分为14…

浏览器里并不是每一个资源加载都很重要。 为了达到重要的资源先加载，浏览器有试探法，尝试对资源进行权重分配，例如CSS会在脚本和图片之前先加载。 因为浏览器在试探权重分配，所以并不总是分配的很正确，通常因为没有足够的信息，浏览器可能做出错误的决定。 浏览器里并不是每一个资源加载都…

自JavaScript诞生以来，前端技术发展非常迅速。移动端白屏优化是前端界面体验的一个重要优化方向，Web 前端诞生了 SSR 、CSR、预渲染等技术。在美团支付的前端技术体系里，通过预渲染提升网页首帧优化，从而优化了白屏问题，提升用户体验，并形成了最佳实践。 通过对比，同构…