meathill / fasttest

A small speed test application.

Hi, I am Meathill

👋 Hi there

I am Meathill Zhai. I am a full-stack (front-end biased) developer in Guangzhou, China 🇨🇳.

I am working at VeloSoft, code.fun. Our product can generate code directly from the design draft, hoping that could improve the productivity of front-end developers.

我是 Meathill，全栈偏前端开发者，现居 🇨🇳中国广州。

我目前供职于光速软件，code.fun，我们的产品能直接从设计稿生成代码，希望提升前端开发者的生产力。

🌱 I’m currently learning

• Drill down into the front-end tool chain, like Webpack, Babel, esbuild, swc, vite, etc.

• TypeScript

• Front-end performance optimization

• Vue 3.0

• Web UI e2e test

• Web Automation

• ....

• 钻研前端工具链，比如 Webpack/Babel/esbuild/swc/vite

• TypeScript

• 前端性能优化

• Vue 3.0

• Web UI e2e 测试

• Web 自动化

• ...

💬 Ask me about

I am glad to answer any development questions, career questions, technical team management questions, etc.

Please feel free to ask me if you have any of those.

---

我很乐意交流各种开发问题、职业生涯问题、技术团队管理问题。请随意提问，我会知无不言。

中文问题也非常欢迎。

📫 How to reach me

• 📧 Email [email protected]
• 📝 Blog https://blog.meathill.com
• ❓ SF https://segmentfault.com/u/meathill

fasttest's Issues

测试结束后的文案需要update

请改为Your internet speed index:

网站主体文案 (英文)，放在afasttest.com的footer上方

话说这个未来要考虑翻译和维护（英文本身肯定也要改），看看有什么好办法能让编辑未来可以维护呢？如果能有一个后台编辑框最好（raw HTML就可以了，不需要做富文本）。这个得麻烦你想一下。

样式上，宽度与上方的对其就好。这个主要是给搜索引擎看的。效果如图：

HTML内容如下，可以直接复制。

<h2>What affects my internet speed?</h2>

<p>Your internet speed may vary from many different factors. Let's dive into these details below:</p>

<h3>Ethernet vs. Wi-Fi vs. Cellular network</h3>

<p>Generally, an Ethernet network or fixed hard-wired connection will always beat Wi-Fi and Cellular network. However, many factors shared by all of them would cause your internet speed faster or slower. Here are some significant factors that would slow down your internet speed:</p>

<h3>Internet Service Provider (ISP)</h3>

<p>Your internet speed would be stable and fast if you choose a famous brand ISP (for instance, Google Fiber and Xfinity in the U.S.). The subscription plan you choose is also a major factor. Usually, the more expensive plan would give you faster speed.</p>

<h3>Hardware</h3>

<p>Sometimes, your device could be the reason why your internet lags. Old computers, laptops, tablets, mobile phones may have some issues connecting to modern networks. Outdated processors may slow down your internet speed a lot. And sometimes, you'd feel things got very laggy with these devices because of their low display refresh rate.</p>

<h3>Operation System / Proxy Settings</h3>

<p>Don't forget to check your operation systems, especially the proxy settings. Turn off unnecessary proxy/VPN would boost your network speed. If you have to use a proxy, please make sure you don't send all the traffic through it if possible. For instance, if you're ISP blocks Youtube or Google, you need to send the traffic related to Youtube and Google via the Proxy.</p>

<h3>Browser / Application</h3>

<p>Don't forget to check your browser and application versions and make sure you've upgraded them to the latest release. We highly recommend using Google Chrome, which has a majority market share and is frequently updated. Safari on macOS/iOS and Edge on Windows are also great.</p>

<p>It's pretty helpful to your speed if you can take advantage of the modern technologies created by those intelligent software engineers from Google, Apple, and those substantial internet companies.</p>

<h3>Network Traffic / Host Server</h3>

<p>Please note that the network traffic and host server are two factors that are commonly ignored most of the time. Hosting websites or other web services is not free. Sometimes it can be costly if there're many people access the service. When the traffic is too high, and the website owner didn't pay enough money to run the service. The hosting companies will limit the speed or even terminate the service. That would make you feel slow on your side, and sometimes, you may even fail to open the page or load the service at all. It could happen a lot if you are visiting a small website maintained by individuals.</p>

<h2>What affects my Ethernet network speed?</h2>

<p>Other than all the factors listed above. Ethernet network speed may vary to the cable and router. If your cable is very long, like more than 50 meters, your internet speed would also be affected.</p>

<p>Suppose you've subscribed to a costly service from your ISP service but have an inferior cable and router. Your internet speed would be very slow.</p>

<h2>What affects my Wi-Fi network speed?</h2>

<p>The wireless router A/P plays a vital role in your Wi-Fi network condition. If your route can only transfer data in 300M bandwidth, your money is wasted when you subscribe to a 1000M ISP. So please choose a fast router if you have subscribed to a good service from your ISP.</p>

<p>The position of your router is also a key factor in your internet speed. In theory, Wi-Fi signals are capable of passing through walls and other obstacles. However, in reality, some walls are thicker and may block part of the signals. Wireless signals can easily penetrate materials such as drywall, plywood, and other kinds of wood.</p>

<h2>What affects my cellular network speed?</h2>

<p>Your mobile phone is the key to cellular network speed. Say if you're using an outdated device, it may not support 4G or 5G. You will only have the 3G speed.</p>

<p>When you're moving very fast (for example, driving on the highway), the condition of your cellular network may also be unstable.</p>

<h2>What can afasttest.com help?</h2>

<p>afasttest.com is a very handy service that helps you measure your current network condition by connecting to the most popular public online resources hosted by huge internet service companies.

<p>We carefully picked #{count_of_resource} URLs from the internet, which includes:</p>

<h3>jQuery 3.0.1</h3>

<p>jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation. As of May 2019, jQuery is used by 73% of the 10 million most popular websites.</p>

<h3>Facebook JS SDK</h3>

<p>Facebook SDK for JavaScript. A rich set of client-side functionality for adding Social Plugins, Facebook Login and Graph API calls.
 </p>

桌面的Safari较小幅度错位

桌面的Chrome看起来暂时没出现这种问题。

i18n，希望可以增加对en默认词汇的修改

目前无法修改en的原文。

在桌面端resize窗口的时候，下方的test-items错位。

如下所示，chrome和safari桌面端都存在这个问题：

补充，在进入device view的时候，用responsive模式去resize，就不存在这个问题：

请评估一下png素材更新为svg的可行性（最好是inline）

希望把 src/assets 下的所有png素材替换为svg形式。现在在retina屏幕上看比较难看，如果替换成SVG，并且都用inline SVG的话，也省了不少http请求。

请 @meathill 看看是否有什么问题或者坑，如果没问题我就来生成所有的SVG代码了。

请增加GA代码，并留下你的gmail账号，我会share给你报告权限。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-25873290-18"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-25873290-18');
</script>

样式问题，底部的版权信息margin-top设置一个值

这里，请设置一个margin-top，我觉得大一点比较合适，可以设 160px

#footer {
    margin-top: 160px;
}

手机端动画较大幅度错位

手机端chrome和safari的动画都会错位，如图所示：

样式适配问题：在手机端，下方的模块部分溢出了：

1、手机端：

RPReplay_Final1623490701.MP4

2、桌面版：

当宽度比较低的时候，也会有问题，如图：

希望：

在宽度640px以内，双栏均分，margin用3px；
640px - 1024px，三栏均分，margin用4px；
1024px + ，四栏均分，margin用6px；
横向无滚动条。

希望可以在admin界面增加一个跳转到网站首页的链接

如下图右上角所示：

go-button的font-weight改为500

看设计稿确认了一下，请用这个：

#go-button {
  font-weight:500;
}

点击GO之后，中间的0会有一瞬间为系统默认字体，比较难看

点击GO之后，用户的注意力会在GO按钮附近，这时候会很快出现一个”0“，这个”0“最初是系统默认字体，如图：

过一会儿之后才会变成设计字体：

期初我认为是加载第三方字体需要一些时间，但刷新之后，依然会这样。实际上即便是刷新后能fix这个问题也不合理，因为大部分用户都是首次访问。这个网站的流量源我打算做30多个语言的测速关键词（目前看整个盘子稳定在日UV 100-300万左右）。大部分是Google来的用户，这些都是访问一次就离开的。

看能否想办法让它直接以设计字体出现。比如在默认字体阶段设置opacity为0或者display为none，直到确认字体已经加载并可以渲染了，再显示。

关于评级的一个方案

用自己的电脑做了一下实验：

对于比较小的库，10k以下的，速度在20 - 60 kb/s，有可能是前后的连接消耗的时间比较多。
对于比较大的库，100k以上的，速度在70 - 80kb/s

以上，都是用JavaScript document.append script的方式来算出来的。后附代码。

开不开VPN对速度有一定影响，但不是很大的。

我家的网络200M，这是房东之前装的。ISP的人说可升级到1000M，

---

拍脑袋，定了如下规则：

10k以下：

平均速度15下，1颗星；

平均速度达到15以上，30，50，200，给 2、3、4、5星

10k以上：

平均速度30下，1颗星；

平均速度达到30，50，150，250，给 2、3、4、5星

---

附，所用代码如下：

function aloadJS(e,t){
  var s=document;window,function(){var n=s.createElement("script");
  t=t||function(){},n.onload=t,n.src=e;try{s.head.appendChild(n)}catch(e){document.documentElement.appendChild(n)}}()
}
!function(){
  var count_max = 5;
  var p = p ? p :[];
  var count = 0;
  var interval;
  var tryone = function(){
    console.log('call tryone');
    var a = (new Date()).getTime();
    console.log('start:', a);
    aloadJS('https://sapui5.hana.ondemand.com/resources/sap-ui-core.js?5', function(){
      var duration = (new Date()).getTime() - a;
      console.log('duration:', duration);
      p.push(duration);
      if(count > count_max) {
        prompt('please record:', `${new Date().toISOString()}\t${p.join('\t')}`) ;
      }
    });
    count++;
    if(count > count_max) {
      clearInterval(interval);
    }
  };
  interval = setInterval(tryone, 1000)
}()

share-button 下的svg img希望能给一个统一宽度width

试了一下，统一到25px就好。

仪表盘错位

这个问题在iOS的chrome，safari和desktop（macos）的safari会出现，浏览器均为最新版。

只有在desktop（macos）的chrome没有问题。

具体效果如下：

尝试资源的数目对不上，admin里配置了6个，但是测试只有3个（显示为X/3）

有6个资源，但是点击GO之后只测了3个。

Chrome：

Safari：

无法连接时的UI状态设计

当某个资源用户无法连接时，UI上应该有一个提示。

早期先采用一种简单的办法吧，把opacity调低一点：

如果某个资源能连上，哪怕速度非常慢，请给至少半颗星。

没有连接成功的时候，请不要显示五角星

透明度没问题，但是五角星请去掉，从1星变为0星。