DOM processing and javascript placement - javascript

just a quick question concerning order of processing and the way DOM's are processed.
My understanding is that it is best practice to include all JQuery scripts just before the tag. In my situation, I have a div container that witholds most of my body elements. Among these elements are my footer, which has the company name and year. Currently my pages are setup in a modular fashion (header.php, page.php, footer.php) and I want to include my company name and year in the footer.php, as this would obviously allow for easy editing of the company name. My problem lies in wanting to maintain the format of keeping jquery scripts just before the body. With this layout, I cannot include the company name in my footer.php without including the jquery scripts within my div. I'll show you what I mean with psuedocode:
How it's currently setup:
page.php
<body>
<div class="container">
//body elements
<hr>
<p>© Company 2012</p>
</div>
<script>
//some javascript #1
</script>
<script>
//some javascript #2
</script>
footer.php:
<script> //same static javascript that doesn't change page to page </script>
</body>
How I want to set it up (allows for easy site-wide changing of company name):
page.php
<body>
<div class="container">
//body elements
<script>
//some javascript #1
</script>
<script>
//some javascript #2
</script>
footer.php:
<hr>
<p>© Company 2012</p>
</div>
<script> //same static javascript that doesn't change page to page </script>
</body>
I realize I can do it this way, but I am afraid of losing optimization since my jquery scripts will technically be executing within the container.
With all of this said, will including my jquery scripts before the closing div of the page's container, but after all the contents of the div, cause it to be less efficient than if it was after said div closing?
I realize all of this entirely depends on how a DOM is processed, but I can't seem to find any information on whether or not the DOM processes as it goes, or if it requires an ending tag before it's actually processed, which would in turn cause the second method to be slower.
Let me know if I can clear anything up.
Thanks

Inline scripts block the rendering of the whole page. (Only Opera does some rendering) So it doesn't matter where you put them in your case. In general it's better to put them at the end because external files can still be downloaded, and if flushing is enabled something can be rendered.
External scripts only block the rendering of everything below them.

Related

HTML / jQuery: How to properly include external jQuery file

I am new to JS and programming in general and hope someone can help me with this.
I am currently working on building a website where every page has its separate HTML / PHP file.
jQuery and my global / general JS functions are included in the footer of all these pages through a separate includes file "footer.php".
So far everything works as intended.
Now I have some pages that will use specific jQuery functions so I want to load the corresponding JS only if such a page is loaded.
To do this I saved the corresponding codes in separate JS files (e.g. nameOfExternalJsFile.js) and wrapped everything in there in the following:
$(document).ready(function(){
// ...
});
I then made the following updates to the corresponding PHP pages (example):
<head>
<?php
require_once("includes/header.php");
?>
<!-- here I want to include the specific jQuery functions -->
<script src="includes/js/nameOfExternalJsFile.js"></script>
</head>
<!-- ... -->
<!-- here I include the main JS functions -->
<?php require_once("includes/footer.php"); ?>
I have two concerns with this:
I am not sure if this is the right way of including such files since
I need to have them available on document ready.
I include my main JS in the footer since I was told this improves
performance but can I then include jQuery functions in the header at all ?
Can someone let me know if this is correct or if I should change anything here ?
Many thanks for any help with this.
Wrapping the functions in $(document).ready automatically takes care of this concern. From the JQuery documentation on document.ready.
A page can't be manipulated safely until the document is "ready."
jQuery detects this state of readiness for you. Code included inside
$( document ).ready() will only run once the page Document Object
Model (DOM) is ready for JavaScript code to execute.
Technically it doesn't matter whether you include the scripts in the header or the footer, as long you load JQuery first and your script second.
That said, it's generally recommended that both scripts go just before the closing body tag to increase performance as you suggested. There are some articles that discuss this like this post from performance expert Steve Souders and this guide from the Yahoo! Exceptional Performance team.
You should load the $(document).ready(...) stuff only after you have loaded jQuery, that is, in the footer file, after the jQuery <script> tag, like this :
<script src="includes/js/jQuery.min.js"></script>
<script src="includes/js/nameOfExternalJsFile.js"></script>
It`s good practise to locate all the JS files in the end of the body
<html>
<head></head>
<body>
... Some HTML
<script>SomeScripts</script>
</body>
</html>
</pre>
If you want to be sure that your external scripts are loaded after page load use:
$(function(){
/* Your code from the scripts */
});
You can change the content of footer.php to include /nameOfExternalJsFile.js manually at the bottom of the page. That´s the safest way to do it because you may load jquery before loading others scripts.

Where to load javascript scripts in html page

I am developing a jquery page and I think it is a little bit slow when you load it because I load all js files at the begining.
Would it be faster if I load just which I need at the begining and in each section, loads which I need?.
Now my webpage has all script calling in and after that, in all sections, home, page2, page3...
I structurated the webpage in one html file and I navigate to each section. Each section is like this:
<div data-role="page" id="secion2" data-theme="e">
<!--<script type='text/javascript' src='javascript/createFbAlbums.js'></script> -->
**LOAD SCRIPTS HERE**
<div data-theme = "f" data-role="header" data-id="fixedNav" data-position="fixed">
<h1>Page 2</h1>
</div> <!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" class="managementEvents">
<li data-theme = "f">Page2</li>
<li data-theme = "f">Modify Exposiciones</li>
</ul>
</div> <!-- /content -->
Loading them in sections like the commented in this piece of code. Is this equal to load at the begining or not?
Or doing something like this inside javascript:
$(document).on("pageinit", '#section2', function(){
**LOAD HERE SCRIPTS**
Javascript code here doing everything in that page
});
I am a little bit lost because I don't know if this is ok or will break the page or will not speedup the loading.
The usual recommendation (for instance, in YUI's Best Practices for Speeding Up Your Web Site) is that unless you have a good reason to do something else, put your scripts at the very end of the page, just before the closing </body> tag:
<p>Content</p>
<div>More content</div>
<script src="/some/script.js"></script>
</body>
</html>
Side note: This also makes it essentially unnecessary to use jQuery's ready feature. If the script is at the very bottom of the page, all of the elements defined by the markup above it are available for scripting.
There's lots more useful advice in the page linked above. For example: To the extent possible, combine all of your scripts into a single file. (And make the file cachable, etc., etc.)
The downside: If you have content on your page that requires JavaScript to work correctly, the above means that the events related to that won't be hooked up right away. There can be a brief window of time between the content being available to the user, and the event handlers being registered. To deal with that, the concept of "progressive enhancement" comes into play: Make things work well without JavaScript, and then make them work better with JavaScript. Things that just can't work without JavaScript should be added by the JavaScript, or loaded initially-hidden and then shown by the JavaScript.
Whenever possible, JS files should be loaded at the bottom of the page. Prior to the closing body tag.
http://developer.yahoo.com/performance/rules.html#js_bottom
The reason is that JS files loading can block parallel downloads of other page assets. So they can cause a bottleneck.
In addition to that advice, since you're using jQuery, load jQuery from a CDN such as Google. There are a couple of benefits to doing that:
a popular CDN such as Google increases the odds that the end-user has already cached the JS library
it further reduces the parallel downloading bottleneck as it's another domain (the bottleneck is per-domain)
The recommendation is to put JavaScripts at the bottom of the page. This does not take into account dynamically loading your scripts, however, because there are differences in how browsers actually handle downloading external resources such as JS files between using tags and dynamically loading via JavaScript DOM manipulation.
Further Explanation
Browsers load HTML and any embedded resources synchronously as they parse the HTML. This means that as your page loads, when you have scripts up front, the loading of the page stops, the browser makes a request to download, then parse and evaluate/execute the JavaScript file, and then continues to load the rest of the HTML. It does this with each script.
Therefore, unless there are crucial elements that need to use some JS functions or variables during page load, and in some cases this is needed, it's better to load the JS at the bottom of the page because your page will render quicker. And in those crucial cases, only load enough JS to get the page load done as quick as possible.
As an interesting aside, loading JS files dynamically using JavaScript itself (i.e., dynamically inject script objects via javascript after page load), those scripts will load asynchronously and further improve page load times.
So to answer your question,
If you use the jQuery.ready() method of loading JS, it conforms to a best practice since the scripts will load after the page has already been loaded by the browser. This is in effect even better than placing tags at the bottom of the page.
$(document).ready(function () {
$.getScript( "yourScript.js" )
});
(Full example for jQuery getScript can be found here for more in-depth examples:
http://api.jquery.com/jquery.getscript/
You should always put your scripts at the bottom of your page before closing </body> tag
Refer here for more informations why you should do it.
Yes as everybody mentioned, it won't hurt putting the scripts at the bottom of page before </body> tag whereas it might create a problem sometime when you put the script in the head tag.
It would really be unnecessary to put your script at the end of your HTML if you use $(document).ready(function(){ then add your code, and close it with }) it will have the same effect, although both methods are considered good programming practice.

Where should JS scripts go in an HTML file?

If you have JS code which is intended to run as part of loading/building the page, where in the HTML should this go? For instance modifying a <div> or adding some links.
Should this be put in the <body>, interspersed with HTML? Or should it be between the <head> and <body> elements? What order do things happen in - the order they are in the page or does HTML all happen before (non-<head>) JS is run?
If you have JS code which is intended to run as part of loading/building the page, where in the HTML should this go?
Just before the closing </body> tag is emerging as the best practice barring a specific requirement for it to be elsewhere (which there can sometimes be). It's the recommendation of the YUI folks, for instance, but it's not just them.
What order do things happen in - the order they are in the page or does HTML all happen before (non-) JS is run?
When a script tag is encountered, unless you use the defer or async attribute (and the browser supports them), all HTML parsing comes to a screeching halt and the script is downloaded and handed to the JavaScript interpreter. When the JavaScript interpreter finishes processing the script, the HTML parser can continue. It has to do this because the JavaScript can insert tokens into the HTML stream via document.write. This is also why you can load a script file and then load a second script file that relies on the first, and know that they'll get loaded in the right order. It's also why you can't access elements that are further down in the HTML stream from a script higher up in it unless you defer your code somehow (window.onload or the "DOM loaded" events many libraries support, such as jQuery's ready or Prototype's dom:loaded).
An upshot of this is that the typical practice of putting script tags in the head actually slows down the apparent load time of the page, unless those script tags need to be there for some reason. Hence the recommendation to put them just before the closing </body> tag.
There's a "gotcha" you have to watch for, though: If you have parts of the page that you want to respond to with JavaScript if the user has it enabled, loading your script at the very end leaves a brief but real race condition lying around: The user can interact with the page while your script is being downloaded. There are a variety of ways of handling that. My favorite is to detect whether JavaScript is enabled with inline script (not a separate file) in the head element and, if so, to put in a document-level handler for things where possible (you can do this with click events, for instance) which basically queues up or disables the click during that very brief period of time. That way, if JavaScript is enabled, you'll avoid the race condition, but if it isn't, any unobtrusive fallback you have in place will work.
The whole HTML file is executed in the order it is written, that means
<html>
<div id="ID"></div>
<script type="text/javascript">
document.getElementById('ID').innerHTML = "HELLO";
</script>
</html>
changes the contents of the div, wherease
<html>
<script type="text/javascript">
document.getElementById('ID').innerHTML = "HELLO";
</script>
<div id="ID"></div>
</html>
does not, because the JS code is executed before the div has loaded.
EDIT: If you want the JS to run after the page has loaded use window.onload or document.body.onload or
<body onload="...">
Alternatively if you're using a JS library such as jQuery, you can use
$(document).ready(function() {
...
});
Put them as functions in its own .js file which you include by <script src> at end of HTML <head> or <body>. If any of them needs to be executed during document load, call it using window.onload or whatever load function the JS library/framework offers, if you are using any.
As to the exact location, putting them in end of <head> allows them to be downloaded before the HTML page is been shown in browser and putting them in end of <body> allows the page to be shown a tad sooner because downloading the scripts will block the page rendering, thus it's a better speed experience.
However, IMO, it's a bit more robust to have the scripts downloaded before the page is rendered whenever you have some page elements which cannot be used without JS. In case of an impatient user this would otherwise lead to unusable elements.
I'd put it in a separate .js file and wrap the code so it is executed after the DOM is loaded. If you use a framework like jQuery or Prototype this should be easy.
For best performance place your JavaScript files at the BOTTOM of the HTML page you are serving.
To ensure that everything is set when you try to use it, execute only after the DOM is ready (there are multiple variations of this, my advice: Use a JavaScript Library).
You can put a script tag in the head, body, between the two, and more. You can put it most places but see this for a more in depth look.

How can I embed a webpage within another and isolate CSS

I need to embed one webpage within another, the inner page will be wrapped by a <div> and not contain the <html>, <head><title> or stuff like that, however, the inner page can contain <link>'s to CSS that I don't want to affect the outer page
I currently fetch the HTML with AJAX and insert it into the outer DOM, to workaround the styles conflicting I extract any links prior to embedding into the DOM, fetch that CSS with AJAX, parse the styles and apply them inline using jQuery selectors.
That has obvious problems with things like pseudo-selectors, however, the main problem is that styles from the outer page affect the inner page, I cant reasonably reset every possible style, and I need to access the inner pages dom so using an iframe is out of the question.
Its a fairly complex setup, but I was wondering if anyone had seen anything along similar lines or had a nicer approach.
Cheers
Dale
You could assign a unique id to the div and prepend the selector to all the rules in the css.
HTML Before
<div>
<!--start ajax content -->
Content
<!--end ajax content -->
</div>
CSS Before
a {color:#999;}
HTML After
<div id="unique0001">
<!--start ajax content -->
Content
<!--end ajax content -->
</div>
CSS After
#unique0001 a {color:#999;}

Shouldn't we use <noscript> element?

I found some good cons here:
The noscript element only detects whether the browser has JavaScript enabled or not. If JavaScript is disabled in the Firewall rather than in the browser then the JavaScript will not run and the content of the noscript element will not be displayed.
Many scripts are dependent on a specific feature or features of the language being supported in order for them to be able to run (for example document.getElementById). Where the required features are not supported the JavaScript is unable to run but since JavaScript itself is supported the noscript content will not be displayed.
The most useful place to use the noscript element is in the head of the page where it would be able to selectively determine what stylesheet and meta elements get applied to the page as the page is loading rather than having to wait until the page is loaded. Unfortunately the noscript element is only valid within the body of the page and so cannot be used in the head.
The noscript element is a block level element and therefore can only be used to display entire blocks of content when JavaScript is disabled. It cannot be used inline.
Ideally, web pages should use HTML for the content, CSS for the appearance, and JavaScript for the behavior. Using the noscript element is applying a behavior from within the HTML rather than applying it from JavaScript.
Source: http://javascript.about.com/od/reference/a/noscriptnomore.htm
I very much agree on last point. Is there a way to make and add an external <noscript> file? Should we place <noscript> in the <head>?
It's better to have the default be non-javascript, and then let a javascript code overwrite with a javascript enabled page. Doesn't have to be much. Can just be a display:none; block, which is then set to display:block; by javascript, and vice versa for the non-js page.
After pondering for many days and changing my code back and forth, I think I have clearer picture now and would like to share my two cents worth on the subject before I forget.
<div id='noscript'>show non-js content</div>
<script>document.getElementById('noscript').style.display='none';</script>
<script id='required script'>show js content</script>
vs
<noscript>show non-js content</noscript>
<script id='required script'>//show js content</script>
Depending on the situation, there are three cases for consideration:
Case 1 - If required script is inline
JavaScript disabled
Content in <noscript> element appears immediately, non-js content is
shown
Content in <div> element appears immediately, non-js content is shown
JavaScript enabled
Content in <noscript> element does not appear at all, js content shown
Content in <div> element may momentarily appear before being hidden, js
content shown
For this case, using <noscript> element is advantageous.
Case 2 - If required script is from external (third-party) source, but hiding of <div> element is done with inline script
JavaScript disabled
Content in <noscript> element appears immediately, non-js content is
shown
Content in <div> element appears immediately, non-js content is shown
JavaScript enabled but required script is blocked
Content in <noscript> element does not appear at all, nothing is shown!
Content in <div> element may momentarily appear before being hidden, nothing is shown!
JavaScript enabled and required script is received
Content in <noscript> element does not appear at all, js content shown
Content in <div> element may momentarily appear before being hidden, js
content shown
For this case, using <noscript> element is advantageous.
Case 3 - If required script hides the <div> element
JavaScript disabled
Content in <noscript> element appears immediately, non-js content is
shown
Content in <div> element appears immediately, non-js content is shown
JavaScript enabled but required script is blocked
Content in <noscript> element does not appear at all, nothing is shown!
Content in <div> element appears, non-js content is shown
JavaScript enabled and required script is received
Content in <noscript> element does not appear at all, js content shown
Content in <div> element may momentarily appear before being hidden, js
content shown
For this case, using <div> element is advantageous.
In summary
Use <noscript> element if rendering of the HTML content depends on third-party scripts or if the required script is inline. Else, use <div> element and make sure that the required script contains:
document.getElementById('noscript').style.display='none';
Although Tor Valamo has an elegant answer to this problem, there is an issue which may cause you to opt out of using this technique.
The problem is (usually) IE. It has the tendency to load and execute the JS a bit slower than other browsers causing it to sometimes flash the "Please Enable Your Javascript" div for a split second before it then loads the JS and hides the div.
It is annoying and to get around this you can implement the "classic". <noscript> redirect approach.
<head>
<noscript><meta http-equiv="refresh" content="0; URL=/NO_SCRIPT_URL/ROUTE_HERE"/></noscript>
</head>
This is the most solid technique that I've come across with regards to this little nasty.
One useful application for noscript that I've seen is for a progressively-enhanced async loading of heavy content (especially "below the fold"). Big images, iframes, etc. can be wrapped in noscript in the HTML source, and then the unwrapped elements can be appended to the page using JavaScript after the DOM is ready. This unblocks the page and can make for a much quicker initial loading experience, especially if your interface relies on JS/JQ interactions applied after the document is ready (2 seconds vs. 6 seconds for a portfolio page I consulted on).
These days it seems almost every browser runs Javascript, but you can never know who is going to be accessing your site. These days even screen readers and web crawlers use Javascript, and sometimes make AJAX requests if they have to.
That said, if you're going to fall back to no-Javascript, there is a much better way than a <noscript> tag. Simply do this in the HEAD of your document:
<script type="text/javascript">
document.getElementsByTagName('html')[0].className += ' Q_js'; // better than noscript
</script>
With this technique, you can easily refer to the Q_js class in your CSS to hide things. With the <noscript> tag, the best you can hope for is to include an additional CSS file to override previous CSS. This becomes important when some elements with static content are supposed to be hidden right away (not flicker) until Javascript can make them more dynamic.
In short, the technique I suggested addresses all your cons 1-5, and I believe it's strictly better than using <noscript>.
In the (hopefully near) future you will be able to use css #media scripting:
#media (scripting: none) {
/* styles for when JS is disabled */
}
I create a full height, full width, position:fixed div in all pages with some id .
<div id='noscript_div' style='position:fixed;z-index:20000000;height:100%;width:100%;line-height:100%;'>enable JS buddy</div>
$('#noscript_div').hide();
$(document).ready(function(event){
});
I am not an expert . This worked for me .
I am sorry but, this case will suit only if you want the user to have his javascript enabled always
the simple ideea is in this times your website may adapt to no javascript usage on slow devices using noscript tag like an entity for the entire content of your website**(your html should be prepared to no javascript and all controls must work also if javascript is off,users using basic html controls shoul be able to do everything they done before when javascript was active.So <noscript></noscript> can be the dynamic switch to the same content in other way with the same results=solving the problem wich is the reason the users open your url).**You can see is no matter javascript is or not present ,the website's functionality can be "the same" in any cases js enabled / disabled.On chinese slow devices eg:Samsung neo mini phone this method can run an website without any delays on low internet traffic..
try to run this auto double functionallity website if js is on/off cases:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE>noscript can change the Internet forever</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function(){
$('noscript').replaceWith(function() {
return this.textContent || this.innerText;
});
$("p#javascripton").css("background-color", "yellow");
$("p").click(function(){
$(this).hide();
});
});
//-->
</SCRIPT>
<noscript>
<p>
Noscript's usage today can be logical for <p id="javascripton">eg pc/laptop/high quality tablets usage the complete website with all features:images high resolution,javascript<br><h1>OR without javascript so no high resolutions images inserted with a jquery automated script generated from some php+javascript scripts so have usage for 80% mobile application cause almost are from China ,so low quality products=low cpu,low ram :IN THIS CASE SOMEONE CAN THINK TO SWITCH HIS PHONE TO NO JAVASCRIPT USAGE SO IF ANY PROGRAMMER CAN ADAPT AN ENTIRELY APPLICATION TO THE METHOD I USED IN THIS EXAMPLE AUTOMATED HIS BROWSER IS ADAPT FOR ANY RANDOM ACTION ABOUT THE USER CHOISE(YOU UNDERSTAND "TO USE OR NOT JAVASCRIPT") SO HIS CHINESE PHONE CAN BE APROXIMATELLY APROACH LIKE QUALITY OF SPEED EXECUTION THE OTHERS PC/LAPTOPS/TABLETS QUALITY PRODUCTS.<BR><BR>This stupid example is the best example how no script tag can change the quality of services on this planet ,boost the speed of the internet connection and stops unnecessary use of A LOT OF INTERNET TRAFFIC on slow devices..a simple tag can change the entirely dynamic of programmer's views so entirely Planet's beneficts</h1><p> <br>
run this code in two instances :<br>with browser javascript enable <br>and without(browser's javascript disable or eg a firefox plugin noscript states on/off)
</p>
</noscript>
</BODY></HTML>
and to say more on this .. right noscript was invented to work like a trigger when js is disabled but you can work around this feature to change the course of internet functionality about how is now ,to change it's dynamics....
Like all things, use the right tool for the job.
If you are using Google Maps API, you have a static image via tag and that gets replaced with dynamic JS map. Google have recently started charging for everything thus with the above example it's going to cost you twice, once for static and once for dynamic. The static map is only relevant if JS is disabled. Therefore to save double paying it seems to me the best solution is to wrap the tag for the static map in a tag.

Categories