Changes between Version 3 and Version 4 of QtWebKitGraphics


Ignore:
Timestamp:
Mar 16, 2010 9:53:06 AM (10 years ago)
Author:
noam.rosenthal@nokia.com
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • QtWebKitGraphics

    v3 v4  
    1818So, CSS box model to decorate dynamic content - transforms and regular images for dynamic UI.
    1919
     20
     21=== Use static images ===
     22Sometimes it's tempting to use webkit's drawing features, like -webkit-gradient, when it's not actually necessary - maintaining images and dealing with Photoshop and drawing tools can be a hassle. However, using CSS for those tasks moves that hassle from the designer's computer to the target's CPU. Gradients, shadows, and other decorations in CSS should be used only when necessary (e.g. when the shape is dynamic based on the content) - otherwise, static images are always faster.
     23
     24
    2025=== Value of the $ ===
    2126Be careful of high-level object-oriented nicely-designed Javascript libraries on top of the core Webkit (like Dojo or jQuery, hence the $). They make the application code look nicer, but make it hard to find the source of a performance problem, as it adds layers of complexity.
     
    2530
    2631== Accelerated compositing ==
    27 Accelerated compositing is (at the time of writing this) a new feature in webkit trunk, and therefore is not stable yet. Accelerated compositing is disabled by default. To enable it, you need to use a QGraphicsWebView, and set a QWebSettings flag:
    28 
    29 {{{
    30 #!cpp
    31 myWebSettings->setAttribute(QWebSettings::AcceleratedCompositingEnabled, true);
    32 }}}
    33 
    34 Accelerated compositing doesn't magically accelerate '''everything'''. To make use of it, the web developer has to use CSS3 animations (-webkit-transition / -webkit-animation), and only animate the ''-webkit-transform'' or ''opacity'' attributes. Animating ''left'', ''margin'', ''width'' or any other attribute (mainly the ones related to the CSS box model) will not be accelerated: because the box model would have to make expensive calculations for each frame.
     32Accelerated compositing enables hardware acceleration of CSS animations, using QGraphicsView. To make use of it, the web developer has to use CSS3 animations (-webkit-transition / -webkit-animation), and only animate the ''-webkit-transform'' or ''opacity'' attributes. Animating ''left'', ''margin'', ''width'' or any other attribute (mainly the ones related to the CSS box model) will not be accelerated: because the box model would have to make expensive calculations for each frame.
    3533Note that animating -webkit-transform and opacity should be very good for plenty of use cases - scrolling, for example, can be made very fast like this:
    3634
     
    4947}}}
    5048
     49It's also important to use the same sequence of transform operations when animating. For example, use:
    5150
    52 Again, this feature is not yet stable but the web developers should know in advance what would and wouldn't be accelerated when using it.
    53 Also, 3D is not fully supported by QtWebkit as of yet, mainly the preserves-3D and backface-visibility CSS attributes.
     51from {-webkit-transform: scale(1) translate(100) } to { -webkit-transform: scale(2) translate(0) }
     52
     53instead of
     54
     55from {-webkit-transform: translate(100) } to {-webkit-transform: scale(2) }
     56
    5457
    5558== Benchmarking CSS animations==