WebPageTest :: 加载事件之后如何启动渲染?
WebPageTest :: How can Start Render be after the load event?
什么会导致即使在加载事件已触发后开始渲染仍延迟?
如果你在没有 javascript 的情况下检查你测试的页面(F1 > 在 Chrome DevTools 中禁用 Javascript),你可以看到大多数图像都是延迟加载的,这意味着它们通过 JS script checking if the images are in the viewport 加载。如您所见,在没有 JS 的情况下,加载时间线在加载所有资产之后很好。
对于其他资产,例如 JS,您可以添加一个 async
or defer
attribute 来使您的脚本加载不同步。
最后,一些脚本甚至可以在加载事件之后故意加载,使用 window load
事件上的附件,当它被触发时在正文中写入 <script>
标签 loadJS 举个例子。
顺便说一下,您应该 read that 更好地理解渲染和事件计时的工作原理。
这很可能是一个错误。目前,WebPageTest 上的 iPhone 实例比较新,作者仍在改进它:
The iOS support is just becoming stable though it's still under VERY active development so don't be surprised if there are a few rough edges (and a lot more limitations than the android testing).
- Patrick Meenan, 09-09-2015
android 测试更可靠。
什么会导致即使在加载事件已触发后开始渲染仍延迟?
如果你在没有 javascript 的情况下检查你测试的页面(F1 > 在 Chrome DevTools 中禁用 Javascript),你可以看到大多数图像都是延迟加载的,这意味着它们通过 JS script checking if the images are in the viewport 加载。如您所见,在没有 JS 的情况下,加载时间线在加载所有资产之后很好。
对于其他资产,例如 JS,您可以添加一个 async
or defer
attribute 来使您的脚本加载不同步。
最后,一些脚本甚至可以在加载事件之后故意加载,使用 window load
事件上的附件,当它被触发时在正文中写入 <script>
标签 loadJS 举个例子。
顺便说一下,您应该 read that 更好地理解渲染和事件计时的工作原理。
这很可能是一个错误。目前,WebPageTest 上的 iPhone 实例比较新,作者仍在改进它:
The iOS support is just becoming stable though it's still under VERY active development so don't be surprised if there are a few rough edges (and a lot more limitations than the android testing). - Patrick Meenan, 09-09-2015
android 测试更可靠。