1提高第一次加载的速度
加载页面的顺序
解析域名
发起请求
下载相应
渲染页面
导致页面加载缓慢的几个原因
1HTTP连接数太多
2总的字节数太大
3等待时的渲染阻塞
4网络延迟
5缓存能力差
怎么解决这些常见的问题
1请求数太多
我们可以把需要的css混合成一个文件，使用css每题查询的方法来带图link元素上使用media属性
<link rel="stylesheet" media="only screen and (max-width:800px)“ href="demo.css">
转换成
@media only screen and (max-width:800px){}
不知道以上代码代表什么意思的同学可以先学习一下响应式布局
不幸的是，通过这样的改变我们并没有发现加载速度改变有多大
所以我们要继续查看究竟是什么使页面加载速度减慢
在查看瀑布图的时候我们发现在加载jQuery完成之前，图像几乎没有开始加载
解决这个的方法比较简单，就是把脚本标签置于页面底部。这样一来。当脚本还在加载时，用户不会看到一个空白页，而且其他的内联的任何资源会和脚本一起并行下载。
其次我们将会发现导致页面加载速度变慢的一大原因就是图片太大。
这里我概括了几种解决办法
1降低图片质量（显然我们不太愿意使用这种方法，这样势必会降低用户体验）
2启用cdn（这是我在阅读相关书籍之前使用的办法，现在网上有许多提供cdn服务的网站，但这也是一个治标不治本的方法）
3根据你所需要的大小加载不同大小的图片，避免浪费（当然通过这种方法在加上cdn的运用应该是不错的效果）
第三个就需要我们去了解用户的使用设备（比如视网膜屏幕和普通屏幕的区别，电脑设备和移动设备的区别）
以上我提到了如何加快第一次的访问速度，接下去我会讲如何加快下一次的访问速度
这里主要运用到了浏览器的缓存功能
主要有常规浏览器缓存，本地存储和应用缓存
接下来要说的就是触屏设备上的轻触和点击事件
我们应该都知道在触屏设备上我们可以使用click时间，但是其为了区分单击还是双击有300ms的延迟，就是这大约300ms的延迟让我们的用户体验降到谷底
为了解决这个移动浏览器有四种类型的触摸事件。
touchstart 触摸开始
touchmove 触摸点改变
touchend 触摸结束
touchcancel 触摸被取消
ie10上支持相同的事件但是有不同的语法
成为pointer 指针
MSPointerDown 触摸开始
MSPointerMove 触摸点移动
MSPointerUp 触摸结束
MSPointerOver 触摸点移动到接触点之上
MSPointerOut 触摸点离开元素
CSS过渡，动画和变换
性能优化
不要使用setTimeout来实现动画，一旦计时器里面的动画运行过慢会产生卡帧。
使用css变换来取代绝对定位（position）
可以采用css动画的形式
javascript的性能优化
1javascript操作dom的代价特别大，比较读取dom中的值和读取js对象中的值，前者所用的时间是后者的七倍之多
所以当获取到dom结构时我们将它储存在一个变量中，利用DOM的指针，避免二次获取相同的dom。
2给用户反馈的优先级是最高的
javascript是单线程的，所以在同一时间只能做一件事。这个线程与操作dom的线程是同一个线程，它被称为UI线程。就像把任务推到一个对列中，队列中的任务会在线程变得空闲时执行。
3延迟执行
当浏览器给用户做反馈时，如果我们需要执行一个类似AJAX这样消耗比较大的操作，我们可以延迟执行。
移动端的手势操作
滚动与滑动
做过移动端开发的人应该都碰到过一个问题
overflow:auto 在某些安卓设备上失效
当然我们也可以避免使用overflow：auto在移动设备上
但当我们必须使用时我们也有两个方法避免以上的问题
使用overthrow.js或者Iscoll来实现overflow.
方向改变
来解决移动设备上横屏与竖屏的布局问题
可以通过@media screen and (orientation:landscape){}
来设置横屏时相应的布局
移动设备的设备上的缩放问题
固定定位和缩放不能很好的在一起工作。在安卓设备中不能同时使用，在ios中会放大整个页面并且产生不可预知的结果。所以如果应用固定定位，你需要在viewport元素属性里添加user-scaleble=no.
1.viewport
这种方法，不是所有的浏览器都兼容
<meta name="viewport" content="width=640,minimum-scale=0.5,maximum-scale=1.0,user-scalable=no, initial-scale=1.0" />
2.百分比
这种方法，可以兼容大部分浏览器，但是修改幅度比较大
.main .login .txt1{margin-top:8.59375%; position:relative;}
3.css transform
这种方法，可以兼容大部分浏览器，但是页面的位置是居中的
.w320
{
transform: scale(1,1);
-ms-transform: scale(1,1); /* IE 9 */
-webkit-transform: scale(0.8,0.8); /* Safari and Chrome */
}
4.使用响应式布局，但是这样的话得做两个两套界面
<link rel=“stylesheet” type=“text/css” media=“only screen and （max-width： 480px），only screen and （max-device-width： 480px）” href=“link.css”/>
双指实现缩放和其他复杂的手势
以上我们提到缩放与固定定位的使用，一旦上面不使用固定定位，能实现缩放，但往往是整个页面，而不是你所希望的元素，所以我在这里说了更详细的可以操作你希望的元素的手势
基本的触摸事件我已经在上面写过
touchstart 触摸开始
touchmove 触摸点改变
touchend 触摸结束
touchcancel 触摸被取消
ie10的事件我就不重新写了双指实现缩放效果
从接触点很容易得到一个缩放值。在webkit中，touch事件有一个缩放值。
通常情况下。当你缩放一个对象时，他将围绕中心去缩放。在CSS变换中这被称为变换原点（transform-origin）
为了得到正确的效果，图像应当围绕接触点的中心去缩放。即变换原点为两接触点之间的中心。
具体的代码实现我就不写出来了。想要查看效果的可以用手机登入http://2.memoryzyz.applinzi.com/mobile-demo/来查看
如果想要源码可以联系我邮箱2410823638@qq.com