前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >一些奇奇怪怪的控制台Warnings警告整理

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

作者头像
德顺
发布2023-12-02 11:14:13
2460
发布2023-12-02 11:14:13
举报
文章被收录于专栏:前端资源前端资源

今天在分析网站优化的东西,看到控制台的一些 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 中,如下所示:

代码语言:javascript
复制
// 示例代码,根据实际情况修改
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常用命令

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Mixed Content(混合内容):
  • parser-blocking(解析阻塞)
相关产品与服务
云数据库 MySQL
腾讯云数据库 MySQL(TencentDB for MySQL)为用户提供安全可靠,性能卓越、易于维护的企业级云数据库服务。其具备6大企业级特性,包括企业级定制内核、企业级高可用、企业级高可靠、企业级安全、企业级扩展以及企业级智能运维。通过使用腾讯云数据库 MySQL,可实现分钟级别的数据库部署、弹性扩展以及全自动化的运维管理,不仅经济实惠,而且稳定可靠,易于运维。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档