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

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

Mixed Content（混合内容）：

w3h5.com/:1 Mixed Content: The page at 'https://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 事件相关的代码，以适应这个修改。

未经允许不得转载：前端资源网 - w3h5 » 一些奇奇怪怪的控制台Warnings警告整理