Scrolling 新鮮事

前端魔法師七月小聚 @ 達暉資訊

Transcript

1. 曾坤福
 @afutseng Scrolling 新鮮事 前端魔法師∘2016.07.06
2. 關於我 ! 曾坤福 (Afu) @afutseng Front-end Engineer at PIXNET Web developer since 2006 ZCE (PHP 5.3) since Jan 2012 ZCPE (PHP 5.5) since Dec 2014
3. Improving scroll performance with passive event listeners https://www.youtube.com/watch?v=65VMej8n23A 
4. 問題 • 瀏覽器必須等待滾動/觸控的 handler 執⾏完畢才知道是否呼叫 preventDefault()，可能使捲動不流暢 (jank) • wheel, touchstart, touchend, touchmove • empty touch event handler 也會影響 • Google 統計 Android 超過 80% 的 touch handlers 並不會取消 預設⾏為 • 也就是說通常瀏覽器都⽩等了 • 10% delay > 100ms • 1% > 500ms 
5. 解決⽅案 - {passive: true} • 表⽰該 handler 不會取消預設⾏為 (例如滾動) • 瀏覽器不⽤等待它執⾏完成才進⾏滾動 • 執⾏ preventDefault() 無效，瀏覽器會發出警告 • Chrome 51 & Firefox 49 開始⽀援 
6. 解決⽅案 - {passive: true} document.addEventListener(‘touchstart’, function (evt) { // Do some thing here… // But don’t block scrolling ! }, {passive: true}); 
7. 可是... 第三個參數傳 object 會讓⽼舊瀏覽器出錯耶？
8. addEventListener @ MDN /* 現代瀏覽器 */ target.addEventListener(type, listener[, options]); options /* optional */ • capture = false 預設為事件冒泡 (Bubbling) • passive = false 承諾 listener 永不呼叫 preventDefault  • once = false ⼀次性的 listener，觸發後⾃動移除 .PEFSO
9. addEventListener @ MDN /* Firefox 6、IE 9、Opera 11 */ target.addEventListener(type, listener[,useCapture]); • useCapture = false 預設為事件冒泡 (Bubbling) • optional ，可不傳 
10. addEventListener @ MDN /* IE 8 以下⽼舊瀏覽器 */ target.addEventListener(type, listener, useCapture); • 必須傳第三個參數，通常是 false，表⽰作為冒泡階段的 handler 
11. 若是現代瀏覽器，傳⼊ {passive: true} ⽼舊瀏覽器則給 false
12. 回顧跨瀏覽器處理原則
 Feature Detection • (X) 根據瀏覽器/版本決定作法 • if (navigator.userAgentuser.match(/MSIE/)) { …… }
 • (O) 瀏覽器⽀援某個功能，則採取特定作 法，反之做降級處理 (或是放⽣)
13. Feature Detection for {passive} var supportsPassive = false; try { var opts = Object.defineProperty({}, 'passive', { get: function() { supportsPassive = true; } }); window.addEventListener("test", null, opts); } catch (e) { }  IUUQTHJUIVCDPN8*$(&WFOU-JTUFOFS0QUJPOTCMPCHIQBHFTFYQMBJOFSNE
14. Feature Detection for {passive} ! elem.addEventListener('touchstart', 
 myHandler, 
 supportsPassive ? { passive: true } : false );  IUUQTHJUIVCDPN8*$(&WFOU-JTUFOFS0QUJPOTCMPCHIQBHFTFYQMBJOFSNE
15. ⼩結 • 加上 {passive: true} 讓你的網⾴觸控體驗 更流暢 • 若成效不彰，使⽤ Chrome 的 Timeline 錄 製觸控/捲動事件找出效能瓶頸！ !
16. Scroll Anchoring 捲動錨定
 調整捲動位置，以免畫⾯外內容變更時造成檢視焦點位移
17. Scroll Anchoring OFF 
18. 啟⽤ Scroll Anchoring 實驗功能 1. 於 Chrome 網址列輸⼊ about:flags 2. 啟⽤捲軸錨定 ! 3. 重新啟動 Chrome 
19. Scroll Anchoring ON 
20.  WJFXQPSU BODIPS
    OPEF -BZPVU
    SFqPX TDSPMM
    BEKVTUNFOU
21. References 1. Improving scroll performance with passive event listeners, https://developers.google.com/web/ updates/2016/06/passive-event-listeners 2. New APIs to help developers improve scroll performance, Chromium Blog, https:// blog.chromium.org/2016/05/new-apis-to-help-developers-improve.html 3. Passive Event Listeners, BlineOn 2016, https://docs.google.com/presentation/d/ 1lYmNxxNWeLHZBp8eWCSZY2RHIchGK-O9Ws4mhlAwFi0/edit#slide=id.p 4. Passive Event Listeners (EventListenerOptions), https://github.com/WICG/EventListenerOptions 5. EventTarget.addEventListener(), MDN, https://developer.mozilla.org/en-US/docs/Web/API/ EventTarget/addEventListener 6. 3.6. Interface EventTarget, DOM Living Standard, https://dom.spec.whatwg.org#interface- eventtarget 7. DOM Listener: capture, passive, and once, https://www.webreflection.co.uk/blog/2016/04/17/ new-dom4-standards 8. passive 的事件监听器, http://www.cnblogs.com/ziyunfei/p/5545439.html 9. 5.5 List of TouchEvent types, https://w3c.github.io/touch-events/#list-of-touchevent-types 10. Scroll Anchoring, BlinkOn 2016, https://docs.google.com/presentation/d/ 1bgVPqd805L38oAG7WbVr4jUP-YwOazjEGPNPLsIesBg/edit#slide=id.p 
22. Photo Credits 1. https://www.flickr.com/photos/bracketing_life/4215944196 2. http://kaohsiung.network.com.tw/ 3. http://handmadecssdesign.com/blog/end-of-life-for-ie6/ 4. http://www.srido.org.tw/resource/20 
23. 感謝聆聽 @afutseng
24. 痞客邦 PIXNET 徵才中！ • 前端⼯程師 • PHP ⼯程師 • MIS ⼯程師 • UI 設計師 • UX Researcher 請聯絡 
 techjob@pixnet.tw