瀏覽器 品產從非觸 螢幕到多點觸 螢幕碰 碰

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 要測什麼 ??