最佳实践: 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 afor (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
作者:谢郁