web - 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 重排和重新布局内容

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