脚本下载会阻塞 Mobile Safari 首屏渲染

iOS Safari 存在一个 bug，下载中的脚本会阻塞页面显示，与脚本位置、属性无关。动态创建 script 标签并异步回调加载能避免阻塞，显著提升 Mobile Safari 首屏渲染时间，改善体验。通过 rAF 后延迟加载脚本可实现优化。

复现问题的文档显示，若页面加载空文件并模拟 2 秒网络延迟，iOS 上会出现与延迟时间对应的白屏。填充足够可见文本（201 个非空字符）能提前首屏渲染，使用 hack（填充大量零宽空格）可以部分缓解问题。iOS 12 及之后版本的 Safari 协同、defer 属性无效，hack 方案效果明显但仍然慢于桌面浏览器。

解决方法是 rAF 回调中加载脚本，避免渲染阻塞。Safari 中 rAF 回调执行顺序与预期不一致，Chrome 先白屏后显示，而 Safari 先显示内容后白屏。使用 Safari 开发工具的 Timeline 观察不同加载方式差异。

除了 rAF、setTimeout 和 requestIdleCallback，浏览器内回调函数可利用 observer/event 创建。对不同回调执行顺序和效率进行比较，总结发现特定执行顺序与效率差异。多次调用不同回调测试结果，进一步分析发现实际应用中应考虑回调执行效率与顺序。

您可能感兴趣问答

Collapsible

热门标签

热点问答