一、JavaScript在HTML中的加载顺序

1. 正常网页加载流程

从上到下运行，先解析<head>标签中的代码

  • <head>标签中会包含一些引用外部文件的代码，从开始运行就会下载这些被引用的外部文件。当遇到<script>标签时，浏览器暂停解析（不是暂停下载），将控制权交给JavaScript引擎（解释器）。
    　　如果<script>标签引用了外部脚本，就下载该脚本，否则就直接执行，执行完毕后将控制权交给浏览器渲染引擎。
  • 当<head>中代码解析完毕，会开始解析<body>中的代码。如果此时<head>中引用的外部文件没有下载完，将会继续下载。浏览器解析＜body＞代码中的元素，会按照＜head＞中声明一部分样式去解析。
    　　如果此时遇到＜body＞标签中的<script>，同样会将控制权交给JavaScript引擎来解析JavaScript。解析完毕后将控制权交还给浏览器渲染引擎，当body中的代码全部执行完毕并且整个页面的css样式加载完毕后，css会重新渲染整个页面的html元素。
  • 如果在<body>加载完之前写JavaScript 可能会造成JavaScript 找不到页面元素。经常将<script>写到head中，body中不会有大量的JS代码，body中的html代码结构会比较清晰。

2. 加载JavaScript过程

  • 浏览器加载JavaScript时有个特点，那就是载入之后立即就会执行（先编译后执行），因为JavaScript可能会影响DOM树的结构，所以浏览器在执行完后才能继续加载下面的HTML内容，即浏览器下载并执行JavaScript的过程会阻塞DOM树的继续建立；
  • JavaScript中$(function() {....})是jQuery 中的经典用法，即在页面加载完成后才执行某个函数。如果函数中要操作DOM，在页面加载完成后再执行会更安全，$(document).ready()里的代码也是在页面内容都加载完才执行的；
  • 如果把代码直接写到<script>标签里，当页面加载完这个script标签就会执行里边的代码；此时如果你标签里执行的代码调用了当前还没加载过来的代码或者DOM，就会报错。当然如果你把script标签放到页面最后面那么就没问题了，此时和ready效果一样，不过不建议这么写。

3. Window onload和Document ready的区别

window onload是整个页面（包括资源文件）加载完成，document ready是整个DOM结构树解析渲染完成，比如你有个特别大的图片，图片还没有加载出来 document 可能已经 ready 了，但图片加载完了 window 才 onload。

  • 即Window onload 是 dom树 + 资源文件，加载完成之后才执行；
  • Document ready是 dom树 结构绘制完毕就执行。

4. $(...)和document.getElementBy...的区别?

答： $(#id) 得到的是jQuery 对象，是一个对dom 进行包装的对象，如html() 是jQuery 对象的方法。
document.getElementById(…) 是dom 对象，可以看作javascript 自带的对象。

$("#...").htm(); 	等价于 document.getElementById("...").innerHTML
$("#...").html("更改span内容");      等价于 document.getElementById("...").innerHTML="更改span内容“;

一个是JS对象，一个是jQuery对象，可互相转换：

var jsObj = $("#xx")[0];
jsObj = $("#xx").get(0);
var jsObj1 = document.getElementById("xx");
var $jqueryObj = $(jsObj);



二、ajax在js文件中的执行顺序
$(function(){
	
	$.ajax({  
		url: "index.aspx/login",
		data: "{}",
		type : 'post',
		dataType : "json",
	    async:true,   		               //异步请求
        //alert("3.第三步执行"),     不行这里不能写函数操作或者其他
	      
		success: function(result){  
	    	if(result!=null){
		    	getsuccess();
			}
			alert("3.success成功返回结果再执行里面的操作，所以是第4步");
		}
    });
	alert("1.因为ajax设置了异步请求，这一步先执行");
	alert("2.顺序执行第二步");
});

问：点击页面上一个按钮，触发电机事件函数，函数中有多个ajax（没有嵌套），其中一个请求会不会等待另一个请求执行完毕之后再执行？

答：这两个异步请求会同时发送，至于执行的快与慢，要看响应的数据量的大小及后台逻辑的复杂程度。从异步请求的执行原理来看，我们知道当一个异步请求发送时，浏览器不会处于锁死、等待的状态，从一个异步请求发送到获取响应结果的期间，浏览器还可以进行其它的操作，这就意味着多个异步请求的执行时并行的。