整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

从Chrome到Firefox的心路历程(附火狐效率插件推荐)

在前面

随着云计算的发展,越来越多的应用都已经迁移到云上,那么一款好用的浏览器就显得格外重要。Chrome浏览器从发布以来一直在吞噬浏览器市场,直到今日一直稳坐浏览器榜首的位置,无人能撼动。的确,Chrome浏览器在速度、扩展等方面非常出色,但在国内真的适合使用Chrome浏览器吗?我又是为什么从Chrome迁移到Firefox?



老样子,本文思维导图如下:




Chrome:谁是你的下一任?

  • Chrome浏览器的断舍离

Chrome浏览器曾是我最主要的浏览器,没有之一,但随着Google撤出中国,Chrome与我渐行渐远。众所周知的原因,Chrome在国内不能使用Google服务,这就导致出现了以下问题:

  1. 无法同步,多设备之间非常不方便。
  2. 无法官方安装扩展,Chrome一直以扩展众多著称,可是在国内却无法使用,只能间接第三方。
  3. 内存占用率越来越高,我办公的电脑内存大半全是被Chrome浏览器占用。

虽然还有很多别的办法可以间接的实现同步、安装扩展的功能,但对于小白用户和懒人(例如我)十分不友好,即使找到教程一步一步安装还是会出现新的问题,这样你又要搜索新出问题,一直反复,直到我开始思考是否需要换个新的浏览器!

  • 新的下一任备选名单

在选择新的浏览器有两个原则必须满足:

  1. 支持Windows、Mac、iOS和iPad上多设备的同步。
  2. 支持扩展安装且有丰富的扩展。

能满足这两点的浏览器真的很多,最先使用的微软新推出的Edge浏览器。因为Edge现在也开始使用Chromium内核(和Chrome内核一致),这样能保证速度。Edge已经发布正式版,现在正在体验中,不过目前看来Edge的扩展商店应用有限,还待完善。

国内的猎豹、QQ等浏览器现在也都开始使用Chromium内核,但扩展性不强。再看看浏览器市场份额,Firefox映入眼帘。


2019年桌面端浏览器市场份额


Firefox:国内更适合

相比于Chrome的限制,更加推荐小白用户使用Firefox,下面我们从移动端和桌面端分别谈谈Firefox的表现。先说移动端,把重点放在桌面端,最后推荐一下个人使用频率超高的插件,供值友参看。

iOS端 Firefox: 一致性的浏览体验

因为苹果的限制,所有在App Store上架的浏览器必须采用和Safari相同的WebKit内核,火狐为了能加入移动市场大战妥协了。

所以在iPhone、iPad上的浏览器也就谈不上性能的区分了,主要还是看浏览体验上是否能和桌面端保持一致,这点火狐做的还不错。Firefox iOS端加入了本地门户网站,支持书签、历史记录、登录信息的同步。

界面设计和桌面端保持一致,通过账号能多设备联动。


支持发送到设备,支持桌面版网站

手机端支持书签、历史记录以及登录信息同步。


Firefox设置界面

支持Siri快捷操作。


总之,一款手机端该有的功能它都有,而且能实现多设备之间的互动,这点体验很好!

桌面端 Firefox:革命之后誓与Chrome一战

Firefox和Chrome浏览器在内核上有本质的不同,随着Chrome一直在抢占桌面端浏览器的市场,Firefox背水一战,推出Firefox Quantum(全新渲染)。至于火狐是如何革自己的命感兴趣的可以搜索一下。

Firefox Quantum:

设计上:向扁平化设计靠拢,界面更加简洁。现在默认的界面就已经非常漂亮,甚至不需要安装主题扩展。如果你想让浏览器更加个性化可以通过扩展实现。

性能上:速度提升,效率提升。采用全新编写的渲染方式,让网站的加载、打开速度都较过去有很大的提升。下图是Firefox和Chrome对比。


Firefox和Chrome在常用网站打开速度对比(图片来自网络)


扩展上:经过这两年的发展,扩展数量上已经很多,最重要的是你常用的扩展它都有。


安装扩展不费劲

最后再说两点需要注意的地方:

  • 国际版与中国版要分清

为什么有国际版和中国版,火狐官方给出的答复:

Because the great wall in China, we need to provide local service as default sync service in China. And users can switch between local service and global service by enable/disable a preference.

国际版与国内版浏览器本身没有太大的区别,只是在功能和扩展上更加符合中国上网习惯。但是国际版国内版的账号是不通用的,如果想多设备联动你需要登录同一版本。我在初次安装时没有注意这一点还在纳闷为什么不能同步,提醒大家一下。

  • 如切换国内版和国际版呢?

非常简单,如果你想切换,只需退出登录,在同步选项卡中选择“切换至全球服务”即为国际版,“切换至本地服务”即为中国版


切换全球服务

从Chrome导入到Firefox

如果你想从Chrome迁移到Firefox非常方便,浏览器内置的数据迁移非常好用。选择Chrome中想要迁移的数据,不仅仅是书签、历史记录,还支持网站登录信息的迁移,一步到位,减少你在重新设置的烦恼。


从Chrome到Firefox迁移很简单

Firefox功能推荐

  • 多设备同步

多设备同步这个功能真的很喜欢,可以实现类似于Apple生态圈中的同步功能。在Windows、Mac、iPhone、iPad上可以发送网页信息,方便在多设备上切换使用。


网页端发送


客户端接收

  • 书签侧边栏
  • 把书签、历史信息放在侧边栏,方便管理,非常喜欢这个功能。


    书签侧边栏

    Firefox插件推荐

    外观类插件

    • Firefox Color

    重新设计的界面已经非常简单,但如果你还想根据自己的喜好更换,可以试一试Firefox官方插件Color,设置非常简单,所见即所得,几部就能完成浏览器的个性化。


    Firefox Color

  • VivaldiFox
  • 想浏览器变得更加生动,试试这款插件,Tab颜色随着网页主题颜色变换,非常炫酷。


    标签变色

  • Stylus
  • 如果上述还是不能满足你,还想要更加专业的修改,可以试一试Stylus,这款插件的专业性就要强很多。


    Stylus

  • Dark Reader
  • 黑暗模式,虽然现在部分网站已经支持黑暗模式,但是大部分还是不支持。通过Dark Reader插件能将网页转换为黑暗模式,更加适合在晚上观看。


    可以自己设定

    实用工具类插件

    • 简阅

    简阅这款有名的阅读类插件已经登录Firefox了,点击一下,让你更加专注的内容本身上,提供更好的沉浸式阅读体验。


    提供更好的阅读体验


    定义自己的阅读模式

  • Adblock Plus
  • 大名鼎鼎的屏蔽广告类插件,不解释了。

    • Markdown Here

    喜欢Markdown的值友可以试试这款插件,通过自定义CSS,可以让你的内容在不同平台都有统一的样式,非常方便。


    Markdown Here

  • Read Aloud
  • 电脑看时间长了,眼睛酸了,可以试试这款文字转音频插件,听听也不错。


    将网页文字内容转换为音频

  • Clip to OneNote
  • 我是OneNote的重度用户,一键将网页内容粘贴到OneNote。

    • Fireshot

    截图软件,提供多种选择,截图完成后保存可以选择为图片或者PDF文件。


    提供多种截图模式,保存可以是图片或PDF文件。

  • Foxy Gestures
  • 鼠标的手势操作,通过自定义可以快速实现功能。

    • Mutil-Account Containers

    官方提供的“小号“神器,可以在一个浏览器中通过不同的Containers实现登录不同的账号,通过颜色区分,是真正的小号神器。非常推荐!


  • Tampermonkey
  • 脚本管理插件,各种小功能走起来,用脚本行天下,哈哈!


  • 云盘万能钥匙
  • 主要是针对百度云盘,自动复制云盘分享的链接和密码,自动填充,直接打开分享内容,特别是一些没有密码的也可使用。


    自动提取秘钥

  • Weibo Mini
  • 边刷微博,边学习(上网)。

  • Firefox Send
  • 这个不是插件,而是一个网站,Firefox Send,文件最大上传支持1G,上传后下载一次或者24小时无下载即删除,临时大文件可以试一试,速度还可以。


    结尾

    前面便是我从Chrome迁移到Firefox的新路历程,如果你和我一样,想实现多设备同步,插件安装方便,可以给Firefox一个机会。

    随着微软的Edge正式发布,相信浏览器市场还会有变动。目前Edge使用起来还是比较方便的,但是能不能撼动Chrome浏览器大哥的位置,还需要时间和深度体验,关于Edge我会在以后的文章中详细介绍。

    以上!我是麦豆爸爸!

    #头条数码潜力作者#

    实很复杂,因为浏览器的主要功能是通过向服务器请求并在浏览器窗口中显示它来显示您选择的Web资源。但浏览器从“界面”到“渲染”,已经做了非常多的步骤,最终呈现在我们面前就是很简单的网页内容,下面我会详细叙述下浏览器内核的功能。

    什么是浏览器内核?

    浏览器的核心部分应该是浏览器核心的“渲染引擎”,其主要作用是解释页面语法并渲染页面。因此,“渲染引擎”确定浏览器如何显示网页的内容和格式信息。不同的浏览器内核对网页编写的语法的解释不同,从而导致呈现效果不同,从而导致兼容性问题。

    常见的浏览器内核是什么?

    1.Trident

    Trident(IE内核):该内核程序于1997年在IE4中首次采用。它是由Microsoft在Mosaic代码的基础上进行修改的,并在IE11中使用。也通常称为“ IE内核”。由于IE本身的“垄断”,Trident内核很长时间没有更新,这导致与W3C标准的脱节并暴露了安全性问题。

    在2011年,Trident开始从IE 9支持HTML5和CSS3。自版本11起,IE最初已支持WebGL技术。IE8的JavaScript引擎是Jscript,IE9开始使用Chakra。Trident内核的常见浏览器是:

    • IE6,IE7,IE8(三叉戟4.0),IE9(三叉戟5.0),IE10(三叉戟6.0);
    • 360安全浏览器(Trident适用于1.0-5.0,Trident + Webkit适用于6.0,Trident + Blink适用于7.0);
    • 360 Extreme Speed浏览器(7.5 Trident + Webkit,7.5 Trident + Blink之前);
    • 猎豹安全浏览器(版本1.0-4.2 Trident + Webkit,版本4.3和更高版本的Trident + Blink);
    • UC浏览器(Webkit内核+ Trident内核)。

    2. Webkit

    Webkit(Safari内核,Chrome内核原型,开放源代码):它是Apple自己的内核,也是Apple Safari浏览器使用的内核。Webkit引擎包括WebCode排版引擎和JavaScript代码解析引擎。

    它们分别来自KDE的KHTML和KJS。它们是GPL条约授权的免费软件,并支持BSD系统开发。Chrome,360 Extreme Speed Browser和Sogou High Speed Browser也使用Webkit作为内核(Chorome使用其自己的V8引擎来理解脚本)。

    3. Blink

    这是由Google和Opera Software开发的浏览器排版引擎,谷歌将其作为Chromium计划的一部分进行计算,并于2013年4月发布。

    此渲染引擎是开源引擎Webkit中WebCore组件的一个分支,用于Chrome(28和更高版本),Opera(15和更高版本)和Yandex浏览器。

    浏览器的高级结构

    浏览器的主要组件是:

    1. 用户界面:包括地址栏,后退/前进按钮,书签菜单等。浏览器的每个部分都会显示,但您看到所请求页面的窗口除外。
    2. 浏览器引擎:封送UI和呈现引擎之间的动作。
    3. 呈现引擎:负责显示请求的内容。例如,如果请求的内容是HTML,则呈现引擎解析HTML和CSS,然后在屏幕上显示解析的内容。
    4. 联网:用于HTTP请求之类的网络调用,在独立于平台的界面后面针对不同平台使用不同的实现。
    5. UI后端:用于绘制基本小部件,例如组合框和窗口。该后端公开了不是平台特定的通用接口。它的下面使用操作系统用户界面方法。
    6. JavaScript解释器。用于解析和执行JavaScript代码。
    7. 数据存储。这是一个持久层。浏览器可能需要在本地保存各种数据,例如cookie。浏览器还支持存储机制,例如localStorage,IndexedDB,WebSQL和FileSystem。

    网页渲染主要流程

    呈现引擎将开始从网络层获取请求的文档的内容。通常以8kB的块完成。

    之后,这是渲染引擎的基本流程:

    渲染引擎将开始解析HTML文档,并将元素转换为称为“内容树”的树中的DOM节点。引擎将解析外部CSS文件和样式元素中的样式数据。样式信息以及HTML中的视觉指令将用于创建另一棵树:渲染树。

    渲染树包含具有视觉属性(如颜色和尺寸)的矩形。矩形按正确的顺序显示在屏幕上。

    构建渲染树后,它将经历“ 布局 ”过程。这意味着为每个节点提供应在屏幕上显示的确切坐标。下一阶段是绘画,将遍历渲染树,并使用UI后端层绘画每个节点。

    重要的是要了解这是一个循序渐进的过程。为了获得更好的用户体验,渲染引擎将尝试尽快在屏幕上显示内容。它不会等到所有HTML解析完毕后才开始构建和布局渲染树。部分内容将被解析并显示,而该过程将继续处理其余部分内容,这些其余内容始终来自网络。

    总结

    简单来说,目前浏览器大致已经趋向于Webkit系,Webkit系的代码量还是很大的。加上Chrome的使用频率在PC市场中有着绝对市场,而且现在Win10的Edge也加入了Webkit体系,速度加快了不少。所以在不久的将来我们可以预见的是浏览器会以Webkit系为主,然后百花齐放。

    、定义

    <meta> 标签提供关于 HTML 文档的元数据。它不会显示在页面上,但是对于机器是可读的。可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

    2、作用

    meta里的数据是供机器解读的,告诉机器该如何解析这个页面,还有一个用途是可以添加服务器发送到浏览器的http头部内容,例如我们为页面中添加如下meta标签:


    1. <meta http-equiv="charset" content="iso-8859-1">
    2. <meta http-equiv="expires" content="31 Dec 2008">

    浏览器的头部就会包括这些:


    1. charset:iso-8859-1
    2. expires:31 Dec 2008

    只有浏览器可以接受这些附加的头部字段,并能以适当的方式使用它们时,这些字段才有意义。

    3、meta的必需属性和可选属性

    meta的必需属性是content,当然并不是说meta标签里一定要有content,而是当有http-equiv或name属性的时候,一定要有content属性对其进行说明。例如:

    必需属性

    <meta name="keywords" content="HTML,ASP,PHP,SQL">

    这里面content里的属性就是对keywords进行的说明,所以呢也可以理解成一个键值对吧,就是{keywords:"HTML,ASP,PHP,SQL"}。

    可选属性

    在W3school中,对于meta的可选属性说到了三个,分别是http-equiv、name和scheme。考虑到scheme不是很常用,所以就只说下前两个属性吧。

    http-equiv

    http-equiv属性是添加http头部内容,对一些自定义的,或者需要额外添加的http头部内容,需要发送到浏览器中,我们就可以是使用这个属性。在上面的meta作用中也有简单的说明,那么现在再举个例子。例如我们不想使用js来重定向,用http头部内容控制,那么就可以这样控制:

    <meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />

    在页面中加入这个后,5秒钟后就会跳转到指定页面啦,效果可看W3school的例子

    name

    第二个可选属性是name,这个属性是供浏览器进行解析,对于一些浏览器兼容性问题,name属性是最常用的,当然有个前提就是浏览器能够解析你写进去的name属性才可以,不然就是没有意义的。还是举个例子吧:

    <meta name="renderer" content="webkit">

    这个meta标签的意思就是告诉浏览器,用webkit内核进行解析,当然前提是浏览器有webkit内核才可以,不然就是没有意义的啦。当然看到这个你可能会有疑问,这个renderer是从哪里冒出来的,我要怎么知道呢?这个就是在对应的浏览器的开发文档里就会有表明的,例如这个renderer是在360浏览器里说明的。360浏览器内核控制Meta标签说明文档

    常用meta标签大总结

    接下来就是常用的meta标签大总结啦,我会尽可能的做到全

    charset

    charset是声明文档使用的字符编码,解决乱码问题主要用的就是它,值得一提的是,这个charset一定要写第一行,不然就可能会产生乱码了。

    charset有两种写法


    1. <meta charset="utf-8">
    2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    两个都是等效的。

    百度禁止转码

    百度会自动对网页进行转码,这个标签是禁止百度的自动转码

    <meta http-equiv="Cache-Control" content="no-siteapp" />

    SEO 优化部分


    1. <!-- 页面标题<title>标签(head 头部必须) -->
    2. <title>your title</title>
    3. <!-- 页面关键词 keywords -->
    4. <meta name="keywords" content="your keywords">
    5. <!-- 页面描述内容 description -->
    6. <meta name="description" content="your description">
    7. <!-- 定义网页作者 author -->
    8. <meta name="author" content="author,email address">
    9. <!-- 定义网页搜索引擎索引方式,robotterms 是一组使用英文逗号「,」分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。 -->
    10. <meta name="robots" content="index,follow">

    viewport

    viewport主要是影响移动端页面布局的,例如:


    1. <meta name="viewport" content="width=device-width, initial-scale=1.0">

    content 参数:

    • width viewport 宽度(数值/device-width)
    • height viewport 高度(数值/device-height)
    • initial-scale 初始缩放比例
    • maximum-scale 最大缩放比例
    • minimum-scale 最小缩放比例
    • user-scalable 是否允许用户缩放(yes/no)

    各浏览器平台

    Microsoft Internet Explorer


    1. <!-- 优先使用最新的ie版本 -->
    2. <meta http-equiv="x-ua-compatible" content="ie=edge">
    3. <!-- 是否开启cleartype显示效果 -->
    4. <meta http-equiv="cleartype" content="on">
    5. <meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
    6. <!-- Pinned Site -->
    7. <!-- IE 10 / Windows 8 -->
    8. <meta name="msapplication-TileImage" content="pinned-tile-144.png">
    9. <meta name="msapplication-TileColor" content="#009900">
    10. <!-- IE 11 / Windows 9.1 -->
    11. <meta name="msapplication-config" content="ieconfig.xml">

    Google Chrome


    1. <!-- 优先使用最新的chrome版本 -->
    2. <meta http-equiv="X-UA-Compatible" content="chrome=1" />
    3. <!-- 禁止自动翻译 -->
    4. <meta name="google" value="notranslate">

    360浏览器


    1. <!-- 选择使用的浏览器解析内核 -->
    2. <meta name="renderer" content="webkit|ie-comp|ie-stand">

    UC手机浏览器

    UCBrowser_U3_API

    QQ手机浏览器


    1. <!-- 锁定屏幕在特定方向 -->
    2. <meta name="x5-orientation" content="landscape/portrait">
    3. <!-- 全屏显示 -->
    4. <meta name="x5-fullscreen" content="true">
    5. <!-- 页面将以应用模式显示 -->
    6. <meta name="x5-page-mode" content="app">

    Apple iOS


    1. <!-- Smart App Banner -->
    2. <meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
    3. <!-- 禁止自动探测并格式化手机号码 -->
    4. <meta name="format-detection" content="telephone=no">
    5. <!-- Add to Home Screen添加到主屏 -->
    6. <!-- 是否启用 WebApp 全屏模式 -->
    7. <meta name="apple-mobile-web-app-capable" content="yes">
    8. <!-- 设置状态栏的背景颜色,只有在 “apple-mobile-web-app-capable” content=”yes” 时生效 -->
    9. <meta name="apple-mobile-web-app-status-bar-style" content="black">
    10. <!-- 添加到主屏后的标题 -->
    11. <meta name="apple-mobile-web-app-title" content="App Title">

    Google Android


    1. <meta name="theme-color" content="#E64545">
    2. <!-- 添加到主屏 -->
    3. <meta name="mobile-web-app-capable" content="yes">
    4. <!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->

    App Links


    1. <!-- iOS -->
    2. <meta property="al:ios:url" content="applinks://docs">
    3. <meta property="al:ios:app_store_id" content="12345">
    4. <meta property="al:ios:app_name" content="App Links">
    5. <!-- Android -->
    6. <meta property="al:android:url" content="applinks://docs">
    7. <meta property="al:android:app_name" content="App Links">
    8. <meta property="al:android:package" content="org.applinks">
    9. <!-- Web Fallback -->
    10. <meta property="al:web:url" content="http://applinks.org/documentation">
    11. <!-- More info: http://applinks.org/documentation/ -->

    最后——移动端常用的meta


    1. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    2. <meta name="apple-mobile-web-app-capable" content="yes" />
    3. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    4. <meta name="format-detection"content="telephone=no, email=no" />
    5. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    6. <meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
    7. <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
    8. <meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话,忽略email识别 -->
    9. <!-- 启用360浏览器的极速模式(webkit) -->
    10. <meta name="renderer" content="webkit">
    11. <!-- 避免IE使用兼容模式 -->
    12. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    13. <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
    14. <meta name="HandheldFriendly" content="true">
    15. <!-- 微软的老式浏览器 -->
    16. <meta name="MobileOptimized" content="320">
    17. <!-- uc强制竖屏 -->
    18. <meta name="screen-orientation" content="portrait">
    19. <!-- QQ强制竖屏 -->
    20. <meta name="x5-orientation" content="portrait">
    21. <!-- UC强制全屏 -->
    22. <meta name="full-screen" content="yes">
    23. <!-- QQ强制全屏 -->
    24. <meta name="x5-fullscreen" content="true">
    25. <!-- UC应用模式 -->
    26. <meta name="browsermode" content="application">
    27. <!-- QQ应用模式 -->
    28. <meta name="x5-page-mode" content="app">
    29. <!-- windows phone 点击无高光 -->
    30. <meta name="msapplication-tap-highlight" content="no">
    31. <!-- 适应移动端end -->