消除chrome小叹号提示之一:如何避免ajax请求占用主线程

在日常浏览网页的过程中,我们经常会看到在使用chrome56以上版本访问一些涉及到用户帐号、密码之类含有敏感信息的页面时,chrome浏览器的地址栏里会出现“不安全”提示,如下图:

QQ截图20170219151204.png

此时,我们采取的做法通常是把该页面开启https支持,通过https://yourdomain.com 来消除“不安全”提示,如下图:

QQ截图20170219151632.png

具体的开启https的过程,本文就不深入去介绍了。

于是在实际的应用中,作为前端的我,噼里啪啦把页面所有“http://”改成“//”,然后高呼一声:大功告成,打完收工!
然鹅。。。打开chrome控制台一看,

Paste_Image.png

chrome控制台警告:Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

20160711112134903.jpg

这是什么鬼?完成看不懂!!!!此时度娘轻蔑地传来一声:叫你不好好读书,这句的意思是XMLHttpRequest同步请求占用了主线程,导致js进程发生阻塞。
受内伤的我于是高呼一声度娘你牛逼之后,赶紧扒开代码一看,果然在一个组件里发现了几个ajax是把async设置成了false的,意思是关闭了异步请求。那赶紧把async设为true呗,然后保存、刷新一看,咦,果然发现chrome的小叹号消失了,一抹亮丽的绿色像春天的嫩芽一样出现在chrome浏览器的头上,


Paste_Image.png

完美解决!!

正当我洋洋得意再次刷新页面的时候,突然网络卡了一下,然后控制台爆出了一条红色的报错提示


Paste_Image.png

赶紧查看刚才改动的ajax,发现其中一个$.each(arr,fun)的arr参数依赖它上面的ajax返回的数据,由于刚才把这个ajax的async改成了true异步请求数据,$.each()执行时arr还没有值传过来,于是报错!很好,知道问题在哪了,解决它易如反掌:把该each写到ajax的success回调函数里不就OK了吗?但再仔细看看each的上下文,发现它必须呆在ajax的外面,不能直接写到success回调里,这就尴尬了,顿时傻眼。。。

Paste_Image.png

于是我再次汗颜,怎样解决上下文异步传值的问题????
功夫不负有钱人,通过度娘终于发现了“$.Deferred”这把杀猪刀。
上代码:

var dtd = $.Deferred();
$.ajax({
url: url,
type: 'GET',
async:true,
dataType: 'json',
cache: false
}).done(function(res){
...
dtd.resolve(res);
}).fail(function(jqXHR, textStatus, errorThrown) {
...
dtd.reject(jqXHR, textStatus, errorThrown);
});

if($.isArray(dtd)) {
var arr = dtd;
$.each(arr, function(index, val){
...`` });
}

这样通过Deferred作为管道,可以使因ajax若使用同步获取数据模式会占用js主进程导致chrome56以上会出现小叹号,若使用异步获取数据模式会导致下一步的业务逻辑因不能及时取到返回值而出现报错这两个矛盾的问题得到解决。

【总结】在给页面做https支持的时候,若遇到因ajax使用了同步请求而出现如上面的chrome浏览器出现小叹号提示的时候,请使用异步请求来解除js主线程的占用,消除小叹号。若业务逻辑需要必须使用同步请求,那么请尝试使用ajax设置为异步请求然后用Deferred来承载返回值的方法。

此外,Deferred的使用场所还有:
Ajax(XMLHttpRequest)
Image Tag,Script Tag,iframe(原理类似)
setTimeout/setInterval
CSS3 Transition/Animation
HTML5 Web Database
postMessage
Web Workers
Web Sockets
and more…

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容