套壳浏览器与Chrome浏览器之间的差别

  之前QQ浏览器一直是我前端调试工具的主力,因为它是一个套壳浏览器,所以它的兼容模式(谷歌Chrome内核)和极速模式(IE浏览器内核)简直是调试兼容性的神器,可以直接切换,不用再反复打开Chrome和IE。而且这个F12调试台有木有看起来觉得很熟悉,对,这个就是谷歌浏览器自带的原生开发者工具,这让我觉得直接用QQ浏览器代替谷歌浏览器进行调试完全是可以的。但是最后我还是老老实实的换成谷歌浏览器做主力调试工具,具体原因请接着往下看。

  为了复现这次神奇的bug,我特地把几个月前写的代码回滚了下,当时是为了利用Mand Mobile这个UI库写一个手机h5下拉加载更多的功能,这个下拉可以加载到20条,如图1所示,我们可以看到控制台有两句“进来了”的输出语句,也打了断点,下拉确实触发了两次加载更多的方法,每次加载5条,但是页面就是只加载到了10条,也不显示滑动区域底部的提示信息。最后实在没辙,随便换了下谷歌浏览器,发现谷歌浏览器提示了warn,如图2所示。

图1 QQ浏览器运行的效果,没有提示

图2 谷歌浏览器运行的效果,提出警告

  这下子就知道了,Vue页面用到的oneWeek方法没有进行定义,虽然说这是我犯得一个低级错误,但是QQ浏览器竟然一点错误和警告都不提,所以,我第一次对QQ浏览器感到很失望。套壳浏览器虽然本土化做的很好,各种辅助功能和外观都做的深得人心。但是认真分析一下,套壳浏览器之所以比不上原生的浏览器,一是因为他们为了缩小软件体积而精简了内核,但是这样就会在浏览页面或者调试的时候会出现不可预估和难以判断的bug和错误。二是相比于原生浏览器,套壳浏览器为了在其内核上进行修改,所以其内核版本比原生浏览器的内核版本会相差几个版本。比如我电脑安装了最新版本的QQ浏览器(如图4所示)和最新版本的Chrome浏览器(如图5所示)。

图4 QQ浏览器的Chromium版本为70.0.3538.25

图4 Chrome浏览器的Chromium版本为77.0.3865.90

  77.0.3865.90版本是2019.9发布的,70.0.3538.25版本是2018.8发布的,相差了半年多,期间的开发版,稳定版,测试版,金丝雀版版本将近20个版本!当然,每个人有每个人喜欢的浏览器,我们没有权利去强制别人使用同一款浏览器,也不必有浏览器高低之分的言论。但是,你如果是个Web前端开发人员,最好使用原生浏览器,这不仅仅是为了那些使用者考虑,也会为你的调试带来许多的便利。

图5 根据网站通讯流量监测机构StatCounter的统计,Chrome还是一枝独秀

顺便下整理常用浏览器的内核(基于2019年9月):

Chrome浏览器:Chromium(基于Blink)

Safari浏览器:Webkit(Blink和Trident的鼻祖)

火狐浏览器:Gecko

Opera浏览器:Chromium(以前也有属于自己开发的Presto内核,现已淘汰,加入谷歌豪华套餐)

IE浏览器:IE(基于Trident)

UC浏览器:Webkit

Edge浏览器:Chromium

QQ浏览器:Chromium(极速模式)+IE(兼容模式)

360浏览器:Chromium(极速模式)+IE(兼容模式)

2345浏览器:Chromium(极速模式)+IE(兼容模式)

猎豹浏览器:Chromium(极速模式)+IE(兼容模式)

搜狗高速浏览器:Chromium

百度浏览器:IE

遨游浏览器:IE

世界之窗浏览器:IE

原文地址:https://www.cnblogs.com/jdWu-d/p/11552880.html

时间: 2024-11-02 13:47:44

套壳浏览器与Chrome浏览器之间的差别的相关文章

第二章:WebDriver 打开Firefox浏览器 和 Chrome 浏览器

1. 使用Firefox 和 Chrome 来打开浏览器代码如下: 2. 使用 Firefox 浏览器打开百度网页: 3. 使用 Chrome 浏览器中打开 百度页面

ie11浏览器和chrome浏览器对于bgsound和background的一些区别

今天在编写一个非常简单的网页的时候,按照书上写的,使用了一个jpg图片作为背景图片,用background属性放在<body>标签内,同时使用<bgsound>标签插入背景音乐.代码如下: 1 <html> 2 <head> 3 <title>QQ空间开场音乐</title> 4 </head> 5 <body background="123.jpg"> 6 <bgsound src=

浏览器安全 - Chrome浏览器

关闭安全模式 暂时关闭 Linux: google-chrome --disable-web-security Mac: open -a Google\ Chrome --args --disable-web-security windows: 进入到chrome安装目录, chrome.exe --disable-web-security 原文地址:https://www.cnblogs.com/AtesetEnginner/p/11266492.html

Chrome浏览器扩展开发系列之八:Chrome扩展的数据存储

Google Chrome浏览器扩展可以使用如下任何一种存储机制: HTML5的localStorage API实现的本地存储(此处略) Google的chrome.storage.* API实现的浏览器存储 Google的chrome.cookies.* API实现的cookie存储 1) chrome.storage API实现的浏览器存储 Chrome浏览器扩展通过chrome.storage.* API,可以存取数据或监听数据的变化. 在manifest.json文件中注册storage

五大主流浏览器与四大浏览器内核

本文内容: 五大主流浏览器与其内核 移动端浏览器内核 浏览器内核优缺点 五大浏览器的故事 四大浏览器内核的故事 五大主流浏览器与其内核 浏览器最重要的部分是浏览器的内核.浏览器内核是浏览器的核心,可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎.最开始渲染引擎和 JS 引擎并没有区分的很明确,后来 JS 引擎越来越独立,内核就倾向于只指渲染引擎. 国内的浏览器(诸如360,QQ,搜狗)大多数用了第三方的内核,不同的只是外观以及一些装

android -------- 打开本地浏览器或指定浏览器加载,打电话,打开第三方app

开发中常常有打开本地浏览器加载url或者指定浏览器加载, 还有打开第三方app, 如 打开高德地图 百度地图等 在Android程序中我们可以通过发送隐式Intent来启动系统默认的浏览器. 如果手机本身安装了多个浏览器而又没有设置默认浏览器的话,系统将让用户选择使用哪个浏览器来打开连接. Uri uri = Uri.parse("https://www.baidu.com"); Intent intent = new Intent(Intent.ACTION_VIEW, uri);

Chrome浏览器扩展开发系列之十四:本地消息机制Native messagin

Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging 2016-11-24 09:36 114人阅读 评论(0) 收藏 举报  分类: PPAPI(27)  通过将浏览器所在客户端的本地应用注册为Chrome浏览器扩展的"本地消息主机(native messaging host)",Chrome浏览器扩展还可以与客户端本地应用之间收发消息. 客户端的本地应用注册为Chrome浏览器扩展的"本地消息主机"之后,Chrome浏览器会在独立的

Chrome浏览器Network面板http请求时间分析

Chrome浏览器开发者工具Network窗口下,可以查看下载各组件所需的具体时间 根据上表进行简要分析—— Stalled(阻塞) 浏览器对同一个主机域名的并发连接数有限制,因此如果当前的连接数已经超过上限,那么其余请求就会被阻塞,等待新的可用连接:此外脚本也会阻塞其他组件的下载: 优化措施: 1.将资源合理分布到多台主机上,可以提高并发数,但是增加并行下载数量也会增大开销,这取决于带宽和CPU速度,过多的并行下载会降低性能: 2.脚本置于页面底部: DNS Lookup(域名解析) 请求某域

通过私有协议在Chrome浏览器网页中打开本地程序

最近甲方有这样一个需求:两套系统,一套基于Chrome开发,一套基于IE开发,想要在Chrome中增加一个链接,然后进入IE开发的系统.也就是说,想要在Chrome中创建链接跳转到IE浏览器指定页面,还要实现跳转动画效果.这个需求我们先来解决从Chrome跳转到IE的问题. 问题分析:从Chrome中跳转到IE,直接以http链接形式是不可能跳转到IE的,只能通过单独开发的本地程序打开IE,问题是如何让Chrome打开该程序.有一种方法可以实现:通过注册私有协议,用户点击链接的时候直接使用私有协