整合营销服务商

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

免费咨询热线:

基于H5的Speedtest网速测试工具搭建

言:

html5 Speedtest可用于查看下载速度、ping速度、上传速度;很小巧方便,直接打开页面点击一下start就能自动检测,你本机到远程服务器的网络状况,快速得到观测数据;这款服务器测速软件基于html5+php环境运行,使用非常简单。

一、speedtest原理简介:

speedtest以HTML和JavaScript为主,利用客户端的浏览器通过上传和下载垃圾数据来测试HTTP传输速度,和大家常用的speedtest.net差不多.

speedtest使用任意操作系统上的任意Web服务器作为服务端,所以理论上它支持Windows/MacOS/Linux/Unix等系统,IIS/Nginx/Apache/lighttpd等服务器.

任意浏览器作为客户端如Chrome/Firefox/IE11/Edge/Safari/Opera?

speedtest默认使用PHP作为服务端,目前也有node.js版本,也可以只用纯静态服务器.

二、speedtest怎么安装呢:

01

安装相关组件

yum install httpd php git -y

02

克隆speedtest代码

git clone https://github.com/adolfintel/speedtest.git

cd speedtest/

cp -R backend/ example-singleServer-pretty.html *.js /var/www/html/cd /var/www/html/ mv example-singleServer-pretty.html index.html




03

更改当前目录所属

chown -R apache *


04

重启httpd服务

systemctl start httpd

05

浏览器中访问主机ip测试

三、 总结

不论是测内网还是外网不论是测 路由器, AP, 网卡还是VPS不论是测 有线 NAT, 2.4G/5G WiFi 等软件转发

只要打开浏览器, 输入 speedtest 地址就行了.

speedtest 测速的优点:

  • 测试简单暴力. 浏览器就能测, 无需别装 app.
  • 界面简洁明了. 直观且无广告不收费.
  • 上行下行兼顾. 不用双向测试, 不像 iperf3 只能单向.

speedtest 测速的缺点:

  • 用户技能要求. 需要自己安装测速服务器, 希望本贴能解决这个问题.
  • 测速协议片面. 基于 HTTP 协议测速, 有些片面. 不过95%的用户有90%的网络使用都是 HTTP. (纯瞎说的 哈~)
  • 性能瓶颈要求. 因为基于 Web 服务器和 JavaScript, 所以服务器和客户端性能不能太差. 测试 2.5/5/10 千兆可能力不从心.

END

esky天极新闻2015-12-09 11:05:14

【Yesky新闻频道消息】Flash由于众多的安全漏洞问题如今已经变得臭名昭著,现在许多网站都已经放弃Flash转而使用HTML5,最近著名的测速网站Speedtest.net也开始放弃使用Flash。

Speedtest运营者是Ookla,当前该公司已经在测试Speedtest的Beta版本,该测速版本基于HTML5标准,在体验上要比此前的Flash测速模块要轻快不少,用户不需要安装插件就能测试网速。

简言之,Speedtest的变化也是Flash即将被彻底淘汰的又一个主要标志,甚至Adobe自家都声称将让用户和内容创建者逐步远离Flash,可见Flash离末日已不远了。(via:Ubergizmo)

日微软在官网终于放出了Chromium内核打造的新款Edge浏览器,感兴趣的朋友可以“”进行下载。

此前,有关微软将使用Chrome浏览器内核打造全新Edge浏览器的新闻就已铺天盖地,本次终于放出下载版可见微软已经确认其能够给大众开放来使用了,这也就意味着离正式版已经不远。根据外媒消息,新款Edge浏览器可能会随Windows 10 20H1更新直接登陆Windows 10系统,并取代现有的Edge内核老款Edge浏览器。

自Windows 10系统发布以来,其市场占有率不断攀升,已经达到了53%。但是Edge浏览器作为Windows 10系统默认浏览器,其在大多数时候扮演的角色是其它浏览器的下载工具,一旦用户下载完自己习惯使用的浏览器,那么Edge浏览器的登场几率就非常低了,这使得Edge浏览器的地位和处境非常尴尬。

基于Chromium内核打造的新款Edge浏览器能否扭转这种局面呢?看过这篇之后,我想每个人心中都会有一个明确的答案。

·Chromium内核Edge浏览器简介

微软在官网下载页面放出了新款Edge浏览器的三个版本:Beta、Dev和Canary,三者有何区别我们会在后面的浏览器信息部分进行详细介绍。本次笔者下载了Canary版本,之后的文章里,我们将新款Edge浏览器统一称为Edge Canary,但是要注意,这并不是新款Edge浏览器的真正命名。

首先来看看Edge Canary浏览器的界面,如下:

第一次打开Edge Canary

通过安装包安装好之后,Edge Canary会自动打开,并进入上图所示界面。用户可以在这里执行两个操作:一是设置浏览器默认页面风格;二是执行其它浏览器数据的导入,且导入速度非常快。

欢迎页面右上角也可以随时调整页面风格

如果没有在开始界面设置页面风格也不用担心,后续可以通过空白页右上角的“小齿轮”图标的下拉菜单来进行调整。微软给出了三种默认风格,包括聚焦、启示和信息,另外还可以根据自身喜好进行自定义,不过现在这个功能还不是太过完善,能够设置的选项就是热门网站、每日一图(相当于浏览器的壁纸)和显示提要三项。

“启示”风格页面

“信息”风格页面

不同风格的默认界面所展示的信息不同,聚焦页面没有壁纸,背景为白色或黑色,中间为必应搜索框,下方为常用网站标签;启示风格与聚焦风格页面内容一样,只是多了每日一图,而且必应搜索框和常用网站标签上下分开;信息风格页面多了MicroSoft资讯页,可以看作是新闻聚合页。

可以通过欢迎页面了解浏览器特性

如果想要深入了解Edge Canary特性的话,可以通过浏览器的欢迎页面查看各项特性演示。

与Chrome商店庞大的插件群相比,Edge Canary的插件数量总共128款

从扩展界面进入微软插件商店

既然是基于Chrome浏览器内核打造,那么Edge Canary自然支持插件。目前微软的插件商店已经上线,通过Edge Canary右上角的菜单栏“扩展”选项进入扩展界面,之后再点击左上角的“从Microsoft Store获取扩展”文字链来进入插件商店。

进入Chrome应用商店的话,中国用户需要通过科学上网的方式来实现,微软插件商店目前可以正常进入。不过与Chrome插件数量对比的话,微软商店中的插件数量并不多,满打满算只有128款。不过我大概浏览了一遍,常用的插件都有,比如Adblock Plus、McAfee WebAdvisor等。另外,微软插件商店的响应速度非常快,网络质量极佳。

插件位置与Chrome一样,都在右上角账号左侧

插件安装好之后,会跟Chrome浏览器一样出现在右上角账户名左侧位置。

插件管理界面与Chrome不同

Chrome浏览器插件管理界面

不过插件管理界面与Chrome浏览器的布局不同,Edge Canary采用左右栏布局,Chrome采用上下布局,不过基本功能都一样。

可以设置黑色皮肤

Edge Canary默认皮肤为浅色,可以通过设置选项调整为黑色,笔者个人更喜欢后者。

下载器页面UI

下载器UI界面与Chrome相比也是大同小异。不过从实际体验来看,Edge Canary下载器目前不如Chrome好用,同样的软件Edge Canary下载可能会出错,但Chrome浏览器则可以跑满网速。

从整个界面设计来看,Edge Canary就像是Chrome浏览器的翻版,整体布局、菜单选项、收藏夹模式等都与Chrome相差不大,一眼就能看出其与Chrome的关系。

不过Edge Canary在性能方面与Chrome是否也相差不大呢?下面我们进入测试环节来看看具体的结果究竟如何?

·测试说明

1.本次尽量找一些不涉及这五款浏览器的测试标准,像IE系的测试,谷歌系的测试,Mozilla系的测试能PASS就PSAA掉了。JetStream 2这样的苹果系测试与这些浏览器没有什么交集,所以被引入了进来。

2.除了HTML5、ARES-6、JavaScript脚本、操作响应速度这几项基准性能测试之外,我们还使用B站超级弹幕视频:【炮姐/AMV】我永远都会守护在你的身边!(B站ID:av810872)进行了内存、CPU、GPU峰值占用情况的测试。

3.本次测试各浏览器均为2019年9月21日当期最新版本号,后续更新成绩如有变动请按实际测试为准。

·测试项目与相关说明

JetStream 2:JavaScript脚本测试;

JetStream 2细致的JavaScript脚本测试

Speedometer:网页操作响应速度测试;

Speedometer模拟操作响应速度测试

MotionMark:图形渲染测试;

MotionMark的高负载图形渲染测试

HTML5:HTML5兼容性综合测试。

详细的HTML5测试项目

·测试平台硬件信息:

处理器:英特尔酷睿i7 8086K

内存:16GB×2 DDR4-3200MHz内存

硬盘:英特尔760P 1TB固态硬盘

显卡:公版NVIDIA GeForce GTX 1070

操作系统:Windows 10 1903

·五款浏览器基本信息

本次测试主角是基于Chromium打造的新款Edge浏览器,采用了与Chrome浏览器相同的Webkit内核。新款浏览器像Chrome一样提供了三种不同激进程度的版本,分别为Beta版,Dev版以及Canary(金丝雀)版,如下:

Beta、Dev、Canary三种通道

Canary版本最为激进,几乎每天都会进行更新,且不会提供更新日志,因此有可能会遇到较为严重的BUG;

Dev版本功能激进,但可用性较好,对于普通用户来说,如果想要尝鲜,又不想太过保守,Dev版算是首选,当然动手能力强的可以选择Canary版本;

Beta版自然是最为保守的版本了,一般来说基本相当于正式版,不会有大的BUG,比现有正式版会略微超前一点。

本次我们选择了最为激进的Edge Canary版本进行测试,另外还选择了Chrome、Edge、Opera、FireFox四款浏览器做参照。下面是这五款浏览器的基本信息:

5款浏览器基本信息一览

·性能测试

接下来看看四项基准性能测试情况,具体如下:

5款浏览器基准性能测试

可以看到,基于Chromium打造的Edge Canary与Chrome浏览器各项性能相差不大,二者总分也极为相近。

此外,五款浏览器中,FireFox综合性能最强,总分达到1409.057分;Opera浏览器在图形性能方面吃了不少亏,总分基本与Chrome持平。

而一贯被用户轻视的Edge内核Edge浏览器让人大跌眼镜,虽然操作响应速度表现极差,但其它三项测试表现极其不错,总分甚至超过了Chrome,位列本次测试的第二名。

从测试也可以看出,其实Windows 10系统自带的老款Edge浏览器在性能上并没有明显短板,甚至还比别家浏览器要更好一些,但是操作响应速度这种直接关系到用户体验的单项测试表现不佳,直接反映出用户为什么不愿意用Edge浏览器的原因。

基准测试得分明确之后,再来看看内存、CPU、GPU占用情况。我们选择了B站经典视频《【炮姐/AMV】我永远都会守护在你的身边!》来进行测试,下图显示了该视频峰值弹幕量,而其总弹幕量已经超过百万。因此能够非常明显的影响到浏览器的内存占用情况。

峰值内存占用情况

以下是五款浏览器默认内存占用、峰值内存占用、峰值CPU百分比、峰值GPU百分比的测试情况汇总:

5款浏览器硬件占用情况对比

总体来说,Edge Canary表现与Chrome相差不大,但是峰值内存、CPU、GPU占用率都比Chrome要略高一些,同时比老款Edge浏览器要略低一些。

五款浏览器中,最吃内存的是FireFox,默认占用与峰值占用都明显高于其它四款,所以内存小的话用起来会比较捉急。另外其对GPU加速的依赖度也较高。

Opera浏览器比较依赖GPU加速,峰值GPU占比达25.5%,另外Edge Canary也比较依赖GPU加速,峰值达到23.2%,

此外,新老Edge浏览器的最明显不同就是在GPU加速方面,老款Edge浏览器不太依赖GPU,峰值占用率也仅为6.1%。

·Edge Canary使用感受

作为一个纯粹的10年以上Chrome浏览器老用户,我在打开Edge Canary的那一刻,就深刻感受到了其与Chrome浏览器之间的联系。标签页、地址栏、收藏栏的布局一模一样,只是在图标的UI设计上略有不同。

本篇文章就是使用Edge Canary浏览器完成,虽然在一些细节方面与Chrome有一些细微差异,但总体就像是在使用Chrome浏览器一样。另外虽然是Canary版本,但至少我下到的这一版本在使用过程中没有出现任何BUG。在兼容性、页面响应速度、视频流媒体播放、网页图形渲染方面没有感觉到卡顿。

就目前情况来看,Chromium内核打造的新款Edge浏览器完全可以在未来Windows的更新中取代掉现有的Edge内核Edge浏览器,在性能基本持平的情况下,Edge Canary对操作响应速度的提升非常大,足以带给用户优于老款Edge浏览器的使用体验。

【ZOL客户端下载】看最新科技资讯,APP市场搜索“中关村在线”,客户端阅读体验更好。(7276250)