本文主要內容
一、不同位置的script標簽執行順序
二、document.ready和window.onload的區別
一、不同位置的script標簽執行順序
整個加載的過程從解析頭部開始,比如html編碼格式,meta標簽等。當瀏覽器加載html文件並解析到<head>時,頁面也就是<body>並沒有被解析,瀏覽器會等到<head>中的js執行完再加載頁面。
比如直接在head的script標簽里面寫$('#AD').css("display","none");,解析完head就執行了。Id為AD的元素就不會在頁面中顯示。
head和頭部引進的script腳本最先加載並執行,處於body中的元素是在頁面加載到他的位置時候進行執行。而onload是最后執行的。
假如說你把DOM操作放在了<head>標簽里,你會發現報錯,這是因為DOM樹還沒建立,getElementById獲取的是undefined。所以說最好把<script>放在</body>之前。
二、document.ready和window.onload的區別
在Jquery里面,我們可以看到兩種寫法:$(function(){})和$(document).ready(function(){})。這兩個方法的效果都是一樣的,都是在dom文檔樹加載完之后執行一個函數(注意,這里面的文檔樹加載完不代表全部文件加載完)。
而window.onload是在dom文檔樹加載完和所有文件加載完之后執行一個函數。也就是說$(document).ready要比window.onload先執行。
Jquery里面$(document).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(); } }