关于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...

解决办法: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...

提交页面出现提示: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...

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

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

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

参考文章 Extjs创建多个controller实现多模块MVC动态加载已实现了一个app加载多个controller的功能, 即点击左侧菜单栏,加载新模块的controller且下面的view ...

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

$("#fhsmsCount").html(Number(fhsmsCount));    //站内信未读总数  $("#fhsmsCount").text(Number(fhsmsCoun...

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

恩,就是这样 参考:http://blog.csdn.net/xllily_11/article/details/51879420

web 前端入坑第一篇:web前端到底是什么?有前途吗

web前端到底是什么?某货: “前几年前端开发人员鱼目混杂,技术参差不齐,相对学习起来不规范,导致> 前端开发人员聚集,所以现在前端工种和工资还是没得到普遍重视,但近2年来,> > HTML5、JS ...

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to th

这个警告并不是错误,不是逻辑和代码错误,而是浏览器检测出来的一种不建议写法和用法的一种警示,完全不影响程序的执行和正常运行。 翻译:XMLHttpRequest 发送ajax请求,运行在浏览器的主线...

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

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

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