当优化一个页面时,你显然在考虑在哪里添加不同的资产。前面需要的东西放在上面,后面需要的东西放在下面。毕竟,我们希望页面尽可能快地显示某些内容!

性能 这很重要

这个打击乐表演在这种情况下是最重要的因素。因此,我们希望页面逐步加载,含义:下载内容时,页面从上到下呈现。

假设你正在建立一个图片画廊来展示你的彩虹独角兽的Fablous收藏。当用户单击独角兽时,灯箱将打开并显示其更大的图像。

现在,呈现页面不需要用于lightbox的CSS。在用户单击图像之前实际上不需要它。因此,我们可以在页面底部包含它,以便让其他内容首先加载。

–你知道这样页面的渲染速度会更快吗?

错了!与常识相反,它实际上会延迟许多Web浏览器中页面的呈现。

违反直觉的行为

但是为什么它会延迟渲染?在其他内容出现之前,不要让浏览器下载它,这样可以加快渲染速度。乍一看,这真是违反直觉,但听我说:

浏览器不想冒险重新呈现页面,因此,在呈现任何内容之前,它将一直等待直到加载所有CSS!

规则

幸运的是,有一个非常简单的解决方案。只需遵循以下简单规则:在中包含所有CSS页面的.

工具书类

高性能网站——Steve Souders为前端工程师提供的基本知识

在线的

加快网站速度的最佳实践

音符:这篇文章以前发表在代码绘制蓝图.