1. Web2014/8/30HTML5 in IWATEToru Yoshikawa (@yoshikawa_t)

2. Who? / Toru Yoshikawa@yoshikawa_thtml5j html5j ()Google Developer Experts (Chrome)HTML5 Experts.jp Web ()jQueryMobile ()SublimeText 2 Japan Users Group ()Blog: http://d.hatena.ne.jp/pikotea/ 3. PR: HTML HTML51 HTML HTML519/17LPIHTML5 1: http://www.amazon.co.jp/dp/4798135836/ 4. 5. 2014PC8Gatner2017PCGatner20147Intelligent Positioning 6. http://www.intelligentpositioning.com/blog/2014/01/mobile-and-tablet-traffic-set-to-overtake-desktop-by-mid-2014/ 7. HTML5FacebookHTML5http://www.publickey1.jp/blog/12/html5html5.htmlhttp://jp.techcrunch.com/2014/07/24/jp20140724cyberagent/HTML5 8. WebHTML5 9. mobile vision - How Can HTML Compete with Native? 10. APIAndoridUS61% APIPower Management APIWifi API 21% WebAPI 11. ToolsEducationHTML5 12. PerformancePC1/5 13. Google I/O 2014Mobile Web performance auditingTips!HTML5 Expert.jphttp://html5experts.jp/furoshiki/8582/ 14. 2Page Load Runtime 60fps 15. Page Load 16. Page Load 17. Web63%JPEG: jpegtranjpegoptimPNG: OptiPNGPNGOUTMacImageAlphaImageOptimJSCSSminify 18. HTTP1200ms1000msJSCSSCSS SpriteJSCSSdata URL 19. DNS!DNS LookupSNS 20. URLUA 21. WebPageTesthttp://www.webpagetest.org/ 22. WebPageTest 23. Page LoadPage LoadWebPageTestSpeed IndexSpeed Index 24. WebPageTestWhite screen Visually complete 25. Lazy LoadJPEGPNG 26. Optimizing the Critical Rendering Pathhttps://developers.google.com/web/fundamentals/performance/critical-rendering-path/ 27. Runtime60Hz > 60fps > 16ms 28. Chrome DevToolsTimelineChrome DevToolsCmd+Opt+iCtrl+Alt+iTimelineFrames mode 29. RuntimerequestAnimationFrameDOMJavaScript 30. border-radiusbox-shadowtext-shadow*-gradient 31. Hight Performance Animationhttp://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ 32. Frames on Chrome DevTools 33. requestAnimationFramesetIntervalsetTimeout16msPolyfillrequestAnimationFrame 34. DOMDOMDOMgetComputedStyle()offset*client*scroll* 35. DOMsetInterval(function(){div.style.left = (div.offsetLeft + 1) + 'px';}, 1000/60);var cache = div.offsetLeft;setInterval(function(){cache++;div.style.left = cache + 'px';}, 1000/60); 36. DOMChrom DevTools > Timeline > 37. GCGC200msStop the worldGC110ms 38. Writing Fast, Memory-Efficient JavaScripthttp://www.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/ 39. JavaScript Memory Management Masterclasshttps://speakerdeck.com/addyosmani/javascript-memory-management-masterclass 40. 41. PageSpeed Insighthttp://developers.google.com/speed/pagespeed/insights/ 42. Extra: Service WorkerWebAppCacheWebJavaScripthttp://html5experts.jp/myakura/8365/ 43. Appendix: Web ComponentsUIhttp://html5experts.jp/1000ch/8906/ 44. HTML5 45. Thank you!!(@yoshikawa_t) 46. ResourcesHTML5 Experts.jp Google I/O 2014 http://html5experts.jp/series/google-io-2014-2/http://www.visionmobile.com/blog/2013/12/html5-performance-is-fine-what-we-are-missing-is-tools/https://www.google.com/events/io/schedule/session/c8300366-03ed-e311-903f-00155d5066d7