关键字节
三个指标中的第二个是关键字节。它测量渲染页面所需要传输的字节数。不是所有字节都需要下载到页面上，只有实际渲染页面中需要，及响应用户的内容才需要下载。
不用说，我们同样想尽量降低这个指标。
如果你认为这很好，不需要使用外部资源，那么你是错的。虽然这看起来很诱人，但它在规模上是不可行的。实际，如果我的团队把提供页面所需要的内容都放在内部或者行间，这个文件会变得非常大。并且浏览器的构造也不能够处理这么大的负载。
看看这个关于内联所有React recommends样式对页面加载的影响的有趣文章（）。 DOM变成四倍大小web浏览器停止运行此脚本，需要两倍的时间才能安装，响应时间增长50％。这当然不能接受。
还要考虑外部资源可以缓存的事实，因此在再次访问页面，或访问其他使用相同资源（例如my-global.css）的页面时，浏览器将不会进行网络调用，而是使用缓存资源，这为我们赢得更大的胜利。
所以让我们更进一步，将样式和脚本引用为外部资源。请注意辅助论坛，我们有1个外部CSS文件，1个外部JavaScript文件和1个外部异步JavaScript文件
这是我们的CRP图解现在是这样。
浏览器获取页面，构建DOM，一旦碰到外部资源，预加载扫描器启动。它继续扫描并开始下载在HTML可以找到的所有外部资源。 CSS和JavaScript高优先级，其他资源优先级低一些。
它遇到我们的styles.css和app.js，就开辟出另外一个关键路径以获取它们。它没有加载analytics.js，因为我们给了它async属性。浏览器会在另一个线程以较低的优先级下载它，但是因为它不会阻止我们的页面渲染，因此它不会影响关键路径。这正是Google自己的网站优化排名算法。
关键文件
CRP指标的最后一项是关键文件。浏览器渲染页面必须下载的文件总数。在我们的第三个例子中，关键文件是HTML文件本身，CSS和JavaScript。异步脚本不算在内。这个指标当然越小越好。
再看看关键路径长度
现在你可能会认为这是关键路径最长的大小？我是指我们只需要下载HTML，CSS和JavaScript来渲染我们的页面，而且我们在两次请求中就完成了。
来源：【九爱网址导航www.fuzhukm.com】 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
