首页 » 网站建设 » phpwindowonload技巧_深入理解 windowonload

phpwindowonload技巧_深入理解 windowonload

访客 2024-11-13 0

扫一扫用手机浏览

文章目录 [+]

最佳实践: JS代码的实行要放到onload里。
如果是做事端渲染带图片的列表,图片最好由JS异步加载,避免壅塞onload。

1、onload不是立即触发的

phpwindowonload技巧_深入理解 windowonload

叨教下面哪个alert先触发?

phpwindowonload技巧_深入理解 windowonload
(图片来自网络侵删)

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

作者:谢郁

标签:

相关文章

语言步骤,沟通的艺术与科学

在人际交往中,语言是传递信息、表达情感、建立关系的重要工具。并非所有的语言都能够达到预期的沟通效果。这就需要我们在沟通中运用语言策...

网站建设 2024-12-29 阅读1 评论0

语言方法心得,让文字更有力量的方法

语言是人类沟通的桥梁,是表达思想、传递情感的重要工具。在人际交往中,掌握一定的语言技巧,不仅能提升自己的表达能力,还能增强沟通效果...

网站建设 2024-12-29 阅读1 评论0

语言服务在全球化背景下的机遇与挑战

随着全球化的深入发展,语言服务已成为连接不同国家和文化的重要桥梁。在阿里巴巴集团的引领下,语言服务行业迎来了前所未有的机遇与挑战。...

网站建设 2024-12-29 阅读1 评论0

语言打包,高效沟通的方法之路

在信息爆炸的时代,沟通成为了人们日常生活和工作中不可或缺的一部分。而语言作为一种沟通工具,其重要性不言而喻。如何让语言更加高效、精...

网站建设 2024-12-29 阅读1 评论0

语言环境对儿童语言发展的影响及启示

在儿童成长的过程中,语言环境扮演着至关重要的角色。语言环境不仅影响着儿童的语言表达能力,还对其认知、思维、情感等方面产生深远影响。...

网站建设 2024-12-29 阅读1 评论0