在傳統的 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 定位模塊將自己的位置信號發送到定位后臺來實現手機定位的?；径ㄎ粍t是利用基站對手機的距離的測算距離來確定手機位置的。后者不需要手機具有 GPS 定位能力，但是精度很大程度依賴于基站的分布及覆蓋范圍的大小，有時誤差會超過一公里。前者定位精度較高。

Angular2 開發者預覽版出來已有一段時間，這個以速度與移動性能為目的的框架到底如何，今天我們來嘗試一下。

在官網有一段號稱 5 分鐘入門的教程：

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