套壳浏览器与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.11发布的,相差了近一年,期间的开发版,稳定版,测试版,金丝雀版版本将近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
套壳浏览器与Chrome浏览器之间的差别的更多相关文章
- 用Python+selenium打开IE浏览器和Chrome浏览器的问题
这几天在学Python+selenium自动化,对三大浏览器Firefox,Chrome和IE都做了尝试,也都分别下载了对应的webdriver,如:geckodriver.chromedriver. ...
- ie11浏览器和chrome浏览器对于bgsound和background的一些区别
今天在编写一个非常简单的网页的时候,按照书上写的,使用了一个jpg图片作为背景图片,用background属性放在<body>标签内,同时使用<bgsound>标签插入背景音乐 ...
- Python+selenium学习(一) 打开Firefox浏览器,IE浏览器和Chrome浏览器
from selenium import webdriver # open Firefox #driver=webdriver.Firefox() # Open IE #driver=webdrive ...
- 搜狗浏览器或者360浏览器安装chrome 浏览器插件
https://www.cnblogs.com/ingvar/p/6403777.html#undefined
- Selenium2学习-006-WebUI自动化实战实例-004-解决 Chrome 浏览器证书提示:--ignore-certificate-errors
此文主要讲述 Java 运行 Selenium 脚本时,如何消除 Chrome 浏览器启动后显示的证书错误报警提示,附带 Chrome 参数使浏览器最大化的参数. 希望能对初学 Selenium2 W ...
- Selenium2学习-005-WebUI自动化实战实例-003-三种浏览器(Chrome、Firefox、IE)启动脚本源代码
此文主要通过 三种浏览器(Chrome.Firefox.IE)启动脚本 功能,进行 Selenium2 三种浏览器启动方法的实战实例讲解.文中所附源代码于 2015-01-18 20:33 亲测通过, ...
- Chrome浏览器扩展开发系列之八:Chrome扩展的数据存储
Google Chrome浏览器扩展可以使用如下任何一种存储机制: HTML5的localStorage API实现的本地存储(此处略) Google的chrome.storage.* API实现的浏 ...
- Chrome浏览器 54 版本显示“Adobe flash player已过期”问题解决
背景 电脑上面的软件很久没升级,用腾讯电脑管家批量做了一次升级,结果Chrome浏览器升级到54版本flash控件没法用了. 第一时间想到直接到flash官网下载一个新的进行安装,结果官网检测显示,C ...
- 【Selenium专题】WebDriver启动Chrome浏览器(二)
官方API Constructor Summary ChromeDriver() Creates a new ChromeDriver using the default server configu ...
随机推荐
- JVM参数配置及详解 -Xms -Xmx -Xmn -Xss 调优总结
堆大小设置JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制;系统的可用虚拟内存限制;系统的可用物理内存限制.32位系统 下,一般限制在1.5G~2G;64为操 ...
- wireshark抓包,分析出PNG后解析
1. 抓包 2. 转成hex二进制流 3. 将二进制流转成base64位,通过在线工具: http://tomeko.net/online_tools/hex_to_base64.php?lang=e ...
- crypto 的使用方法和说明
crypto 模块提供了加密功能,包含对 OpenSSL 的哈希.HMAC.加密.解密.签名.以及验证功能的一整套封装.我们这里讲crypto AES算法加密 一.使用步骤 1.引入Crypto 1. ...
- wrk,ab,locust,Jmeter 压测结果比较
背景: 项目需要对一批接口进行压测,要求是接口的QPS(Quest Per Second每秒请求数)达到6万以上由于楼主一直使用的压力测试工具是jmeter,但是jmeter单台电脑无法达到6万的QP ...
- Django安装与简单事例-02
Django的下载与基本命令 1.下载Django: 1 pip3 install django 2.创建一个django project 1 django-admin.py startproject ...
- Java基本数据类型转换及运算符
上次我们说到完了Java中的基本数据类型,今天我们来说说Java中的基本数据类型转换和Java中的运算符 基本数据类型转换 java中可以从任意基本数据类型转型到外的基本数据类型 注意:(boolea ...
- iOS 开发中一些 tips
tableView 的 tableHeaderView 高度不正确的问题: func forceRefreshHeader() { let size = headerView.systemLayout ...
- 夯实Java基础系列7:一文读懂Java 代码块和执行顺序
目录 Java中的构造方法 构造方法简介 构造方法实例 例 1 例 2 Java中的几种构造方法详解 普通构造方法 默认构造方法 重载构造方法 java子类构造方法调用父类构造方法 Java中的代码块 ...
- Unity项目 - DeathtrapDungeon死亡地牢
目录 游戏原型 项目演示 绘图资源 代码实现 注意事项 技术探讨 参考来源 游戏原型 死亡地牢是一款 2D-Roguelike 的地牢冒险游戏.手握利刃,斩杀怪物,在凶险的地牢内生存下去.但注意,敌人 ...
- Spring GetBean流程
第一节讲解Spring启动的时候说到,Spring内部先解析了所有的配置,加载所有的Bean定义后,再根据需要对Bean进行实例化和初始化.除开Spring自己主动新建的对象,第一次根据Bean定义 ...