全国服务热线:4008-888-888

技术知识

css3对于挪动端卡顿难题的处理(动漫特性提升)

1、应用css,jquery,canvas制做动漫

1.Canvas

优势:特性好,强劲,适用大部分访问器(除IE6、IE7、IE8),画出来的图型能够立即储存为 .png 或 .jpg的图型;

缺陷:依靠于HTML,只能根据脚本制作绘图图型,沒有完成动漫的API(借助恶性事件和定时执行器升级);因为在 canvas 上以程序编写方法显示信息的文字实际上便是位图,因而检索爬取器将彻底忽视文字。文字內容也没法被显示屏阅读文章器鉴别。

2.css3

优势:简易且与內容分离出来、css动漫不开启layout和paint;(这些特性的改动不容易开启layout和paint:backface-visibility、opacity、perspective、perspective-origin、transform);

缺陷:有访问器适配性难题、安卓系统手机上会出現卡顿、受排版模块的限定,与全部网页页面的dom构造密切相关。

3.JQuery

优势:沒有适配性难题

缺陷:每帧,都要开展repaint、recomposite(十分耗时);

总结:在挪动端动漫实际效果上,应用css3动漫要比jquery动漫高效率高的多。在安卓系统手机上上主要表现特别显著!因此挪动端动漫以css3动漫为优先选择,jquery只能用来简易解决运用逻辑性。css3动漫是用来给內容合理布局再加殊效的通用性处理计划方案,可是在特性堪忧的挪动访问器上极可能会受排版特性所限,达不到理想化的实际效果。而对特性有规定的特殊情景,例如手机游戏,用canvas会有很大的提升。

2、css3在挪动端出現卡顿难题

css3制做的动漫在ios上跑的66的,可是在安卓系统上有时会出現卡顿状况。何不从下面几点找找难题。

a、是不是致使layout
假如是,尽量将动漫元素absolute或fixed化以免危害文本文档树,以降低重排.

b、是不是开启硬件配置加快
“用到了CSS3动漫”和“打开了硬件配置加快”是两件事儿,尽管前者有将会致使后者。
打开硬件配置加快在webkit中有奇异的万金油:opacity: 1;或-webkit-backface-visibility: hidden;。

c、是不是是有高耗费的特性(css shadow、gradients、background-attachment: fixed等)
有的话,照片也是1种挑选。这算得上是用室内空间换時间的提升了。

d、repaint的面积
假如是,只好变小动漫面积了。这1步的提升比较有限;

e、尽可能应用 transform 转化成动漫,防止应用 height,width,margin,padding 等;如下列事例1和事例2。

PS:应用 transform,访问器只必须1次转化成这个元素的位图,并在动漫刚开始的情况下将它递交给 GPU 好去处理 。以后,访问器不必须再做任何合理布局、 绘图和递交位图的实际操作。从而,访问器能够充足运用 GPU 的专长去迅速地将位图绘图在不一样的部位、实行转动或放缩解决。简而言之,transform 动漫由GPU操纵,适用硬件配置加快,其实不必须手机软件层面的3D渲染

3、动漫全过程有闪动(1般出現在动漫刚开始)

处理方式:

.cube {

   -webkit-backface-visibility: hidden;

   -moz-backface-visibility: hidden;

   -ms-backface-visibility: hidden;

   backface-visibility: hidden;

   -webkit-perspective: 1000;

   -moz-perspective: 1000;

   -ms-perspective: 1000;

   perspective: 1000;

   /* Other transform properties here */

}

在webkit核心的访问器中,另外一个切实可行的方式是

.cube {

   -webkit-transform: translate3d(0, 0, 0);

   -moz-transform: translate3d(0, 0, 0);

   -ms-transform: translate3d(0, 0, 0);

   transform: translate3d(0, 0, 0);

  /* Other transform properties here */

}

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服