| 文章描述：为了满足移动用户的高期望,你需要对网站针对移动设备进行优化,在4秒或更少的时间里加载完毕。最好的方式来达到4秒这个魔术时间，是通过减少JavaScript和优化HTML、CSS和图像，保持智能手机上最少的处理负荷。 |
最近一项 研究表明,80%的网民对移动端的浏览体验感到失望,同时,当体验提升时,他们会在智能手机上花费更多的时间。
这不奇怪，因为64%的智能手机用户希望网站可以在4秒内加载完毕，但一半的网站花费了二倍以上的时间，达到了9秒。这篇文章会阐述一些可以使你的网站在移动端跑得更快的技术。
移动端用户的下载速度
让我们来研究下究竟是什么影响了智能手机上的网页加载速度。
最明显的原因是智能机的网速。最佳情况下，移动端用户使用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是不能阻止文件下载的。测试下面的代码：
<div
style="display:none;">
<img
src="logo-none.png" />
</div>
<div
style="visibility:hidden;">
<img
src="logo-hidden.png" />
</div>
你可以观察下面的瀑布图，图片容器设置display: none或visibility: hidden后仍然会被下载。
替代方案是利用css加载背景图片，之后利用media query媒体查询来通过条件隐藏图片。这个技术最初被Jason grigsby测试过，之后被tim kandlec进一步拓展。亚马逊独立的移动端页面使用了此种技术，根据设备来条件加载特定的图片。
<meta
name="viewport"
content="width=device-width">
<style>
@media (max-width:600px) { .image
{ display:none;
} } @media (min-width:601px) { .image
{ background-image:
url(image1.jpg);
} } </style>
<div
class="image"></div>
你可以看到图片不加载的瀑布图：
[1] [2] [3] [4] [5] 下一页
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索图片
， 移动
， 移动端
， 网络在3g、4g
， 网站
， 时间
， 用户
， 速度
， pcworld
移动端javascript
，以便于您获取更多的相关知识。