myslide 插件开发知识点总结和 css3 动画性能问题的研究

这篇文章主要是总结最近开发过程中遇到的问题。有几个问题又是不容易发现原因的问题,但是最后的结果又是很简单的。


1.手机端的 slider 插件是否有必要集成点按操作

对于我自己开发的版本来说还是集成了这个操作的。但是参考了京东,天猫,淘宝电商网站首页的 slider 图片轮播插件都没有支持点按操作。那么是为什么呢?

我想到的答案可能如下:

对于移动端来说,屏幕太小,轮播图上的显示当前图片状态的圆点,人的手指不容易选中。

2.this到底指向谁,改变 this 的指向

JavaScript 中this在使用过程中比较容易出错的。那么this到底是指向谁呢?我看到最多的一句话是:

this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象;

来看两段代码:

var a = {
m: 12,
b: {
m: 13,
func: function() {
console.log(this.m); //result: 13
}
}
};
a.b.func();

通过输出的结果,我们这个知道,当调用this的时候,this指向的是对象b

var a = {
m: 12,
b: {
m: 13,
func: function() {
console.log(this.m); //undefined
console.log(this); //window
}
}
}; var cc=a.b.func;
cc(); //相当于 window.cc();

由以上代码的输出结果是当this被调用的时候 this 指向的是当前的 window 相当于window.cc(),这个时候实际上是 window 调用了 this

上面的代码也印证了小结开头提到的那句话。但是很多时候根据实际情况我们需要改变this的指向,那我们该怎么做呢?

比如下面这样,我有一个公共的 js 对象来保存一些公用的 DOM 操作的方法,比如:

var Doing.prototype={
likeSport:function(){
//这里使用原型的方式定义对象,就是想要这里的 this 始终指向送的都是 Doing
console.log(this.test2()'like speak');
},
getName:function(){
// console.log('zhiqiang');
return 'zhiqiang'
}
}

我的应用场景如下,当我单击 test 节点的时候,打印出我喜欢的运动。

<div class="father">
<div class="test">我喜欢的运动是什么?</div>
</div>
new Dong();

var Dong = function(){
var _this = this;
$('.father').on('click','.test',function(){
console.log(this); //this 指向的是 test 节点对象
_this.likeSport(); //这时 likeSport方法中的 this 指向的是 .test 节点对象
});
};

根据以上的代码,虽然我使用了 _this 缓存了 this 的只想,以使在单击函数的回掉中可以使用,但是这样直接调用 Dong 对象的方法,会改变 likeSportthis 的指向。

那么我们怎么让我们在单击函数的回掉中调用 likeSport的方法时,likeSport 的方法中的this仍然指向的是Dong呢?

这个时候就要用到 call或者 apply 来解决问题了。

call 和 apply 都是可以指定 function函数运行时,this 的值。两者唯一的区别就是 call 第二个参数接受的是参数列表,而 apply 接受的是一个参数数组。

fun.call(this,tp1,tp2);
fun.apply(this,[tp1,tp2]);

按照以上的知识点来修改我们的代码

$('.father').on('click','.test',function(){
console.log(this); //this 指向的是 test 节点对象
_this.likeSport().call(_this); //这时 likeSport方法中的 this 指向的是 Dong
});

3.使用CSS3 动画性能的问题

为什么使用 css3属性来做动画?使用 css 3做动画有什么好处呢?

我们先借助 chrome 开发者工具对动画渲染做一个检测,先来看使用margin-left来做动画发生了什么

再来看使用 translate3d 做动画发生了什么

我们可以很明显的看到,在使用 margin-left做动画的过程中,浏览器每时每刻都在发生渲染操作,而使用 translate3d 只是在开始和结束的时候发生渲染操作。

来看看 csstrigger 网站上对 margin-left 和 transform 的区别:



由上面可以知道,我们在使用 margin-left 这样的属性的时候,会触发页面的重排和重绘,而使用 transform 的时候,可以调用 gpu 对渲染进行帮助。

容易忽略的问题:

1. 在使用 jQuery 或者 Zepto 的 animate 方法做动画的时候,我的代码可能是这样的

test.animate({left:'15px'},1000);
test.animate({transform:'translate3d(0,15px,0)'},1000);

但是根据 API 文档,我们可以直接这样写

test.animate({translate3d:'0,15px,0'},1000);

这种写法比上面的写法简洁一些。

2. 在使用 CSS3 属性做动画的时候,数值要加单位,不然会没有效果,比如下面的代码

var size = 150;
test.animate({'translate3d': '-' + size + ',0,0'},1000)

这样写是正确的:

var size = 150;
test.animate({'translate3d': '-' + size + 'px,0,0'},1000)

4.scroll 滚动动画的问题

我们会有这样的业务场景,需要从页面的最低部返回页面的头部,或者是返回到页面的某个部分。

能够想到的解决方案有两种:

  1. 使用锚点;
  2. 使用 js 来滚动页面

使用锚点没有什么可以多说的,也很简单,但是滚动效果比较生硬。使用 js 来滚动页面的话,可以设置滚动动画,来使页面的滚动的效果更加友好。

在网上如果搜索scroll 动画最多的答案就是使用下面这样的代码:

    $('.body1').animate({scrollTop:200},2000);

但是我在使用这样代码的时候,却没有出现我想要的效果,最后通过各种尝试还是找到原因的。就是的父级元素没有设置overflow:auto

overflow 这个属性还是很有用的。比如:触发盒子的 BFC 还有就是禁止元素在水平或者竖直方向滚动。

注意:

jQuery 支持这样的滚动动画,但是 Zepto 不支持这个操作滚动动画;

myslide 插件开发知识点总结和 css3 动画性能问题的研究的更多相关文章

  1. css3动画性能优化--针对移动端卡顿问题

    一.使用css,jquery,canvas制作动画 1.Canvas 优点:性能好,强大,支持多数浏览器(除了IE6.IE7.IE8),画出来的图形可以直接保存为 .png 或者 .jpg的图形: 缺 ...

  2. 关于CSS3动画性能

    前天我去面试了...好吧,对于自己6年6份工作的悲催经历,我自己也是醉了. 但没办法,我这种当时上学没好好学习,临毕业才出家写代码的半吊子码农,起步没起好,以至于一直没能找到真正让自己满意的工作. 通 ...

  3. WEB 移动端 CSS3动画性能 优化

    很多时候,我们在开发移动端的时候要使自己的网页兼容不同的机型,很多时候会采用CSS3动画,但是很多时候在安卓机下,动画明显会出现卡顿,很难看,那么这里我介绍几个CSS 属性进行硬件加速那么就会得到明显 ...

  4. css3动画性能优化

    css3的动画简单好用,但是性能方面存在一些问题,很多时候一不留神cpu就已经满了. 现在记下一些常用的技巧,去优化我们的css3的动画. 1. translate3d进行gpu加速 写动画的时候写个 ...

  5. 被解放的GPU CSS3动画加速

    概念 图形处理器( Graphics Processing Unit ) 专门用来处理在个人电脑.工作站或游戏机上图像运算工作 显卡的“心脏” 90%以上的新型台式电脑和笔记本型电脑拥有集成图形处理器 ...

  6. css3动画与js动画的一些理解

    http://zencode.in/19.CSS-vs-JS%E5%8A%A8%E7%94%BB%EF%BC%9A%E8%B0%81%E6%9B%B4%E5%BF%AB%EF%BC%9F.html 首 ...

  7. CSS3动画和JS动画的比较

    前言 之前有被问到一个问题,css3动画和js动画性能谁更好,为什么.据我的经验,当然觉得css3动画性能更好,至于为什么一时还真答不上来,所以特意查了一下资料总结一波. JS动画 优点: js动画控 ...

  8. CSS3动画(性能篇)

    写在前面 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量.功耗与流畅度. 在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的场景下,需要额 ...

  9. 关于JS动画和CSS3动画的性能差异

    本文章为综合其它资料所得. 根据Google Developer,Chromium项目里,渲染线程分为main thread和compositor thread. 如果CSS动画只是改变transfo ...

随机推荐

  1. ACM-ICPC 2018 南京赛区网络预赛 J.sum(欧拉筛)

    题目来源:https://nanti.jisuanke.com/t/A1956 题意:找一个数拆成无平方因子的组合数,然后求前缀和. 解题思路:我们可以把某个数分解质因数,如果某个数可以分解出三个相同 ...

  2. [leetcode]244. Shortest Word Distance II最短单词距离(允许连环call)

    Design a class which receives a list of words in the constructor, and implements a method that takes ...

  3. [leetcode]38. Count and Say数数

    The count-and-say sequence is the sequence of integers with the first five terms as following: 1. 1 ...

  4. pycharm快捷键及中文说明【使用翻译工具一条一条翻译】

    Search Everywhere: Double Shift Go to File : Ctrl+Shilf+N Recent Files: Ctrl+E Navigation Bar: Alt+H ...

  5. ABP .NET corej 版本 第一篇

    ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ABP使用以下技术: 服务器端: l ASP.NET MVC 5.Web API 2.C# 5. ...

  6. Calendar类常用需求方法

    经常处理一些日期相关的信息,Calendar类是处理日期的常用类,写下几个方法,不用重复造轮子了. 1.求上一天,下一天的日期 Date now = new Date();Calendar c = C ...

  7. mui几种页面跳转方式对比

    1.初始化时创建子页面 mui.init({ subpages: [{ url: your - subpage - url, //子页面HTML地址,支持本地地址和网络地址 id: your - su ...

  8. middleware#52

    错误做法 这道题还是挺有意思的,一开始自己的做法是这样的 const app = { fns: [], callback(ctx) { console.log(ctx) }, use(fn) { th ...

  9. 关于poi导出excel三种方式HSSFWorkbook,SXSSFWorkbook,csv的总结

    poi导出excel最常用的是第一种方式HSSFWorkbook,不过这种方式数据量大的话会产生内存溢出问题,SXSSFWorkbook是一种大数据量导出格式,csv是另一种excel导出的一种轻快的 ...

  10. css3简单旋转

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>&l ...