今天在分析网站优化的东西,看到控制台的一些 Warnings 警告,整理记录一下:
Mixed Content(混合内容):
代码语言:javascript复制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(解析阻塞)
代码语言:javascript复制(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 属性,或者将脚本移动到页面底部,以避免阻塞页面的解析。
代码语言:javascript复制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警告整理
推荐阅读:
DouPHP去除Powered by DouPHP版权的方法
Intellij IDEA WebStorm/PhpStorm中文输入框无法跟随怎么办?
jQuery实现元素的鼠标移入移出及点击显示隐藏(微信二维码)
jQuery.dotdotdot多行文本省略号插件的使用方法
Linux下导入SQL文件及MySQL常用命令