Web性能：远程启动渲染时间

Question

为什么到目前为止我有启动渲染时间？

为什么浏览器在下载css和JS时会等待渲染？

我的结果： https://www.webpagetest.org/result/170518_GZ_13B6/ 要么 https://www.webpagetest.org/result/170518_4Q_13B9/

感谢您的建议！ ： - ）

Answer 1

对我来说最重要的是HTML文档的大小。它大约500 KB未压缩，有近5000个DOM元素。你的CSS和JS也很庞大：https://www.webpagetest.org/result/170518_GZ_13B6/1/breakdown/

所以在我看来，浏览器无法快速呈现您的页面，因为它首先需要：

• 加载并生成500 KB HTML的DOM
• 加载并解析500 KB的CSS
• 加载并解析1.4 MB的JS
• 执行JS（仅约400毫秒固体）
• 基于JS / CSS
重排和重新布局内容

您可以通过仅在浏览器视口中包含内容并在页面加载之前推迟不必要的脚本/样式/标记来确定初始页面加载的优先级。