移动前端框架重构几个关键问题
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吗?zepto(54.78KB,包含触摸事件部分),jquery 1.7(91.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
移动前端框架重构几个关键问题相关推荐
- 三、如何手动实现一个微前端框架雏形
如何手动实现一个微前端框架雏形 一.了解微前端 1. 什么是微前端 为了解决一整块儿庞大的前端服务所带来的变更和拓展方面的限制,将整体前端服务拆分成一些更小.更简单的,能够独立开发.测试部署的小块儿. ...
- 看一看:不同Web前端框架的优缺点分别是什么?
移动互联网的快速发展,多屏互动和多端兼容友好的界面成为目前所有系统重要的需求,Web前端开发工程师成为目前市场紧俏.火爆的人才.正在从事Web前端工作的小伙伴们一定不会对Web前端框架陌生,那么这么多 ...
- 2019年几大主流的前端框架(UI/JS)框架
如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已,现在的前端越来越复杂,知识点越来越丰富. 要做WEB前端,就需要知道前端到底是什么,需要学习那些知识:前端至少要懂的三个部分:HTML,C ...
- 2017 年了,这么多前端框架,你会怎样选择?
图片来源: Ember.js: 解决你框架疲劳的良药 过去七年来,前端框架生态系统发展蓬勃.我们已经学了很多关于构建和维护大型应用的知识.我们看到了很多新想法的出现.其中一些新想法改变了我们构建 We ...
- 2018几大主流的 UI/JS 前端框架
2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web 前端技术发展速度让人感觉几乎不是继承式的迭代,而是一次次的变革和创造.这一年中有很多热门的前端开发框架,下面源码 ...
- 2017前端框架何去何从
>这篇文章将从 AngularJS ReactJS Polymer 这几个流行的框架入手,分析前端框架在这几年发展中的关键技术点,作为2015前端技术选型的参考.摘要: - 初体验 - 技术特点 ...
- Web 前端框架分类解读
Web前端框架可以分为两类: JS的类库框架 JQuery.JS Angular.JS(模型, scope作用域,controller,依赖注入,MVVM):前端MVC Vue.JS(MVVM)*** ...
- 2018 年,React 将独占web前端框架鳌头?
相比 Angular 和 Vue, React 是 2017 年的主要 JS 框架,尤其是 React Native 以前所未有的速度提升自己. Stateofjs 2017前端框架调查结果 相比 ...
- 2020年最新前端框架大全,Web工程师人手一份!
今天跟大家分享一些目前比较热门新鲜度靠前的50款前端工具,希望对你有所帮助. 一.构建工具 1. Parcel 地址:https://parceljs.org Parcel是一款极速零配置WEB应用打 ...
最新文章
- Django开发环境准备
- JDK 1.5 主要新特性
- 医疗:ERP进销存系统(8)
- HDU 5183 Negative and Positive (NP)
- css学习笔记(一)
- Android总结篇系列:Activity中几个主要函数详解
- php插入mp3,PHP网站插入音乐
- [病毒木马] LSP劫持
- html和css制作简单的个人网页代码,制作一张简单的网页(HTML+CSS+JS) 【3】
- 免费下载卫星地图 高清卫星地图软件
- 医院信息系统(HIS系统)如何接入短信/语音功能
- 直流稳压电源基本概念及使用方法入门
- C语言基本的窗口开发
- 超全——一般照片、图片的尺寸、大小、像素
- 完全教程 Aircrack-ng破解WEP、WPA-PSK加密利器[zz]
- 难以忽视的真相:谈及利润,iPhone‘独孤求败’
- Photoshop CC 2017 For Mac 安装与破解
- c++直角空心三角形_八年级数学三角形专题知识点汇总,掌握了考满分!
- 闭包,何为闭包?如何解决闭包? (最全面解释)
- 19254:狙击战(二分答案)
热门文章
- php 多线程处理redis,redis的多线程
- Mysql函数访问oracle,Oracle与MySql函数
- 信号与系统 徐亚宁 matlab程序,信号与系统(第4版)
- mysql数据库索引页号为什么从3开始_MySQL数据库快问快答
- mysql主从配置错误_mysql主从配置失败,主从通讯失败
- python fieldnames_csvreader.fieldnames在python中未被识别为csv reader对象的属性
- Java 入门基础——面向对象的特征
- Win32ASM学习[8]: 进制转换的库函数
- linux samba安装失败,用aptitude安装samba失败
- fastjson转换时有大括号或者冒号或者有中括号_[Python Basic] 字符串处理以及类型转换 1...