在傳統的 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 實現，讓我們一起來追求那更好的頁面實現，希望我帶著你走完這段旅程后，你能收獲一些驚喜甚至靈感。

為什么嘗試使用 Canvas 繪制列表？使用 canvas 繪制列表的好處在于頁面只有一個 dom 元素，這樣對于大量 dom 元素組成的列表來說，無疑更節省頁面內存。

本文將一步一步分析，如何實現一個 canvas 繪制的長列表。

Step1：dom 節點映射

首先考慮一個問題，對于我們在頁面中常見的 dom 結點，在 Canvas 中如何表示？

因此我們的第一步工作就是實現 dom 結點到 Canvas 繪制對象的映射。

位置傳感器

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

手機上的環境傳感器，一般包括氣壓傳感器、溫度傳感器、濕度傳感器、光傳感器、聲音傳感器和距離傳感器等。氣壓傳感器能通過氣壓測量，判斷手機當前位置的海拔高度，能提高 GPS 定位的精度，在三星 Galaxy?Nexus 上有配備；溫度傳感器一方面用來測量氣溫，判斷當前環境是否舒適，一方面也能監測手機內部溫度是否異常；而比較普遍的是光傳感器和距離傳感器，對智能手機來說幾乎是標配，并且一般設計位于手機正面上方聽筒附近位置。

前言

隨著 Web 前端開發由 PC 轉向 Mobile，作為前端工程師，除了需要去學習掌握移動端的新特性外，還需要面對大量移動端特有的難題，其中之一就是——怎么調試移動端頁面？ 針對調試的問題，現在已經有一些很好的解決方案，比如：weinre、chrome remote、手 Q 瀏覽器 Inspector，不過這些方案的門檻都較高，需要滿足一些額外的條件。目前，在日常的開發調試工作中，打日志依然是一種常見的調試手段，通過日志內容來判斷當前頁面運行的狀態，而日志的輸出形式又有很多種，有 img 請求、dialog 彈窗、alert 等等，但這些輸出方式都不能很好的滿足我們的需要，甚至存在一些問題，所以 Rosin 誕生了。

關于 Rosin

Rosin 是一個 Fiddler 插件，它能接收頁面中的 console 的輸出，將內容持久存儲在本地，并展現在 Fiddler 面板。 如果你的項目是通過 Fiddler 代理來開發調試手機頁面，那么 Rosin 將會是你的好幫手。
項目地址：? http://alloyteam.github.io/Rosin/

快速的移動 Web 開發模式，是我們團隊一直在探索的一項內容。今天給大家介紹一種高效的開發方式，在開始內容前，我們先了解與分析一下目前主流開發模式的現狀（本文聚焦響應式 Web 開發，這里主要指頁面重構的工作）。

移動 Web 開發是一塊新的領域，給 Web 帶來更多機會的同時，也帶來了更多的挑戰。為了讓開發者在移動 Web 的道路上走得更加順暢，開發更加高效，Spirit（勇氣號）由此而生。

Spirit 官網：http://alloyteam.github.io/Spirit/

?