Question

我注意到一个非常奇怪的镀铬瀑布，暗示CSS图像和其他图像阻止了第一次绘画。我隐藏了渲染事件，但它们在整个瀑布中混合在一起（您可以在www.lonestarpercussion.com上自行加载）

我不确定为什么chrome等待这么长时间来第一次绘制窗口，它应该在加载图像之前绘制，并在加载javascript文件之前绘制（对整体布局都不重要）

HTML的简化大纲看起来有点像这样

<html>
<head>
   <script> <!-- inline google analytic scripts -->
   <script> <!-- other inline script -->
   <link>
</head>
<body>
   <img>
   <img>
   <script> <!-- note : no async, not deferred -->
   <script> <!-- note : no async, not deferred -->
</body>

有什么想法吗？

Waterfall for lonestarpercussion.com

Answer 1

事实证明 - 瀑布只是误导。我创建了一个小脚本，在返回模拟一个非常大的文件之前等了10秒，然后用脚本的url替换了所有对图像的引用。

事实证明，只有头部的css阻止了渲染 - 其余的文件显示为阻塞，但只是巧合，他们在绘制命令之前完成下载。

CSS图像和其他阻止第一个画图

1 个答案: