Taobao FED

分类:无线开发

无线性能优化:FPS 测试

时间回到几周前,这天,女神突然来找我,“我这里有几个页面想测量下页面滚动的顺畅性,你有啥办法不?”。Are you kidding me?这么简单,简直是道送分题啊,于是当着女神面,打开 Chrome 开发者工具,勾选上 Show FPS meter,醒目的 FPS 监控面板就出来了,滑动页面时 FPS 的曲线就基本反映出了页面滚动的顺畅性,坐等女神的夸奖~~ “这个我知道啊,但是我有好多页面,

使用 JS 构建跨平台的原生应用:React Native iOS 通信机制初探

在初识 React Native 时,非常令人困惑的一个地方就是 JS 和 Native 两个端之间是如何相互通信的。本篇文章对 iOS 端 React Native 启动时的调用流程做下简要总结,以此窥探其背后的通信机制。 JS 启动过程React Native 的 iOS 端代码是直接从 Xcode IDE 里启动的。在启动时,首先要对代码进行编译,不出意外,在编译后会弹出一个命令行窗口,这

使用 JavaScript 开发原生 tvOS 应用

前言Apple 于今年秋季发布了新版的 Apple TV,也带来了 iOS 开发者一直期盼的全新电视操作系统 — tvOS,正如 iPhone 的成功,Apple 从根本上就坚信基于应用的电视体验才是未来。tvOS 脱胎于 iOS,但又是一个完全独立的操作系统,拥有独立的 App Store。 官方提供了两种解决方案开发 tvOS 应用: Traditional Apps: 使用原有的 iOS

无线性能优化:域名收敛

这两天相信有不少同学被一个 93 的数字搞得“要死要活”的,93 是无线页面在做发布时强制要求的性能检测达标分数,而检测规则中第一条就是要将图片域名收敛到 gw.alicdn.com 。 为什么要将域名收敛呢? PC 时代不是为了突破浏览器的域名并发限制,像图片这种还专门做了多个域名吗?好吧,你的回答可能是域名解析慢。那为什么慢? 你的回答可能是:“这,这,这,就是慢呗”。 好,成功的挖下了一个

使用 JS 构建跨平台的原生应用:ListView 组件介绍

背景滚动列表 几乎是移动开发中用途最广的 UI 组件,其重要性不言而喻。由于平台差异性,React Native 中的滚动列表组件 ListView 并没有直接映射为 Android 中的 ListView 或 iOS 中的 UITableView,而是在 ScrollView 的基础上使用 JS 做了一次封装。这样,滚动体验部分由 Native 负责,而 React 部分则专注于组件何时渲染、

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

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

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

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

使用 JS 构建跨平台的原生应用:React Native for Android 初探

Facebook 于 2015 年 9 月 15 日推出 React Native for Android 版本。相比起 for iOS,for Android 跑 “Hello, World!” 折腾了不少。在这些复杂的环境、工具依赖里,我们可以看出 React Native for Android 的一些端倪。 本系列文章就以开发一个 “Hello, World!” 的 App 为线索,跟大

移动端开发小记 - Flexbox

在开发移动端页面的时候,出去布局方便和减少代码量的考虑,使用了 Flexbox 的布局方式,在其中也遇到了一些问题,简单记录下。 什么是 Flexbox说到 Flexbox,大家应该都不陌生,网络上也有 N 多的教程。但是在这里还是简单说一下,就当回顾知识了吧。 CSS 2.1 定义了四种布局模式 ― 由一个盒与其兄弟、祖先盒的关系决定其尺寸与位置的算法: 块布局 ― 为了呈现文档而设计出来的

rem 产生的小数像素问题

由于日常需求以无线居多,所以可以在业务中做一些尝试,如 rem,刚接触这个特性的时候,曾经一度爱不释手,仿佛在无线开发的坎坷路上寻找到一条捷径。然而随着使用范围的扩大,慢慢的发现了一些使用 rem 带来的问题。 rem关于 rem 这个单位的介绍,在此就不赘述,有兴趣的同学可以阅读一丝的《响应式十日谈第一日:使用 rem 设置文字大小》,文章对 rem 进行了详细的介绍。 用途在无线开发中,响应