网页 选中文本 不显示菜单_为什么网页不立即显示其文本？

网页 选中文本 不显示菜单

If you’re prone to watching the browser pane with an eagle eye, you may have noticed that pages frequently load their images and layout before loading their text–the exact opposite loading pattern we experienced during the 1990s. What’s going on?

如果您倾向于用鹰眼观察浏览器窗格，则可能已经注意到页面在加载文本之前经常加载其图像和布局，这与我们在1990年代经历的情况完全相反。 这是怎么回事？

Today’s Question & Answer session comes to us courtesy of SuperUser—a subdivision of Stack Exchange, a community-driven grouping of Q&A web sites.

今天的“问答”环节由SuperUser提供，它是Stack Exchange的一个分支，该社区是由社区驱动的Q＆A网站分组。

问题 (The Question)

SuperUser reader Laurent is very curious about why exactly pages seem to load elements completely differently than they did once upon a time. He writes:

超级用户读者Laurent很好奇为什么页面加载的元素与以前完全不同。 他写：

I’ve noticed that recently many websites are slow to display their text. Usually, the background, images and so on are going to be loaded, but no text. After some time the text starts appearing here and there (not always all of it at the same time).

我注意到最近许多网站显示文字的速度都很慢。 通常，背景，图像等将被加载，但是没有文本。 一段时间后，文本开始出现在这里和那里(并非总是同时出现)。

It basically works the opposite as it used to, when the text was displayed first, then the images and the rest was loading afterwards. What new technology is creating this issue? Any idea?

基本上与以前相反，当首先显示文本时，然后显示图像，然后再加载其余图像。 什么样的新技术正在造成这个问题？ 任何想法？

Note that I’m on a slow connection, which probably accentuates the problem.

请注意，我的连接速度很慢，这可能会加剧问题。

See [above] for an example – everything’s loaded but it takes a few more seconds before the text is finally displayed.

参见[上面]的示例–一切都已加载，但最终显示文本还需要几秒钟。

So what gives? Laurent, and many of us, remember a time when the text loaded first and everything else–garrish animated GIFs, tiled backgrounds, and all the other artifacts of late 90s web browsing–came later. What causes the current situation of design elements first, text later?

那有什么呢？ 劳伦特(Laurent)和我们中的许多人都记得一段时期，那时文本首先加载，后来出现了所有其他东西-充满生气的GIF动画，平铺的背景以及90年代后期网络浏览的所有其他工件。 是什么导致设计元素首先出现在现状中，其次是文本？

答案 (The Answer)

SuperUser contributor Daniel Andersson offers a wonderfully detailed answer that gets right to the bottom of the why-the-fonts-load-last mystery:

超级用户贡献者丹尼尔·安德森(Daniel Andersson)提供了一个非常详尽的答案，该答案直指为什么最后一次加载的奥秘：

One reason is that web designers nowadays like to use web fonts (usually in WOFF format), e.g. throughGoogle Web fonts.

原因之一是当今的Web设计人员喜欢使用Web字体(通常为WOFF格式)，例如通过Google Web字体 。

Previously, the only fonts that were able to be displayed on a site was those that the user had locally installed. Since e.g. Mac and Windows users not necessarily had the same fonts, designers instinctively always defined rules as

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

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

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

where, if the first font wasn’t found on the system, the browser would look for the second, and lastly a fallback “sans-serif” font.

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

Now, one can give a font URL as a CSS rule to get the browser to download a font, as such:

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

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

and then load the font for a specific element by e.g.:

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

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

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

This is very popular to be able to use custom fonts, but it also leads to the problem that no text is displayed until the resource has been loaded by the browser, which includes the download time, the font loading time and the render time. I expect that this is the artifact that you are experiencing.

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

As an example: one of my national newspapers, Dagens Nyheter, use web fonts for their headlines, but not their leads, so when that site is loaded I usually see the leads first, and half a second later all the blank spaces above are populated with headlines (this is true on Chrome and Opera, at least. Haven’t tried others).

例如：我的一家全国性报纸Dagens Nyheter使用网络字体作为标题，但不使用潜在客户，因此，在加载该网站时，我通常会首先看到潜在客户，然后半秒后填充上面的所有空白带有标题(至少在Chrome和Opera上是这样。没有尝试过其他功能)。

(Also, designers sprinkle JavaScript absolutely everywhere these days, so maybe someone is trying to do something clever with the text, which is why it is delayed. That would be very site specific, though: the general tendency for text to be delayed in these times is the web fonts issue described above, I believe.)

(此外，设计人员这几天绝对在所有地方撒JavaScript，所以也许有人试图对文本做些聪明的事情，这就是为什么它会被延迟。但是，这是非常特定于站点的：在这种情况下，文本通常会被延迟我相信，时代就是上述的网络字体问题。)

Addition:

加成：

This answer became very upvoted, though I didn’t go into much detail, or perhaps because of this. There have been many comments in the question thread, so I’ll try to expand a bit […]

尽管我没有详细介绍，也许是因为这个原因 ，这个答案非常令人讨厌。 问题线程中有很多评论，因此我将尝试扩展[…]

The phenomenon is apparently known as “flash of unstyled content” in general, and “flash of unstyled text” in particular. Searching for “FOUC” and “FOUT” gives more info.

显然，这种现象通常被称为“未样式化内容的闪烁”，特别是被称为“未样式化文本的闪烁”。 搜索“ FOUC”和“ FOUT”可获得更多信息。

I can recommend web designer Paul Irish’s post on FOUT in connection with web fonts.

我可以推荐Web设计师Paul Irish在FOUT上发布的有关Web字体的文章 。

What one can note is that different browsers handle this differently. I wrote above that I had tested Opera and Chrome, who both behaved similarly. All WebKit based ones (Chrome, Safari, etc.) choose to avoid FOUT by not rendering web font text with a fallback font during the web font loading period. Even if the web font is cached, there will be a render delay. There are a lot of comments in this question thread saying otherwise and that it is flat out wrong that cached fonts behave like this, but e.g. from the above link:

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

In what cases will you get a FOUT

在什么情况下您会得到FOUT

• Will: Downloading and displaying a remote ttf/otf/woff

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

• Will: Displaying a cached ttf/otf/woff

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

• Will: Downloading and displaying a data-uri ttf/otf/woff

  意志：下载并显示数据-uri ttf / otf / woff

• Will: Displaying a cached data-uri ttf/otf/woff

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

• Will not: Displaying a font that is already installed and named in your traditional font stack

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

• Will not: Displaying a font that is installed and named using the local() location

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

Since Chrome waits until the FOUT risk is gone before rendering, this gives a delay. To which extent the effect is visible (especially when loading from cache) seems to be dependent on among other things the amount of text that needs to be rendered and perhaps other factors, but caching does not completely remove the effect.

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

Irish also has some updates concerning browser behavior as of 2011–04–14 at the bottom of the post:

爱尔兰语也自2011年4月14日起在浏览器底部提供了一些有关浏览器行为的更新：

• Firefox (as of FFb11 and FF4 Final) no longer has a FOUT! Wooohoo!http://bugzil.la/499292 Basically the text is invisible for 3 seconds, and then it brings back the fallback font. The webfont will probably load within those three seconds though… hopefully..

  Firefox (从FFb11和FF4 Final开始) 不再具有FOUT！ hoo！ http://bugzil.la/499292基本上，该文本在3秒钟内是不可见的，然后带回该后备字体。 不过，Webfont可能会在这三秒钟内加载...希望..

• IE9 supports WOFF and TTF and OTF (though it requires an embedding bitset thing– mostly moot if you use WOFF). HOWEVER!!! IE9 has a FOUT. :(

  IE9支持WOFF，TTF和OTF(尽管它需要嵌入位 设置的东西 -如果使用WOFF，则大多数情况下没有意义)。 然而！！！ IE9有一个FOUT。 :(

• Webkit has a patch waiting to land to show fallback text after 0.5 seconds. So same behavior as FF but 0.5s instead of 3s.

  Webkit有一个补丁等待 0.5秒后显示后备文本。 因此行为与FF相同，但是0.5s而不是3s。

If this was a question aimed for designers, one could go into ways to avoid these kinds of problems such as webfontloader, but that would be another question. The Paul Irish link goes into further detail on this matter.

如果这是针对设计人员的问题，则可以采用某种方式来避免此类问题，例如webfontloader ，但这将是另一个问题。 保罗·爱尔兰(Paul Irish)的链接在此问题上有进一步的详细说明。

---

---

Have something to add to the explanation? Sound off in the the comments. Want to read more answers from other tech-savvy Stack Exchange users? Check out the full discussion thread here.

有什么补充说明吗？ 在评论中听起来不对。 是否想从其他精通Stack Exchange的用户那里获得更多答案？ 在此处查看完整的讨论线程 。

翻译自: https://www.howtogeek.com/149231/why-dont-web-pages-immediately-display-their-text/

网页 选中文本 不显示菜单