《Chris Mountford：高性能Web前端的打造和测试.pdf》由会员分享，可在线阅读，更多相关《Chris Mountford：高性能Web前端的打造和测试.pdf（43页珍藏版）》请在三一文库上搜索。
1、Chris Mountford Atlassian atlassian atlassiandev chromosundrift Front End Performance 1 2 3 Outline Atlassian JavaScript Engineering Performance Factors JIRA Performance Tests Optimisation Perception Traps Summary 4 5 5 6 6 7 7 8 Always Hiring! 8 What is it ? Browser Performance Testing 9 Measuring
2、how fast the web application feels for a single user Browser Performance Testing 10 Browser Performance Testing Measuring how fast the web application feels for a single user 11 12 1995 2013 12 13 “Why do we split everything into so many files?” “Performance.” 14 “Why do we merge all the files into
3、large batches?” “Performance.” 15 If we have data, lets look at data. If all we have are opinions, lets go with mine. - Jim Barksdale (CEO Netscape) “ ” 16 What Causes Slow Browser Performance? 17 Mobile Web All problems are the same but worse: network: radio power mode steps, sleep cpu: battery imp
4、act memory standards compliance development tools 18 Network Time 19 Parse Time 20 CSS Rendering Selector Speed Cascading Right to Left IDs are fast Browser diferences Hardware Acceleration 1. ID, e.g. #header 2. Class, e.g. .promo 3. Type, e.g. div 4. Adjacent sibling, e.g. h2 + p 5. Child, e.g. li
5、 ul 6. Descendant, e.g. ul a 7. Universal, i.e. * 8. Attribute, e.g. type=“text“ 9. Pseudo-classes, e.g. a:hover 21 JavaScript Execution Engine Specifi cs native bind(), map() etc DOM Manipulation DOM events JQuery selectors micro-optimisation Memory leaks 22 V8 is Very Clever Hidden Classes: Use Co
6、nstructors to initialise properties in the same order Arrays: homogenous, contiguous, initialise if small Dynamic Code Generation (Java HotSpot) Garbage Collection 23 Blocking 24 Tools Chrome DevTools, WTF Firebug Lite dynaTrace 25 Refl ow 26 27 Will It Reflow? inspired by stoyanstefanov Yes! 28 JIR
7、A Browser Performance Tests 29 30 Page Objects Soke Framework Bamboo Hacking Koto Charts Psycho Events Setpoints Hosted Analytics Vigilance DB Plugin JIRA Browser Performance Tests 31 32 32 33 34 Techniques Batching Predictive Fetching Analytics shows what to fetch Caching invalidation, memory leak
8、s 35 I dont know. it just feels slow. a JIRA Product Manager “” 36 Perception is Reality 37 38 Feeling Slow? Ready for Action When does the User believe the app is waiting for her? Manual “psycho” event placement and maintenance! SetPoint tuning against a real system Optimisation Example: Execution
9、Reordering 39 Traps 1: Selenium Chromedriver click() W3C Webdriver wire protocol draft Element center? Windows and IE process control 40 Traps 2 Browser auto-upgrades Dont be too quick to take credit :) Changing what you measure Prefetch cache benefi t in JIRA 6.0 41 Key Points Many factors Measure perceived performance Use Chrome DevTools, WTF etc. Be holistic, quantitative, beware micro- optimisation trap Monitor and Maintain your performance suite 42 atlassian chromosundrift atlassiandev 43