美文网首页
第十四天

第十四天

作者: 流觞小菜鸟 | 来源:发表于2019-12-06 07:55 被阅读0次

    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 手机识别邮箱
    <meta content="email=no" name="format-detection" />
    5.禁止 iOS 识别长串数字为电话
    <meta content="telephone=no" name="format-detection" />
    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)如果相同,服务器就知道客户端登录过,则反之。
    ##浏览器是如何记录用户登陆状态的?
    ##详述后台管理系统权限如何实现的?
    ##详述函数颗粒化是什么?及作用

    相关文章

      网友评论

          本文标题:第十四天

          本文链接:https://www.haomeiwen.com/subject/wmdsgctx.html