Changes between Version 1 and Version 2 of QtWebKitGraphics


Ignore:
Timestamp:
Jan 21, 2010 6:48:41 PM (10 years ago)
Author:
noam.rosenthal@nokia.com
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • QtWebKitGraphics

    v1 v2  
    33This page holds tips for web developers on how to optimize their web-code for QtWebkit's rendering pipeline.
    44The philosophy behind those performance tips is that web technologies in general are meant for dynamic '''content''' and not for dynamic '''UI'''. Therefore, most of the HTML and CSS features are optimized for exactly that. When something is slow, ask yourself: am I trying to solve a dynamic-UI problem with a tool meant for dynamic-content?
    5 The good news is that CSS has enough capabilities for dynamic UI, even if they're not as smooth to use.
     5The good news is that CSS has enough capabilities for dynamic UI, even if they're not as smooth to use as solutions originally optimized for GUI.
    66
    77== General graphics performance guidelines ==
     
    1111
    1212=== The CSS box model ===
    13 The CSS box model is a concept from the world of content and not from the world of GUI. Everything from the CSS box model world (margin, padding, background, outline, border) should not be modified, for example, inside an animation, or in a performance-heavy task. If you need a dynamic image to be behind a static image, for example, a common pitfall is to have one image and change its background's URL or position using CSS. There are about 3 ways that are faster than that:
     13The CSS box model is a concept from the world of content and not from the world of GUI. All the concepts from the CSS box model (margin, padding, background, outline, border) should not be modified, for example, inside an animation, or in a performance-heavy task. If you need a dynamic image to be behind a static image, for example, a common pitfall is to have one image and change its background's URL or position using CSS. There are about 3 ways that are faster than that:
    1414    * two different images
    1515    * :after {content} or :before {content}
     
    1818So, CSS box model to decorate dynamic content - transforms and regular images for dynamic UI.
    1919
    20 === The $ is going to cost you ===
    21 This is the most important performance tip. Sometimes it's tempting to create high-level object-oriented nicely-designed Javascript libraries on top of the core Webkit that make the application code look nicer (like Dojo or jQuery, hence the $). This is fun and productive, but also dangerous. That's because when you get to a performance problem, now you have layers on layers of code to go through until you find the where it comes from, and if you fix it you might have layers and layers of regressions. Abstractions like that are good when you '''know the scope of your problem''' - which might be the case for browser-compatible websites - but for (embedded) web-based UIs this is usually not the case.
     20=== Value of the $ ===
     21Be 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.
    2222
    23 If you think about what those libraries really give you, it's browser compatibility, rapid DOM element selection, and effects. Browser compatibility was discussed before. rapid DOM selection can be done with document.querySelector or document.querySelectorAll, which are much faster than the browser-compatible functions. effects, if can't be expressed with CSS animations, would probably end up being slow anyway.
     23If you think about what those libraries really give you, it's browser compatibility, rapid DOM element selection, and effects. If browser compatibility is what you need - those libraries are great and are definitely worth it but you might have to incur the performance compromise. rapid DOM selection can be done with document.querySelector or document.querySelectorAll, which are much faster than the browser-compatible functions. effects, if can't be expressed with CSS animations, would probably end up being slow anyway.
     24
    2425
    2526== Accelerated compositing ==
    26 Accelerated compositing is (at the time of writing this) a new feature in webkit trunk, and therefore is not fully stable yet. Accelerated compositing is disabled by default. To enable it, you need to use a QGraphicsWebView, and set a QWebSettings flag:
     27Accelerated 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:
    2728
    2829{{{
     
    3233
    3334Accelerated 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.
    34 Note 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: (note that this is just a conceptual approach and not reusable code):
     35Note 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:
    3536
    3637{{{
     
    4142</div>
    4243<script>
    43   function scrollMe()
     44  function scrollMe(dy)
    4445  {
    45     content.webkitTransform = "translate(0, 10px";
     46    content.webkitTransform = "translate(0, " + dy + "px)";
    4647  }
    4748</script>