测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
</head>
<style type="text/css">
img{
width: 50px;
height: 50px;
}
div{
background-color: blue;
height: 200px;
width: 200px;
}
</style>
<body>
<div></div>
</body>
<script>
$(function(){
$("div").css("background-color","yellow")
})
window.onload = function(){
var test = document.getElementsByTagName("div")[0];
console.log(test)
test.style.backgroundColor = "red";
}
</script>
</html>
显示结果
分析
按照正常的思路,onload在整个文档加载结束后才运行,
ready()在DOM结构加载完成就开始运行。因此onload应该比ready()慢才对。然而这里看到的结果不然。
经测试发现使用 jQ3 并且 加载的图片等资源少的情况下才会出现此问题,而使用jQ2则不会出现此问题
估计是jq3内部运算代码优化了,对于加载资源少的话,onload和ready() 加载速度差不多。
对于图片、超链接等加载资源少的情况下,只有文本之类的情况下,onload和ready加载速度是差不多的。