异步调用js的几种方法

关注

转载最新推荐文章于 2026-07-03 10:55:41 发布 9.6k 阅读 AI 写同款· GEO 优化 ›

前端首屏优化 | 借助客户端能力提升 H5 首屏的 8 个手段之前写了一篇文章，聊到了如何根据来梳理性能优化方案，反响还不错。于是，我计划输出「前端首屏优化」专栏系列，从不同角度聊聊首屏优化实践，包括且不限于防劣化、工程体系、端能力等，欢迎关注 ✨✨。作为专栏的第一篇，本文将从客户端角度，聊聊如何借助优化前端首屏加载速度。除了方案介绍，本文还会提供数据收益、注意事项、开发成本等，以帮助大家更好的评估实现优先级，选择合适业务的方案。本文主要是经验和原理之谈，不涉及客户端代码实现，比较适合想开拓视野的。上图为通用的利用分类思维，对该流程进行。阅读详情

Ext.Ajax.request({
                url : urlStr,
                params : paramsObj,
                method : 'POST',
                success : function(response) {
                     if (callbackFunc) {
                         var result = Ext.util.JSON
                                .decode(response.responseText);
                         var cbfn = callbackFunc.createCallback(result);
                        cbfn();
                    }
                },
                failure : function() {
                    Ext.Msg.alert("提示", "方法调用失败");
                }
            });
}

Jquery ajax 的 $.ajax(),$.post(),$.get(),$.getJSON();

$.ajax({

                    type: "post",

                    url: "JqueryCSMethodForm.aspx/GetNowDate",

                    datatype: "json",

                    contentType: "application/json; charset=utf-8",

                    success: function(data) {

                        $("input#showTime").val(eval('(' + data.d + ')')[0].nowtime);

                    },

                    error: function(XMLHttpRequest, textStatus, errorThrown) {

                        alert(errorThrown);

                    }

                });

jQuery.post( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

http://api.jquery.com/jQuery.post/

jQuery.get( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

$.get("test.cgi", { name: "John", time: "2pm" },
    function(data){
     alert("Data Loaded: " + data);
   });

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
  {
    tags: "cat",
    tagmode: "any",
    format: "json"
  },
   function(data) {
    $.each(data.items, function(i,item){
      $("<img/>").attr("src", item.media.m).appendTo("#images");
       if ( i == 3 ) return false;
    });

默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。

(1) defer，只支持IE
defer属性的定义和用法（我摘自w3school网站）
defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。
有的 javascript 脚本 document.write 方法来创建当前的文档内容，其他脚本就不一定是了。

如果您的脚本不会改变文档的内容，可将 defer 属性加入到 <script> 标签中，以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。
示例：
复制代码代码如下:
<script type="text/javascript" defer="defer">
alert(document.getElementById("p1").firstChild.nodeValue);
</script>

(2) async：
async的定义和用法(是HTML5的属性)
async 属性规定一旦脚本可用，则会异步执行。
示例：
复制代码代码如下:
<script type="text/javascript" src="demo_async.js" async="async"></script>

注释：async 属性仅适用于外部脚本（只有在使用 src 属性时）。
注释：有多种执行外部脚本的方法：
•如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
•如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
•如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

(3) 创建script，插入到DOM中，加载完毕后callBack，见代码：
复制代码代码如下:
function loadScript(url, callback){
var script = document.createElement_x("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others: Firefox, Safari, Chrome, and Opera
script.onload = function(){
callback();
};
}
script.src = url;
document.body.appendChild(script);
}