标签：
移动页面，包括pc页面，优化主要包括两个方面：
加载
运行
优化在移动端显得尤为重要，主要在于移动端网络不给力，通常情况下，cpu也比较低
下面分别说这两个大方向
先说加载，加载的优化又包括两个
减少加载的数量，
减少每个加载内容都大小
减少加载的数量：也就是我们常说的减少请求数量
按需加载
好处是减少首屏时间，当然大量后加载当东西也会引起大量页面重绘，影响渲染性能
（lazylod， 滚屏加载， Media Query）
预加载
1 减少重定向
很多网站会根据http的user－agent判断是否移动设备，然后发空body和重定向301/302等，直接返回移动端页面更好。
最好是直接返回移动的页面，当然，有时候和pc页面在不同服务器上，有的网站重定向请求时候加上cookie来告诉应用是移动设备
2 减少图片请求
使用css3代替图片（圆形，圆角，下拉三角等等）
合并小图片等
3 避免图片的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文件 通过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属性，（之前看过一篇棒棒嗒文章，下次有空分享出来）
标签：
原文地址：http://www.cnblogs.com/jingwensophie/p/4724738.html
