览器是我们日常使用电脑时最常用的软件，以致于我们已经几乎忽视了它的存在。而且对于用户来说，认准一款浏览器就很难再“换门”。就笔者个人来说，使用Chrome已经超过10年时间，相信这样的情况不在少数。

至于浏览器的使用体验，主观性更为明显。我习惯Chrome，你习惯Edge、QQ，他习惯360、傲游，这都没问题，每个人都有自己最喜欢和习惯的一款浏览器，无所谓孰高孰低。所以本篇评测我们不会聊各个浏览器的使用体验，也完全没有要通过性能排名来要求大家“换们”的意思。之所以做这次横评，一方面是我们每隔2-3年会做一次浏览器横评（浏览器性能变化慢，有实质性变化的迭代周期更长），大家可以看做是常规操作；另一方面则是想要了解一下时下各大浏览器的性能表现。

好了闲话不多说，我们直接进入正题。

·参评浏览器基本信息汇总

本次测试我们选择了11款浏览器，它们的基本信息如下：

看到这个表，顿时让我觉得现在的浏览器市场和当年香港歌坛有着异曲同工之妙。当年是中岛美雪养活了一众歌星，现在是一个谷歌养活了几乎整个浏览器市场。11款浏览器中有10款是基于谷歌Blink渲染引擎打造的，只有Mozilla FireFox依旧使用Gecko 2（表格中的Gecko 102错误，应该为Gecko 2）。

这里要说一下Blink，谷歌退出Webkit项目之后，就在其基础之上重写了Blink引擎，但它本质上还是Webkit，只不过是谷歌把Webkit中与Chromium无关的Ports全部移除掉，再将代码结构重新整理，所以Blink是Webkit的继承者，并非谷歌全新研发的渲染引擎。

另外11款浏览器安装后的容量，傲游依然是最庞大的，达到了844MB，最为精简干练的则是搜狗浏览器，只有164MB，另外谷歌Chrome与微软Edge的容量也比较大，分别为549MB和526MB。

·测试项目与相关说明

接下来我们说说测试项目，本次选用了8项测试：

其一，Browserbench的三个测试项目：JetStream2、MotionMark，以及Speedometer。三者分别测试浏览器的Java脚本性能、动画场景的图形渲染性能、以及Web应用的响应速度。

其二，HTML5 TEST，顾名思义，测试浏览器的HTML 5性能。

其三，谷歌Chromium的Octane 2.0，同样是测试浏览器的Java脚本性能。

其四，Mozilla的Kraken JavaScript测试，这里引入多个不同的Java脚本性能测试会更加公平一些。

其五，Basemark Web 3.0性能测试，可以看做是浏览器的综合性能测试。

其六：内存、CPU、GPU占用率测试。

需要说明的是：

·不同电脑硬件配置对于测试结果会有比较明显的影响，但是只要在同一硬件配置下做完所有测试，那么就可以区分出浏览器之间的性能差异。

·因为在不同硬件配置下跑出的分数是不尽相同的，所以本篇横评所有测试分数均只做为参考，主要用以衡量各浏览器的性能强弱，不做固定得分看待。

·测试平台硬件信息：

本次使用的测试平台硬件配置信息如下：

处理器：英特尔酷睿i7-12700H

内存：2×8GB DDR4内存

硬盘：512GB PCIe 3.0固态硬盘

显卡：NVIDIA GeForce RTX 3050笔记本电脑GPU

操作系统：Windows 11家庭中文版21H2

·各项性能测试结果及排名

基本信息了解之后，我们来看看测试结果。

【JetStream2】

首先是Java脚本性能测试JetStream2，该项测试包含了59项各类Java脚本相关独立测试项，每个测试项会给出最高分、最低分和平均分，最终会给出一个总成绩。

在这项测试中，微软Edge浏览器以252.391分夺得第一名，傲游浏览器以238.636分排名第二，Chrome浏览器、Opera浏览器分别以236.177和233.166分位居3、4位，FireFox、世界之窗、2345三款浏览器排名后三位。

【MotionMark】

第二项测试为MotionMark，它主要衡量浏览器的图形渲染能力。浏览器虽然主要功能是浏览网页，但其实它不仅仅涉及到图片、文本的加载，一些网页特效、网页游戏等内容，需要用到图形渲染能力。

在这项测试中，Edge浏览器以1123.4分排名第一，傲游浏览器得分1097.59排名第二，Chrome浏览器得分1063.88排名第三，排名最后三位的分别是2345、世界之窗以及搜狗。

【Speedometer】

第三项测试为Speedometer，它主要衡量浏览器的Web应用响应能力。该项测试中，Edge与Chrome同为264分并列第一，傲游浏览器以260.9分排名第二，后三位依次为世界之窗、360安全浏览器以及搜狗浏览器。

在Browserbench三项测试中，比较出人意料的是国内厂商制作的傲游浏览器。作为曾经国内浏览器一哥，傲游一度遭遇了口碑下滑的尴尬，不过现在看来，傲游的技术力还是相当可以的，Java和图形渲染能力甚至略超Chrome，这一点确实没有预料到。

【HTML5 TEST】

第四项测试我们来看看HTML5性能。

从测试结果来看，猎豹浏览器在HTML5性能上表现出色，以532分拿下第一名；Edge、Chrome、傲游、QQ、2345、360六款浏览器得分均为528分，达到了当下的平均水准；Opera的表现也还不错达到了526分；FireFox、搜狗表现一般，但也达到了500分以上；世界之窗表现最差，仅为481分，这一成绩大概相当于2019年浏览器的平均水准，毕竟世界之窗目前已经很久都没有更新了。

【Octane 2.0】

Octane 2.0是谷歌Chromium的Java脚本性能测试标准，因此对于使用Blink引擎的浏览器自然是有一定偏向，以致于Gecko 2的FireFox排名垫底。所以我们在下面也引入了Mozilla的Kraken JavaScript测试，以保证公平性。

10款Blink引擎的浏览器中，Edge、Opera、Chrome排名前三，傲游与前三的差距也不算大，再下来QQ、猎豹、360以及搜狗四款浏览器位居第二梯队，世界之窗、2345依旧表现不佳。

【Kraken JavaScript】

第六项出自Mozilla的Kraken JavaScript测试。

原本FireFox应该有自家BUFF加持而占优，但结果却是并不太理想，测试结果排名倒数第四，Kraken JavaScript加载速度为699.9毫秒。而排名前三的依旧为Edge、Chrome、Opera，另外傲游也进入了500毫秒大关。

此外，此前一直拉胯的世界之窗竟然在Kraken Web框架下的加载速度上表现强劲，以550.1毫秒位居第五，这一点比较出乎预料。

【Basemark Web 3.0】

第七项测试我们来看看Basemark的Web 3.0相关测试。该项测试包含了非常丰富的Web应用、功能和图形相关测试，可以看作是浏览器的综合性能测试。

在这项测试中，Opera表现最佳，总得分1280.08，Chrome排名第二，傲游依旧表现稳定，排名第三，此前多项第一的Edge浏览器排名第四。不过从得分可以看到，前四名的差距其实非常小，第一名与第四名得分仅差72.84分，几乎可以忽略不计。

综合性能排名后两位的世界之窗和QQ主要原因在于二者无法顺利运行Web 2.0的相关测试项，因此得分偏低。

从七项基本性能测试来看，Edge、Chrome两款浏览器的表现非常稳定，综合性能最佳。而国内浏览器品牌里，老牌的傲游性能不输Edge和Chrome，这在测试之前是笔者没有预料到的。此外，Opera也依旧是一款比较不错的浏览器。而相对不太推荐的是世界之窗、2345这两款浏览器，在加载速度、响应速度、图形渲染方面表现都不是太好。

此外，QQ、360、搜狗、猎豹这几款浏览器的表现不相上下，如何选择就看大家日常的使用习惯。

FireFox也就是火狐浏览器如今确实是性能不够看了。以往火狐其实是一款口碑极佳的浏览器，但目前来看，Gecko 2与Blink之间的差距还是比较明显的，火狐用户大量的流失也并非是没有道理。

【内存/CPU/GPU占用测试】

最后一项测试，我们来看看11款浏览器的内存、CPU和GPU占用率情况。

测试方法依旧是祭出B站经典视频《【炮姐/AMV】我永远都会守护在你的身边！》来进行测试。下图显示了该视频峰值时弹幕量，其总弹幕量已经超过百万，因此能够非常明显的影响到浏览器的内存、CPU和GPU的峰值占用情况。

以下是11款浏览器的测试结果汇总：

内存默认占用情况，Opera占用最高，达到501.3MB，许久没有更新过的世界之窗只占用79.2MB。

峰值内存占用FireFox达到了恐怖的3609MB，远超其它浏览器，最低为2345浏览器，占用586.2MB，世界之窗浏览器因为无法正常打开B站视频，所以没有成绩。

总体来说，默认内存占用除了FireFox与Opera比较高之外，其余9款浏览器占用都不算高。但峰值内存占用来看，Edge、Chrome、FireFox、Opera、傲游、猎豹的占用都超过了1GB，相对于2、3年前增长了2-3倍，FireFox几乎增长了6倍。

CPU和GPU峰值占用方面，Edge相对比较高，可见Edge浏览器整体性能虽然不错，但占用硬件资源较高，所以在使用Edge浏览器时电脑的耗电量会增高。如果您经常不插电使用笔记本电脑的话，建议不要用Edge浏览器比较好。

此外，QQ浏览器的硬件占用情况总体控制良好，CPU峰值只有10.9%，GPU只有30.7%，内存占用率也不算高，是一款比较节省能耗的浏览器。

·11款浏览器初始界面点评

本次横评虽然有性能排名，但这并不代表笔者非要推荐大家使用排名前几位的浏览器。正如文章开头所言，浏览器使用是一个习惯问题，即便您习惯使用性能表现最糟糕的世界之窗，只要用着舒服，笔者认为也没有什么问题。所以本篇横评不涉及浏览器使用优劣的评判。

如果您像我一样习惯简约风格，那么可以选择Chrome这样的。如果您喜欢打开浏览器就看到各种新闻，则可以选择QQ、360、傲游这些带有丰富内容的浏览器。如果您喜欢玩一些网页游戏或者购物，那么2345、猎豹这些将相关应用直接集成到侧边栏的浏览器当然是最合适的。

接下来我们还是对11款浏览器的初始默认界面做一些点评，大家也可以看看哪种界面更戳你的点。

微软Edge总体来说是目前性能表现最好的浏览器，虽然本身是基于Chrome内核打造，但微软的优化调校相当出色。Edge浏览器界面可以选择多种模式，默认会集成bing的搜索框，每次打开都会随机匹配一张精美壁纸，下方会显示登录过的网站，再下来会有一些内容标签，整体来说，Edge的界面集简洁与实用性于一体，整个风格笔者个人还是比较喜欢的。

Edge

Chrome的默认界面当然是经典的Google搜索栏，但在国内当然是用不了。搜索栏下方可以由用户自定义一些常用的网站，上方的地址栏和工具栏都非常简洁，这也是笔者一直使用Chrome的主要原因。另外Chrome最强大的地方自然在于其丰富的插件，善加利用将改变你对浏览器的认知。

Chrome

在Chrome之前，笔者用过一段时间的傲游，说实话除了当时版本速度比较慢意外，整体体验相当不错。现如今其默认界面依旧是导航和内容的聚合页，另外也置顶了百度搜索框，同时最上方会显示地点、天气、温度等信息。相对于Chrome，傲游的工具栏算是比较复杂，另外左侧依旧是傲游经典的收藏夹。

傲游

Opera的默认界面主要是一些预设网站的聚合，下方是最近登录网站的记录。不过有一点比较违和的地方就是最近登录网站的标签名叫做“建议”，笔者还是建议Opera的工作人员看到的话可以改一改。

Opera浏览器最侧边栏的功能还是比较有意思的，预置了Ins、FaceBook等国内打不开的网站，另外还有一些功能选项。总体来说Opera的主界面非常简洁，但也是集简洁与功能性于一体的设计风格。

Opera

FireFox的主界面同样是网站和内容的聚合页，上方默认百度搜索栏。它有一个比较独特的设计是右上角有“移动设备上的书签”功能，登录火狐账号就可以将移动设备上的书签同步过来。

此外火狐浏览器的标签页设计也比较独特，整体就像是悬浮于标签栏之上。

FireFox

QQ、360和搜狗三款浏览器的总体风格很像，QQ、搜狗默认搜索栏自然都是搜狗，360默认搜索栏是360，三者整体布局和内容差不多，QQ浏览器左侧有工具栏，360和搜狗则相对简洁一些，但是360在打开网页之后一些小功能还是比较好用的，比如实时录屏等，不过频繁的小提示弹窗会让初次使用的人感到厌烦。

QQ

另外360浏览器安装之后会自带一个杂志封面（壁纸）的功能，只要有几分钟不动电脑，它就会自动将屏幕切到这个模式，果然不愧是传承于360全家桶的基因。不过这个功能对实际使用电脑的便利性影响不大，只是默认给你带这么个功能还是多少让人觉得有些不爽。

360

搜狗

2345和猎豹浏览器默认同样是聚合页，不过二者相对于前面的浏览器来说，杂七杂八的元素比较多，页游、电商等元素都被集成到左侧工具栏上。

2345

猎豹浏览器的设计风格也与众不同，与另外10款浏览器的扁平化设计风格相比，猎豹浏览器的设计更加拟物、更加立体，给笔者的感觉，用个不太恰当的比喻就是有一种乡村朋克风格。

猎豹

世界之窗的初始界面是11款浏览器中最为简洁的，只会显示最常访问的网站，甚至连搜索栏都没有，喜欢极简风格的朋友可以考虑这款浏览器。不过因为很久都没有更新版本，所有现代网页的一些元素有可能不能正常加载。

世界之窗

·评测总结

本次评测的11款浏览器中，世界之窗因为长时间没有更新，所以整体表现还停留在3-5年前的水准，而且一些时下网页的功能与特性也无法正常支持，因此这款浏览器虽然还能够下载到，但是不建议大家去使用。

从性能测试来看，Edge、Chrome、傲游、Opera是相对比较好用的浏览器，Java脚本的运行效率、图形渲染、Web应用的响应速度、Web 3.0的特性等方面都非常不错，但是相对应的，这些浏览器对于硬件资源的占用率也比较高，如果是使用笔记本电脑，且不插电的话，耗电量相对会比较高。

FireFox作为唯一一个非Blink引擎的浏览器，从实测来看其技术力近几年已经逐渐掉队，但这并不代表火狐浏览器不好用。虽然理论性能有所不济，但在实际应用中，火狐依旧是比较不错的一款，习惯于火狐的朋友其实没有必要放弃，毕竟浏览器这东西用着舒服才是王道，性能测试看个热闹就好了。否则Edge浏览器也不会持续沦为其它浏览器的下载工具。

QQ、360、2345、搜狗、猎豹这些浏览器虽然性能表现不如上述几款，但硬件资源占用较低，优化较好，尤其是QQ浏览器，笔记本不插电使用的话，QQ浏览器是比较节能的选择。不过国内设计的这些浏览器的通病就是乱七八糟的元素太多，对于喜欢极简风格的用户来说却是不太可能对它们产生好感。

(7962818)

TML5是一种标记语言，用于创建和呈现网页内容。与早期的HTML版本相比，HTML5具有许多新的功能和改进，可以更好地支持动态内容、多媒体、图形和互动性。在本文中，我们将讨论如何使用HTML5制作网页，以及HTML5与旧版本HTML的区别。

首先，让我们了解一下HTML5的一些主要功能和优势。HTML5具有以下特点：

1. 语义化标签：HTML5引入了一些新的语义化标签，例如、、、等。这些标签的使用可以增强网页的结构并提高搜索引擎的可读性。

2. 多媒体支持：HTML5内置了对多媒体的支持，例如和标签，可以在网页上直接播放视频和音频文件，而无需使用第三方插件。

3. Canvas绘图：HTML5引入了元素，允许开发者通过JavaScript在网页上绘制图形和动画。这对于创建复杂的图表、可视化效果和游戏非常有用。

4. 本地存储：HTML5提供了几种本地存储方法，例如localStorage和sessionStorage。这些方法可以在客户端存储数据，使得网页可以更快地加载和响应用户的操作。

5. 表单增强：HTML5为表单提供了许多新的输入类型和属性，例如日期、时间、颜色、URL等。这些功能减少了对JavaScript的依赖，在客户端验证和收集用户输入数据时更加方便。

现在，让我们看看如何使用HTML5制作网页的基本步骤。

步骤一：创建HTML文档结构HTML5的网页结构包括、和等标签。在标签中，可以设置网页的语言属性（）和字符编码（）。在标签中，可以添加网页的标题（）和其他元数据（标签）。在标签中，可以编写网页的内容。

步骤二：使用语义化标签为了增强网页的结构和可读性，应尽量使用语义化标签。例如，标签用于网页的标题和导航栏，标签用于网页的导航链接，和标签用于划分网页的内容部分。

步骤三：插入多媒体使用、和

等标签插入多媒体内容。例如，使用标签可以插入视频文件，并设置其属性（例如src、width、height）来指定视频的来源和尺寸。

步骤四：绘制图形和动画使用标签和JavaScript绘制图形和动画。通过在标签中指定宽度和高度，并调用JavaScript函数绘制图形，可以在网页上显示自定义的图形和动画效果。

步骤五：使用本地存储使用localStorage和sessionStorage等方法，在客户端存储数据。通过调用JavaScript的API，可以将数据存储在浏览器中，并在需要时读取和更新数据。

步骤六：优化网页性能使用HTML5的新功能来优化网页性能。例如，使用新的表单输入类型和属性可以在客户端验证和收集用户输入数据，减少对服务器的请求和响应时间。

现在，让我们来了解一下HTML5和HTML的区别。

HTML5是HTML的第五个版本，是对以前的HTML版本进行的改进和扩展。与HTML4相比，HTML5具有许多新的功能和语义化标签，使开发者能够创建更现代、丰富和交互性的网页。

以下是HTML5和HTML的一些区别：

1. 标签语义化：HTML5引入了许多新的语义化标签，如、、、等。这些标签增强了网页的结构和可读性，有助于搜索引擎优化和可访问性。

2. 多媒体支持：HTML5内置了对多媒体的支持，如和标签，可以在网页上直接播放视频和音频文件。而在HTML4中，需要使用第三方插件（如Flash）来实现相同的功能。

3. Canvas绘图：HTML5引入了元素，允许在网页上通过JavaScript绘制图形和动画。而在HTML4中，图形和动画的创建通常依赖于第三方插件或JavaScript库。

4. 本地存储：HTML5提供了localStorage和sessionStorage等方法，在客户端存储数据。这使得网页可以更快地加载和响应用户的操作。相比之下，HTML4需要通过服务器来存储和获取数据。

5. 表单增强：HTML5为表单提供了新的输入类型和属性，如日期、时间、颜色、URL等。这减少了对JavaScript和服务器的依赖，提高了用户体验。

总结起来，HTML5相对于HTML4具有更多的功能和改进，使得开发者可以创建更现代、丰富和互动性的网页。它提供了语义化标签、多媒体支持、Canvas绘图、本地存储和表单增强等功能，为网页开发提供了更多的选择和可能性。

果想开发一个网站，除了要精通后端开发语言（如：php）外，还要精通HTML代码。那么，什么是HTML呢？HTML是一种超文本标记语言，它包含有众多的标签，我们可以通过这些标签，把不同的internet资源（如：文字、图片、视频、音频、表单等等）整合在一个统一的文档中，这就形成了我们可以看得见的网页。那么，HTML都有哪些常用的标签呢？

一、文档类型声明。

html5文档类型声明：<!doctype html>

html4文档类型声明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、html主标签。

这个标签是html最外层的标签，所有其它的HTML标签都要放在这个标签的内部。

<html>

<head></head>

<body></body>

</html>

三、双标签和单标签。

在HTML标签中，有的标签是成双成对的，如：<html></html>（如下图）；而有的标签是单个的，如：<hr>横线标签。

四、head头部标签。

head头部有以下几种常用标签：

meta：主要提供有关页面的元信息。

link：用来定义文档与外部资源的关系，最常用的是调用CSS样式文件。

title：页面标题的标签。

script：用来调用JS文件或JS代码。当然，script标签也可以在body主体中使用。

五、body主体标签。

1、块级标签。

块级标签的特性是：独自占有一行；标签的高与宽、边距可以修改；没有设置宽与高时，默认继承父标签。例如：

<div>div1</div>

<div>div2</div>

<style>

.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

</style>

前端页面显示的效果如下图：

常用的块级标签有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

2、内联标签。

内联标签与块级标签不同，它不能独自占有一行，会与其它内联标签在同一样展示；内联标签的高与宽、上下边距是不能修改的，它里面的文字或图片有多高，它就是多高。例如如下代码：

<style>

.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

</style>

<span>span1</span>

<span>span2</span>

CSS样式代码跟块级标签的例子是一样的，而显示的效果就不一样了，宽与高、上下边距没有效果。如下图：

常用的内联标签有：span、a、b、strong、i、em 。

3、内联块级标签。

内联块级标签，既有一些内联标签的特性，也有一些块级标签的特点：它不能独自占有一行，但是可以修改它的宽度和高度。例如下面这段代码：

<style>

.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

</style>

<img src="w5.jpg" alt="">

<img src="w5.jpg" alt="">

CSS样式代码跟块级标签的那个例子仍然是一样的，图片的宽和高、上下边距修改成功，而2个图片不能独自占有一行，而是在同一行。如下图：

常用的内联块级标签有：img、input、textarea。

4、区域标签。

所谓区域标签，就是主要用来划分布局页面区域的。如：头部、主体内容、侧边栏、底部。这样划分的好处是：让页面布局更加清晰明了。

常用的区域标签有：header（头部）、footer（底部）、nav（导航）、aside（侧边栏）、section（主体）、article（独立内容）。

5、表单标签。

这个表单标签我们也是会经常用到的，如：登录网站的时候、提交数据的时候。如下图的评论表单：

​表单常用的标签有：form、input、select、option、textarea 。

以上就是我们开发网页时，会常用到的HTML标签。当然，HTML标签远不止这些，尤其是html5出来后，新增了许多的新标签。但是，有些标签在我们开发中很少用到，所以，这里就没有做相应的介绍。