Does anyone know of a list of best practices for handling Performance/Memory/etc while using Activities, Widgets, UiBinder, ClickHandlers, etc.?
Such as:
- Making sure widgets/components are GC'ed
- Patterns for reusing widgets/components instead of rebuilding
- Widgets to avoid or lean toward
- Events/Handlers patterns/anti-patterns
- Using Scheduler.get().scheduleDeffered() to break executions up to achieve 60fps?
- Non-GWT-specific such as: Write to DOM all at once / avoid layouts (repaint/reflow)
- Looking for more GWT-specific Best Practices to achieve the best performance and memory usage
- Use HTMLPanel or DIV when just laying things out (similar examples?)?
- Other tips BP's for creating high performance apps w/GWT?
+ What are bad things we can do?
+ Most common mistakes that kill performance etc?
I've tried to include some reference I've come across which seemed to be helpful (GWT or Non-GWT):
Some Links I've collected:
http://www.youtube.com/watch?v=0F5zc1UAt2Y
http://www.youtube.com/watch?v=Oic22dQMRXQ&list=PLNYkxOF6rcICCU_UD67Ga0qLvMjnBBwft&feature=player_embedded
https://developers.google.com/events/io/2012/sessions/gooio2012/207/
http://addyosmani.com/blog/devtools-visually-re-engineering-css-for-faster-paint-times/
http://taligarsiel.com/Projects/howbrowserswork1.htm#The_rendering_engine
http://www.html5rocks.com/en/tutorials/speed/scrolling/
http://www.igvita.com/
http://jankfree.org/
http://paulirish.com/2011/requestanimationframe-for-smart-animating/
http://kellegous.com/j/2013/01/26/layout-performance/#bindings
Some Random Notes I've collected:
- Pointers / Issues / Best Practices
- CSS Selector (more specific - on right-most side)
- Reduce DNS Lookup
- Avoid Redirects - DO NOT REDIRECT
- Make Fewer HTTP requests
- Flushing the document early when you have import info (link to resources to start downloading)
- Use A CDN
- gzip everything
- cache headers set correctly on everything
- optimize images + use correct size
- Mobile vs Desktop version of images
- Pick correct format/quality/size
- Use Transloadit on upload to create options for all images
- We aren't an image service so this is fine
- Expires and Etags
- Stylesheets at top
- local scripts async when possible
- sync scripts block document parser
- place scripts at bottom
- Minify, concatenate files
- 60FPS (16.666ms per execution) - Buttery Smooth
- check out hardware gpu acceleration
- don't update these parts at all
- Eliminate Memory Leaks / work with GC
- Must do this at the app level - current framework does this very well
- Test on mobile devices / record on mobile devices (not emulators)
- GPU, CPU
- Network
- etc is far different
- Avoid reflow/layout (read,write,read... group 'reads' then 'writes')
- JS blocks ui thread, don't have long-running js executions
- Put js scripts at the bottom on a host file/page + combine js files (or just inline!)
- or the "async" keywork param on the link (hack-ish but good)
- download in background
- +Execute as soon as possible
- *You can't modify doc.write() in the script.
- Also have "defer"
- download in background
- not executed immediately (use only when order of execution matters; use async other times)
- default is "regular"
- ** Actually "async" and "defer" script tags suck right now
- There is a hack to insert the js files with tag "notJs" (random) and then onLoad change it back to js correct tag..
- http://youtu.be/jD_-r6y558o?t=19m30s
- * You can dynamically load js files via embedded js (it will be non-blocking)
- Execution begins immediately after download - timing not guaranteed
- Images must be exactly same natural size as display size
- Very Common Jank cause
- BEST PRACTICE: Create a Best PROCESS -> Test/Record/TrialError
- Avoid complicated styling
- Complicated Styles
- Overlaying styles
- /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --show-paint-rects
- Huge
- See how large the view-port repaint area is for small or big things (hover, insert,etc)
- *This may be built into Chrome Dev Tools now
- use Chrome Dev Tools (Frame -> Janks)
- OnScroll
- Doing things onScroll is f-ing terrible
- SetTimeout
- Don't do it
- f-ing bad
- GPU Acceleration
- http://youtu.be/jD_-r6y558o?t=41m57s
- When we have a large area (that may be scrolled) that DOESN"T CHANGE
- Not just for video
- Changing will cause poor performance
- http://blog.smartbear.com/software-quality/bid/167265/Making-the-Most-of-GPU-Acceleration-in-Your-Web-Apps
- CSS Animations offloaded to GPU (not fully complete for all browsers - in terms of pert)
- https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations
- Know Reflow vs Repaint (Layout may mean both)
- *Get CSS to user/browser fast/first (put it at the top)
- JS can block CSS
- Use async scripts
- AVOID DOC.WRITE() //I need to look into the extent of this
- Critical Path Explorer
- http://velocityconf.com/velocity2012/public/schedule/detail/23857
- Let the browser know of all resources as fast as possible (w/non-blocking and good order)
- Don't use CSS universal selector or ancestor elements (make selective -no general- selectors in css)
- Prefer Class and ID selectors over tag selectors
- AppCache
- http://www.html5rocks.com/en/tutorials/appcache/beginner/
- Actually not a great option if you have many pages
- Okay for single page web apps
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
No comments:
Post a Comment