在传统的 web 优化中，我们可以采取压缩、拆包、动态加载等方法减少首屏资源大小，也能通过离线包、页面直出等方案加速 html 返回，之前一篇 h5 秒开大全有部分简析。在大部分场景中，这些方案都足够用，也能得到出色的效果。但仍有两种无法尽善尽美的地方：其一是短暂的白屏现象不可避免，其二是对于超大型 web 应用难以做到秒开。结合客户端特性，我们有没有办法，进一步做到极致，打开 web 页面和打开客户端页面无差异的体验呢？

Open and modern framework for building user interfaces.

• Omi 的 Github 地址 https://github.com/AlloyTeam/omi
• 如果想体验一下 Omi 框架，可以访问 Omi Playground
• 如果想使用 Omi 框架或者开发完善 Omi 框架，可以访问 Omi 使用文档
• 如果你想获得更佳的阅读体验，可以访问 Docs Website
• 如果你懒得搭建项目脚手架，可以试试 omi-cli
• 如果你有 Omi 相关的问题可以 New issue
• 如果想更加方便的交流关于 Omi 的一切可以加入 QQ 的 Omi 交流群 (256426170)

写在最前

我们都是前端工程师，无论你现在是页面仔，还是 Node 服务开发者，抑或是全端大神，毋庸置疑的是，我们都是前端工程师，我们生来就对追求页面的极致拥有敏锐的触觉，无论是页面实现方式的高大上、页面的极致的性能还是页面完美的展现，都是我们孜孜不倦的追求目标。即使这些在别人眼里，只是跟其他的页面一样没什么不同，但我们却能为其中那只有我们才知道的一抹别致而窃喜。

而今天我要讲的，就是我们最熟悉的老朋友，CSS。不讲枯燥的语法，抛开 js，让我们一起来看业务中那别致的纯 CSS 实现，让我们一起来追求那更好的页面实现，希望我带着你走完这段旅程后，你能收获一些惊喜甚至灵感。

  一、远观：认识 WAAPI

当我们谈及网页动画时，自然联想到的是 CSS3 动画、JS 动画、SVG 动画、APNG 动画等技术以及 jQuery.animate() 等动画封装库，根据实际动画内容设计去选择不同的实现方式。然而，每个现行的动画技术都存在一定的缺点，如 CSS3 动画必须通过 JS 去获取动态改变的值，setInterval 的时间往往是不精确的而且还会卡顿，APNG 动画会带来文件体积较大的困扰，引入额外的动画封装库也并非对性能敏感的业务适用。目前情形对开发者而言，鱼和熊掌似乎不可兼得，既希望获得更强大便捷的动画控制能力，又希望性能和体验上足够流畅优雅，如果能有一种浏览器原生支持的通用的动画解决方案，那将是极好极好的呢。

日常开发中，我们常用:before,:after 来实现一些效果，比如

为什么尝试使用 Canvas 绘制列表？使用 canvas 绘制列表的好处在于页面只有一个 dom 元素，这样对于大量 dom 元素组成的列表来说，无疑更节省页面内存。

本文将一步一步分析，如何实现一个 canvas 绘制的长列表。

Step1：dom 节点映射

首先考虑一个问题，对于我们在页面中常见的 dom 结点，在 Canvas 中如何表示？

因此我们的第一步工作就是实现 dom 结点到 Canvas 绘制对象的映射。

前言

Facebook  在 2015.9.15 发布了 React Native for Android，把 JavaScript  开发技术扩展到了移动 Android 平台。基于 React 的 React Native  让前端开发者使用 JavaScript  和 React  编写应用，利用相同的核心代码就可以创建  基于 Web，iOS  和 Android  平台的原生应用。在 React Native for Android 出来之后，本人花了些时间从环境搭建到做出几个 demo，从体验来看都挺流畅，具体将此间遇到和问题和具体的新的体会，向大家分享一下。

在 Web 中使用 ES 2015

想要在浏览器端使用 ES 2015 最新语法，其实很简单，只需要一个转换器即可，Babel 是 ES 2015 最流行的转换器之一，Babel 加上各种插件和 polyfill 能基本上支持绝大部分新语法。

在你的构建中，插入一步使用 Babel 将 ES 2015 的代码转换成完全兼容 ES5 的代码的任务，你甚至都不必了解 Babel 的具体用法，就可以爽爽的开始写 ES 2015 代码了。

使用 gulp-babel 在需要的地方转换一下即可。

位置传感器

1 GPS 与基站定位

位置传感器通常主要指手机内部的 Global Positioning System (GPS) 模块，GPS 又称全球卫星定位系统，该系统包括太空中的 24 颗 GPS 卫星；地面上 1 个主控站、3 个数据注入站和 5 个监测站及作为用户端的 GPS 接收机。最少只需其中 3 颗卫星，就能迅速确定用户端在地球上所处的位置及海拔高度；所能收联接到的卫星数越多，解码出来的位置就越精确。

获取位置信息，核心在于获取经纬度坐标，继而在手机地图中标注出自身坐标，从而确定当前所处的位置。目前手机定位的方式有两种，一种是基于 GPS 的定位，一种是基于移动运营网的基站的定位。基于 GPS 的定位方式是利用手机上的 GPS 定位模块将自己的位置信号发送到定位后台来实现手机定位的。基站定位则是利用基站对手机的距离的测算距离来确定手机位置的。后者不需要手机具有 GPS 定位能力，但是精度很大程度依赖于基站的分布及覆盖范围的大小，有时误差会超过一公里。前者定位精度较高。

Angular2 开发者预览版出来已有一段时间，这个以速度与移动性能为目的的框架到底如何，今天我们来尝试一下。

在官网有一段号称 5 分钟入门的教程：

quick start： https://angular.io/docs/js/latest/quickstart.html