{{appName}}

Areas

  • Data
    • Retrieval
    • Caching
  • Component instantiation
  • Conditional rendering
  • Data binding
  • Lists (aura:iteration)
  • Events
  • Third-party JavaScript libraries
  • Base Lightning Components
  • Image optimization
  • Rendering and reflow
  • Development settings vs production settings
  • Performance profiling tools

Data Retrieval

  • Consider passing data between components (using attributes, events, or methods) rather than retrieving the same data in different components.
    The Lightning Data Service allows to efficiently share data between components.
  • Only SELECT the columns you need.
    Set a LIMIT on the query and provide a paging mechanism if needed.
  • Lazy load occasionally accessed data
  • Client-side filtering and sorting:
    Don’t make a call to the server to filter or sort data you already have at the client-side.
  • Consider combining several requests (actions) in a single composite request
  • Cache data when possible - Data caching.

Data Caching

  • If the components make their own isolated calls to the server to retrieve the data they need, we will end up with lots of redundant server calls, which can dramatically impact performance.
  • Client-side data caching can solve that problem by sharing data among components
  • Data Caching reduces server round-trips
    • Storable Actions 
                          
                      // API version of 44.0 or higher, you must annotate the Apex method with @AuraEnabled(cacheable=true)
                      // Note: the annotated method must only get data. It can’t mutate (create/update) data.
                      var action = component.get("c.getItems");
                      // A storable action is a server action whose response is stored in the client cache
                      // so that subsequent requests for the same server method
                      // with the same set of arguments can be accessed from that cache.
                      action.setStorable();
                      action.setCallback(this, function(response) {
                      	// handle response
                      };
                      $A.enqueueAction(action);

Storable Actions

  • The response is not available in the cache (or has expired)

Storable Actions - contd.

  • The response is available in the cache and doesn’t need to be refreshed

Storable Actions - contd.

  • The response is available in the cache and needs to be refreshed

References