DOM加載順序

時間 2019-11-06

標籤 dom 加載順序欄目 HTML 简体版

原文原文鏈接

　　最近一直在困擾dom的加載順序問題，常常會遇到覺得綁定好的事件不響應等狀況，一頭霧水，直到請教了周圍的同事，才發現瞭解dom的加載順序是多麼的重要。javascript

　　關於這個問題，其實網上已經有一些介紹，可是我以爲並非特別準確，因此仍是把本身理解的整理一下~css

　　瀏覽器解釋html文件中的全部內容是從上到下加載的！瀏覽器解釋html文件中的全部內容是從上到下加載的！瀏覽器解釋html文件中的全部內容是從上到下加載的！重要的事情說三遍。html

找到CSS和JS的正確位置

　　因此咱們寫文件的時候，要把CSS樣式寫在head中，若是放底部的話，頁面結構出來了，css還沒開始渲染。然而js文件卻應該儘可能放在下面，除了少許輕量級、而且很是重要的js能夠放在上面之外，剩下的都應該寫在body底部或body下面，尤爲是大一些的js文件，最好也在最後引入。java

加載順序

　　如今就來講說dom的加載順序，其實dom的加載真的就是從上到下啊，都打好冒號敲好回車了居然仍是以爲寫成一段話比較明白。瀏覽器解釋文件會從上到下順序解釋，遇到樣式就把樣式加載到內存，遇到標籤就加載標籤，遇到js就加載js，遇到文件就先下載文件，而後加載裏面的內容，加完完內容以後就回到原ng頁面接着解釋。。。就是醬紫。。。python

可是若是就是醬紫哪裏還用得着寫一篇博客呢？首先，今天咱們說的全部都圍繞「瀏覽器解釋html文件中的全部內容是從上到下加載的」這句話閘門開的，因爲這個特性，會致使不少問題。jquery

不遇到不知道坑——知識點一

　　那麼重點來了，首先在js方法調用上，因爲都是解釋型語言，因此和python同樣，若是咱們調用一個js中的方法，而這個js咱們是在調用方法以後才引入，就會出現問題。例如：瀏覽器

<script src="/static/js/tree.js"></script>
<script src="/static/js/jquery-1.11.1.min.js"></script>

如上，若是咱們在tree.js裏面用到了jquery-1.11.1.min.js中的內容，加載的時候就會出問題。。。簡單來講就是它還木有解釋道後面的js，也就不知道你寫的是什麼啦~~~dom

不遇到不知道坑——知識點二

　　還有一點，咱們在初學js的時候，很喜歡給標籤綁定function,就像下面這樣！異步

<script type="text/javascript">
    $(".nav").on("click","li",function(){
         alert(1)
    });
</script>
<ul class='nav'>
    <li>example blablabla<li>
</ul>

　　如上例，若是你寫成上面那個樣子，你就完了！！！由於解釋到「$(".nav").on("click","li",function(){」的時候尚未這個nav class呢！這個時候怎麼辦呢？ide

<ul class='nav'>
    <li>example blablabla<li>
</ul>
<script type="text/javascript">
    $(".nav").on("click","li",function(){
        alert(1)
      });
</script>

View Code

<body>
    <script type="text/javascript">
        $("body").on("click",".nav li",function(){
            alert(1)
          });
    </script>
    <ul class='nav'>
        <li>example blablabla<li>
    </ul>
</body>

View Code2

<script type="text/javascript">
    $(function(){
    $(".nav").on("click","li",function(){
        alert(1)
      });
    });
</script>
<ul class='nav'>
    <li>example blablabla<li>
</ul>

View Code3

　　上面有三種解決方法，第一種就是把nav放上面去，先加載nav class，再綁定事件；第二種方法是把方法綁到已經加載的body上去，由於body是早就存在的標籤了，這裏比較有意思的是on方法，它的參數分別是event，target和function，這個target是click事件被觸發的時候纔去找的，因此也就不會受順序問題影響了；最後一種方法，$(function(){}），這個是很是好用噠，意思是等到整個頁面加載完成以後，再執行裏面的方法，也就是說，咱們有了這個方法，無論這個nav寫在哪裏，只要等到加載完在去綁定方法，就ok啦~~~

　　就是醬，上面的三種方法，第2種和第3種都比較經常使用，第三種方法比較好理解了，第二種方法每每在實際的操做中容易出錯，可是用好了能夠發揮更大的做用，本身體會下吧。

　　有了上面這些基礎，就算遇到異步加載等複雜的問題，其實也是由最基本的緣由引發的，遇到問題不要慌，一點點的尋找緣由，計算機很單純，你說1它不會作2，總之它不對，必定不是它的錯~~~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。