企业如何免费做网站,网络设计思路,广告推广文案,网站开发中1. 是否该废弃iscroll#xff1f; 我得出的结论是#xff0c;是该废弃了。那当时为什么要用iscroll#xff1f; 原因有三个#xff1a; 1. 因为别人也用了。 2. 为了iPhone上页面滑动更顺畅。 3. 为了用上拉、下拉刷新。 关于这三个原因有几点观点#xff1a; 1. 人最容易…1. 是否该废弃iscroll 我得出的结论是是该废弃了。那当时为什么要用iscroll 原因有三个 1. 因为别人也用了。 2. 为了iPhone上页面滑动更顺畅。 3. 为了用上拉、下拉刷新。 关于这三个原因有几点观点 1. 人最容易跟风编程也是。当别人用了的时候会认为我自己也要用而不清楚为什么要用本质为了解决什么。 2. Android上不用iscroll时页面拖动效果是可以的。 iPhone上不用iscroll时页面拖动效果确实有问题。但是在滑动块加上-webkit-overflow-scrolling:touch; 效果非常好 所以别用iPhone做借口去使用。 3. 本质上上下拉刷新跟iscroll没什么关系只是借iscroll间接实现。所以如果作为框架的开发者就别使用iscroll可以减少26.1KB压缩版js库。如果是普通开发者想偷懒那就看着用。 Finally iscroll该废弃用明确为什么想用很重要。 2. 效果设计图以什么为准 我不是做效果设计图的但是对设计图有点想法。很多框架是以iPhone原生效果做的这样控件效果、页面风格就跟iPhone一样Android上也是也有人会有自己一套设计图风格既不是Android原生也不是iPhone原生效果。 Finally 各自应用该有怎么的设计图像什么没什么好说的。但对于做框架来说我觉得偏向原生效果总归是好的。 ——自己设计的那一套真的比原生还好吗 3. Android动画效果页面切换效果不是很好特别是Android4.3、4.4 在iPhone上由于分配给浏览器的内存多动画效果是不错的无论是CSS3还是js控制的。但在Android上即便是加上GPU加速可是效果还是不好特别是Android4.3、4.4动画还是存在卡顿情况。 有人说把下面 -webkit-keyframes slideLeftIn {0% { -webkit-transform: translate3d(100%,0,0)}100% { -webkit-transform: translate3d(0,0,0)}
}
-webkit-keyframes slideLeftOut {0% { -webkit-transform: translate3d(0,0,0)}100% { -webkit-transform: translate3d(-100%,0,0)}
}
-webkit-keyframes slideRightIn {0% { -webkit-transform: translate3d(-100%,0,0)}100% { -webkit-transform: translate3d(0%,0,0) }
}
-webkit-keyframes slideRightOut {0% { -webkit-transform: translate3d(0%,0,0)}100% { -webkit-transform: translate3d(100%,0,0)}
} 改成 -webkit-keyframes slideLeftIn {0% { -webkit-transform: translate3d(100%,0,0)}100% { -webkit-transform:none; }
}
-webkit-keyframes slideLeftOut {0% { -webkit-transform:none; }100% { -webkit-transform: translate3d(-100%,0,0)}
}
-webkit-keyframes slideRightIn {0% { -webkit-transform: translate3d(-100%,0,0)}100% { -webkit-transform:none; }
}
-webkit-keyframes slideRightOut {0% { -webkit-transform:none; }100% { -webkit-transform: translate3d(100%,0,0)}
} 这样可以加速。但是经过实践检验根本没什么用页面卡顿的还是卡顿。 Finally 既然现实已经如此那么我们能做的是 1. 避免使用大片区域的动画效果特别是单页页面切换。 2. 不使用单页。 4. 是否不该用单页 单页的坏处 1. 增加了开发人员的开发复杂度是页面DOM变得过于复杂。 2. 存在无法释放的内存可能是框架本身或开发者自己弄出来的。 3. 单页的页面切换效果在Android自带浏览器效果不好。 4. 页面路由问题当想直接打开某个子页必须经过主页然后跳转到子页。存在两层加载中问题。 Finally 也鉴于在单页中这些痛苦问题无聊是移动Web还是Hybrid应用我觉得都不要使用单页。 5. 对于zepto是否换回jquery zepto和jquery的现状 1.zepto很久没更新了而jquery在持续发展。 2.jquery毕竟是大众使用的群众基础多。 3.很多控件是以jquery为基础可能无法转换用zepto。 Finally zepto作为一个jquery的缩减版目的是想在移动Web的基础库上有更小的体积。而我在想真的需要为了减少这么几十kb的大小去使用zepto吗zepto54.78KB包含触摸事件部分jquery 1.791.6KB这两个数字都是压缩版的。 对于Hybrid 应用来说这几十KB的问题根本不是问题都是本地资源加载速度可以忽略不计。 对于移动Web应用来说jquery可以使用压缩版和缓存做优化。 所以我觉得真心使用jquery就可以了。有种有趣的现象就是有人为了引用某个控件基于jquery就同时引入zepto和jquery这反而增加了资源体积。 6.tap事件 这是zepto里面根据几个触摸事件模拟出来的事件为了提高点击事件触发的速度但是存在经典的“穿透”问题。所以如果只是为了提速或者废弃使用zepto完全可以使用fastclick提高响应速度。 Finally 回归本质使用click在click基础上使用fastclick。 7.字体图标多少为好 字体图标使用的本质是为了图标在不同设备不失真、可以变颜色等字体能设置属性。绝不是为了这样做更酷看起来页面没有引用一张图片。 那字体图标内置多少个为好我认为是尽量少左右上下等图标大概10个左右。字体图标越少体积越小其他使用图片还可以利用到缓存。 Finally 不要一股脑加了几百个字体图标作为内置图标 虽然使用上简单了但是有很多冗余。 总结 这几个问题是在公司框架重构想起的感触最深的问题。 本文为原创文章转载请保留原出处方便溯源如有错误地方谢谢指正。 本文地址 http://www.cnblogs.com/lovesong/p/5478116.html转载于:https://www.cnblogs.com/lovesong/p/5478116.html
