What's the most efficient way to inject dynamically loaded JavaScript and CSS into a page?

I have a site where I need to load JavaScript and CSS files dynamically via AJAX. It works fine for me, my problem is loading this content into the DOM, in particular the speed.

There are no performance issues in desktop browsers. But in mobile browsers (site aimed at phones / tablets) there is a good second or two lag between the script / processes being loaded and finished.

Initially I was creating a new script / style element by adding the resulting data and adding the element to the DOM ("head" node). Then I tried to use "document.write" to write a script / style tag with the content on the page (this is how Bing / Google does it on their mobile site). Both of these methods are too slow.

Perhaps it has something to do with the size of the scripts that need to be processed (70KB JavaScript, 65KB CSS)? Or is it related to how I am embedding into the page?

I have not seen any tutorials or blog posts mentioning the speed issue, but I have not seen one specifically targeting mobile.

+3


source to share


1 answer


I think the size of the problem is here. You are trying to compress: http://closure-compiler.appspot.com/home



Does this lag once or several times?

0


source







All Articles