DOM加载顺序—老男孩Python培训班

    /    2019-08-09

最近一直在困扰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>
<body>
    <script type="text/javascript">
        $("body").on("click",".nav li",function(){
            alert(1)
          });
    
</script>

    <ul class='nav'>
        <li>example blablabla<li>
    </ul>
</body>

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

上面有三种解决方法,第一种就是把nav放上面去,先加载nav class,再绑定事件;第二种方法是把方法绑到已经加载的body上去,因为body是早就存在的标签了,这里比较有意思的是on方法,它的参数分别是event,target和function,这个target是click事件被触发的时候才去找的,所以也就不会受顺序问题影响了;最后一种方法,$(function(){}),这个是非常好用哒,意思是等到整个页面加载完成之后,再执行里面的方法,也就是说,我们有了这个方法,不管这个nav写在哪里,只要等到加载完在去绑定方法,就ok啦~~~

就是酱,上面的三种方法,第2种和第3种都比较常用,第三种方法比较好理解了,第二种方法往往在实际的操作中容易出错,但是用好了可以发挥更大的作用,自己体会下吧。

有了上面这些基础,就算遇到异步加载等复杂的问题,其实也是由最基本的原因引起的,遇到问题不要慌,一点点的寻找原因,计算机很单纯,你说1它不会做2,总之它不对,一定不是它的错~~~



(0)

分享至