web面向移动设备的优化

web面向移动设备的优化—《html5触摸界面设计与开发》读书笔记（1）

web在移动设备和PC端上使用的方式大相径庭。在PC端，浏览web的目的是完成特定的工作，如果加载时间过长，用户可以在完成其他的事情再来浏览。而在移动设备上，通常用户是在某个时间间隙来使用他们，如果载入时间过长，可能会丧失这个用户。所以总结就是“更快”，减少负载，加快访问速度，给用户更好的体验。

优化方式
一，CSS选择器的优化

<nav>   <ul>      <li><a class=""></a></li>      <li><a class=""></a></li>      <li><a class=""></a></li>      <li><a class=""></a></li>   </ul></nav>

假设有上述导航栏，我们最好为每一个 a标签添加样式而不是使用 “nav ul li a { …….}”。
具体原因如下：
1.代码量变大时，class更容易管理。
2.浏览器解析CSS选择器从右往左。
看到”nav ul li a”时，首先获得所有匹配a的元素列表，然后检查是否是li的后代，再按照相同的规则继续检查。后代选择器虽然方便，但是它的性能开销是最大的。

二，JavaScript操作DOM的优化
在网页上使用JavaScript的主要目的是为了和DOM交互，与简单的JavaScript相比较，DOM交互是相当缓慢的。每一次与DOM的交互，即便只是简单取值，代价极大。

  //方式一 DOM操作var title=document.getElementById("title").title;  方式二  JavaScript获取对象的值var title=cache["title"];

方式一是一种非常简单的DOM操作，但与方式二相比花费将近七倍的时间。DOM操作获取更耗时间，比如offset，获取offset的值比在javascript对象中获取慢56倍。
当需要从DOM中获取数据时，可以缓存DOM节点指针，避免重复获取该DOM。

三，减少资源下载
在响应式布局中，经常使PC端和移动端使用同一段代码。如果移动端与PC端使用同一副图片意味移动端用户将要花费更多的时间来加载资源。我们应该确保大的图片没有被移动端下载，只有该设备对应的图片才能被下载。媒体查询给我们提供了一种在显示属性的基础上覆盖原有样式的方法（推荐使用）。
我们将原先使用的 img 标签替换成 div加背景颜色的方式

<div role="img" aria-label="图片的描述" class="img"></div>........<style>.img {}</style>

这里使用一个div 破坏语义，我们只能降级使用WAI-ARIA(网页易读性倡议)，用附加属性增加HTML明确指定语义和其他信息。
开始设置样式

.img {       max-width：640px;    width:100%;    background:url(img-640x360.jpg);  }

然而由于div的无语义性，此时没有高度，我们要设置高度是宽度的百分比。照片的像素640x360,即高是宽的56%，于是这样写

.img {       max-width：640px;    height:0;    padding-buttom:56%; /*关键之处*/    background-size:100%;    background:url(img-640x360.jpg);     }

接下来使用媒体查询解决不同布局对应不同大小图像的问题

@meida only screen and (min-width:800px){  .img {  background:url(img-640x360.jpg);  }}@meida only screen and (max-width:480px){  .img {  background:url(img-320x120.jpg);  }}

以上方法能加快用户第一次访问速度，带来更好的用户体验。