DOM加載順序
最近一直在困擾dom的加載順序問題，經常會遇到以為綁定好的事件不響應等情況，一頭霧水，直到請教了周圍的同事，才發現了解dom的加載順序是多麽的重要。
關於這個問題，其實網上已經有一些介紹，但是我覺得並不是特別準確，所以還是把自己理解的整理一下~
瀏覽器解釋html文件中的所有內容是從上到下加載的！瀏覽器解釋html文件中的所有內容是從上到下加載的！瀏覽器解釋html文件中的所有內容是從上到下加載的！重要的事情說三遍。
找到CSS和JS的正確位置所以我們寫文件的時候，要把CSS樣式寫在head中， 如果放底部的話，頁面結構出來了，css還沒開始渲染。然而js文件卻應該盡量放在下面，除了少量輕量級、並且非常重要的js可以放在上面以外，剩下的都應該寫在body底部或body下面，尤其是大一些的js文件，最好也在最後引入。
現在就來說說dom的加載順序，其實dom的加載真的就是從上到下啊，都打好冒號敲好回車了竟然還是覺得寫成一段話比較明白。瀏覽器解釋文件會從上到下順序解釋，遇到樣式就把樣式加載到內存，遇到標簽就加載標簽，遇到js就加載js，遇到文件就先下載文件，然後加載裏面的內容，加完完內容之後就回到原ng頁面接著解釋。。。就是醬紫。。。
但是如果就是醬紫哪裏還用得著寫一篇博客呢？首先，今天我們說的所有都圍繞“瀏覽器解釋html文件中的所有內容是從上到下加載的”這句話閘門開的，由於這個特性，會導致很多問題。
不遇到不知道坑——知識點一
那麽重點來了，首先在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，也就不知道你寫的是什麽啦~~~
不遇到不知道坑——知識點二
還有一點，我們在初學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呢！這個時候怎麽辦呢？
<ul class=‘nav‘>
<li>example blablabla<li>
</ul>
<script type="text/javascript">
$(".nav").on("click","li",function(){
alert(1)
});
</script>
<ul class=‘nav‘>
<li>example blablabla<li>
</ul>
<script type="text/javascript">
$(".nav").on("click","li",function(){
alert(1)
});
</script>
<body>
<script type="text/javascript">
$("body").on("click",".nav li",function(){
alert(1)
});
</script>
<ul class=‘nav‘>
<li>example blablabla<li>
</ul>
</body>
<body>
<script type="text/javascript">
$("body").on("click",".nav li",function(){
alert(1)
});
</script>
<ul class=‘nav‘>
<li>example blablabla<li>
</ul>
</body>
<script type="text/javascript">
$(function(){
$(".nav").on("click","li",function(){
alert(1)
});
});
</script>
<ul class=‘nav‘>
<li>example blablabla<li>
</ul>
<script type="text/javascript">
$(function(){
$(".nav").on("click","li",function(){
alert(1)
});
});
</script>
<ul class=‘nav‘>
<li>example blablabla<li>
</ul>
上面有三種解決方法，第一種就是把nav放上面去，先加載nav class，再綁定事件；第二種方法是把方法綁到已經加載的body上去，因為body是早就存在的標簽了，這裏比較有意思的是on方法，它的參數分別是event，target和function，這個target是click事件被觸發的時候才去找的，所以也就不會受順序問題影響了；最後一種方法，$(function(){}），這個是非常好用噠，意思是等到整個頁面加載完成之後，再執行裏面的方法，也就是說，我們有了這個方法，不管這個nav寫在哪裏，只要等到加載完在去綁定方法，就ok啦~~~
就是醬，上面的三種方法，第2種和第3種都比較常用，第三種方法比較好理解了，第二種方法往往在實際的操作中容易出錯，但是用好了可以發揮更大的作用，自己體會下吧。
有了上面這些基礎，就算遇到異步加載等復雜的問題，其實也是由最基本的原因引起的，遇到問題不要慌，一點點的尋找原因，計算機很單純，你說1它不會做2，總之它不對，一定不是它的錯~~~
DOM加載順序