前端性能优化

视频作为一种重要的媒体形态，在网站中使用可以提高网站内容的丰富性，但同时对网络加载来说也是一个负担。所以会出现一些如下针对 Web 上视频的优化。

有些时候，内置的字体并不能满足我们的需求，这就会需要加载自定义字体。加载自定义字体也有一些需要注意的点哦。

优质的图片可以有效吸引用户，给用户良好的体验。相较于其他资源，图片体积更大。所以，如果单纯从加载的字节数这个维度来看，很多时候优化图片带来的流量收益要远高于 JS 和 CSS。

在这一部分，我们来详细看一看与 CSS 相关的优化内容。其中一部分内容与 JavaScript 部分类似，另一部分可能是 CSS 特有的一些优化或注意事项。

随着 Web 的发展，JavaScript 已经被用于构建大型、复杂的前端应用，在当下的前端中扮演了一个非常重要的角色，因此针对 JavaScript 的优化至关重要。

浏览器除了解析页面 DOM 外，还会对页面包含的静态资源发起请求，请求回来后会执行或使用资源。这一站咱们就来具体看看这个阶段。

到目前为止我们已经介绍了很多环节，也已经有了许多「性能优化的武器」。不过不要掉以轻心，后续仍然有大量的工作等待我们来优化。这里就到了客户端接收响应的阶段了。

性能优化一直以来都是前端工程领域中的一个重要部分。很多资料[1][2][3]表明，网站应用的性能优化对于提高用户留存、转化率等都有积极影响。可以理解为，提升你的网站性能，就是提升你的业务数据（甚至是业务收入）。 性能优化广义上包含前端优化和后端优化。后端优化的关注点更多的时候是…

在前一部分，我们介绍了浏览器缓存。当一个请求走过了各级前端缓存后，就会需要实际发送一个请求了。 介绍网络请求其实可以包含复杂的网络知识。不过，今天咱们的旅程主要聚焦于“前端性能优化”。因此，主要会介绍一些在这个环节中，前端性能优化可能会做的事儿。 1. 避免多余重定向 重定向是…

欢迎来到「前端性能优化之旅」的第一站 —— 缓存。 当浏览器想要获取远程的数据时，我们的性能之旅就开始了。然而，我们并不会立即动身（发送请求）。在计算机领域，很多性能问题都会通过增加缓存来解决，前端也不例外。和许多后端服务一样，前端缓存也是多级的。下面让我们一起来具体看一看。 …

近来，GoogleChromeLabs 推出了 quicklink，用以实现链接资源的预加载（prefetch）。本文在介绍其实现思路的基础上，会进一步探讨在预加载方面前端工程师还可以做什么。 1. quicklink 是什么？ quicklink 是一个通过预加载资源来提升后…

巧用requestIdleCallback。随着JS与浏览器的发展，开发者对浏览器运行的控制能力越来越强，粒度也越来越细。作者提出了“Idle Until Urgent”策略来提升 FID：除非到非执行不可的时候，否则就等浏览器空闲时再执行代码。

注意打包后的资源依赖与资源引入顺序。 1. 引言 性能优化涵盖的范围非常之广，其中包含的知识也非常繁杂。从加载性能到渲染性能、运行时性能，每个点都有非常多可以学习与实践的知识。 优化问题包含方方面面，优化手段也依场景和具体问题而定。因此，本文并不是一个泛而全的概览文章，而是以之…