移动性能优化

移动页面，包括pc页面，优化主要包括两个方面：

　　加载

　  运行

优化在移动端显得尤其重要，主要在于移动端网络不给力，一般状况下，cpu也比较低

下面分别说这两个大方向

先说加载，加载的优化又包括两个

　　　　减小加载的数量，

　　　　减少每一个加载内容都大小

减小加载的数量：也就是咱们常说的减小请求数量 

　　　　按需加载

　　　　　　好处是减小首屏时间，固然大量后加载当东西也会引发大量页面重绘，影响渲染性能

　　　　　　（lazylod， 滚屏加载， Media Query）

　　　　预加载

　　　　　　

　　　　1 减小重定向

　　　　　　不少网站会根据http的user－agent判断是否移动设备，而后发空body和重定向301/302等，直接返回移动端页面更好。

　　　　　　最好是直接返回移动的页面，固然，有时候和pc页面在不一样服务器上，有的网站重定向请求时候加上cookie来告诉应用是移动设备

　　　　2 减小图片请求

　　　　　　使用css3代替图片（圆形，圆角，下拉三角等等）

　　　　　　合并小图片等

　　　　3 避免图片的src属性为空，这样会从新加载固然页面，影响速度和效率(能够直接不设置）

             "img src=''引起的问题"

　　　　　　这样的语句，会致使当前网页被从新载入一次。尤为是对于 php/ asp/ aspx 类型的后台脚本，会致使程序被连续执行两次

　　　　　　若是该访问该网页的URL 还带有参数，那么第一次调用有参数，第二次调用没有参数。

　　　　　　在img 对象的src 属性是空字符串("")的时候，浏览器认为这是一个缺省值，值的内容为当前网页的路径。浏览器会用当前路径进行再一次载入，并把其内容做为图像的二进制内容并试图显示。

　　　　　　src=""在不一样浏览器解析不一样,有的会从新请求当前页面(一个新的请求，不带ETAG等缓存)，有可能使用session失效。有的则会解释成"/",就去访问默认页面，而默认页面有在有验证服务器上不少时候设成login页面而且清空session.

　　　　4 缓存ajax的数据

　　　　5 通用css和js能够放在外联文件，供多个页面重用。 

　　　　6 用HTML5缓存(cache manifest and client-side databases)来替代传统缓存，还有新客户端数据库技术indexedDB

 　　　　　　关于manifest　关于manifest

　　　　　　manifest版本更新问题

　　　　　　　　更新manifest文件   经过javascript操做   清除浏览器缓存

　　　　　　　　给manifest添加或删除文件，均可更新缓存，

　　　　　　　　若是咱们更改了js，而没有新增或删除，前面例子中注释中的版本号，能够很好的用来更新manifest文件。

　　　　　　　　html5中引入了js操做离线缓存的方法，下面的js能够手动更新本地缓存。

　　　　　　　　　　　　window.applicationCache.update();

　　　　　　　　若是用户清除了浏览器缓存（手动或用其余一些工具）都会从新下载文件。

　　　　　　manifest缓存了页面自己

　　　　　　　　 一旦页面指定了manifest，那么这个页面就必定被储存下来。若是有一个动态页面，没有办法只缓存页面所引用的css,js,img，不缓存页面的内容

　　　　　　　　第一次访问page.html?id=1，缓存成功后。再访问 page.html?id=2，不会去读缓存，这是由于因为参数变了，被认为地址不同，不算是第二次请求，因此请求page.html?id=2时依然会从新加载manifest指定的文件。不过若是不是参数而是hash，#id=2,则认为是同一个页面

　　　　　　　　manifest极不适合含有动态参数页面跳转的状况下使用

　　　　

　　　　7 使用HTML5服务端发送事件

 

　　　　　　Web应用已经使用了各类从服务器上轮询资源的方法来持续地更新页面。HTML5的EventSource对象和Server-Sent事件能经过 浏览器端的JavaScript代码打开一个服务端链接客户端的单向通道。服务端可使用这个写通道来发送数据，这样能节省了HTTP建立多个轮询请求的 消耗。这种方式比HTML的WebSocket更高效。WebSocket的使用场景是，当有许多客户端和服务端的交互的时候（好比消息或者游戏），在全 双工链接上创建一个双向通道。

 

　　　　　　若是你的网站当前是使用其余的Ajax或者Comet技术来轮询的，转变成Server-Sent 事件须要重构网站的Javascript代码。

 

　　　　8 WebSokects（目前只有iOS4.2+支持 ）websockects

　　　　　　

减小加载内容大小

　　1 压缩， 服务器开启gzip压缩

　　2 值为0的时候不须要写单位

　　3 localstorage代替cookie，能够减小每次请求时发送的额外cookie。对于json形式的字符串， JSON.stringify() and JSON.parse() 来辅助存储

 　  4 图片优化

　　　　1） 使用智图优化图片，服务器能够直接图片优化

　　　　2）合适的格式 (1. webP优于JPG 2. PNG8优于GIF)

　　　　3） srcsetsrcset响应式图片

再看运行

减小重排重绘

　　1 border未none，不写0，

　　　　border:0; 浏览器对border-width/border-color进行了渲染，占用了内存。

　　　　border:none浏览器解析“none”时将不做出渲染动做，即不会消耗内存。

　　2 移除空css规则

　　　　增长css文件大小，影响css树　　

　　3 正确使用display

　　　　display影响页面渲染 可参考csslint

　　　　　　display:inline后不该该再使用width、height、margin、padding以及float

　　　　　　display:inline-block后不该该再使用float

　　　　　　display:block后不该该再使用vertical-align

　　　　　　display:table-*后不该该再使用margin或者float

　　4 避免屡次重设图片大小

　　　　感受实际工做中改动图片大小不可避免，只能是减小没必要要的改动，减小重绘

　　5 减小dom节点

　　　　dom节点多，尤为又有深度，会影响页面渲染，尽可能减小

减小性能开销

　　1 尽可能使用事件代理，避免批量绑定事件 

　　　　以前是delegate实现， 如今用on实现，zepto为on； 也能够本身写事件代理

// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, [selector], data, handler );

$("table").delegate("td","click",function(){...});
$("table").on("td", "p", function(){...});

　　2 DataURL的使用，注意使用场景

<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/4QLQRXhpZgAASUkqAEoCAAAs/>
//利用base64编码把图片数据翻译成标准ASCII字符。
//Data URL是在本地直接绘制图片，节省HTTP链接，　　
//Base64编码的图片会比二进制格式的图片体积大1/3，同时又没有使用图片的压缩算法，文件会变大，而且要解码后再渲染，会加剧客户端的CPU和内存负担
//Data URL形式的图片不会被浏览器缓存

 

　　适用于小图片。这样避免发送一次请求，只为了得到比较少的数据

　　另外，这个若是是css背景中使用，也是能够缓存的。直接缓存在css文件中　

　　在线转换工具

.striped_box
  {
  width: 100px;
  height: 100px;
  background-image: url("data:image/gif;base64,R0lGODlhAwADAIAAAP///8zMzCH5BAAAAAAALAAAAAADAAMAAAIEBHIJBQA7");
  border: 1px solid gray;
  padding: 10px;
  }
<div class="striped_box">
这是一个有条纹的方块
</div>

 

　　3 GPU加速

　　　　浏览器利用显卡的计算能力，实现提速和释放CPU

　　　　css中如下属性会触发GPU渲染，合理使用，由于过多使用引起耗电量增长

　　　　　　CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video　　

　　4 高频事件优化

　　　　touchmove 和 scroll致使屡次渲染

　　　　增长响应变化等时间间隔，减小重绘次数

　　　　使用requestAnimationFrame监听帧变化，在正确的时间渲染　（这个替代了setTimeout方法）

　　5 动画优化

　　　　尽可能使用css3，适当食用canvas（ios8能够食用webGL,这个是什么怎么用，之后有时间再研究下)

　　　　css3动画只用－webkit和无前缀两种

　　　　-webkit, -moz, -ms

　　　　有一些浏览器动画事件可使用了，兼容性待定

　　　　webkitAnimationEnd事件与webkitTransitionEndwebkitAnimationEnd事件与webkitTransitionEnd

　　6 避免高级选择符

　　　　耗时长且不易读懂

　　7 webworker

　　　　Android 2.0+，ios5+

　　　　Web Workers不能进入到页面的DOM，也不能改变页面上的任何东西。

　　　　Web Worker很适合大量计算的工做，基本没用到

    8  服务端经过检测请求中的User-Agent头或者其余的嵌入到请求中的信息能让你的应用检测到网络情况 ？ how？

　 9 viewport属性，（以前看过一篇棒棒嗒文章，下次有空分享出来）