Taobao FED

主页

如何检测移动端 CPU 以及内存占用率

前言6 月底的时候淘宝众筹的 H5 接入到了支付宝钱包,上线前支付宝钱包就对性能提出了明确要求:即页面静态下 app 的 CPU 消耗要低于 10%。我面临的第一个问题并不是如何优化,而是要如何便利地查看 CPU 的占用率。CPU 占用率的有效分析对于性能优化是至关重要的。因此,本文并不会讲移动端 CPU 占用率的优化,而是讲其“前戏”——如何查看移动端的 CPU 以及内存占有率。 Androi

Node.js 探秘:求异存同

前言在 Node.js 探秘:初识单线程的 Node.js 中,我们了解到,Node.js 基于 libuv 实现了 I/O 的异步操作。所以,我们经常写类似下面的代码: 1234567fs.readFile('test.txt', function(err, data) { if (err) { //error handle/ } //do somet

页面白屏与瀑布流分析方法

无线页面的开发在我们的日常工作中越来越重要,无线的性能也是我们需要重点关注的,而加载的性能又是无线性能中的一个重要问题。那么,今天我们一起来看下如何去评估、测试无线页面的加载性能。 为了方便分析页面的加载过程,这里将网络设置成最慢的 GPRS,并将加载过程录制下来,通常你可以通过 Chrome 自带的 timeline, 勾选 screenhot,可以得到详尽的过程,如下图: 这里为了和请求一

首届 KISSY 杯羽毛球双打公开赛赛况

淘宝前端团队(FED)之首届 KISSY 杯羽毛球双打公开赛落下帷幕,樱空&左御 组合不负众望,成功斩获冠军奖杯,恭喜二位选手,也恭喜阿大教练组,感谢其他选手与观众的参与,感谢组办方和赞助商! 本届羽毛球比赛看点:赞助商和组办方竟被痛下杀手,首轮即获败出局,伐开心! 唯一混双组合 站稳&晴苑 因为没有“站的很稳”,错失晋级良机,说好的要照顾妹子的呢,说好的要站稳的呢? 足球

骨骼动画原理与前端实现浅谈

人的运动——走,跑,跳,是由骨骼带动躯干和四肢完成的。「骨骼动画」,顾名思义,就是模拟骨骼运动的机制而制作的动画。比如下面这条奔跑的小龙。参考 Demo。 素材来自开源骨骼动画编辑器 Dragonbones 用到的素材,额,其实是他大卸八块后的样子。 骨骼动画主要被用游戏场景中,做 Logo 、彩蛋也不错(比如 2014 年双 11 的喵喵舞就是天猫的同学基于骨骼动画原理实现的)。其实,在

Webkit远程调试协议实战

上一篇文章 介绍了 DevTools 和 Webkit Debug Protocol 这两个 Web 开发利器的内部原理。本篇主要讲解 iOS 的 Safari 远程调试。 iOS 的 Safari 远程调试,是 iOS7 引入的新功能。它允许开发者通过桌面端 Safari 的调试工具远程检视移动端浏览器打开的页面。这套调试工具,彻底解决了无线开发纯靠 “alert” 的调试困境。Safari

Node.js 服务端实践之 GraphQL 初探

0.问题来了DT 时代,各种业务依赖强大的基础数据平台快速生长,如何高效地为各种业务提供数据支持,是所有人关心的问题。 现有的业务场景一般是这样的,业务方提出需求,然后寻找开发资源,由后端提供数据,让前端实现各种不同的业务视图。这样的做法存在很多的重复劳动,如果能够将其中通用的内容抽取出来提供给各个业务方反复使用,必然能够节省宝贵的开发时间和开发人力。 前端的解决方案是将视图组件化,各个业务线既

使用 JS 构建跨平台的原生应用:React Native for Android 调试技术剖析

通过上篇文章开发环境的准备,调试命令的启动,我们的第一个 React Native for Android 应用已经成功运行在了虚拟机环境里了。 react-native run-android 这个调试命令的背后涉及到 RN 的整个执行流程,值得进行剖析。 React Native 的更新非常活跃,本文以 0.14.0 版本为例 下文简称 React Native 为 RN 下文部分链接访问

浅谈 Node.js 和 PHP 进程管理

众所周知,PHP 占据了服务端编程语言的半壁江山,正如汪峰在音乐圈的地位一般。随着 Node.js 逐渐走上服务端编程的舞台,关于 PHP 和 Node.js 孰优孰劣的争论也不曾间断。 垄断性的市场份额足以佐证 PHP 的优秀。并且 HHVM 虚拟机、PHP 7 的革新,也给 PHP 带来了跨越式的性能突破。然而,当我们为语言层面的性能差异喋喋不休时,却往往忽略了 Web 模型在性能表现中的权

记一次淘宝首页奇葩的渲染问题

或许你曾经在 Chrome 浏览器上碰到过这样让人瞠目结舌的问题: hover 触发一个层展示,hover 离开后,这个层还遗留残影 浏览器没有清理一个元素渲染的上一个状态,导致页面多出一个错位的跟该元素一模一样的影子 交互时突然出现一个方形色块,覆盖在元素上 或者还有更奇葩的…… 以上列举到的三个问题,我在维护淘宝首页的时候都遇到过。这些都是浏览器渲染页面时,因为渲染引擎的 bug 导致