WebPageTest :: 在加载事件之后如何开始渲染？答案

【问题标题】：WebPageTest :: How can Start Render be after the load event?WebPageTest :: 在加载事件之后如何开始渲染？
【发布时间】：2016-06-08 22:48:40
【问题描述】：

什么会导致加载事件触发后开始渲染延迟？

看看这个webpagetest result

【问题讨论】：

标签： web-performance webpagetest

【解决方案1】：

这很可能是一个错误。目前，WebPageTest 上的 iPhone 实例是相当新的，作者仍在改进它：

iOS 支持刚刚变得稳定，尽管它仍处于非常活跃的开发阶段，所以如果有一些粗糙的边缘（并且比 android 测试有更多限制），请不要感到惊讶。 - Patrick Meenan，2015 年 9 月 9 日

android 测试更可靠。

【讨论】：

【解决方案2】：

如果您检查没有使用 javascript 测试的页面（F1 > 在 Chrome DevTools 中禁用 Javascript），您会看到大多数图像都是延迟加载的，这意味着它们是通过 JS script checking if the images are in the viewport 加载的。如您所见，没有 JS，加载时间线在所有资产加载之后。

对于其他资产，如 JS，您可以添加 async or defer attribute 以取消同步脚本加载。

最后，一些脚本甚至可以在加载事件之后故意加载，使用窗口上的附件load 事件在正文中写入<script> 标签，例如loadJS 做的那样。

顺便说一下，您应该read that 以更好地了解渲染和事件计时的工作原理。

【讨论】：