How to prevent page lagging/hanging everytime I render a part of the page using innerHTML or jquery html()

I have a webapp, and I'm using jquery to request from a server using $.ajax. Now everytime a get the response and displaying the response using jquery .html(). My browser hangs or lagging. So when I type in the textbox, my ajax will request a data from the server. Then the res开发者_运维百科ponse will render in the browser but my typing in the searchbox will hang. So basically my problem here is in the diplaying of the response.

Is there any way that I can render the response asynchronously, so that I can still type in my search box without hanging or lagging?

Please advise.

Many thanks.

You may improve the performance of the rendering of the response. There is only one thread in JavaScript. The browser can not render the response and at the same time take input. This excelent blog post from John Resig will explain this further: How JavaScript Timers Work. This session from MIX11 is a must see about browser performance: 50 Performance Tricks to Make Your HTML5 Web Sites Faster.

If you have some kind of incremental search you may add a timeout before you do any requests while the user is typing. Then the rendering may just occur after the user has finished typing.