为什么这些天网站不立即显示其文字？

#1 楼

原因之一是当今的网页设计师喜欢使用网络字体（通常为WOFF格式），例如通过Google Web字体。

以前，唯一可以在网站上显示的字体是用户在本地安装的字体。由于例如Mac和Windows用户不一定具有相同的字体，设计人员本能地将规则定义为

font-family: Arial, Helvetica, sans-serif;

其中，如果在系统上找不到第一个字体，则浏览器会查找第二种字体，最后是一种后备的“ sans-serif”字体。

现在，可以提供字体URL作为CSS规则，以使浏览器下载字体，例如：

@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700);

，然后通过以下方式为特定元素加载字体：

font-family: 'Droid Serif',sans-serif;

能够使用自定义字体，但是这也导致了一个问题，直到浏览器加载了资源，才显示任何文本，包括下载时间，字体加载时间和渲染时间。我希望这是您遇到的工件。

例如：我的一家全国性报纸Dagens Nyheter使用网络字体作为标题，但不使用其潜在顾客，因此当该站点为通常，我通常会先看到潜在客户，然后半秒钟后，上面的所有空白都填充标题（至少在Chrome和Opera中是这样，至少没有尝试过。）。

（另外，设计人员这些天绝对在各处都散布JavaScript，所以也许有人试图对文本做些巧妙的事情，这就是为什么它会被延迟的原因，这是非常特定于站点的：在这种情况下，通常会延迟文本我相信是上述的网络字体问题。）


添加

尽管我没有详细介绍，也许是因为这个原因，这个答案非常令人讨厌。问题线程中有很多评论，因此我将尝试扩大一点（在主题受保护后不久，很多评论似乎消失了-一些主持人可能手动清除了它们）。另外，请阅读本主题中的其他答案，因为它们都以自己的方式扩展。

这种现象通常被称为“未样式化内容的闪烁”，尤其是“未样式化文本的闪烁” 。搜索“ FOUC”和“ FOUT”会提供更多信息。

我可以推荐Web设计师Paul Irish在FOUT上发布的有关网络字体的帖子。

请注意的是不同的浏览器对此的处理方式也不同。我在上面写道，我已经测试了Opera和Chrome，两者的行为相似。所有基于WebKit的浏览器（Chrome，Safari等）都选择通过在Web字体加载期间不使用后备字体呈现Web字体文本来避免FOUT。即使缓存了Web字体，也会有渲染延迟。在这个问题线程中有很多评论都相反，并且缓存字体的行为完全是错误的，但是例如通过上面的链接：


在哪种情况下，您将获得FOUT




将：下载并显示远程ttf / otf / woff

威尔：显示缓存的ttf / otf / woff

威尔：下载并显示数据uri ttf / otf / woff

将：显示缓存的数据-uri ttf / otf / woff

不会：显示在传统字体堆栈中已经安装并命名的字体

不会：显示使用local（）位置安装和命名的字体



由于Chrome浏览器会等到FOUT风险消失后再进行渲染，因此会产生延迟。可见效果的程度（尤其是从缓存中加载时）似乎取决于需要渲染的文本量以及其他因素，但是缓存并不能完全消除效果。

/> Irish在帖子底部还提供了有关浏览器行为的最新更新（截至2011–04–14）：





Firefox（自FFb11起​​）和FF4 Final）不再具有FOUT！ hoo！ http://bugzil.la/499292基本上，该文本在3秒钟内是不可见的，然后带回该后备字体。 Webfont可能会在这三秒钟内加载……希望。.
IE9支持WOFF以及TTF和OTF（尽管它需要嵌入位设置的东西-如果使用WOFF则几乎没有意义）。然而！！！ IE9有一个FOUT。 :(
Webkit有一个修补程序，等待0.5秒后着陆以显示后备文本。与FF相同，但行为是0.5s而不是3s。

添加：眨眼有一个为此注册的错误也是如此，但似乎似乎尚未就如何使用它达成最终共识-当前与WebKit相同的实现。



如果这是针对设计人员的问题，可以尝试避免此类问题的方法，例如webfontloader，但这将是另一个问题。保罗·爱尔兰（Paul Irish）链接对此问题进行了进一步的详细介绍。

#2 楼

造成这种情况的原因是，您仍无法阅读的文本是使用网络字体呈现的，该字体仍在通往浏览器的管道中。

此外，由于您的浏览器是Google Chrome浏览器，他们使用WebKit渲染页面，由他们（即WebKit）决定，最好是在下载Web字体之前完全不看任何文本。但是，如果您是开发人员，希望使用合适的后备系统字体来阅读文本，那么可以使用Google的WebFont Loader之类的工具来实现此目的。

#3 楼

简短答案：AJAX或WOFF

网站“显示文字缓慢”有多种原因。 Portableapps.com的速度慢是由于下载WOFF字体引起的。但是，您所说的“文本开始在这里和那里开始出现”的情况更多是由AJAX引起的。

网站由许多部分组成。在Web设计人员的控制下，如何下载和组装这些零件是一种设计选择。速度缓慢是由开发人员选择组装以下构建基块引起的：


初始HTML页面
CSS
JS
图像
WOFF字体
AJAX请求
DOM操作


传统上的网站：

传统上，开发人员通常将文本内容放入初始HTML页面，并在可用时立即显示它。 HTML将引用几个资源，然后将其下载。然后，浏览器将逐步重画屏幕，以包括样式和图像（当它们可用时）。无法使用AJAX和WOFF。


WOFF网站：

WOFF字体允许网站通过下载使用浏览器通常不可用的字体。网站上的字体。一些开发人员指示浏览器在下载所有WOFF字体之前不要显示文本内容。以我的经验，这种方法尚未得到广泛的使用。


AJAX网站：

一些开发人员选择不将文本内容包含在开头HTML页面。相反，他们选择使用AJAX下载文本内容。这是在基本页面加载后发生的。以我的经验，这种方法比WOFF字体获得了更广泛的采用，并且通常是导致您描述缓慢的原因。

确定原因

要确定特定站点的原因，需要使用Firebug或Chrome开发者工具之类的工具进行分析。或者，您可以使用支持AJAX但不支持WOFF的Internet Explorer 8打开站点。如果站点仍然很慢，则问题是AJAX而不是WOFF。

#4 楼

我经常可能会选择避免“显示未样式化的内容”。如果在加载CSS之前显示的文本，您会短暂地看到它原始的样子，然后在浏览器重新绘制它时闪烁一下。通过放置一些基本的内联样式以最初隐藏内容（在实际样式表中被覆盖）或使用JS，开发人员可以避免出现这种情况。

#5 楼

正如其他人指出的那样，自定义字体可能会导致延迟。

为了提供更多背景信息，浏览器在将页面内容呈现到屏幕之前大致进行了以下操作：


获取HTML（DNS，TCP，请求/响应的多次往返）
开始解析HTML，发现外部资源，例如外部CSS和JS。请注意，CSS阻止布局，而JS阻止解析。因此，像CSS和JS这样的外部资源会在文档的早期（例如在头部）加载，从而降低了页面在屏幕上显示内容的时间。
获取外部CSS和JS（多次往返：DNS和如果这些资源位于不同的域（例如CDN以及请求/响应的RTT）上，则为TCP。
一旦外部CSS和JS完成加载，解析/执行JS，解析/应用样式后，
如果CSS引用了自定义字体，那么现在还必须下载这些字体，这会导致往返延迟，从而呈现依赖自定义字体的页面任何部分

我不是专门讨论自定义字体引起的延迟，而是最近写了一篇博客文章，提供了有关渲染延迟原因的更多信息。它提供了一些建议，以最大程度地减少首次绘画页面的时间。希望这对希望使页面显示内容更快的读者有用，包括那些想要使用自定义字体的页面：http://calendar.perfplanet.com/2012/make-your-mobile-pages-render-in-under -一秒/

#6 楼

简短答案：开发人员。

将引用外部文档（例如.css或.js文件）的链接和脚本标签放在文档的开头（流中的内容比正文及其元素的位置高）时，将加载它们第一。 JavaScript从引用它的标记执行；如果要处理的代码很多，或者代码很繁琐，或者更常见的是，如果您希望看到的文本是在服务器上呈现并在加载时填充到文档中的，并且服务器端代码也很繁琐，大型或由于处理多个并发请求而导致I / O阻塞，您肯定会在HTML有机会呈现之前就注意到停机时间。一些开发人员选择在标记和样式之后（在正文末尾）加载与视图无关的JavaScript，最好的方法是更加意识到自己的技术决策在实施时将如何影响总体用户体验。

互联网连接速度在缓慢下载数据中起着重要作用，但是很明显，但是编写错误的代码或设计不当的技术堆栈（针对网站类型）在缓慢加载中起越来越重要的作用。动态内容，因为更快的网络连接已无处不在。

#7 楼

简而言之，在显示页面之前，需要从单独的HTTP GET加载太多可加载对象，并且过分依赖平均延迟来衡量站点运行状况。

第一个指的是页面加载的所有.css，.js和webfonts，更不用说许多站点还需要通过XHR请求检索JSON对象，然后使用某种模板从那些对象生成HTML。

但是为什么他们不注意到该网站运行缓慢呢？

可能是因为他们那里有memecache来加快速度（或仅依靠文件系统缓存），并且正在使用平均延迟。因此，缓存的对象以6毫秒的延迟返回，并且掩盖了许多GET请求需要5000毫秒才能完成的事实。平均值必须消亡。超过可接受的最大阈值的RTT计数万岁！该数字应为0，或者根据定义，RTT是不可接受的。

#8 楼

嗯，有多种原因。原因之一是，通常会在后台或HTML页面顶部定义命令
，或者在首先加载的单独CSS中检索到这些命令。

另一个原因是，尽管在大多数情况下可以键入图像的大小，但Web设计人员并未使用它。因此，浏览器必须首先将整个图像加载到页面上，以便它知道如何在其周围包装文本。

一些设计师也希望显示第一张图片和第二张图片，他们通过一些javascript，例如，一个简单的页面将首先显示一个横幅，然后在其上显示所有其他内容。

但是，如果您想知道为什么我的页面上有这么多垃圾商业广告，而我只想阅读新闻，那么为您提供解决方案。如果您使用的是Firefox，则可以使用垃圾邮件阻止程序。有了这样的插件，Webrowser就能知道提供垃圾邮件的站点，并简单地阻止它们，从而可以更快地加载页面，同时您仍然可以看到与阅读的文章相关的重要图像。

我会向所有处理缓慢页面加载的人推荐使用fidler。
fidler可以与IEexplorer或FireFox结合使用（使用其代理功能）
Fidler实际上会向您显示实际使用了多长时间加载网页的时间和时间。这是一个HTML调试工具。

评论

---

因此，您尝试帮助他人并获得投票的乐趣不是吗？好的，在这里以非专业人士的方式向人们解释技术知识之前，我会再三考虑。

–user613326
13年2月7日在12:02

---

您解释了错误的事情，这就是为什么您会被低估。如屏幕截图所示，页面已完全加载，仅不显示文本。这与图像无关。

– Femaref
13年2月7日在12:28

---

文档的正文几乎总是在外部CSS之前加载的。浏览器不会仅仅为了加载外部内容而停止解析页面。仅当您真正有所帮助时，尝试提供帮助才有用。错误信息总比没有信息要糟。

–raylu
13年2月7日在20:21

---

@raylu我不知道那个错误信息。有时候看到很多不满意的答案会很有帮助。 :-)

– LarsTech
2013年2月7日在21:13

---

@ user613326，您好：我们鼓励在这里诚实地投票，因为我们主要是在为社区提供有用的答案。不要亲自去做！

– Flimm
13年2月7日在22:11

---