AJAX Tips « Paul Sweatte

AJAX Tips

Use AJAX for usability improvements such as autosave, sorting, filtering, and pagination
Don’t use window.onresize for dynamic layout
Don’t use IE expressions or ActiveX filters
Don’t freeze the browser with event without telling the user what you’re doing and why you’re doing it
Create a text node for a link and check the color to see if it is a visited link
Cache previously drawn HTML when appropriate, but you have to know when to invalidate the cache
Don’t keep hidden UI up-to-date behind the scenes, just re-draw next time you show it (simpler, one-time cost)
Don’t automatically take the user anywhere, and always include a submit button in case JavaScript is disabled
Don’t activate autosuggest unless the user has typed at least seven characters
Don’t use AJAX to access static content; stick to JavaScript animation of hidden divs if you must do something
Don’t use AJAX for form submission; stick to onChange validation of the current field
Don’t use AJAX for viewing comments; stick to a standard comment listing and submission form, then progressively enhance it with pagination and inline insertion of new comments
Don’t use AJAX without an iframe or self-submission fallback for old school functionality such as table sorting, news filtering, populating dependent dropdown search forms, and dynamically updating survey results
Don’t introduce extra clicks, input steps, or loading screens that would not be necessary without AJAX
Don’t use AJAX for logins, rollovers, or viewing static comments

Every AJAX call requires a server request and response, which carries overhead for the HTTP Header, TCP Header, IP Header, etc. This doesn’t include the data that is being sent back. So unless, you are sending a lot more than 2K of data back, just stick it on the page.

Every time there is an AJAX response, the browser needs to parse that content into the DOM.

Put JSON objects into local variable to cache data structures

The difference between synchronous code and asynchronous code is the predictibility of the server response. A synchronous request blocks until a response is received. If the response times out, you get a clear error message. As long as you don’t introduce multi-threading yourself, your code is completely predictible.

In contrast, asynchronous code continues working without knowing when the reponse will be received. If your code depends on the response, you need to build in a system that checks the status of the response before it starts executing.

Redraw is when the DOM changes a property in real time, like the background color or visibility. Redraw demands a lot of processing, since it forces JavaScript to traverse the tree for matching elements.

Reflow is when a node is moved from its position in the flow, which forces the DOM to recalculate the position of all children, ancestors and subsequent elements in the tree to calculate their new location, then redraw the new layout

Instead of setting a transition animation to move one pixel at a time(10ms) such as an accordion widget, try a faster animation which moves five pixels (50ms) like hide/show to avoid slowdown on busy pages

Fixed or absolutely positioned elements don’t affect the document or other elements layout, so they will only cause a repaint instead of a total reflow.

The following events cause reflow:
Pseudo classes such as :hover (IE DOM reflows siblings of :pseudo elements as well)
Manipulating the class or style attribute
Adding or removing a DOM node
Applying an inline style
Reading or updating a computed CSS value (via getComputedStyle() in DOM-compliant browsers or currentStyle in IE) such as offsetWidth or offsetHeight, while DOM changes are waiting to be made
Resizing the window
Changing fonts
Adding or removing a stylesheet
Editing form fields

function loadXMLDoc(dname)
{
try //Internet Explorer
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  }
catch(e)
  {
  try //Firefox, Mozilla, Opera, etc.
    {

xmlDoc=document.implementation.createDocument("","",null);
    }
  catch(e) {alert(e.message)}
  }
try
  {
  xmlDoc.async=false;
  xmlDoc.load(dname);
  return(xmlDoc);
  }
catch(e) {alert(e.message)}
return(null);
}

innerHTML is not implemented on TBODY elements with Internet Explorer, so if the container element is a table you may encounter problems. innerHTML also has problems rendering SELECT elements in Internet Explorer. When you set the innerHTML property of the Select object, the changes do not take effect. If you must use innerHTML, a workaround is to use a Div object to wrap the SELECT element and then set the innerHTML property for the Div object.

Internet Explorer has a nonstandard feature called XML data islands, which allow you to embed XML inside an HTML document using the nonstandard HTML tag . Mozilla does not support XML data islands and handles them as unknown HTML tags. You can achieve the same functionality using XHTML; however, because Internet Explorer’s support for XHTML is weak, this is usually not an option.

One cross-browser solution is to use DOM parsers, which parse a string that contains a serialized XML document and generates the document for the parsed XML. Mozilla uses the DOMParser class, which takes the serialized string and creates an XML document out of it. In Internet Explorer, you can achieve the same functionality using ActiveX. A new Microsoft.XMLDOM generates and has a loadXML method that can take in a string and generate a document from it. The following code shows you how:

<xml id="xmldataisland">
   <foo>bar</foo>
</xml>

//Cross-browser solution
var xmlString = "<xml id=\"xmldataisland\"><foo>bar</foo></xml>";
var myDocument; 

if (document.implementation.createDocument)
  {
  // Mozilla, create a new DOMParser
  var parser = new DOMParser();
  myDocument = parser.parseFromString(xmlString, "text/xml");
  }
else if (window.ActiveXObject)
  {
  // Internet Explorer, create a new XML document using ActiveX and use loadXML as a DOM parser.
  myDocument = new ActiveXObject("Microsoft.XMLDOM")
  myDocument.async="false";
  myDocument.loadXML(xmlString);
  }

Mozilla supports XSL Transformations (XSLT) 1.0. It also allows JavaScript to perform XSLT transformations and allows running XPATH on a document.

Mozilla requires that you send the XML and XSLT file holding the stylesheet with an XML mimetype (text/xml or application/xml). This is the most common reason why XSLT won’t run in Mozilla but will in Internet Explorer. Mozilla is strict in that way.

Internet Explorer 5.0 and 5.5 supported XSLT’s working draft, which is substantially different than the final 1.0 recommendation. The easiest way to distinguish what version an XSLT file was written against is to look at the namespace. The namespace for the 1.0 recommendation is http://www.w3.org/1999/XSL/Transform, while the working draft’s namespace is http://www.w3.org/TR/WD-xsl. Internet Explorer 6 supports the working draft for backwards compatibility, but Mozilla does not support the working draft, only the final recommendation.

If XSLT requires you to distinguish the browser, you can query the “xsl:vendor” system property. Mozilla’s XSLT engine will report itself as “Transformiix” and Internet Explorer will return “Microsoft.”

<xsl:if test="system-property('xsl:vendor') = 'Transformiix'">
<!-- Mozilla specific markup -->
</xsl:if>
<xsl:if test="system-property('xsl:vendor') = 'Microsoft'">
<!-- Internet Explorer specific markup -->
</xsl:if>

Mozilla also provides JavaScript interfaces for XSLT, allowing a Web site to complete XSLT transformations in memory. You can do this using the global XSLTProcessor JavaScript object. XSLTProcessor requires you to load the XML and XSLT files, because it needs their DOM documents. The XSLT document, imported by the XSLTProcessor, allows you to manipulate XSLT parameters. XSLTProcessor can generate a standalone document using transformToDocument(), or it can create a document fragment using transformToFragment(), which you can easily append into another DOM document. Below is an example:

var xslStylesheet;
var xsltProcessor = new XSLTProcessor(); 

// load the xslt file, example1.xsl
var myXMLHTTPRequest = new XMLHttpRequest();
myXMLHTTPRequest.open("GET", "example1.xsl", false);
myXMLHTTPRequest.send(null); 

// get the XML document and import it
xslStylesheet = myXMLHTTPRequest.responseXML;
xsltProcessor.importStylesheet(xslStylesheet); 

// load the xml file, example1.xml
myXMLHTTPRequest = new XMLHttpRequest();
myXMLHTTPRequest.open("GET", "example1.xml", false);
myXMLHTTPRequest.send(null); 

var xmlSource = myXMLHTTPRequest.responseXML;
var resultDocument = xsltProcessor.transformToDocument(xmlSource);

After creating an XSLTProcessor, you load the XSLT file using XMLHttpRequest. The XMLHttpRequest’s responseXML member contains the XML document of the XSLT file, which is passed to importStylesheet. You then use the XMLHttpRequest again to load the source XML document that must be transformed; that document is then passed to the transformToDocument method of XSLTProcessor.

To always know how far into the page a user has read, create event handlers that trigger an Ajax request if the user comes within an adjustable distance from the bottom of the screen. Use the setTimeout function to check the current scrollTop value in short intervals, and set the onmousedown and onmouseup event handlers to prevent any screen jerking.

Save the current window position to a temporary cookie to resume the user’s place if they return to the page using the Back button. Define an empty, hidden DIV element which is automatically moved to the user’s previous location at page load. This acts as an invisible cursor which triggers all content loading as it scrolls down the page. After a brief delay, the page state will be restored without breaking the Back button.

Set up a server-side function to respond to Ajax calls for more pages of content. It will need to accept the required page as a parameter, and it should pass the corresponding rendered HTML snippet back to the client, at which point you will append it to the bottom of the content already rendered. You need to make sure your server-side function returns a signal to the client if no records are found. Store state values in hidden INPUT elements including the browser history location hash, the total number of pages and the current page ID.

Xmlhttp.open resets connections automatically with each call so you can reuse the handler without creating a new object for different requests

var  xmlhttp = new XMLHttpRequest();

xmlhttp.open('GET', 'data.csv',  true);
xmlhttp.onreadystatechange = parse_csv;
xmlhttp.send();
…….
xmlhttp.open('GET', 'data.txt',  true);
xmlhttp.onreadystatechange = parse_txt;
xmlhttp.send();

AJAX Profiling Tools

YSlow
IE Leak Detector
AJAX View
JsLex
YUI Profiler
YUI Connection Manager
YUI Compressor
Web Development Helper
Visual Round Trip Analyzer
BrowserScope
Firebug Paint Events Plugin
MozAfterPaint
Reflow Timer
Browser Paint Events Bookmarklet

AJAX Performance Tools

YUI Image Loader
YUI Get
YUI Loader
YUI Browser History Manager
JavaScript Profiler
Tools for Faster Web Pages
AJAX Libraries API
Web Optimizator
Doloto
CSS-JS Booster

AJAX Performance Techniques
How to use multiple XMLHTTPRequest calls
Life’s Too Short Write Fast Code Part Two
Page Speed Principles
Even Faster Web Sites
Even Faster Web Sites
Drop-in JavaScript Performance
Delayed Script Execution in Opera

November 2009
S	M	T	W	T	F	S
« Oct
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Blog at WordPress.com. | Theme: Pool by Borja Fernandez.
Entries and comments feeds.

Paul Sweatte

AJAX Tips

AJAX Profiling Tools

AJAX Performance Tools

AJAX Performance Techniques
How to use multiple XMLHTTPRequest calls
Life’s Too Short Write Fast Code Part Two
Page Speed Principles
Even Faster Web Sites
Even Faster Web Sites
Drop-in JavaScript Performance
Delayed Script Execution in Opera

Image Compression Tools

Demos

References

Archives

Pages

DirectText

Tags

Web Design Tips

Top Clicks

Top Posts

Recent Posts

Paul Sweatte

AJAX Tips

AJAX Profiling Tools

AJAX Performance Tools

AJAX Performance Techniques How to use multiple XMLHTTPRequest calls Life’s Too Short Write Fast Code Part Two Page Speed Principles Even Faster Web Sites Even Faster Web Sites Drop-in JavaScript Performance Delayed Script Execution in Opera

Image Compression Tools

Demos

References

Archives

Pages

DirectText

Tags

Web Design Tips

Top Clicks

Top Posts

Recent Posts

Categories

AJAX Performance Techniques
How to use multiple XMLHTTPRequest calls
Life’s Too Short Write Fast Code Part Two
Page Speed Principles
Even Faster Web Sites
Even Faster Web Sites
Drop-in JavaScript Performance
Delayed Script Execution in Opera