Javascript Jquery Ajax函数使用异步和同步请求的场景

背景

Ajax技术算是目前比较常见的技术了，AJAX应用可以仅向服务器发送并取回必须的数据，并在客户端采用JavaScript处理来自服务器的回应。因为在服务器和浏览器之间交换的数据大量减少，服务器回应更快了。我的博客的文章评论系统就是使用Ajax向后台动态的请求评论数量和评论内容，最近我在测试时发现一个问题，在进入文章页面时会卡一下然后才加载所有页面，经过排查是Ajax async属性使用不当造成了，下面复盘一下排查经过。

过程

排查的时候我打开了谷歌浏览器的性能检测页面

图中红色部分表示浏览器没有跑到60帧，表现在界面上就是浏览器一卡一卡的，显示为红色区域的上半部分有一个函数 GetAllByConnectId，这个是请求评论的函数，看来是这个函数因为某种情况阻塞了浏览器的进程从而导致卡顿。

GetAllByConnectId的源代码如下：

                $.ajax({
                    url: "url",
                    type: "get",
                    dataType: "json",
                    async: false,    // 这个需要写上
                    cache: false,
                    processData: false,// 不处理数据
                    contentType: false, // 不设置内容类型
                    success: function (data) {
                        refresh(data);

                    }
                });

发现这里有一个参数 async: false ，通过查询Jquery官网，这个参数的含义如下：

默认情况下，所有请求都是异步发送的（即true默认设置为）。如果您需要同步请求，请将此选项设置为false。跨域请求和dataType: "jsonp"请求不支持同步操作。请注意，同步请求可能会暂时锁定浏览器，从而在请求处于活动状态时禁用任何操作。从 jQuery 1.8开始，不推荐使用async: falsewith jqXHR( $.Deferred)；您必须使用成功/错误/完成回调选项而不是 jqXHR 对象的相应方法，例如jqXHR.done().

就是说这个参数为false的时候，ajax会以同步模式请求后端，只有等该请求执行完毕以后，浏览器才会执行其他操作，看来这就是问题所在，我把该参数改成true以后再进行性能检测，结果如下：

可以看到效果明显好多了，实际体验也没有卡顿的感觉了。

后来的时候才发现这段代码是从另一个地方拷贝过来的，那一段的逻辑是用户通过ajax提交评论以后再通过ajax获取评论的最新数量，因为是两个ajax请求并且有先后顺序，所以才设置成同步模式的~~????