把自己的控制台变得干干净净!

最新推荐文章于 2024-09-14 13:53:06 发布

三橘泽

最新推荐文章于 2024-09-14 13:53:06 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/wwyyzz1997/article/details/114884729

版权

前端同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

程序人生

1 篇文章 0 订阅

订阅专栏

本文讲述了如何处理JavaScript中的控制台警告，包括非被动事件监听器警告、同步XMLHttpRequest警告、SourceMap加载失败警告和加载事件处理延迟警告。通过升级jQuery、修改事件监听器设置、调整HTML中脚本的加载方式以及优化Sass或Less生成的CSS文件，可以显著改善控制台的整洁度并提高页面响应速度。

摘要由CSDN通过智能技术生成

程序的主页控制台总有一些奇奇怪怪的警告和console，虽然不会影响程序运行，但是总看着不舒服，就下定决心把他们都干掉。

首先要干掉的是这个，因为这个警告一出来就是好几千条。
[Violation] Added non-passive event listener to a scroll-blocking ‘touchstart’ event. Consider marking event handler as ‘passive’ to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

原因：谷歌浏览器51版本以后，对touch和wheel事件绑定时新增加一个passive的属性，又因为我的jquery版本过低（v.1.10.2），没有兼容到新的规则所以事件绑定时就会报错。（什么你说你版本够高，不会报错？）
解决办法：在jquery源码中，给元素添加监听事件时，进行区分：如果是谷歌浏览器（其他浏览器就看情况加了）且版本在51之上，就多加一个属性 passive: false。

if ( elem.addEventListener ) {
// 去掉 谷歌passive警告
	var needPassive = false;
	switch (type) {
		case "touchstart":
			needPassive = true;
			break;
		case "touchmove":
			needPassive = true;
			break;
		case "mousewheel":
			needPassive = true;
			break;
						
		default:
			needPassive = false;
			break;
}
	if (ua.indexOf("Chrome") !== -1 && parseFloat(ua.split("Chrome/")[1].slice(0,2)) > 51 && needPassive) {
		elem.addEventListener( type, eventHandle, { passive: false } );
	}else {
		elem.addEventListener( type, eventHandle, false );
	}
} else if ( elem.attachEvent ) {
	elem.attachEvent( "on" + type, eventHandle );
}

以此类推别的插件在绑定事件时也可能会出现这种情况，挨个加 {passive: false} 属性就行了。

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check https://xhr.spec.whatwg.org/.

根本原因： 在发出ajax时，传入的s.async值为 false，表示ajax为同步。但是同步的ajax方法已经被废弃了，所以警告。

直接原因： 页面使用 $.get 方法加载html文件时，html文件内部写有script标签，这些js文件引入时的请求 s.async默认为 false 。
解决办法： 将html中的script标签去掉，换成js方式的引入。
没有找到这些文件
DevTools failed to load SourceMap: Could not load content for http://localhost:8081/js/jQuery/dialoag/simplepop.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

原因：sass或者less生成css文件时会自动写入这样一行文字

解决办法：把这行字删掉。。
[Violation] ‘load’ handler took 500ms

大概原因就是帮你监听的代码执行时间，而且是偶尔出现，点下边这个就不见了(嘿嘿)