Performance/Addons/BestPractices: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
Line 7: Line 7:
==Use JavaScript Modules==
==Use JavaScript Modules==


'''Instead of the <script> tag in overlays'''
'''Instead of the <script> tag in overlays''':
JavaScript that is loaded via the script tag can slow window load. If your script is not needed as part of window setup, and doesn't need to be loaded for each individual window, then load it on-demand as a module.
JavaScript that is loaded via the script tag can slow window load. If your script is not needed as part of window setup, and doesn't need to be loaded for each individual window, then load it on-demand as a module.


'''Instead of JS XPCOM services'''
'''Instead of JS XPCOM services''':
JavaScript code modules are singletons, are fastloaded, and don't require XPCOM like a full-blown JS XPCOM service does.
JavaScript code modules are singletons, are fastloaded, and don't require XPCOM like a full-blown JS XPCOM service does.


'''Avoid mozIJSSubScriptLoader'''
'''Avoid mozIJSSubScriptLoader''':
Scripts imported this way do not use fastload and are loaded and evaluated from the original source every time loadSubScript is called. Convert any uses to proper modules if possible.
Scripts imported this way do not use fastload and are loaded and evaluated from the original source every time loadSubScript is called. Convert any uses to proper modules if possible.



Revision as of 17:28, 19 March 2010

Draft-template-image.png THIS PAGE IS A WORKING DRAFT Pencil-emoji U270F-gray.png
The page may be difficult to navigate, and some information on its subject might be incomplete and/or evolving rapidly.
If you have any questions or ideas, please add them as a new topic on the discussion page.

A list of recommendations for add-on authors to help keep Firefox fast and responsive.

Once it matures, we'll move it over to MDC. Please contribute your tips!

Use JavaScript Modules

Instead of the <script> tag in overlays: JavaScript that is loaded via the script tag can slow window load. If your script is not needed as part of window setup, and doesn't need to be loaded for each individual window, then load it on-demand as a module.

Instead of JS XPCOM services: JavaScript code modules are singletons, are fastloaded, and don't require XPCOM like a full-blown JS XPCOM service does.

Avoid mozIJSSubScriptLoader: Scripts imported this way do not use fastload and are loaded and evaluated from the original source every time loadSubScript is called. Convert any uses to proper modules if possible.

For more on how javascript modules work, check the MDC page.

Memoization

Create XPCOM services lazily, and cache frequently accessed ones, using memoizing getters, either by replacing the getter with a property:

o = {
  get _observerSvc() {
    delete this._observerSvc;
    let svc = Cc["@mozilla.org/observer-service;1"].
              getService(Ci.nsIObserverService);
    return this._observerSvc = svc;
  }
};

Or, for properties whose memoizing getter is in a prototype, by shadowing the prototype getter with an instance getter:

function O() {}
O.prototype = {
  get _observerSvc() {
    let svc = Cc["@mozilla.org/observer-service;1"].
              getService(Ci.nsIObserverService);
    this.__defineGetter__("_observerSvc", function() svc);
    return this._observerSvc;
  }
}

(Examples cribbed from the DTrace page.)

Lazily Load Services

The XPCOMUtils JavaScript module provides two methods for lazily loading things:

  • defineLazyGetter() defines a function on a specified object that acts as a getter which will be created the first time it's used. See examples.
  • defineLazyServiceGetter() defines a function on a specified object which acts as a getter for a service. The service isn't obtained until the first time it's used. See examples.

Reduce File I/O

TODO: Give examples below, link to code, bugs, docs.

  • Use JARs!
  • Combine CSS
  • Combine pref files
  • Combine interfaces into a single .idl to reduce xpt files
  • Combine toolbar icons in a single file.

Asynchronous I/O

  • Never use synchronous XMLHttpRequests. Use asynchronous requests instead and show a throbber image or message in case you need the user to wait.

Asynchronous SQL Queries

Mozilla's SQLite module is called mozStorage, and it has an API for executing your SQL queries on a separate thread. View documentation and examples.

Generators

Leaks