对于前端页面来说，静态资源的加载对页面性能起着至关重要的作用。本文将介绍浏览器提供的两个资源指令-preload/prefetch，它们能够辅助浏览器优化资源加载的顺序和时机，提升页面性能。一、从一个

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

这就触到了本人的知识盲区了，本着扫盲的目的，研究了下 link 标签，发现这个小东西功能还是挺强大的，上面的就是为了实现预加载功能，懂点儿英文的，一看见preload 就大致知道了。 之前也有预加载技术，像 prefetch，subresource 等，关于这两者和 prelo…

React 16.6添加了一个新的特性: React.lazy(), 它可以让代码分割(code splitting)更加容易。 接下来通过一个股票App Demo， 来学习如何使用React.lazy这个新特性并了解为什么要使用它。 我们创建了一个股票Web App，App展…

减少请求数量减小请求大小html压缩图片优化图片格式图片大小压缩懒加载字体优化FOIT和FOUT字体未下载完成时浏览器隐藏或自动降级导致字体闪烁

前端性能，这是一个很大也很有趣的一块，是每个前端工程师不可避免的问题，所以这个系列会慢慢地探讨一些关于性能方面的问题。最近也接触到一些性能方面的调试以及优化的工作，纸上得来终觉浅，绝知此事要躬行。 在 Chrome 中，我们打开 Chrome 调试面板，进入 performan…

性能优化是前端开发一个非常重要的组成部分，如何更好地进行网络传输，如何优化浏览器渲染过程，来定位项目中存在的问题。Chrome DevTools给我们提供了2种常用方式 Audits和Performance，Audits可以对页面进行性能评分，同时，还会给我们提供一些优化建议。…

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

lighthouse 可以搜集网页性能指标，分析 Web 应用的性能并生成报告，本文介绍其中 6 个性能指标的含义与优化方式。