一些奇奇怪怪的控制台Warnings警告整理

今天在分析网站优化的东西,看到控制台的一些 Warnings 警告,整理记录一下:

Mixed Content(混合内容):

w3h5.com/:1 Mixed Content: The page at 'https://www.w3h5.com/' was loaded over HTTPS, but requested an insecure element 'http://wpa.qq.com/pa?p=2:1209278955:51'. This request was automatically upgraded to HTTPS, For more information see https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html

这个错误是由于网页在通过 HTTPS 加载时,请求了一个不安全(非加密)的元素,比如页面中有一个 'http://wpa.qq.com/pa?p=2:1209278955:51' 链接 。浏览器会自动将这个不安全的请求升级为 HTTPS,但浏览器通常会在控制台输出这样的警告。

这种情况被称为 "Mixed Content"(混合内容),指的是在使用 HTTPS 的网页中加载了不安全的 HTTP 内容。浏览器为了用户安全会阻止这些请求,或者自动将它们升级为 HTTPS。

parser-blocking(解析阻塞)

(index):666 A parser-blocking, cross site (i.e. different eTLD+1) script, https://jspassport.ssl.qhimg.com/11.0.1.js?, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.

这个错误是因为页面中有一个脚本(https://jspassport.ssl.qhimg.com/11.0.1.js?)通过 document.write 方法写入,而且这个脚本是与当前页面不同的域(不同的 eTLD+1)加载的。浏览器引发了一个解析阻塞(parser-blocking)的警告。

解析阻塞是指浏览器在解析 HTML 文件时遇到脚本标签(例如 <script>)并调用 document.write 时会停止解析,等待脚本执行完成。在这种情况下,浏览器可能会因为网络连接较差而阻止加载这个脚本,或者在未来的页面加载中被阻止。这种行为是为了提高页面加载性能和用户体验。

关于这个特定的脚本,需要检查它的加载方式,看看是否可以改为异步加载或者延迟加载,而不使用 document.write,以减轻对页面加载性能的影响。

如果这个脚本是自己的脚本,你也可以考虑使用更现代的加载方式,例如使用 async 或 defer 属性,或者将脚本移动到页面底部,以避免阻塞页面的解析。

content_script.js:123 [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

这个警告表明在页面上的 content_script.js 文件中,添加了一个滚动事件监听器事件 touchstart,它是一个阻塞滚动的事件。为了提高页面的响应性,浏览器建议将事件处理程序标记为 passive

这是浏览器引入的一个性能优化措施。通过将滚动事件处理程序标记为 passive,浏览器可以更好地优化页面的滚动性能。

你可以通过修改添加事件监听的代码来解决这个问题。在添加滚动事件监听器的地方,将 {passive: true} 选项添加到 addEventListener 中,如下所示:

// 示例代码,根据实际情况修改
document.addEventListener('touchstart', handleTouchStart, { passive: true });

这样做告诉浏览器这个事件处理程序不会阻塞滚动,有助于提高页面的性能。请查找并修改 content_script.js 文件中与 touchstart 事件相关的代码,以适应这个修改。


未经允许不得转载:Web前端开发资源网 » 一些奇奇怪怪的控制台Warnings警告整理

推荐阅读:

Intellij IDEA WebStorm/PhpStorm中文输入框无法跟随怎么办?

判断网页是通过PC端还是移动终端打开的

使用float后清除浮动的几种方法

Photoshop保存ICO格式插件 ICOFormat.8bi

给元素添加伪类 :before 不显示的解决方法

赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)