关于chrome控制台警告:Synchronous XMLHttpRequest on the main thread终极解决办法

原创 2016年07月11日 14:36:25


背景:  

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/.



解释: 这个警告并不是错误,不是逻辑和代码错误;而是浏览器检测出来的一种不建议写法和用法的一种警示,完全不影响程序的执行和正常运行!

但是,【注意我这里说的是但是,一般也很重要】:我是连警告框都无法容忍的,因为我就是这么极客 这么帅!。那么这个烦人的黄色警告,到底是什么意思和怎么解决掉呢?

结论和现象: 我发现有不少同学,也遇到过这个问题和疑惑,并且根据网络其他大神的总结和分析,完全解决不掉!那是因为他们总结的:只知其一,不知其二;

那么我们来分析下为什么会出现这样的场景和 在什么情况下会出现这个警告,并且怎么解决!

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

翻译结果:大体意思是  XMLHttpRequest  【ajax】发送请求,是在浏览器js的主线程上,ajax同步发送请求引起的,这样会引起很不好的用户体验,可能导致浏览器卡死等等!

1.AJAX 请求

2.主线程-单线程

3.同步请求引起的阻塞,卡死

总结:一个是Ajax请求分异步和同步2种模式。如果请求是同步的,在请求返回之前线程会一直阻塞,如果请求是在主线程中发起的,那就会造成整个浏览器阻塞。
另外一个就是主线程。这段话应该是针对HTML5说的,因为在HTML5以前,JavaScript是完全的单线程方式,主线程之外不存在其他线程。但在HTML5中增加了Worker对象,每个Worker运行在一个独立的线程中,Worker线程被阻塞一般是不会影响主线程和浏览器的。因此,如果非要使用同步的Ajax(这种情况应该很少见),那就放到Worker线程中吧,千万千万不要放到主线程里。

web worker 是运行在后台的 JavaScript,不会影响页面的性能。

什么是 Web Worker?

当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。

web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。


-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

真实情况:我们根本无需增加思想负担。了解什么work、新的api、和多线程消息机制等!我们解决它,只需要遵循以下2点一般就可以解决

1.AJAX 请求 变为异步:这也是ajax默认方式,不然用ajax也失去了本质意义,同步很少

async: false   // 轻轻方式-异步

2.接受的请求,返回一个html代码段,里面包含了<script src="/scripts/script.js"></script>  这样脚本文件引用! 才会出现这种警告!

<div> 
 SOME CONTENT HERE
</div>
<script src="/scripts/script.js"></script> 

备注:这样的情况很多,比如你要请求一段html 用于局部刷新显示到页面,或者请求后台模版,而这段html里 还有<script scr="xx.js"></script> 引用,就会出险上述警告

解决办法:依据第二点

1.请将 <script src="/scripts/script.js"></script> 提前写入前台页面,从发送过来的HTML 代码段剥离出去,亲测有效!国外网友也是这样总结!

2.将引用的外部js脚本文件,写到dom里面,以

<script type="text/javascript">

console.log('我是外部js内容,现在通过script 标签写到到html里');

</script>

亲测有效!


总之:如果请求HTML代码段或者HTML模版,不要直接引入外部js的方式就可以,有很多技巧,大家自行发挥,还要2种方式可以解决;想好了给我留言 哈哈哈!

提示你: $.getScript('jsUrl', function() {
            // console.log(jsUrl[i] + " 加载完毕...");
        });  此法可完美hold住,又不耽误继续引用外部js脚本,吼吼吼!

加入: JS前端开发 QQ群 :147250970  欢迎加入~!气氛热情,欢乐多,妹子多!

 enlightenedweb前端 聚集地,汇聚了全国顶尖的web前端热爱者,最新技术,最炫潮流,最靠谱的话题:
  做好现在!技术只是为了改变生活!JS前端实用开发QQ群 :
147250970
Web前端HTML5/JS交流群

【前端你别闹 】webunao

可能是最帅的技术公众号

生活不只有技术,更有 欢乐 和 梦想

长按扫码关注,听我洗脑

版权声明:本文已在我的公众号 :前端你别闹(ID: webunao) 原创首发,转载请务必注明出处!,JS前端实用开发QQ群 :147250970 欢迎加入~!

关于chrome控制台警告:Synchronous XMLHttpRequest on the main thread终极解决办法

chrome控制台 提示禁告:Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimenta...
  • Sky786905664
  • Sky786905664
  • 2016年11月08日 10:14
  • 7365

提交页面出现提示:Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effe

提交页面出现提示:Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effe...
  • TivonaLH
  • TivonaLH
  • 2016年12月26日 14:38
  • 1357

解决办法:Synchronous XMLHttpRequest on the main thread is deprecated because of its

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to th...
  • zhaohongx
  • zhaohongx
  • 2015年05月12日 13:19
  • 42192

关于谷歌..Synchronous XMLHttpRequest on the main thread is deprecated because of its...

Ajax请求分异步和同步2种模式。 主要是涉及到了同步请求。 同步请求,在请求返回之前线程会一直阻塞, 请求是在主线程中发起的,那就会造成整个浏览器阻塞。 所以被禁了...
  • huxianguan1
  • huxianguan1
  • 2016年09月18日 11:40
  • 172

关于chrome控制台警告:Synchronous XMLHttpRequest on the main thread终极解决办法(解决不了看红色字体)

$("#fhsmsCount").html(Number(fhsmsCount));    //站内信未读总数  $("#fhsmsCount").text(Number(fhsmsCoun...
  • u013380777
  • u013380777
  • 2017年03月30日 09:28
  • 441

关于chrome控制台警告:Synchronous XMLHttpRequest on the main thread终极解决办法

关于chrome控制台警告:Synchronous XMLHttpRequest on the main thread终极解决办法
  • qq_31924435
  • qq_31924435
  • 2016年12月22日 18:46
  • 361

未解决:Ext动态加载controller时出现Synchronous XMLHttpRequest on the main

参考文章 Extjs创建多个controller实现多模块MVC动态加载已实现了一个app加载多个controller的功能, 即点击左侧菜单栏,加载新模块的controller且下面的view ...
  • jinyulong84
  • jinyulong84
  • 2017年03月30日 15:01
  • 308

关于chrome控制台警告:Synchronous XMLHttpRequest on the main thread终极解决办法

恩,就是这样 参考:http://blog.csdn.net/xllily_11/article/details/51879420
  • hacker_Lees
  • hacker_Lees
  • 2017年06月19日 18:16
  • 454

error:chrome控制台警告:Synchronous XMLHttpRequest on the main thread...

完整警告:Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects ...
  • fgx_123456
  • fgx_123456
  • 2017年08月27日 22:08
  • 99

主线程中同步的 XMLHttpRequest 已不推荐使用,因其对终端用户的用户体验存在负面影响。

最近写前端页面,使用ajax请求数据时,遇到一个提示信息: 主线程中同步的 XMLHttpRequest 已不推荐使用,因其对终端用户的用户体验存在负面影响。更多帮助请见 http://xhr.s...
  • lanyang123456
  • lanyang123456
  • 2017年05月20日 15:32
  • 5133
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于chrome控制台警告:Synchronous XMLHttpRequest on the main thread终极解决办法
举报原因:
原因补充:

(最多只允许输入30个字)