移动端提升页面速度与网站性能-白红宇

移动端提升页面速度与网站性能

阅读量：4700 次

发布时间：2019-06-09

本文共 4787 字，大约阅读时间需要 15 分钟。

移动端用户的下载速度

让我们来研究下究竟是什么影响了智能手机上的网页加载速度。

最明显的原因是智能机的网速。最佳情况下，移动端用户使用3g与4g上网。在美国，57%的用户使用3g上网，27%的用户使用4g。在加拿大，4g用户更少。而在英国，4g还是新鲜事物。Pcworld的研究表明，在美国，3g平均下载速度为2mbps，4g则为6.2mbps。ofcom的研究显示，在英国3g的下载速度为2.1mbps。北美和欧洲以外的连接速度一般较慢。1mpbs可换算为122kb每秒，或者0.12mb每秒，因此以上的数据可以转换如下：

244 KB/s 3G用户平均网速值 (0.24 MB/s)

756 KB/s 4G用户平均网速值(0.76 MB/s)

如果把上述值乘以移动用户等待时间4秒,这意味着网站对于3g用户来说最大为1mb，而4g用户为3mb。

然而下载速度并不是瓶颈，及智能机的内存与cpu才是瓶颈。即使手机可以在4秒内下载完1mb，页面也要花费更长的时间去加载，因为手机需要接收并解析代码与图片。

在桌面端，下载文件只占显示网站时间的20%，其余时间花费在解析http请求，获取样式表，脚本文件及图片上。由于移动端的cpu，内存与缓存跟桌面端完全无法相提并论，这些在手机上会花费更长的时间。

怎样减少加载时间

构建一个快速的网站，就是一个做出艰难决定与砍掉非核心体验的过程。如果某一项需求价值不大，去掉之。这个原则适用于所有开发阶段,尤其是规划和编码时。

减少依赖文件 : 更少的文件意味着更少的http请求与更快的加载时间

降低图片大小: 适应与调整高分辨率图片，在额外的下载时间中占居榜首，占用了宝贵的内存与处理资源。

减轻客户端负担: 最佳实践是重新思考你的javascript，并使之降低到最小尺寸

怎样减少依赖文件

如果你想为移动端用户隐藏图片，display:none与visibility：hidden是不能阻止文件下载的。测试下面的代码：

你可以观察下面的瀑布图，图片容器设置display: none或visibility: hidden后仍然会被下载。

替代方案是利用css加载背景图片，之后利用media query媒体查询来通过条件隐藏图片。这个技术最初被过，之后被。使用了此种技术，根据设备来条件加载特定的图片。

你可以看到图片不加载的瀑布图：

保持最小数量的外联样式表

如果你已经根据断点来加载分开的样式表，你需要仔细思考这样的做法了。我们测试了以下的代码：

你可以看到这四个样式表在竖屏下(portrait mode)都被加载了.

因此无论如何这些样式表都会被加载，你需要把这些文件合并在一个文件里，减少http请求。另一种方法，你可以通过后端处理，通过判断设备来自动插入样式表。 (这种方式在的响应式网站中使用过)。

另一种方案可以使用内部样式。亚马逊独立的移动产品页面有一个6 KB大小的外部样式表,连同一些内部样式。这只需要通过一个额外的HTTP请求来下载所有的页面样式。亚马逊的桌面版本并不是很高效,带有9个外部样式表,总共40 KB。

利用CSS3代替图片

圆角，阴影，渐变填充等，这些样式不需要使用图片，可以减少http请求，加快加载时间。

Css3可以减少http请求，但增加了处理负荷。我们创建了一系列的html文件，每个文件包含一个基本的css3特性。参考下面的图表，你可以发现css3带来的处理时间很小，但不能不考虑。特别注意box-shadow对处理时间的影响最大。

DATAURI来代替图片与WEB字体文件

可以不使用任何额外资源就可以向html及css中插入内容。这个技术可以在web页面中插入任何内容，通常被用于插入图片及web字体文件。这个技术最大的好处是可以减少http请求。

Data uri使用很简单，你可以按照下面的格式，使用base64编码过的数据直接插入html与css中代替图片文件。

data:[MIME-type][;charset=encoding][;base64],[data]

举个例子，下面的小图标就是用data uri创建的:

代码在这：

Wordpress.com的响应式网站使用这个技术插入了图片及字体。也使用了这个技术，他们的网站在智能手机上，四秒内就加载完毕了。

使用这项技术，从此不用为外部图片及字体文件劳心费神。也需要测试与比较是否值得应用这项技术来代替传统方式。

可缩放矢量图形(SVG)而不是图片

就像data URIs,(SVG)可以被嵌入到一个页面来减少HTTP请求数。例如,下面的图片是一个内联SVG:

这是代码：

SVG文件可以通过一个矢量图形编辑器,如Adobe Illustrator创建。一旦创建,在文本编辑器中打开文件并把其代码拷贝出来(减去任何不必要的数据)。

上面的代码在HTML文件中会生效，,但不会在样式表中生效。若在一个样式表中嵌入SVG文件,需要先将它转换为一个数据URI。如果这样做，我们需要从编辑器中(一定要包括元数据)拷贝出,用base64编码,然后使用以下格式嵌入样式表:

data:image/svg+xml[;base64],[data]

这是代码：

background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTcuODEycHgiIGhlaWdodD0iMjguNjY0cHgiIHZpZXdCb3g9IjI5Ni42NDEgMzgxLjY4OCAxNy44MTIgMjguNjY0Ig0KCSBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDI5Ni42NDEgMzgxLjY4OCAxNy44MTIgMjguNjY0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNFRTFDNEUiIGQ9Ik0zMTQuNDI4LDQwMS4wODJjLTAuNDQzLTUuNDg5LTUuMTQ2LTkuNTIyLTcuNTItMTQuMTg2Yy0wLjgxNi0xLjU5Ny0xLjM1Mi01LjIwOC0xLjM1Mi01LjIwOA0KCXMtMC41NTUsMy43OTItMS4zODgsNS40MjVjLTIuMjMzLDQuMzcxLTcuMTI3LDguOTk5LTcuNTA3LDE0LjA0N2MtMC4zNiw0Ljc5NCw0LjEwMSw5LjE5MSw4Ljg5Niw5LjE5MQ0KCUMzMTAuNDksNDEwLjM1NCwzMTQuODE2LDQwNS45NDEsMzE0LjQyOCw0MDEuMDgyeiIvPg0KPC9zdmc+DQo=);