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，总之它不对，必定不是它的错~~~