开始新的旅途 博客园 首页 新随笔 联系 订阅 管理 随笔-240 评论-4142 文章-3
【webapp的优化整理】要做移动前端优化的朋友进来看看吧
单页or多页
本文仅代表个人观点,不足请见谅,欢迎赐教。
webapp
小钗从事单页相关的开发一年有余,期间无比的推崇webapp的网站模式,也整理了很多移动开发的知识点,但是现在回过头来看,webapp究竟是好还是不好真是一言难尽哟!
webapp使用JavaScript修改页面;紧接着再从服务器传递更多数据然后再修改页面,如此循环。
从性能的角度看,在现代浏览器中单页面Web App已经能够和普通native应用程序相媲美,而且几乎所有的操作系统都支持现代的浏览器。
所以,很多人认为webapp是HTML5流行过程中最大的赢家,那么他有哪些特定呢?
SPA(single page application),即单页webapp,它具有以下优点:
用户体验,对于内容的改动不需要加载整个页面。这样不会出现白页情况,页面与页面无缝切换,甚至带有一定动画效果。
请求量少,请求内容无需服务器解析,对服务器压力较小,消耗更少的带宽,比如每次不需要接收完整的html结构,而只需要json数据。
当然,单页应用也不是完美无瑕的,他也具有以下问题:
由于历史原因,单页应用对SEO支持不是太好,需要对SEO做特殊处理。
首次加载量过大,首屏加载慢,所以首屏需要做特殊处理。
本身入门门槛就高,加之view编码需要释放资源,以免heap值过高,对编码人员的要求较高。
现状
传说中的webapp足以媲美native app,事实上这个足以还有很大的距离,小钗预计这个“足以”需要用2-3年时间填平,所以事实是什么呢?
事实上移动端的webapp模式的网站很少很少,一淘半年前还是,这两天一看又变回来了,小钗虽然对webapp抱有信心,但是信心从何而来呢?
携程webapp独树一帜,去哪儿ipad介入webapp,但是国内主流网站依旧是传统网站,主要原因不过有二:
① SEO
② 不想吃螃蟹
所以,携程的webapp在国内,何其可贵,说到这里,我都要哭出来了......
优劣之分
孰优孰劣非是小钗可以论断,求稳,webapp不比传统网站;求SEO,webapp需要其它解决方案;说垃圾收集,webapp需要自己释放资源。
说体验,webapp需要考虑首屏加载;说动画,webapp要考虑低端手机,所以webapp还有很长一段路需要走!
小钗相信,现在的webapp效果不可媲美native app,总有一天,当webapp不再制约于网络、设备,那么webapp的春天不会远。
虽说如此,现阶段webapp也会有许多优化心得、奇技淫巧可以拿出来说说的,这里小钗做一次分享,希望可以对webapp的同学有所帮助。
网络传输优化
综述
前端优化分为两个切入点:网络传输与DOM操作,而网络传输是制约一个网站速度的主要因素。
网络传输的优化要点是,零请求,无流量,其意是最大程度的减少请求数,降低请求量。
对webapp模式的应用来说,首屏加载慢是一个不可避免的问题,所以提升webapp首屏加载速度是提升整体网站速度的关键。
fake页-首屏加速
以上是一个网站首页的加载时间,我们分别取其150kb与30kb网速的加载速度,可以看出会慢!若他是webapp,我们可以做一些优化
我们应该避免页面长时间白页,这个时候便提出了fake页的概念。页面渲染只需要完整的HTML以及CSS,这个便是第一个优化点。
从数据请求数以及请求量来说,webapp首页的响应应该比较慢,若是任由js加载完成再渲染页面,用户很有可能失去耐心。
但是从DOMContentLoaded来看,首页事实上页面响应比较迅速,所以这个加载结束后页面第一屏便渲染结束,然后再异步加载js,当js改变后再动态改变dom结构中的一些关键点
这个时候一个静态HTML页面,装载首屏的基本内容,让首页快速显示
然后js加载结束后会马上重新渲染整个页面,这个样子,用户就可以很快的看到页面响应,给用户一个快的错觉,给人感觉快得多。
降低请求数
由webapp首页来说,不可避免的使用的js文件较多,这些文件分为两类:
① 框架js-css
② 各个业务团队js-css
所以可以限定每个业务团队只会加载这四个文件,以最小降低请求数,这里又涉及到并行加载,数量与容量有一个临界值,如何取这个临界值需要各位自己去实验
降低请求量
虽说图片压缩是不必说的事情,但是总会有些时候你会发现一些网站的图片尺寸很大,这个需要处理,而且必须处理。
以框架库为例,除了核心包以外,不需要的UI或者功能库可以剔除,用到了再动态加载,减少首次加载量,这个一开始就得做好,做不好后期就不好改
以业务团队为例,首次加载的js与html模板会将常用的几个页面压缩合并,其它页面访问时再请求,若是想提升首屏加载便可以只下载需要的页面文件。
另外,以下两点尤其需要注意:
① 若是你们是要的还是jQuery库的话,可以考虑换成zepto了
② 勿胡乱引用第三方库,若是要引用一定是读懂源码的情况下重写使用之,这样的好处是,吃得透,万一有问题,能改,而不是没办法又换库
缓存Ajax/localstorage
该方案的原理与前面类似,我们发送Ajax请求时候,应该缓存一些非实时数据,比如城市信息和常用联系人,但是我们只能缓存非敏感信息,
产品搜索页至列表页的请求数据会缓存30s-60s,若是过期时间内用户回到列表页的话不会重新请求数据
这对服务器压力,页面响应皆是有利的,这个在30s内事实上意义不大,可以减少一次请求。
另外,对于get和post的效率,曾经有人做过一次测试:
get100次平均耗时323ms;post100次平均耗时589ms,所以post方式是比get慢的,但post请求的优点是安全,并且参数没有长度限制。
是选择post还是选择get,皆需要处理,避免截断url,或者处处post。-
lazyload
只显示首屏页面,其它内容需要时再加载,比如列表页、图片lazyload,皆需要做
DOM操作优化
综述
DOM操作主要分为页面渲染与资源清理(heap控制),两者之间又相辅相成,若是DOM操作一块处理不好,其产生的感觉就不再是慢,而是卡
所以DOM操作优化的主要目的就是消灭页面卡的问题,这个在移动端尤为重要。
关于页面渲染
浏览器会解析三个东西:HTML、Javascript、CSS
浏览器首先会根据HTML生成DOM Tree,其次会根据CSS生成CSS Rule Tree,javascript可以通过DOM API与CSS API操作DOM Tree与CSS Rule Tree,从而引起页面变化。
浏览器解析结束会通过DOM Tree与CSS Rule Tree形成render tree,只有display不为none的元素才会形成render Tree,render Tree形成后浏览器会调用GUI绘制页面,在此之前做的一件事情便是layout或者说reflow。上面的描述简单而言可以分为以下流程:
l 生成DOM树
l 计算CSS样式
l 构建render tree
l reflow,定位元素位置大小
l 绘制页面
在这个过程中,若是javascript动态改变DOM Tree便会引起reflow
页面中的元素改变,只要不影响尺寸,比如只是颜色改变只会引起repaint不会引起回流
否则,reflow不可避免,这个时候便需要重新计算形成render Tree
reflow分为局部回流与全局回流,会影响下面的,不会影响上面的元素
reflow耗用的系统资源较大,DOM Tree中受到影响的节点皆会reflow,然后影响其子节点最坏的情况是所有节点reflow,该问题引发的现象便是低性能的电脑风扇不停的转,手机变得很热,并且非常耗电,以下操作可能引起reflow
l 操作dom结构
l 动画
l DOM样式修改
l 获取元素尺寸的API
减少使用定位属性(fixed/absolute)
static元素处于文档流中,其渲染速度是最快的,我们做过一个测试:
100个absolute元素与100个static元素渲染时差在0.01-0.007ms
100000个元素渲染差距便增至30ms左右,这个微小的时差在移动端变得尤为明显,比如:
小米/三星手机(1000左右),便存在明显的渲染问题,具体表现为:
l 定位元素在手机上不能显示。
l 定位元素动画效果失效。
以上问题便是UI渲染失效多导致,最好的解决方案是减少使用定位元素,否则只能引起强烈reflow才能解决。
另外,产品经常会有fixed的相关需求,比如支付按钮一直出现在低端,这个需求会造成两个问题:
l fixed元素遭遇文本框时失效,可能会飘到页面中间阻挡输入
l 影响效率
问题一原因与移动端的实现有关,暂时没有完美的解决方案,问题二便与渲染直接关联
滚屏时,页面上所有的像素会跟着滚动,显卡对全屏幕上下移动的处理很快,但是若是出现一个fixed元素或者有元素不跟着一起滚动,那么滚动对手机浏览器来说就是一个负担,这种滚动的性能甚至体现在了iphone 4s,因为滚动可能会造成reflow,这个现象体现在:
使用absolute配合javascript模拟fixed效果时,会有断片的效果,该问题在iphone5s便不会出现这个问题。
奇技淫巧
当然,我们不能忽略产品的需求,fixed类需求应该在技术上得到解决,还用户一个良好的体验。
虚拟键盘导致fixed元素错位
fixed元素一定会伴随虚拟键盘的出现,但是虚拟键盘只是“贴”在了viewport上,表面上不会对dom产生“任何”影响,但是这个时候fixed元素表现却变得怪异起来,会错位。
应用层面解决问题方案是,虚拟键盘弹出时将fixed元素设置为static,虚拟键盘消失时候设置回来。
由于虚拟键盘出现并未抛出事件,而检测scroll或者resize事件,皆会有一定延迟,会出现闪烁现象,所以现有最好的方案是setinterval定时器监控当前获取焦点元素是否为文本元素,若是是的话便需要处理,如此便可解决fixed元素错误问题。
fixed元素滑动惯性平滑度
我们常常遇到这种产品需求,tab标签栏开始固定,当滚动向下超过该标签栏后便会变成fixed元素,一直出现在头部,这样的需求在电脑上没有问题,但是在iPhone5s以下的手机常常会出现小范围错位或者快速移动大范围错位的问题。
这个时候我们可以引起reflow迫使浏览器重绘以解决这个问题,这里推荐一个奇怪的hack写法:同时设置三个image元素的src属性,便可以全范围解决该难题, 该方案被团队证实并得到应用。
//三图片src,引发reflow,处理fixed方案惯性问题
var el = this.els.ctlc.find('img');
$(el[0]).attr("src", 'http://res.m.ctrip.com/html5/Content/images/144.png');
$(el[1]).attr("src", 'http://res.m.ctrip.com/html5/Content/images/144.png');
$(el[2]).attr("src", 'http://res.m.ctrip.com/html5/Content/images/144.png');
另外,上图中的tab标签下面的蓝线具有动画,但是在小米或者三星手机上可能不会移动,这个时候也可以动态引起reflow解决这个BUG。
其它
l CSS选择器尽量使用id与class,避免过度层叠
l 避免使用数值,比如:border: none不会引起渲染,而boder: 0会
l 动画时候让元素脱离文档流,以免导致大量reflow
l 避免逐条修改DOM样式,改以className实现同样功能
l 操作DOM时将display设置为none,因为这种元素不会影响渲染,或者操作fragment对象取代操作显示在页面上的DOM
l 避免将获取DOM样式属性的操作写在循环中,可能引起重复reflow
内存资源优化
移动端的javascript
首先,移动端的性能与PC端的性能完全不在一个数量级上,比如,我哥做过一个测试,使用innerHTML绘制大段,之后想获取HTML的ID节点,事实上是获取不到的,这种问题在单页模拟多页,动态创建DOM会经常发生
var element = $('<div id = "test">...大量结构...</div>');
$(root).html(element)
$('#test) //为空
这类问题匪夷所思,因为页面UI渲染与DOM操作是互斥的,但是就算出现了这个问题,一个解决方案是使用settimeout,更好的方案是使用DOMNodeRemoved事件监控页面DOM改变,将我们的DOM操作回调放入以确保渲染结束。
以上问题只是为了说明移动端的性能问题,这类性能问题会导致很多莫名其妙的问题,而且很多与渲染有关。但是这也从侧面说明了移动端资源的紧缺,若是heap值过大,会导致操作出现卡的现象,更有甚者,会引起页面假死直接退出。
webapp的模式,完全依赖于浏览器的垃圾回收,基本就是作死,因为传统页面一旦刷新页面整个资源完全释放,而webapp没有刷新这类操作,只有一个状态到两一个状态,不相关的内存会保留,资源必须手动释放,或者说,框架必须提供垃圾释放的机制。
这个由图表heap值变化可以清晰看出。
而view切换过程中,不用的资源若是不手动设置为null会导致变量得不到回收便脱离框架控制而失控了。所以我们在webapp的过程中需要注意:
l 释放没有使用的闭包
l 观察者需要得到清理
l 释放定时器
l view切换过程中,在destroy中释放view相关资源
——感谢艾伦友情支援
闭包陷阱
在我们工作过程中,滥用局部变量极有可能引起闭包陷阱,这个问题不止是性能问题,在逻辑上会引起错误,而且不易发现,比如,在AMD闭包中使用一个局部变量
var _attributes = {};
callback ($.extend(_attributes, opts));
如此操作,会改变_ attributes对象,若是一个实例还无问题,但是两个实例的话便会发生变量污染。
这只是一个例子,但是在代码中滥用局部变量可能会引起不必要的隐忧,戒之慎之。
webapp资源释放
根据前面的描述,我们可以得出一个结论:
无论是view还是UI组件我们得提供统一的destroy接口,以便让用户继承释放资源。
若是view的资源得不到释放导致heap值过高,webapp模式的网站其价值大减。这里有几点可以考虑:
l webapp中view实例保存不超过5个,多了便释放dom结构以及内存引用(临界值自己判断最优)
l view隐藏时释放内部资源,解除DOM事件句柄
l UI组件与view相同,需要统一释放机制
但是单页应用由于页面不会刷新,总有一些资源得不到释放,此问题任重道远,平时编写过程可以做以下优化:
l 使用函数替换逻辑
让我们的函数产生一个返回值替换函数中的大段逻辑,这样的第一个好处便是逻辑清晰,第二个好处是这些函数在不同的函数中,这个函数被使用后便会自动得到释放。
l 清理闭包引用
当一个闭包函数或者什么使用结束后,若不会再使用,便需要手动清理该变量,以便解除闭包之间的引用关系,从而释放资源。
l 使用对象属性或者方法
一个对象可以引用其他对象的属性或者方法,比如obj.foo = thatObj;这种情况下,我们可以随时删除对象解除引用关系,然后便可以清理资源。
动画与假死
动画而言建议采用CSS3实现动画,CSS3中又推荐采用最新的接口,比如使用transform取代top/lelf操作,这样操作效率搞得多。
若是采用动画可以将对应元素设置为absolute以减少回流,另外最关键一点还是
避免移动DOM树过多的节点,这个时候需要驳回产品无理需求,比如:
产品要求日期滚屏组件,显示半年的数据,这半年的数据便是180个DOM树
这个级别的DOM一旦移动整个手机会直接卡死,甚至构建DOM树,渲染页面也会出现假死现象,该问题需要规避。
Application Cache
Application Cache是HTML5为webapp离线使用而增加的API,与localstorage、cookie等不同,Application Cache存储的是一系列请求资源允许浏览器在请求资源时不必通过网络,设计得当的话可以实现离线应用。
使用Application Cache主要是在网络性能上提升,有效降低了网络延迟,提升请求加速
但是也会有一些问题,比如新版本缓存不立刻生效;manifest中的请求路径相对于manifest文件,而非加载页面;更新/回滚等问题,所以使用与否还得论证。
体验优化
区域滚动
移动端经常需要实现区域滚动的需求,成熟的也有IScroll解决方案,但是方案却不理想。
就官方的例子便会出现以下问题:
l 头部消失
l 偶尔不能显示文本框焦点,或者焦点错位
若是以上问题可忽略,但是文本框不见了这种事情,我是不会接受的
导致的原因与组织浏览器默认事件有关,所以,我这里不太推荐各位大范围的使用区域滚动,而改在区域使用,
就去哪儿的ipad版本在一个具有文本框的地方使用了IScroll,其提高的用户体验与导致的问题一样引人入胜。
事实上,小钗及其推崇IScroll库,虽说他有这样那样问题,但是,IScroll是最有可能带来移动端革命的库,因为他可以:
① 解决webapp区域滚动
② 变相解决fixed问题
③ 解决动画过程带来的长短页问题
总而言之,IScroll方案的提出,是让webapp媲美native app靠近了一大步,真正的平起平坐还需要浏览器的支援
点击响应
click本身在移动端响应是没有问题的,但是我们点击下来300ms 的延迟却是事实,这种事实造成的原因就是
手机需要知道你是不是想双击放大网页内容
所以click点击响应慢,而touch却不会有这样的限制,于是移动端的touch相当受欢迎,至于鼠标慢,他究竟有多慢,我会告诉你每次会慢300ms
所以该问题需要处理,具体见:http://www.cnblogs.com/yexiaochai/p/3462657.html#_h2_7
结语
webapp不是一天两天的事情,总有一天,webapp会绽放其应有的风采!
您可以考虑给小钗发个小额微信红包以资鼓励 上海-B站招聘靠谱前端(3年左右工作经验),喜欢二次元的小伙伴私聊! posted on 2014-05-30 08:17 叶小钗 阅读(42814) 评论(55) 编辑 收藏 < Prev12评论: #51楼 2014-09-29 17:32 | 阿沈
博主你好,我现在也遇到了fixed元素滑动惯性平滑度这个问题,你提到改变3个img元素的src强制页面reflow,但是这个改变是在什么事件里进行呢?我放在window.scroll事件里去改变,顶部条却依然会错位,或者能否再稍微详细一点讲解一下哈? 支持(0)反对(0) #52楼 2015-01-24 01:22 | SuperSaiyan
虽然有内容,但文字有很多问题,结构,组织,语法,。。。
举例说:
“头部消失
l 偶尔不能显示文本框焦点,或者焦点错位
若是以上问题可忽略,但是文本框不见了这种事情,我是不会接受的
导致的原因与组织浏览器默认事件有关,所以,我这里不太推荐各位大范围的使用区域滚动,而改在区域使用,
就去哪儿的ipad版本在一个具有文本框的地方使用了IScroll,其提高的用户体验与导致的问题一样引人入胜。”
这段文字有多少毛病? 支持(0)反对(0) #53楼[楼主] 2015-01-24 11:05 | 叶小钗
@ SuperSaiyan
额,我私下阅读下,文字多了容易出错 支持(0)反对(0) http://pic.cnblogs.com/face/u294743.jpg?id=23185449 #54楼 2015-01-24 13:40 | SuperSaiyan
@ 叶小钗
这是不应当的。第一,文字都不对,如何能很好的表达意思,第二,文章是你的脸面,你会在脸上乱写乱画吗? 支持(0)反对(0) #55楼 31714302015/4/27 17:54:25 2015-04-27 17:54 | 真爱像深蓝
本人现在也在利用webview+html5做android应用,而且还是基于mono 的xamarin studio。相对于其它同事开发的native app,如果是企业级开发相差不大,唯一不同的Sencha Touch(没有使用jquery mobile)。
当然开发时,确保javascript只做渲染,接收jsonp数据,不参与运算,哪怕是数组的sort、find需要回调操作的方法操作由服务端提供支持。 支持(0) 反对(0) http://pic.cnblogs.com/face/31634/20160629101910.png < Prev12 刷新评论 刷新页面返回顶部 注册用户登录后才能发表评论,请 登录 或 注册, 访问网站首页。 【推荐】超50万VC++源码: 大型工控、组态\仿真、建模CAD源码2018!
【推荐】微信小程序一站式部署 多场景模板定制
最新IT新闻:
· 亚马逊正研发人工智能芯片 英特尔英伟达麻烦来了
· 微软Windows 10“云剪贴板”新专利曝光
· Apple Music大学生折扣优惠登陆82个国家和地区
· 90后海归美女回家当农民 无人机种地月入10万
· SpaceX揭示“猎鹰重型”火箭中央助推器坠入海洋的原因
» 更多新闻... 最新知识库文章:
· 领域驱动设计在互联网业务开发中的实践
· 步入云计算
· 以操作系统的角度述说线程与进程
· 软件测试转型之路
· 门内门外看招聘
» 更多知识库文章...
我的微博
友情链接
Aaron 三水清 宇果 忆夏天个人信息
昵称:叶小钗园龄:6年9个月
荣誉:推荐博客
粉丝:5038
关注: 31 +加关注
|
||||||
日 | 一 | 二 | 三 | 四 | 五 | 六 |
---|---|---|---|---|---|---|
28 | 29 | 30 | 31 | 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
搜索
常用链接
最新随笔
- 1. 区块链简单研读笔记
- 2. 【数据标识】iOS App下载渠道的统计需求
- 3. Hybrid容器设计之第三方网站
- 4. 【数据可视化之采集】如何设计一个前端监控系统
- 5. 小公司的一年,一起看看小公司的前端可以怎么做
- 6. React Native初探
- 7. 浅谈Hybrid技术的设计与实现第三弹——落地篇
- 8. 关于前端开发中的“收口”思想
- 9. 【大前端之打通账号系统】passport应该如何落地?
- 10. 来来,一起设计一个简单的活动发布系统
我的标签
随笔分类(304)
- blade(5)
- css(13)
- HTML5&CSS3(30)
- IOS(3)
- javascript(81)
- Java学习(3)
- node.js(3)
- Web前端(67)
- 大前端(24)
- 工作点滴(6)
- 接口学习(3)
- 面试题(9)
- 设计模式(14)
- 学习感悟(6)
- 移动开发(37)
随笔档案(240)
- 2018年2月 (1)
- 2017年3月 (1)
- 2017年1月 (2)
- 2016年12月 (2)
- 2016年11月 (1)
- 2016年10月 (1)
- 2016年7月 (2)
- 2016年6月 (2)
- 2016年5月 (3)
- 2016年2月 (2)
- 2015年11月 (1)
- 2015年10月 (5)
- 2015年9月 (1)
- 2015年8月 (3)
- 2015年5月 (2)
- 2015年4月 (2)
- 2015年3月 (3)
- 2015年2月 (4)
- 2015年1月 (1)
- 2014年12月 (5)
- 2014年11月 (5)
- 2014年9月 (1)
- 2014年8月 (5)
- 2014年7月 (4)
- 2014年6月 (5)
- 2014年5月 (7)
- 2014年4月 (3)
- 2014年3月 (8)
- 2014年2月 (4)
- 2014年1月 (10)
- 2013年12月 (10)
- 2013年11月 (11)
- 2013年10月 (5)
- 2013年9月 (2)
- 2013年8月 (5)
- 2013年7月 (15)
- 2013年6月 (34)
- 2013年5月 (16)
- 2013年4月 (28)
- 2013年3月 (1)
- 2013年1月 (1)
- 2012年6月 (2)
- 2012年5月 (2)
- 2012年4月 (1)
- 2012年3月 (3)
- 2012年2月 (1)
- 2012年1月 (2)
- 2011年10月 (2)
- 2011年7月 (3)
文章档案(3)
积分与排名
- 积分 - 661296
- 排名 - 159
最新评论
- 1. Re:区块链简单研读笔记
- 好文
- --微软爱好者
- 2. Re:【HTML5&CSS3进阶学习01】气泡组件的实现
- 可以到华清远见学习
- --青春依旧22
- 3. Re:React Native初探
- 楼主,React和React Native是同一个框架吗,React只适合做移动端应用吗,能做PC端的应用吗
- --快乐的灰太狼
- 4. Re:浅谈Hybrid技术的设计与实现
- 他山跨平台混合应用开发框架(OHUI),是使用Gecko(v1.9~v52)嵌入,实现跨平台混合应用的开发。支持xp/2003/win7,8,9,10+ x32/x64,Linux,Android 系......
- --otherhill
- 5. Re:浅谈Hybrid技术的设计与实现
- mark
- --前端一只羊
- 6. Re:【数据标识】iOS App下载渠道的统计需求
- 钗公好久不更新了~~~
- --不由分说
- 7. Re:浅谈Hybrid技术的设计与实现
- 内容丰富,很全面~
- --刘林
- 8. Re:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo
- 非常好,学习了
Vuex 2.0 源码分析: - --oro2897048
- 9. Re:【zepto学习笔记02】零碎点
- 添加元素到匹配的元素集合。如果content[context]参数存在,只在content[context]中进行查找,否则在document中查找。
去重的意思,是防止操作多次。 - --冰1317
- 10. Re:【requireJS源码学习01】了解整个requireJS的结构
- 感谢
- --cqcpcqp
- 11. Re:小公司的一年,一起看看小公司的前端可以怎么做
- 很有帮助,谢谢
- --那么遥远
- 12. Re:前端优化带来的思考,浅谈前端工程化
- 分析的不错
Jquery插件集 - --OkNoBug!
- 13. Re:浅谈Hybrid技术的设计与实现
- @石弦开始接触到hybrid,之前一直做移动端。哈哈...
- --chenEdgar
- 14. Re:【数据标识】iOS App下载渠道的统计需求
- 三年左右的前端都需要掌握什么.
- --无聊的猴子
- 15. Re:小公司的一年,一起看看小公司的前端可以怎么做
- 刚培训出来的现在找工作真难啊,现在想的就是以后找个好团队,其实公司大小都无所谓
- --无聊的猴子
阅读排行榜
- 1. 浅谈Hybrid技术的设计与实现(112633)
- 2. 【grunt整合版】30分钟学会使用grunt打包前端代码(111744)
- 3. 【前端框架之Bootstrap 02】布局与导航(60144)
- 4. RequireJS学习笔记(56357)
- 5. 初探Backbone(48813)
- 6. 【web前端面试题整理08】说说最近几次面试(水)(45632)
- 7. 【IScroll深入学习】解决IScroll疑难杂症(44451)
- 8. 【webapp的优化整理】要做移动前端优化的朋友进来看看吧(42813)
- 9. 浅谈移动前端的最佳实践(42287)
- 10. HTML5本地存储Localstorage(41879)
- 11. 【读fastclick源码有感】彻底解决tap“点透”,提升移动端点击响应速度(40808)
- 12. 【小贴士】虚拟键盘与fixed带给移动端的痛!(39945)
- 13. 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)(38343)
- 14. 【grunt第一弹】30分钟学会使用grunt打包前端代码(32736)
- 15. 手持设备点击响应速度,鼠标事件与touch事件的那些事(28031)
评论排行榜
- 1. 浅谈移动前端的最佳实践(180)
- 2. 浅谈Hybrid技术的设计与实现(136)
- 3. 【web前端面试题整理04】阿里一行之大神面对面(114)
- 4. 【年终总结】2年计划还是要有的,万一实现了呢?(90)
- 5. 小公司的前端应该怎么做?(86)
- 6. 【web前端面试题整理08】说说最近几次面试(水)(82)
- 7. 两年内,我要成为国内优秀的前端技术人员!(82)
- 8. 小公司的一年,一起看看小公司的前端可以怎么做(75)
- 9. 【blade利刃出鞘】一起进入移动端webapp开发吧(74)
- 10. Fiddler真乃前端大杀器!!!(71)
- 11. 【grunt整合版】30分钟学会使用grunt打包前端代码(64)
- 12. 展望14,献给困惑的初级前端,理想不甘消磨,目标不能停滞!(62)
- 13. 【web前端面试题整理06】成都第一弹,邂逅聚美优品(61)
- 14. 【前端框架之Bootstrap01】我们一起来看看这个家伙是什么(58)
- 15. 【webapp的优化整理】要做移动前端优化的朋友进来看看吧(55)
推荐排行榜
- 1. 【grunt整合版】30分钟学会使用grunt打包前端代码(197)
- 2. 浅谈Hybrid技术的设计与实现(170)
- 3. 浅谈移动前端的最佳实践(154)
- 4. 前端优化带来的思考,浅谈前端工程化(106)
- 5. 【移动前端开发实践】从无到有(统计、请求、MVC、模块化)H5开发须知(101)
- 6. 【年终总结】2年计划还是要有的,万一实现了呢?(90)
- 7. 【组件化开发】前端进阶篇之如何编写可维护可升级的代码(86)
- 8. 【blade利刃出鞘】一起进入移动端webapp开发吧(75)
- 9. 小公司的前端应该怎么做?(63)
- 10. 展望14,献给困惑的初级前端,理想不甘消磨,目标不能停滞!(61)
- 11. 【webapp的优化整理】要做移动前端优化的朋友进来看看吧(59)
- 12. 小公司的一年,一起看看小公司的前端可以怎么做(57)
- 13. 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)(56)
- 14. 浅析天猫H5站点(55)
- 15. 浅谈Hybrid技术的设计与实现第二弹(55)
- 1 【webapp的优化整理...
- 2 单页or多页
- 2.1 webapp
- 2.2 现状
- 2.3 优劣之分
- 3 网络传输优化
- 3.1 综述
- 3.2 fake页-首屏加速
- 3.3 降低请求数
- 3.4 降低请求量
- 3.5 缓存Ajax/loc...
- 3.5.1 lazyload
- 4 DOM操作优化
- 4.1 综述
- 4.2 关于页面渲染
- 4.3 减少使用定位属性(f...
- 4.4 奇技淫巧
- 4.4.1 其它
- 4.5 内存资源优化
- 4.5.1 移动端的javascript
- 4.5.2 闭包陷阱
- 4.5.3 webapp资源释放
- 4.5.4 动画与假死
- 4.5.5 Application Cache
- 5 体验优化
- 5.1 区域滚动
- 5.2 点击响应
- 6 结语