首頁 > 開發者 > JavaScript
標籤：dom rem lis arguments callback blog htm 擷取 func
本文主要內容
一、不同位置的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(); } }
Javascript載入執行順序
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
