You’re loading a JSON data object with 1,000 names and addresses and using jQuery to create a table with this data. It takes 5–10 seconds to create the table in IE 7—and that’s not even counting the download time.
Your JSON data is in this format:
It works fine, resulting in the browser display shown in Figure:
It’s just much too slow.
Combine several optimizations:
The new code requires the HTML code in your document to be changed to the following:
On one test system in IE 7, the new code runs in 0.2 seconds compared with 7 seconds for the original code. That’s 35 times faster!
Granted, the code is not as clean and elegant as the original, but your site’s visitors will never know or care about that. What they will notice is how much faster your page loads.
Sometimes you’ll get lucky and find that one specific optimization is all it takes to fix a performance problem. Sometimes, as in this recipe, you’ll need several tricks to get the speed you want.
The biggest speed boost in this code comes from inserting a single <table>element with all its children in a single DOM operation, instead of inserting a lengthy series of <tr>elements one by one. In order to do this, you need to generate the entire table as HTML. That means you need to paste together a large number of strings to build the HTML, which can be very fast or very slow depending on how you do it. And with 1,000 items to loop though, it’s worth finding the fastest way to write the loop itself.
J Query Related Interview Questions
|HTML 4 Interview Questions||HTML Interview Questions|
|HTML 5 Interview Questions||Zend Interview Questions|
|JqueryUI Interview Questions||Dynamic HTML Interview Questions|
|XQuery Interview Questions||jQuery Mobile Interview Questions|
J Query Related Practice Tests
|HTML 4 Practice Tests||HTML Practice Tests|
|HTML 5 Practice Tests||Zend Practice Tests|
|PHP and Jquery Practice Tests||J Query Practice Tests|
|CodeIgniter Practice Tests||Dynamic HTML Practice Tests|
J Query Tutorial
Selecting Elements With Jquery
Beyond The Basics
Faster, Simpler, More Fun
Html Form Enhancements From Scratch
Html Form Enhancements With Plugins
Interface Components From Scratch
User Interfaces With Jquery Ui
Jquery Ui Theming
Jquery, Ajax, Data Formats: Html, Xml, Json, Jsonp
Using Jquery In Large Projects
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.