移动端页面优化测试，优化原理

我们必须首先讨论<script>标签的工作原理

<script>标记

<script src="jquery.js"></script>

我们之前的编程中经常可以看到这段代码，但是当浏览器解析这行HTML时，它实际上在做什么呢？ 其实做了很多，但是我们可以将其分解为两个高级任务：

1. 从本地磁盘缓存中获取文件或者是在网络中检索获取文件。
2. 解析并执行脚本。

我们分别探讨这两个任务。

下载jQuery

我们假设最坏的情况：用户第一次访问应用程序时没有缓存的资源。当浏览器没有缓存时，它必须转向网络以获取所需文件。衡量下载将花费多长时间，我们需要关注两个因素：带宽和延迟。

先说带宽

带宽是指浏览器可以从服务器下载资源的速度，通常以Mbps（兆位/秒）为单位。

2012年，全球移动网络的平均下载速度国内基本上是2Mbps左右，在阿三国家和北极熊国家会在1Mbps左右。数据有些过时，现在的网络会有更快的速度

• 移动公司的宣传中4G网络的速度可以达到3Mbps到6Mbps之间 

让我们使用这些数字来确定jQuery下载需要多长时间。我们将基于jQuery 2.1.0 最小版本（以g.zip压缩为28.65KB）的所有数字为基础（这里只有gzip大小很重要，因为这是通过网络发送的唯一内容）。

下载速度为1Mbps的网络每秒可以下载125KB，这意味着您的移动网络每提供1 Mbps的速度，您就可以下载4.36 jQuery /秒。或者说时间，这意味着jQuery需要

• 在最差的移动网络（1Mbps）上可以下载229ms，
• 平均46ms的平均下载时间（5Mbps），
• 特别好的移动网络（12Mbps）上下载需要19ms。

回到这些时间，乍一看这些数字与开发无关。实际上，从更一般的角度来看，带宽很少是移动Web性能的瓶颈。来自Google的前端性能报告，从5Mbps网络升级到10Mbps的网络 只能缩短页面加载速度的5%。

这样的话带宽不是瓶颈，那又是什么呢？

延迟

在Web应用程序的上下文中，延迟是浏览器与网络上的外部服务器连接所花费的时间。延迟通常以RTT或往返时间（Round Trip Time）来衡量-这是从浏览器到外部服务器往返的时间。

从历史上看，我们对台式机开发的延迟不担心，因为wifi网络上的RTT很小（通常在50ms以下）。

我们没有手机方面的运气。2012年，中国移动的平均RTT时间是344毫秒。这344毫秒是说每个HTTP请求（现在平均每个Web站点产生93个HTTP请求），还适用于每个DNS查找和TCP连接。

 

 

RTT数据来自2012年，平均RTT有所改善。例如，中国移动宣传其4G网络上的平均延迟现在为150ms。但是，尽管平均RTT有所改善，但是只有很小的额外收益，因为当前的网络在物理上规定的理论极限的很小范围内。

 

但是也有一种简单的方法可以避免使用脚本时产生的任何额外延迟成本：比如可以将jquery代码和自己的代码进行合并压缩，而不是将它们分开进行加载。

<!-- 之前的 -->
<script src="jquery.js"></script>
<script src="app.js"></script>

<!-- 之后的 -->
<script src="app.js"></script>

这个简单的更改消除了在应用程序中加载jQuery所需的RTT。相同的准则适用于从外部CDN加载jQuery。由于CDN提供程序的碎片化，jQuery版本和协议使用情况（http与https）的影响，命中CDN缓存的可能性非常低-从外部域下载该文件可能不会执行一次，而是执行三轮跳闸（DNS查找，TCP连接和HTTP GET）。

至此，我们已经看到从网络下载jQuery的成本是有限的。我们可以预期jQuery在平均网络上下载大约需要50毫秒，但是只要将jQuery与应用程序的其他JavaScript连接起来，就可以避免延迟成本。但是下载文件不是我们唯一关心的问题。接下来，让我们讨论一下浏览器在拥有文件后会执行的操作。

解析和执行脚本

浏览器下载jQuery的文本内容后，必须将其转换为字节码并执行。在看不到的地方，这是一个复杂的过程，我们只对整个过程的时间感兴趣，因此我们可以打印执行时间。

使用这段代码测试衡量jQuery的解析和执行需要多长时间。

 

<script>var start = new Date();</script>
<script>
    //完整的压缩的jquery
</script>
<script>alert( new Date() - start );</script>

尝试了console.time()和console.timeEnd()，没有使用，因为低版本的移动浏览器不支持。在支持的浏览器中，几乎所有的时间console.time()与新Date对象的使用时间相同。

所有桌面浏览器-IE，Chrome，Safari和Firefox-都可以轻松完成。其中最差的一个平均以17ms的速度解析/执行jQuery。

但是移动端。iOS7上的Mobile Safari和Android版Chrome可以很好地处理和执行，但是旧版本的Android就不行了。我找了一个旧手机在Android 2.2设备上进行的首次测试花了整整一秒钟的时间。我没有使用功能机进行测试，我怕性能会更差。

移动端浏览器（尤其是较旧的Android浏览器）上脚本的缓慢解析和解释是唯一偏爱小型JavaScript库的唯一令人信服的理由。

但是现在2021年，随着Android时代在不断改善和5G的崛起，移动端的代码解析速度也和桌面浏览器不相上下了。

 

我们经过了这些测试，回到问题。与任何软件开发问题的答案一样，答案始终取决于具体情况。让我们从总结我们的数字开始。

• 下载jQuery 2.1.0或28.56KB需要
  • 在最差的移动网络（1Mbps）上下载需要229ms。
  • 在平均移动网络上下载时间为46ms（5Mbps）。
  • 在很好的移动网络（12Mbps）上下载需要19ms。
• 只要将jQuery和其他的脚本进行合并压缩，下载jQuery便会增加零延迟。如果不是这样，其他脚本在项目中的加载时间中增加大约150毫秒，即1整秒的加载时间。
• 解析/执行jQuery 2.1.0需要
  • 在台式机浏览器上约15-20ms
  • 在大多数移动浏览器上几百毫秒
  • 在旧设备上可能需要整整一秒或更长时间。

根据HTTP档案，现在的网页平均数据

• 超过1.7MB，
• 发出超过90个HTTP请求，
• 拥有超过275K的JavaScript，
• 仅对JavaScript发出17个HTTP请求，
• 包含超过1MB的图像，
• 使仅46％的资源可缓存。

因此，想要优化就需要先确保

• 最小化的CSS / JS资源，
• 连接的CSS / JS资源，
• gzip压缩的HTML / CSS / JS资源，
• 压缩图像，
• 设置适当的缓存头，
• 删除不必要的HTTP请求。

通常，删除一两张图片比删除jQuery可以提高性能，并且操作起来容易得多。如果您执行了所有这些优化操作，但仍在移动设备上遇到性能问题，可以考虑删除jQuery之类的库。