第十四天

IOS和Android常见兼容问题？

1.IOS移动端click事件300ms的延迟相应
移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。
这是由于区分单击事件和双击屏幕缩放的历史原因造成的。

解决方式：

    fastclick可以解决在手机上点击事件的300ms延迟
    zepto的touch模块，tap事件也是为了解决在click的延迟问题
    触摸屏的相应顺序为touchstart-->touchmove-->touchend-->click，也可以通过绑定      ontouchstart   事件，加快事件的响应，解决300ms的延迟问题

2.一些情况下对非可点击元素（label，span）监听click事件，ios下不会触发，css增加cursor： pointer就搞定了。
3.h5底部输入框被键盘遮挡问题
h5页面有个很蛋疼的问题就是，当输入框在最底部，点击软键盘后输入框会被遮挡。可采用如下方式解决

var oHeight = $(document).height(); //浏览器当前的高度

$(window).resize(function(){

   if($(document).height() < oHeight){  
   $("#footer").css("position","static");
}else{
  $("#footer").css("position","absolute");
}

4.不让 Android 手机识别邮箱

5.禁止 iOS 识别长串数字为电话

6.禁止 iOS 弹出各种操作窗口
-webkit-touch-callout:none
7.消除 transition 闪屏

-webkit-backface-visibility: hidden; /(设置进行转换的元素的背面在面对用户时是否可见：隐藏)/

8.iOS 系统中文输入法输入英文时，字母之间可能会出现一个六分之一空格可以通过正则去掉
this.value = this.value.replace(/\u2006/g, '');
9.禁止ios和android用户选中文字
-webkit-user-select:none
10.CSS动画页面闪白,动画卡顿

解决方法:

1.尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位
2.开启硬件加速

-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);```
11.fixed定位缺陷
ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
ios4下不支持position:fixed
#####解决方案： 可用iScroll插件解决这个问题

##前端优化？

减少 HTTP请求数
从设计实现层面简化页面
合理设置 HTTP缓存
资源合并与压缩
合并 CSS图片，减少请求数的又一个好办法。
将外部脚本置底（将脚本内容在页面信息内容加载后再加载）
多图片网页使用图片懒加载。
在js中尽量减少闭包的使用
尽量合并css和js文件
尽量使用字体图标或者SVG图标，来代替传统的PNG等格式的图片
减少对DOM的操作
在JS中避免“嵌套循环”和 “死循环”
尽可能使用事件委托（事件代理）来处理事件绑定的操作

##session+cookie 和 token有什么区别？
Cookie的内容是保存一小段文本信息，这些文本信息组成一份通行证。它是客户端对于无状态协议的一种解决方案。
#####Cookie的原理
（1）客户端第一次请求时，发送数据到服务器。
（2）服务器返回响应信息的同时，还会传回一个cookie（cookie S-001）
（3）客户端接收服务器的响应之后，浏览器会将cookie存放在一个统一的位置。
（4）客户端再次向服务器发送请求的时候，会把Cookie S-001再次发挥服务器。
#####cookie的生命周期
cookoe的生存时间是整个会话期间：浏览器会将cookie保存在内存中，浏览器关闭时自动删除这个cookie
#####session的生命周期：
与cookie一直，服务器也能设置session的生效时间。
#####Token的原理：
（1）客户端第一次请求时，发送用户信息到服务器。服务器对用户信息使用HSA256算法及密钥进行签名，再将这个签名和数据一起作为token返回给客户户端。
（2）服务端不再保存token，客户端保存token。
（3）当客户端再次发送请求时，在请求信息中将token一起发送给服务器。
（4）服务器用同样的HSA256算法和密钥，对数据再计算一次签名，和token的签名做比较
（5）如果相同，服务器就知道客户端登录过，则反之。
##浏览器是如何记录用户登陆状态的？
##详述后台管理系统权限如何实现的？
##详述函数颗粒化是什么？及作用