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

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

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

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

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

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

通常来说，浏览器对于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>

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>

页面上的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阻塞浏览器渲染导致的结果

引用顺序从上到下加载

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

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

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

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

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

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

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

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

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

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