文章分类:前端开发

1012 阅读 12 评论

移动端项目总结

做了两年多的PC端,今天终于做上了一个移动项目,虽然是个很小的工具类项目,但也是受益匪浅。

项目采用了zepto和seajs,感谢99的 mobileTech,让我少走一堆深坑。

破天荒的是,居然在wp手机上的效果也那么好,看来我还是没拜托pc的思维(ie)。

由于木有张鑫旭的幽默感,连最基础的语言连贯都做不到,所以下面列点好了。


1. 浏览器后退造成的seajs不执行(chrome)。

由于项目是多模版合一,使用js来控制脚本展示,一个后退就只剩背景了。后来把seajs.use放在window.onload就解决了。

今晚再测试的时候终于发现问题所在,后退由于缓存的存在,seajs.use的执行的时机快比document.write快,导致缺变量报错。


2. wp8.1以下不支持上传图片。

揣着帅气的1520,居然不支持上传图片有木有。只可看不能用的感觉。。。居然wp8.1的ie11支持了,木有机器了。


3. CSS3性能比js动画好。

抛弃低版本的ie,发现css3成了简单动画的不二之选。

但是css3也许可能好像会出现卡顿或掉帧的现象,利用3D变形开启GPU加速已经成为常用做法啦。

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

然后再兼容下:

-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;


4. tap的"点透"。

网上好多。


阅读全文...

445 阅读 3 评论

Javascript性能优化点滴

本文转至:依水间

原文地址:http://www.cnblogs.com/fullhouse/archive/2012/01/05/2312956.html


下面是一些关于客户端JS性能的一些优化的小技巧:

  1. [顶]关于JS的循环,循环是一种常用的流程控制。JS提供了三种循环:for(;;)、while()、for(in)。在这三种循环中 for(in)的效率最差,因为它需要查询Hash键,因此应尽量少用for(in)循环,for(;;)、while()循环的性能基本持平。当然,推 荐使用for循环,如果循环变量递增或递减,不要单独对循环变量赋值,而应该使用嵌套的++或--运算符。
  2. 如果需要遍历数组,应该先缓存数组长度,将数组长度放入局部变量中,避免多次查询数组长度。
  3. 局部变量的访问速度要比全局变量的访问速度更快,因为全局变量其实是window对象的成员,而局部变量是放在函数的栈里的。
  4. 尽量少使用eval,每次使用eval需要消耗大量时间,这时候使用JS所支持的闭包可以实现函数模板。
  5. 尽量避免对象的嵌套查询,对于obj1.obj2.obj3.obj4这个语句,需要进行至少3次查询操作,先检查obj1中是否包含 obj2,再检查obj2中是否包含obj3,然后检查obj3中是否包含obj4...这不是一个好策略。应该尽量利用局部变量,将obj4以局部变量 保存,从而避免嵌套查询。
  6. 使运算符时,尽量使用+=,-=、*=、\=等运算符号,而不是直接进行赋值运算。
  7. [顶]当需要将数字转换成字符时,采用如下方式:"" + 1。从性能上来看,将数字转换成字符时,有如下公式:("" +) > String() > .toString() > new String()。String()属于内部函数,所以速度很快。而.toString()要查询原型中的函数,所以速度逊色一些,new String()需要重新创建一个字符串对象,速度最慢。
  8. [顶]当需要将浮点数转换成整型时,应该使用Math.floor()或者Math.round()。而不是使用parseInt(),该方法用于将字符串转换成数字。而且Math是内部对象,所以Math.floor()其实并没有多少查询方法和调用时间,速度是最快的。
  9. 尽量作用JSON格式来创建对象,而不是var obj=new Object()方法。因为前者是直接复制,而后者需要调用构造器,因而前者的性能更好。
  10. 当需要使用数组时,也尽量使用JSON格式的语法,即直接使用如下语法定义数组:[parrm,param,param...],而不是采用 new Array(parrm,param,param...)这种语法。因为使用JSON格式的语法是引擎直接解释的。而后者则需要调用Array的构造器。
  11. [顶]对字符串进行循环操作,例如替换、查找,就使用正则表达式。因为JS的循环速度比较慢,而正则表达式的操作是用C写成的API,性能比较好。
  12. 最后有一个基本原则,对于大的JS对象,因为创建时时间和空间的开销都比较大,因此应该尽量考虑采用缓存。

阅读全文...

350 阅读 1 评论

tParabola抛物线插件

好无聊又来秀插件,这次的主题是抛物线了。

偶然看到张鑫旭大神的博客看到抛物线的讲解,悻悻地捡回了读书时光学过的抛物线公式,仔细想想还是挺怀念的。

于是乎,开始了重复造轮子的过程。


Demo:http://travisup.com/demo/plugins/tparabola/demo.html

Github:https://github.com/godxiaoji/tscrollbar


这里照葫芦画瓢,讲解一下这个抛物线公式。

y = a*x*x + b*x + c

先求a,b,c

a可以近似理解为弧度,就是一个曲率值。所以a可以认为是一个系统常量。

在抛物线的运动轨迹中,我们知道了起始点和终点。假设起始点坐标为(0, 0),可以求出c = a*0*0 + b*0 - 0 = 0。

再代入已知的终点坐标,求得b = (y - a*x*x - c) / x。

之后通过匀速的x变化就可以求得y,这样运动的轨迹就出来啦。



阅读全文...

421 阅读 6 评论

那些年我遇到的IE BUG...

随着移动设备的地位越来越主导,好多奋斗在前端道路上的童鞋奔向了HTML5的浪潮,不再兼容那老古董ie6,7,8。我甚至怀疑写这篇文章的含义,后来想想,跟我一样还要坚守ie阵营的还有大部分,这也是一种积累。

我只写我碰到过的,其实这些问题及其解决方案网上一搜一大把,但是,但是,我注重体验~!@#¥%……


双边距bug

这是每个新手必碰到的,我当年也是靠这个认识hack的,现在想想,其实才过了两年,怎么感觉自己老了好多...

目标:ie6

现象:浮动布局中,如果对浮动元素设置与浮动方向相同的margin,在ie6下会双倍展示

Chrome下:

IE6下:

你可以猛击:DEMO

解决方法:在浮动的元素加上_display: inline

PS:刚开始不知道是同个方向才会,就习惯性都加inline,现在都是力求写不同方向避免这个问题


断头台BUG(3px间隙)

这是一个很容易忽略过去的bug,发生的条件就在像新浪微博那样的feed列表里,当我们还在冥思苦想为啥ie6下右边的被一张很标准的图片撑破了,却没有发现他和左边头像的间隙稍微粗了那么一点点,可以插多一根...牙签了。

目标:ie6

描述:两个元素一个浮动一个不浮动的时候,ie6下他们之间有一条3px间隙

Chrome下:

IE6下:

你可以猛击:DEMO

解决方法:在不浮动的元素加上_margin-left: -3px,如果已经写了margin-left,则在此基础上减去3px


绝对定位元素的1px间距

这样的问题像我这样的强迫症是很难遇到的,我喜欢偶数和取整,什么499px,501px之类的深深的打击了我,但是UI就是喜欢随性...

目标:ie6

描述:父元素相对定位且宽度(高度)为奇数,在ie6下子元素绝对定位就会产生1px间隙

Chrome下:

IE6下:

快来看:DEMO

解决方法:父元素宽高改为偶数就行了...


img导致a标签失效

这个bug是在一个偶然的做幻灯片的时候遇到的,常见于各种图片比较不可控的图床展示中,试问谁那么蛋疼在a和img搞夹层,好吧,就是我。

目标:ie6, ie7

描述:在ie6 7下,当img元素包含在多个层级关系里时,只要触发了img元素的父元素的hasLayout,那么就会造成在外层的a标签失效

Chrome下:

IE6/7下:

还不猛击:DEMO

因为截图截不了鼠标,所以将就着看吧,现代浏览器下都是竖中指,说明可点,ie67下就是可怜的默认鼠标啦。


绝对定位使Cursor失效

这个问题发生的条件略显苛刻,首先要父级是绝对定位,子元素没背景,然后还要各种爸爸,爷爷,祖父级别的都没包裹住,写demo的时候试图还原这个bug,就因为body写了个height:100%重现不了。

目标:ie6, ie7, ie8

描述:在ie下,父元素使用绝对定位时,那么对于父元素内的子元素的cursor属性会失效

这就不上图了,直接看:DEMO

解决方法:在子元素中使用background-image:url(about:blank),如果你设置了背景颜色之类的就不会出现这个问题


然后就没有然后了...

我会告诉你是因为记不起来么,等我记起来了或者遇到了再补。。。

为啥想的时候感觉好多,写的时候就这么点呢。。。

阅读全文...

502 阅读 5 评论

滚动条插件tScrollbar

滚动条插件网上非常多,但是写的优秀的基本是基于jQuery的。由于资源紧张,jQuery这种轻量级的大框架显然是不适宜用的,只能自己手写咯。

苦心研究了一个jquery.tinyscrollbar的插件,得其精髓,遂改成原生Javascript的插件。

插件支持移动设备,用法跟tinyscrollbar一样复杂,要自己写HTML和CSS,这样自定义强的特质也沿袭了下来,还加了一点点兼容,外国不用兼容ie低版本多幸福啊。


话不多说,看Demo:http://travisup.com/demo/plugins/tscrollbar/demo.html

至于具体使用和下载请见Github:https://github.com/godxiaoji/tscrollbar

阅读全文...