为什么文本渲染比使用服务器端渲染的图像慢？

Question

我有很多例子，文字呈现的速度比几乎感觉不到的图像慢。我通过reactjs和服务器端渲染与nodejs这样做。例如，这个gif：http://recordit.co/waMa5ocwdd

显示标题图像立即加载，CSS已经加载，因为颜色存在并存在。但是，出于某种原因，文本需要差不多半秒才会出现。我该如何修复或优化它？

如果你想试验它，那么gif中的网站就是quran.com。

谢谢！

Answer 1

好的，所以调试这种东西，点击YSlow获取最新的提示等很有用。

一般情况下，记住浏览器会对页面中的每个项目（即带URL的所有内容;图片，CSS等）单独发出请求，并且大多数都有某种并发下载上限（4似乎很常见，但它会变化并且变化很大）。因此虽然12个请求不是很多，但仍然是时间。正如解析和加载JS等的时间一样。解析和加载JS会花费更多的时间（通常，在大多数浏览器中，将暂停进一步下载直到完成）

没有花费大量时间，我猜测你的HTML加载，调用标题图像，然后浏览器开始点击所有JS和反应框架代码，它需要一两秒钟的数字下一步要呈现什么。

同样，YSlow对如何优化这些事情有很多建议，但那是我的2c。

编辑：根据您的第一个问题添加详细信息。

正如我上面提到的，JS只是问题的一部分。渲染时间的总和将包括下载和解析所有内容（包括CSS等）所需的总时间。作为一个例子，在Chrome调试工具中查看它看起来需要大约300毫秒才能下载html并进行足够的解析以便下一个资源被调用。在我的浏览器中，接下来的两个是你的主要css和徽标。 PNG。大约800毫秒是您的徽标下载完成后，它几乎立即呈现。在html完成下载的时候，第一个js脚本开始下载（我不认为关闭JS会阻止发生这种情况，虽然它可能会阻止解析发生;我从来没有测试过它） 。在大约700ms的某个地方，您可以开始拉下您正在使用的字体集，看起来它们在1秒左右完成下载。你的第一个文本显示在那之后大约200ms，所以我猜测拉动和解析字体文件是持有的（当它们在其他资源后面排队时）。