在上一篇文章中為什么script標(biāo)簽一般放在body下面铣焊，結(jié)尾我們給出了解決辦法，那這些解決辦法到底是什么意思呢罕伯？
1.區(qū)別##
在Jquery里面曲伊，我們可以看到兩種寫(xiě)法:
$(function(){}) 和$(document).ready(function(){})
這兩種效果是一樣的。
指的是：表示文檔結(jié)構(gòu)已經(jīng)加載完成（不包含圖片等非媒體文件）追他；
而
window.onload=function(){}
指的是：頁(yè)面包含圖片等文件在內(nèi)的所有元素都加載完成坟募。
一般情況岛蚤，一個(gè)頁(yè)面響應(yīng)加載的順序是，域名解析-加載html-加載js和css-加載圖片等其他媒體信息懈糯。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://static-online.zhaogangtest.com/publicresource/js/jquery.min.js"></script>
<script>
$(document).ready(function() {
console.log(1)
})
window.onload = function() {
console.log(3)
}
</script>
</head>
<body>
<div id="test">
我是html結(jié)構(gòu)涤妒，我要展示到頁(yè)面上！
</div>
</body>
</html>
<script>
console.log(2)
</script>
//結(jié)果為2 1 3
再次測(cè)試
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://static-online.zhaogangtest.com/publicresource/js/jquery.min.js"></script>
<script>
$(document).ready(function() {
console.log(1)
})
window.onload = function() {
console.log(3)
}
</script>
</head>
<body>
<div id="test">
<img src="http://www.ctoutiao.com/uploads/2016/11/03/1d726591cb02cf684c30f3a279769181.jpg" alt="">
我是html結(jié)構(gòu)昂利，我要展示到頁(yè)面上届腐！
</div>
</body>
</html>
<script>
console.log(2)
</script>
由于圖片很大，可以看見(jiàn)加載的過(guò)程蜂奸。先出現(xiàn)2 1，圖片加載完出現(xiàn)3
所以正驗(yàn)證上面所說(shuō)的頁(yè)面響應(yīng)加載順序硬萍，ready事件在加載js和css之后扩所，加載圖片等其他媒體信息之前。注朴乖，這里的加載css之后并不是css加載完成祖屏。而是，開(kāi)始請(qǐng)求css买羞，但由于css是異步加載的袁勺，ready事件是在dom加載完成，css加載完成之前就觸發(fā)畜普。
onload事件在加載圖片等其他媒體信息之后期丰。
注：如果script寫(xiě)在上面，一般用ready事件吃挑，即文檔結(jié)構(gòu)加載完后就加載js钝荡，而不是等到圖片加載完再執(zhí)行js，這樣反倒浪費(fèi)了時(shí)間舶衬。最好直接寫(xiě)在下面埠通，這樣就不用寫(xiě)ready事件，而且默認(rèn)直接加載完dom就加載下面的js
下面方式j(luò)query中ready事件的源碼：
document.ready = function (callback) {
///兼容FF,Google
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', function () {
document.removeEventListener('DOMContentLoaded', arguments.callee, false);
callback();
}, false)
}
//兼容IE
else if (document.attachEvent) {
document.attachEvent('onreadystatechange', function () {
if (document.readyState == "complete") {
document.detachEvent("onreadystatechange", arguments.callee);
callback();
}
})
}
else if (document.lastChild == document.body) {
callback();
}
}
通過(guò)源碼我們可以知道逛犹，本質(zhì)就是調(diào)用原生的DOMContentLoaded事件
- 當(dāng) DOMContentLoaded 事件觸發(fā)時(shí)端辱，僅當(dāng)DOM加載完成，不包括樣式表虽画，圖片舞蔽。
注:這里的dom加載完成，并沒(méi)有渲染到屏幕上狸捕，只有css加載完才會(huì)渲染到屏幕上喷鸽。具體css渲染原理可以戳這。
