JavaScript和ajax执行顺序比较

以你之姓@ 2022-05-14 04:51 332阅读 0赞

#### 一、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（没有嵌套），其中一个请求会不会等待另一个请求执行完毕之后再执行？

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