深入理解 window.onload 深入理解课文对朗读时更好的处理重音有何帮助

suiw9 2024-11-09 14:51 46 浏览 0 评论

现象：在一个 Hybrid 应用中，用户反馈弱网条件下页面的进度条总是不消失，最后发现是页面接口先于其他资源返回，而接口中包含大量图片导致了 onload 会推迟，从而客户端控制的进度条不会消失，页面调用客户端的方法不会执行。

先放结论

onload的触发时机： JS 加载并执行完毕且页面中所有外链资源加载完成之后大约 3 - 4ms（这个值跟机型和浏览器有关）

最佳实践： JS代码的执行要放到onload里。如果是服务端渲染带图片的列表，图片最好由JS异步加载，避免阻塞onload。

1、onload不是立即触发的

请问下面哪个alert先触发？

window.onload = function() {
 alert('onload');
}
setTimeout(function(){
 alert('timeout');
}, 2)

答案是 timeout 先触发。而在我的电脑上，把 timeout 的值调成 5 或 5 以上，就是 onload 先触发了。

2、JS的执行对onload有影响

window.onload = function() {
 alert('onload');
}
var a
for (var i = 0; i < 100000000; i++) {
 a = a + i;
}

你会发现 onload 会等很久才触发，因此JS的执行最好放在onload之后。

3、动态加载的资源可能对onload产生影响

<body></body>
<script>
 window.onload = function() {
 alert('onload');
 }
 document.body.innerHTML = '<img src="a.png"> .... <img src="z.png">';
</script>

我们把网速调的慢一点，我们会很清晰的发现这种 JS 动态加进去的图片也会阻塞 onload，只有 a-z 图片都加载完成，onload 才会触发。而我们改成下面：

window.onload = function() {
 setTimeout(function() {
 document.body.innerHTML = '<img src="a.png"> .... <img src="z.png">';
 }, 10)
 alert('onload');
}

这时就会发现，onload 马上就触发了，不必等待图片加载完成。

再讲一个更实际的例子：

<img src="aaa.png">
<script>
window.onload = function() {
 alert('onload');
}
$.ajax({
 url: imgList,
 	success: function(arr) {
 arr.forEach(function() {
 $('body').append('<img src="' + arr.imgUrl + '">')
 })
 }
})
</script>

假设 aaa.png 加载时间为 100ms，ajax 接口返回时间为 50ms，那么假设 imgList 中有 100 张图片，那么 onload 的时间就会被推迟到这 100 张图片都加载完成之后。

而如果 aaa.png 加载时间为 50ms，接口请求为 100ms 的时候，就不会有这个问题。但是我们没法保证接口请求一定慢于图片请求。

因此带图片的列表请求需要放在 window.onload 之后执行。

4、onload和客户端方法的对应

iOS 中判断 webview 加载完成的 webViewDidFinishLoad 方法，Android 中判断 webview 加载完成的 onPageFinished 方法本质触发时机上都对应页面上的 window.onload，一般来说会稍晚于 window.onload（某些特殊情况会早于 window.onload，比如页面里有 iframe 等情况）。

也就是说 对 onload 有影响的因素也同样会影响这些 Native 方法。而在 Hybrid 开发中，一些 Native 和 Web 之间的交互和调用往往要在webViewDidFinishLoad / onPageFinished 之后。因此如果 onload 的触发被推迟了，那么这些 Native 相关的调用也都会被推迟。

因此如果是Hybrid应用，尤其要注意让onload尽快触发。

5、百度统计对onload的影响

var _hmt = _hmt || [];
 (function() {
 var hm = document.createElement("script");
 hm.src = "https://hm.baidu.com/hm.js?2fdsasa8f9f2f0e59e7db6c398edfbfcb1f";
 var s = document.getElementsByTagName("script")[0];
 s.parentNode.insertBefore(hm, s);
})();

上面是百度统计的代码，我们可以看到它动态加载了一个 script，而这个 script 会马上以一个小 gif 的形式发送一个上报请求，经过测试，如果页面上没有其它元素，这个 小 gif 加载完成后才会触发 onload，那么总加载时间就是 script 加载时间 + gif 加载时间。

因此应该尽量把百度统计代码提前，避免百度统计拖慢 onload 时间。百度统计官方也是建议将统计代码放在 head 中。

现实示例：

我们把网速调整到slow 3G模拟弱网环境，测试一个线上的带图片列表的项目：下面是把JS代码放在onload里执行的效果，7秒左右onload触发。

下面是把JS代码放在onload外，直接顺序执行的效果，因为要等待所有图片加载完成，等了 44秒 左右onload才触发。

希望本文能帮助到您！

点赞+转发，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓-_-）

关注｛我｝，享受文章首发体验！

每周重点攻克一个前端技术难点。更多精彩前端内容私信我回复“教程”

原文链接：http://eux.baidu.com/blog/fe/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3window.onload

作者：谢郁

loadjs

上一篇：javascript自学记录:各类事件 js事件都有哪些
下一篇：用Vue3和WebCola实现3D图的在线展示

深入理解 window.onload 深入理解课文对朗读时更好的处理重音有何帮助

先放结论

希望本文能帮助到您！

相关推荐

取消回复欢迎你发表评论:

Linux:Ubuntu22.04上安装python3.11，简单易上手

宝马阿布达比分公司推出独特M4升级套件，整套升级约在20万

MATLAB中图片保存的五种方法(一)（matlab中保存图片命令）

别再傻傻搞不清楚Workstation Player和Workstation Pro的区别了

Linux上使用tinyproxy快速搭建HTTP/HTTPS代理器

如何提取、修改、强刷A卡bios a卡刷bios工具

Element Plus 的 Dialog 组件实现点击遮罩层不关闭对话框

日本组合“岚”将于2020年12月31日停止团体活动

SpringCloud OpenFeign 使用 okhttp 发送 HTTP 请求与 HTTP/2 探索

tinymce 号称富文本编辑器世界第一，大家同意么?

深入理解 window.onload 深入理解课文对朗读时更好的处理重音有何帮助

先放结论

希望本文能帮助到您！

相关推荐

取消回复欢迎 你 发表评论:

Linux:Ubuntu22.04上安装python3.11，简单易上手

宝马阿布达比分公司推出独特M4升级套件，整套升级约在20万

MATLAB中图片保存的五种方法(一)（matlab中保存图片命令）

别再傻傻搞不清楚Workstation Player和Workstation Pro的区别了

Linux上使用tinyproxy快速搭建HTTP/HTTPS代理器

如何提取、修改、强刷A卡bios a卡刷bios工具

Element Plus 的 Dialog 组件实现点击遮罩层不关闭对话框

日本组合“岚”将于2020年12月31日停止团体活动

SpringCloud OpenFeign 使用 okhttp 发送 HTTP 请求与 HTTP/2 探索

tinymce 号称富文本编辑器世界第一，大家同意么?

取消回复欢迎你发表评论: