瀏覽器產品 - 從非觸碰螢幕到多點觸碰螢幕
Post on 19-Jul-2015
111 Views
Preview:
TRANSCRIPT
瀏覽器 品產從非觸 螢幕到多點觸 螢幕碰 碰
Kris Wang
使用者要如何操作瀏覽器?
非觸 螢幕 唯有 碰 你
“ 操作鼠標”
Webkit
MouseMovedMousePressedMouseReleased
有了“多點”觸 螢幕後碰
Webkit
MouseMovedMousePressedMouseReleased
scroll
zoom
More??
“ 手勢”才是王道
對網頁 容而言內 ,
鼠標跟手勢有差別嗎 ?
iOS Safari Android Chrome
Behavior Touch event Mouse Event Behavior Touch event Mouse Event
[Gesture] TapUp touchend mouseup [Gesture] TapUp touchend mouseup
[Gesture] TapDown touchstart mousedown [Gesture] TapDown touchstart mousedown
[Gesture] DoubleTap NA NA [Gesture] DoubleTap NA NA
[Gesture] Scroll Begin touchstart NA [Gesture] PanBegin touchstart NA
[Gesture] Scroll Move touchmove NA [Gesture] PanMove touchmove NA
[Gesture] Scroll End touchend NA [Gesture] PanEnd touchend NA
[Gesture] ZoomBegin touchstart NA [Gesture] ZoomBegin touchstart NA
[Gesture] ZoomMove touchmove NA [Gesture] ZoomMove touchmove NA
[Gesture] ZoomEnd touchend NA [Gesture] ZoomEnd touchend NA
所以 , 手勢的功能做完
多點觸 品碰產 就出貨了
萬歲 !!
But
我來面試時 , 老 告訴我闆
目前這個案子只有一個問題
慢
畫面捲動 : 慢
畫面縮放 : 慢
反正就是 慢
對於這種症頭
我的經驗有三支箭可用
1. 給硬體賴
2. 吃偷 步
3. 空間換時間
關於縮放 , 偉大的 iPhone讓我們知道
畫面更新跟不上手指動作 , 就是慢
老實的工程師只要縮放比例有變化 , 都通知
Webkit
不老實的工程師原始畫面當成畫面截圖
直接縮放截圖後貼到螢幕 (偷吃步 )
停止縮放再報縮放比例給 Webkit
延伸問題Scrollbar 應該一起縮放嗎 ?
我知道很醜
所以我做了 浮動式 scroll bar
所以針對畫面縮放
QA 單位要測什麼 ??
關於捲動 , 偉大的 iPhone讓我們知道
如果 容移動跟不上我的手指內
那就是慢
( 先 給賴 Driver)
如果畫面捲動更新在20fps 情況下就很順
那 Driver 10ms 就報一個scroll event 是報心酸的 ??
所以捲動時 Driver 少報幾個點吧
! (偷吃步 )
還是 擔心有什麼影響你 嗎 ?(問我問我 )
然而
我們的 Render 無法達到 20fps啊
所以
我們用了一招 :
Tiled Backing Store
把大於可視範圍的畫面用數塊 tile 備份起來
畫面更新時 , 只要把 tile 貼上去就好了(空間換時間 )
有幾個情況
Tiled Backing Store 還是救不了
1. Fixed Position Element
如果
畫面捲動時 ,tile不刷新 ,等到停止捲動再刷新 tile
(是的 ,又是偷吃步 )
2. Sub-frame/iframe
不過 , 我修好了
Frameset Flattening
3. Overflow Div
所以最近有空 , 我在做
Accelerated Compositing
所以
把 Div 展開 , 獨立放在一層
(空間換時間 )
應該可以 定搞 吧
關於捲動 , 偉大的 iPhone還讓我們知道 (US patent US7469381)
如果手指停了就立刻不捲動
使用者還是會 說 慢
好吧 , 慣性捲動也要記得做
所以針對畫面捲動
QA 要測什麼 ??
top related