weixin_40583091
2018-06-27 12:20
采纳率: 38.5%
浏览 2.7k

到底html与js加载顺序怎么判断?

图片说明例如,我把js代码写在了头部,有时候能常执行,而有的时候不执行,百度后说是必须文档加载完后才可以,但是我经常写在头部,获取文档节点id也没什么问题啊,
2无论js还是html在整个页面中不是从上往下执行的吗遇见函数加载,遇见html解释,
3希望有个人解释一下原理,现在好乱

4第2个图写了js代码并直接运行setInternal()为什么可以呢,div的dom树不是在下面生成的吗图片说明

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

17条回答 默认 最新

  • 已采纳

    得看你的代码结构,如果是直接执行的而不是放到dom ready或者window.onload事件中,引用到代码后面的对象100%出错,dom文档是从上到下解析的,在前面执行的代码引用到后面的dom会出错,因为还未生成,操作dom对象会出错

    放dom ready 或者onload事件中就不一样了,此时dom已经生成

    点赞 评论
  • mzx15 2018-06-27 12:31

    写在头部,获取文档节点id,应该是用的jquery获取,jquery初始化,是在文档加载完后执行的。
    无论js还是html在整个页面中不是从上往下执行的,遇见函数,前面代码定义了,就会加载,未定义,报错

    点赞 评论
  • 小小怪_s 2018-06-27 12:32

    通常来说,浏览器对于Javascript的运行有两大特性:1)载入后马上执行,2)执行时会阻塞页面后续的内容(包括页面的渲染、其它资源的下载)。于是,如果有多个js文件被引入,那么对于浏览器来说,这些js文件被被串行地载入,并依次执行。

      因为javascript可能会来操作HTML文档的DOM树,所以,浏览器一般都不会像并行下载css文件并行下载js文件,因为这是js文件的特殊性造成的。所以,如果你的javascript想操作后面的DOM元素,基本上来说,浏览器都会报错说对象找不到。因为Javascript执行时,后面的HTML被阻塞住了,DOM树时还没有后面的DOM结点。所以程序也就报错了。

      基本上来说,head里的 标签会阻塞后续资源的载入以及整个页面的生成。(在酷壳的主页中有这个例子) 。所以,你知道为什么有很多网站把javascript放在网页的最后面了,要么就是动用了window.onload或是docmuemt ready之类的事件。<br> 参考:[1]<a href="http://coolshell.cn/articles/9749.html(%E9%85%B7%E5%A3%B3%EF%BC%89">http://coolshell.cn/articles/9749.html(酷壳)</a></p>

    点赞 评论
  • zhuwen15 2018-06-27 12:34

    1.js放在head中会立即执行,阻塞后续的资源下载与执行。因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控。

      正常的网页加载流程是这样的。

    浏览器一边下载HTML网页,一边开始解析
    解析过程中,发现标签<br> 暂停解析,网页渲染的控制权转交给JavaScript引擎<br> 如果<script>标签引用了外部脚本,就下载该脚本,否则就直接执行<br> 执行完毕,控制权交还渲染引擎,恢复往下解析HTML网页<br>   如果外部脚本加载时间很长(比如一直无法完成下载),就会造成网页长时间失去响应,浏览器就会呈现“假死”状态,这被称为“阻塞效应”。html需要等head中所有的js和css加载完成后才会开始绘制,但是html不需要等待放在body最后的js下载执行就会开始绘制,因此将js放在body的最后面,可以避免资源阻塞,同时使静态的html页面迅速显示。将脚本文件都放在网页尾部加载,还有一个好处。在DOM结构生成之前就调用DOM,JavaScript会报错,如果脚本都在网页尾部加载,就不存在这个问题,因为这时DOM肯定已经生成了。</p> <p>2.js的执行依赖前面的样式。即只有前面的样式全部下载完成后才会执行js,但是此时外链css和外链js是并行下载的。</p> <p>  css需要分块,首页的css独立,其余的css需要动态加载,因为html的绘制会被css阻塞,这样可以减少首次进入时的白屏时间。</p> <p>3.外链的js如果含有defer=&quot;true&quot;属性,将会并行加载js,到页面全部加载完成后才会执行,会按顺序执行。</p> <p>  defer属性的作用是,告诉浏览器,等到DOM加载完成后,再执行指定脚本。</p> <p>浏览器开始解析HTML网页<br> 解析过程中,发现带有defer属性的script标签<br> 浏览器继续往下解析HTML网页,同时并行下载script标签中的外部脚本<br> 浏览器完成解析HTML网页,此时再执行下载的脚本<br>   对于内置而不是连接外部脚本的script标签,以及动态生成的script标签,defer属性不起作用。</p> <p>4.外链的js如果含有async=&quot;true&quot;属性,将不会依赖于任何js和css的执行,此js下载完成后立刻执行,不保证按照书写的顺序执行。因为async=&quot;true&quot;属性会告诉浏览器,js不会修改dom和样式,故不必依赖其它的js和css。 </p> <p>  async属性的作用是,使用另一个进程下载脚本,下载时不会阻塞渲染。</p> <p>浏览器开始解析HTML网页<br> 解析过程中,发现带有async属性的script标签<br> 浏览器继续往下解析HTML网页,同时并行下载script标签中的外部脚本<br> 脚本下载完成,浏览器暂停解析HTML网页,开始执行下载的脚本<br> 脚本执行完毕,浏览器恢复解析HTML网页<br>   async属性可以保证脚本下载的同时,浏览器继续渲染。需要注意的是,一旦采用这个属性,就无法保证脚本的执行顺序。哪个脚本先下载结束,就先执行那个脚本。另外,使用async属性的脚本文件中,不应该使用document.write方法。</p> <p>  一般来说,如果脚本之间没有依赖关系,就使用async属性,如果脚本之间有依赖关系,就使用defer属性。如果同时使用async和defer属性,后者不起作用,浏览器行为由async属性决定。</p>

    点赞 评论
  • govdoo 2018-06-27 12:43

    页面上的Javascript代码是HTML文档的一部分,所以Javascript在页面装载时执行的顺序就是其引入标记的出现顺序, 所以一般外部引入js写在最上面

    例如:

     <script type="text/javascript">//<![CDATA[    
      document.write('<script type="text/javascript" src="test.js"><//script>');
      document.write('<script type="text/javascript">');    
      document.write('alert(2);')    
      document.write('alert("我是" + tmpStr);');    
      document.write('<//script>');    //]]>
    </script> 
    
    <script type="text/javascript">//<![CDATA[    
      alert(3);    //]]>
    </script>
    
    test.js的内容是: 
    var tmpStr = 1;    
    alert(tmpStr); 
    

    在Firefox和Opera中的弹出值的顺序是:1、2、我是1、3
    而在IE中弹出值的顺序是:2、1、3,可能同时浏览器报错:tmpStr未定义
    原因可能是IE在document.write时,并未等待加载SRC中的Javascript代码完毕后,才执行下一行,所以导致2先弹出

    HTML解析是解析完一个HTML标签,再执行下一个的,把代码拆分来实现:

     <script type="text/javascript">//<![CDATA[
        document.write('<script type="text/javascript" src="test.js"><//script>');
            //]]>
    </script>
    <script type="text/javascript">//<![CDATA[    
        document.write('<script type="text/javascript">');    
        document.write('alert(2);')
        document.write('alert("我是" + tmpStr);');    
        document.write('<//script>');    
        //]]>
    </script>  
    

    IE下,用Document.Write方法引用js文件时,js文件会出现尚未加载就直接调用的情况,因此建议将引用的JS文件单独放在一个script块中。以确保引用的js文件完全加载后,再继续执行后面的Document.Write内容

    再或者可以使用 requirejs 框架来加载JS,可以解决JS阻塞浏览器渲染导致的结果

    点赞 评论
  • madsodo 2018-06-27 12:57

    引用顺序从上到下加载

    点赞 评论
  • 追风人聊Java 2018-06-27 13:20

    通常是从上到下去执行,最好将js文件放在所有html的最后

    点赞 评论
  • qq_26759545 2018-06-27 14:21

    document.ready(function(){ }) 和 window.load = function() { } 用这俩 可以调整 加载顺序的

    点赞 评论
  • 一只勇敢的小蚂蚁 2018-06-27 15:20

    html加载在是从上往下一次执行,写在前面就先执行

    点赞 评论
  • qq_34908714 2018-06-27 15:24

    按加载顺序执行,除非在onload或者ready函数里面

    点赞 评论
  • weixin_42004592 2018-06-27 23:09

    一般应用场景的话还是推荐使用defer

    点赞 评论
  • Amumuaaa 2018-06-28 01:46

    一般建议是写在onload中,否则容易找不到资源出错的

    点赞 评论
  • u011634294 2018-06-28 02:09

    通常是从上到下去执行,看需求 有的js放到前面,有的js放到后面

    点赞 评论
  • qq_35614854 2018-06-28 03:09

    通常是从上到下去执行,看需求 有的js放到前面,有的js放到后面

    点赞 评论
  • weixin_37141687 2018-06-28 03:19

    js 如果引用的是外链的话,需要放在body底部,引用本地js文件,可以放在head中,都是按照代码源的顺序执行加载

    点赞 评论
  • qq_33996022 2018-06-28 07:13

    html是自上到下加载 如果现放js的话 js执行脚本如果出错 就会影响整个页面布局 所以js放页面底部比较好,css是整个页面布局的 所以要放到head里优先加载

    点赞 评论
  • chenxiaochou 2018-07-19 23:18

    html 文件解析是从上到下 ,head中的先解析,然后在解析body中的 一般的外部文件引用 一般基础文件放在前面
    。不执行是因为js文件解释执行时相应的dom还未生成
    ,可以将标签放在</body>前面</p>

    点赞 评论

相关推荐 更多相似问题