Application Performance Recommendations

by Chad Wagner, This email address is being protected from spambots. You need JavaScript enabled to view it.


All applications being deployed to CloudTV should be reviewed to identify any existing bottlenecks to performance on the CloudTV Platform. In general, an approach is taken in reviewing applications that aims to identify high value optimizations first, focusing on (in order)

  1. Reducing the scope of paint operations to the regions affected (no bleed over)
  2. Reducing the number of paints
  3. API considerations related to HTTP cache friendliness of request/response

Paint Operation Scope

The reasons for #1 tend to fall into a typical set of solutions

  • set "overflow:hidden" on containers that hold elements that change or animate
  • avoid triggering layouts when unnecessary (for example putting a border on something when focused, set the "box-sizing:border-box" to avoid a re-layout/paint).
  • capture a timeline during an operation, and review for paints and make sure they don't go beyond the elements that visually changed

Reducing number of paints

The reasons for #2 tend to fall into a typical set of solutions as well

  • animate using linear transformations (i.e. transform/webkit-transform and translate3d, scaleX, scaleY, rotate)-
  • animate in a deterministic manner via CSS transitions and not via requestAnimationFrame or setTimeout as those operations lead to greedy animations that are unaware of any encoding cost post-paint (i.e. the MPEG encoding budget available must be spread over the whole animation, not just the 1st couple frames).

MPEG Encoded Animations:

  • By specifying the start/end of an animation, the animation sequence can be throttled for peak performance over the time of the animation
  • Animating frame-by-frame (i.e. canvas, setTimeout, requestAnimationFrame) will trigger a paint at each frame of the 30fps MPEG, and result in using up the bandwidth allotment in just the first 3 or 4 frames of the animation.
    • Jerky performance will result and animations will not visually complete until the bandwidth is recovered enough to send a new frame, which can delay the completion of animations at least 1 second beyond actual completion.

API Cache Friendliness

The desired architecture for APIs is designed to promote reusability of HTTP objects across a footprint.

  1. Decouple metadata and user data - API calls for metadata (guide, VOD, cast and crew, etc) generally contain the same data for a large footprint of users, and can be served from cache 99% of the time if they are not filled with any user/subscriber specific information.
    • For example, VOD can be broken into 2 API calls
      1. VOD Tree (shared by all users within a headend, so /vod?headend=someHeadend)
      2. My Rentals (personalized for a user) - this API call should be asynchronous and not block UI from displaying the VOD Tree as soon as it is returned
  • Friday, 24 October 2014

Your destination to find out more about just how easy it is to develop advanced applications that leverage the “write-once, deploy-everywhere” content creation environment of ActiveVideo’s CloudTV™ platform. You will be able to significantly reduce app time-to-market for connected devices of all types, as well as cable settop boxes that have no additional connectivity. Manufacturers and virtual service providers, as well as cable and IPTV operators around the world are currently benefiting from the advantages of ActiveVideo’s CloudTV platform.

© 2019 Active Video Networks. All Rights Reserved