Javascript加載執行順序


本文主要內容

一、不同位置的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();
            }
        }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM