jquery - Difference in performance and memory footprint between referencing a Javascript using src or directly injecting it in t

admin管理员组

文章数量:1394174

What are the differences in performance and memory footprint , if any, in these different approaches:

1. Using Src

<script type='text/javascript" src="1MBOfjavascript.js"></script> 

2. Directly injecting in the Head

$('head').append("<script type='text/javascript'>1MBOfJavascriptCode</script>");

I'm interested because we are developing a Cordova App where we use the second method to Inject to the DOM a previously downloaded Javascript bundle read from the HTML Local Storage.

Given that the script will probably grow in size, I'd like to know if with the second method I could incur in some memory issues or other DOM problem.

What are the differences in performance and memory footprint , if any, in these different approaches:

1. Using Src

<script type='text/javascript" src="1MBOfjavascript.js"></script> 

2. Directly injecting in the Head

$('head').append("<script type='text/javascript'>1MBOfJavascriptCode</script>");

I'm interested because we are developing a Cordova App where we use the second method to Inject to the DOM a previously downloaded Javascript bundle read from the HTML Local Storage.

Given that the script will probably grow in size, I'd like to know if with the second method I could incur in some memory issues or other DOM problem.

• javascript
• jquery
• performance
• dom
• memory

Share Improve this question Follow edited Apr 27, 2015 at 15:46 systempuntoout asked Apr 27, 2015 at 10:27 systempuntooutsystempuntoout 74.2k4747 gold badges175175 silver badges246246 bronze badges 2

• 3 If you already have your js script on the Local Storage, why don't you just execute it? Have a look here stackoverflow./questions/18313770/… – Matteo Commented Apr 29, 2015 at 7:17
• 1 just use eval(localStorage.storedCode) directly instead of secretly calling eval() behind dozens of other steps via jQuery's .html() feature. (yes, it uses eval too) – dandavis Commented May 8, 2015 at 16:52

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

I believe the overhead in such cases should be insignificant as the main processing/memory consumption is based on how the actual script works. Ie the memory used by file would be the total size of the script which is what 1MB at max? However during execution the same script can use up 100MB easily.

Anyways , ing to the point.

Plain text inclusion would be better if it has to be included in all cases as it skips a script execution and also does not cause re-rendering by browser after the append. Append option should be used in cases where you only need the script under specific conditions on client side and do not load it un-necessarily.

The browser goes through all elements before to render the page so I would imagine it is exactly the same, if anything if you had scripts after the page is downloaded chances are that you will get errors of the type "call to undefined functions" if you call onto a function that you have added after the load. My advise would be add them at load using src but keep things tidy.

Javascript impact a lot depending upon how and where you are loading your file, there are many ways to load a file or code.

First method you mentioned is an conventional way to load javascipt file that is load file using src and usually its loaded before closing </head> tag but now a days it is in trend to load file befor your </body> tag. it speeds up application load and prepare DOM faster.

second method is not obviously a good way to load javascript at first as there can be some code that should be working only after your DOM is ready and as here you are loading your javscript with javascript/jquery append which depends upon your jquery file loading which will delay your code execution. and there might be possible that some of your code will not have desired output (depending upon how you have called functions and how much they are dependent upon DOM ready )

I would prefer to load a javascript file with first method and at the bottom of the page/app if possible.

asyncrounous loading can also be tried.

i think because browser behavior after retrieving response from any web server will try to parse all the elements first for building the DOm, after the DOM are ready then your script would be executed, based on this it is obvious its the main reasons is which is the first will be executed first than injecting it. About the second method i think javascript engine in each browser can handle that thing easily and withouth any problem. the engine does not care about the size actually it only about how long the script will be loaded and then executed. what will be the issue is when you try injecting any elements into DOM is when you try to do it in loop there might be a memory problem.

when you say big javascript files yeah we should think about the memory. but about the method you previously said its just about which are executed first. thats my opinion

本文标签：