当前位置： > 网页制作 > 心得技巧 > 文章内容

移动端网站优化:移动端网站优化全接触(5)

http://www.itjxue.com 2015-08-07 20:44 来源:未知 点击次数:

保持最少重定向(单独的移动网站)

亚马逊有一个重定向，来引导游客到单独的移动页面,这带来了0.4秒的延迟。与之相比,戴尔的网站有两个重定向,带来了1.2秒延迟。

让你的网站在移动端健步如飞

如何缩小图片尺寸

响应式图片

响应式图片的思路是让访客图像只下载那些最适合他们的设备的图片,对于智能手机,使用低分辨率图像,可以快速下载和渲染。

亚马逊的独立的移动产品页面使用响应式图像技术,利用媒体查询分配一个特定的背景图像到一个div。这是亚马逊的代码:

<!-- // This meta viewport is inserted for iPhones // --> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0">  <!-- // This meta viewport is inserted for the Nexus S // --> <meta name="viewport" content="width=device-width">  <style>     @media (max-width:390px) {         #image-container {             max-width: 109px;         }         .image {             background-image: url(image1.jpg);         }     }     @media (max-width:390px) and (-webkit-min-device-pixel-ratio:1.5) {         .image {             background-image: url(image2.jpg);         }     }     @media (max-width:390px) and (-webkit-min-device-pixel-ratio:2) {         .image {             background-image: url(image3.jpg);         }     }     @media (min-width:391px) and (max-width:500px) {         #image-container {             max-width: 121px;         }         .image {             background-image: url(image4.jpg);         }     }     @media (min-width:391px) and (max-width:500px) and (-webkit-min-device-pixel-ratio:1.5) {         .image {             background-image: url(image5.jpg);         }     }     @media (min-width:391px) and (max-width:500px) and (-webkit-min-device-pixel-ratio:2) {         .image {             background-image: url(image6.jpg);         }     }     @media (min-width: 501px) and (max-width: 767px) {         #image-container {             max-width: 182px;         }         .image {             background-image: url(image5.jpg);         }     }     @media (min-width: 501px) and (max-width: 767px) and (-webkit-min-device-pixel-ratio:1.5) {         .image {             background-image: url(image7.jpg);         }     }     @media (min-width: 501px) and (max-width: 767px) and (-webkit-min-device-pixel-ratio:2) {         .image {             background-image: url(image8.jpg);         }     }     @media (min-width:768px) {         #image-container {             max-width: 303px;         }         .image {             background-image: url(image8.jpg);         }     }     @media (min-width:768px) and (-webkit-min-device-pixel-ratio:1.5) {         .image {             background-image: url(image8.jpg);         }     }     @media (min-width:768px) and (-webkit-min-device-pixel-ratio:2) {         .image {             background-image: url(image8.jpg);         }     } </style>  <div id="image-container">     <div class="image">         <img src="image1.jpg" />     </div> </div>

尽管亚马逊在内部样式中有八个产品图片,在竖屏模式下的iPhone 4或Nexus S只有两个被下载。

《波士顿环球报》的响应式网站，采用了利用不同的data-fullsrc来加载图片的响应式图像技术。这是一个html标记,和一个服务器端JavaScript重定向规则的组合:

<img alt="" src="mobile-size.r.jpg" data-fullsrc="desktop-size.jpg" />

src是手机上使用的图像,确保网站默认为尺寸较小的版本(移动先行),而data-fullsrc是全尺寸的图像。JavaScript用来检测设备的屏幕大小,之后写入cookie。对于大屏幕,JavaScript利用data-fullsrc上的高分辨率图像替换较小的图片。服务器也使用Apache重写规则，来在图像文件的名称中检查.r.(mobile用的图片带有.r.),同时显示一个备用GIF,而不会使用较小的移动图像(从而防止手机大小的图像被下载到桌面)。

微软的响应式网站使用的斯科特·杰尔的Picturefill技术:

<div data-picture data-alt="Alternate text here">     <div data-src="image1.png"></div>     <div data-src="image2.png" data-media="(min-device-pixel-ratio: 2.0)"></div>     <div data-src="image3.png" data-media="(max-width: 539px)"></div>     <div data-src="image4.png" data-media="(max-width: 539px) and (min-device-pixel-ratio: 2.0)"></div>      <noscript><img src="image1.png" alt="Alternate text here" /></noscript> </div>

注意:上面的代码片段中, data-picture= " "应该是 data-picture,没有= " "。(=字符是smashing magazine的所见即所得编辑器自动插入的)。利用这种技术,JavaScript扫描页面的代码,发现包含data-picture属性的div。然后根据data-media属性插入一个新的img标签。

这些响应式图像技术的主要好处有:

小屏幕下载低分辨率的图像,而大屏幕下载高分辨率图像;
只下载所需的图片,而不需要的图片不在后台加载。

有各种各样的其他技术实现响应式图像。你可以查看这些资源，了解更多的细节:

如何减少客户端处理

让JAVASCRIPT降到最低

星巴克的响应式网站在chrome下禁用javascript后，桌面端良好的网络环境下花费了3.53秒加载完毕，而启用javascript后，花费了4.73秒，增加了34%。Javascript对加载时间的影响，在移动端较小的内存，cpu及缓存下会表现得更明显。通常，我们要重新思考javascript的使用，并保持其在最小尺寸。

一个很好的例子是BBC移动网站的JavaScript。网站不使用外部JavaScript文件——都是内联。内联脚本仅限于几行，没有显著影响内存,HTML文件和所有内联JavaScript花费0.78秒加载完毕。就像BBC那样,亚马逊的移动产品页面也没有外部JavaScript文件,而使用最少的内联脚本。HTML文件和所有内联JavaScript花费0.75秒加载完毕。

(请注意,jQuery不是一个轻量的替代方案,事实上是jquery本身的补充。)这两个网站在iPhone 4下均在4秒内加载完毕。使用一个JavaScript框架前,考虑它是否真的有必要。在某些情况下,使用少量的JavaScript比调用一个框架更有效。

避免组件

组件对实际加载时间的影响是灾难性的。为了验证这一点,我们创建了一系列简单的HTML文件,每个文件包含默认的嵌入代码,一个小部件。你可以看到下面的结果多糟糕。注意,这不是一个完美的测试,因为这些都是在模拟环境中的可控实验,不过结果比较有意思。

让你的网站在移动端健步如飞

在单个页面中，结合他们为一个小部件，结果只包含这个部件的情况下，加载时间长达4秒。

服务器端(后端)技术

除了优化前端,服务器端技术也可以用来加速加载时间。这些技术都值得考虑,但不会在本文中介绍:

缓存HTTP重定向来加速重复访问;
合并HTTP重定向链来减少重定向;
使用HTTP压缩来减少数量的字节(Gzip或缩小)。

测试移动设备上的性能

由于移动设备的不可预知性,测试多个设备上的性能是很重要的。这里有一些免费的性能测试工具:

Mobitest,Akamai：可以对对iPhone 4的 iOS 5.0,iPhone 3 g和Nexus S 生成瀑布图和HAR文件 .注意Nexus S测试结果与我们自己的内部测试不一致。我们的服务器访问日志显示，当我们测试实际安卓2。x设备时产生了更少的HTTP请求。
“Network Panel,” Chrome Developer Tools