Tip - Page load time improvement

Here is a quick tip to reduce the page load time.

As you know for each HTTP request there happens three-way handshake. So if you are fetching content from external objects and showing on  page, it will be quite helpful to turn on HTTP keepalives for external objects. Otherwise you add an extra round-trip to do another TCP three-way handshake and slow-start for every HTTP request. If you are worried about hitting global server connection limits, set the keepalive timeout to something short, like 5-10 seconds. Also look into serving your static content from a different webserver than your dynamic content. Having thousands of connections open to a stripped down static file webserver can happen in like 10 megs of RAM total, whereas your main webserver might easily eat 10 megs of RAM per connection.

Read More

Browser rendering optimization

Use efficient CSS selectors 

1. Avoid a universal key selector.

Allow elements to inherit from ancestors, or use a class to apply a style to multiple elements.

2. Make your rules as specific as possible.

Prefer class and ID selectors over tag selectors.

3. Remove redundant qualifiers.

These qualifiers are redundant:

·         ID selectors qualified by class and/or tag selectors

·         Class selectors qualified by tag selectors (when a class is only used for one tag, which is a good design practice anyway).

4. Avoid using descendant selectors, especially those that specify redundant ancestors.

For example, the rule body ul li a {...} specifies a redundant body selector, since all elements are descendants of the body tag.

5. Use class selectors instead of descendant selectors.

For example, if you need two different styles for an ordered list item and an ordered list item, instead of using two rules:

ul li {color: blue;}
ol li {color: red;}

You could encode the styles into two class names and use those in your rules; e.g:

.unordered-list-item {color: blue;}
.ordered-list-item {color: red;}

If you must use descendant selectors, prefer child selectors, which at least only require evaluation of one additional node, not all the intermediate nodes up to an ancestor.

6. Avoid the :hover pseudo-selector for non-link elements for IE clients.

If you use :hover on non-anchor elements, test the page in IE7 and IE8 to be sure your page is usable.   If you find that :hover is causing performance issues, consider conditionally using a JavaScript onmouseover event handler for IE clients.

In my next post I will explain the more techniques .. So stay tune....

Read More

DHTMLX - Ajax-enabled JavaScript grid control

dhtmlxGrid is an Ajax-enabled JavaScript grid control with cutting-edge functionality, powerful data binding, and excellent performance with large datasets. The component is easy-to-use and provides great flexibility due to its rich client-side API. dhtmlxGrid supports different datasources (XML, JSON, CSV, JavaScript array, and HTML table), and can be also loaded from custom XML format if needed.

More info

Read More