Im just curious if there is any advantage to using (a minified version of) javascript and css in the header with the script and style tags vs including them from a separate document via link to css and a script to javascript?
Isn't there theoretically added page load time in the second way since there would be extra page requests?
so this:
<head>
<script>
//Javascript
</script>
<style>
//Css
</style>
</head>
<body>
//Content Here
</body>
</html>
Vs This:
<head>
<script src='http://someJavascript.com/link/to/file.js' type='text/javascript'></script>
<link href='http://someCSS.com/link/to/file.css' rel='stylesheet'>
</head>
<body>
//Content Here
</body>
</html>
The advantage is mostly modularity. If you use the same JS or CSS in multiple files, it's best to keep them in one place. That way, if you make a change to them, you don't have to update all the files, you just update it in one place.
But if the JS or CSS is specific to a particular file, you might as well put them directly in the file rather than force a separate request.
I would generally do the scripting or styling inline, although it is useful to load it remotely if you want something for multiple different HTML files (e.g. the same stylesheet for all the pages on a website). Load times increase a bit, but unless you are expecting to get thousands of page loads, it's pretty minimal. Your "header" tags should also be "head" tags.
Having the JavaScript and CSS in separate files allows browsers and proxies to cache them - so if the main section of the page is dynamically generated, only the changing content will get re-downloaded on a reload.
Related
I was wondering if it was possible to include a list of links into many HTML files. I based my idea off W3 School's W3 Include which allows you to include blocks of HTML code in many files which is super useful for changing lots of files at once.
Heres the link to the W3 article: https://www.w3schools.com/howto/howto_html_include.asp
What I want to be able to do is something like this:
<html>
<head>
<script src="https://www.w3schools.com/lib/w3.js"></script>
</head>
<body>
<h1>test</h1>
<div w3-include-html="links.html"></div>
</body>
</html>
Where the links.html file has a bunch of links. e.g
<link rel="stylesheet" href="style1">
<link rel="stylesheet" href="someframework">
<link rel="stylesheet" href="somescript">
I want to be able to do this as when online resources change their links that I can easily update them by updating the one links file and then it will roll out across my whole website.
I understand that there are most likely issues regarding being able to load files this way, but if anyone has any suggestions in how to do something along these lines that would be great.
Well, you can use partial rendering in any programming language. If your page has static HTML and is not powered by any programming language, you could add a link to a JavaScript file in the head of your page and from within the file, you load the stylesheets and scripts of your choice. (look for how to load stylesheets and scripts with JavaScript).
This way, you have a single place in which you manage head assets.
LE: https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports this will be a thing in the future 😁
You could maybe make your header an include depending how you set it up. Could use <?php include "your/file/location" ?>
This will allow you to just add this piece of code at the top of each of your pages. Then in the location file is where you would add all of the and tags which would clean up your HTML quite a bit and also increase page load time. Using this method for quite a lot of things could slow it down but the perfect amount will allow you to get 100/100 on google page speed hoping that analytics is hosted locally so you don't get a issue with that caching.
Went a tad off topic but hope this helps :)
I am little new to web development and when I was searching internet about other topics, I have seen many people has put popular JS Libraries in Different Places of their websites.
eg: Inserting JS Libraries on the Very Beginning or Start of the <head> </head> section. (Before loading any JS Code or a CSS File)
eg: Inserting JS Libraries on the End of the <head> </head> section. (After loading all JS Codes and CSS Files)
eg: Inserting JS Libraries on the End of the <body> </body> section. (After loading all JS Codes, Texts, Images, Videos, CSS Files etc...)
So my question is this.
What is the best practice for inserting (where) following JS Libraries, Plugins and CSS Style Sheets to a web page for the most faster loading times and other advantages? - Please mention the reason -
JQuery and it's Plugins
Bootstrap 3.js
Modernizr.js
Angular.js
And another widely used JS Libraries which I couldn't mention here...
Normalize.css
reset.css
bootstrap.css + more
Thank You..!
There is no so called "standard" method. The choice of where to put the lines boils down to one question: When will I need the library?
You see, web files loads line by line, let's take the following as an example of what I mean:
<script>
document.getElementById("target").innerHTML = "changed"
</script>
<p id="target">unchanged</p>
#target isn't altered because the script was loaded before the element did. Web files loads procedurally. When the line of JavaScript is loaded. It is executed immediately, but the target element isn't. So it couldn't change the element.
Even with jQuery, there is the same problem:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("#target").text("changed");
</script>
<p id="target">unchanged</p>
Therefore, we often use $(function(){}).
Back to the loading problem
People who put their <script> tags or <link> tags in the body (in front) or in the head, wanted to execute the script immediately, sometimes they won't use $(function()) or document.onload
People who put their <script> tags or <link> tags in the body (in the end) wanted to ensure all elements are loaded then execute the script or load CSS.
Conclusion
You should load independent resources such as jQuery first, then load dependent resources such as jQuery plugins. Then you try to decide when you want the resources to start loading, then put the lines in places.
You should put CSS links in the <head> tag because you don't want visitors seeing unstyled content before loading the CSS files.
If you can't decide or don't care about the time, put every <script> and <style> tags in the <head>.
Here is another post you might be interested in: Load and execution sequence of a web page?
CSS can added inside header tag & but put all JS Libraries and custom files just before closing closing body tag
<body>
//other tags
<script> All Scripts here </script>
</body>
By doing so you wont have to check if DOM content has loaded.
It decrease page loading time.Otherwise a js need to be completely loaded before DOM loading.
It also makes sure that all events are attached properly to DOM element.
I think this address all your concern specially the third one
CSS Sheets go in the < head >. The order of the CSS files matter so libraries should be put in first then you can put in the specific ones you have.
Javascript links go in the < body > but place them at the very end. That way your HTML content loads first then the JS loads and it will recognize all your selections. It is more efficient to do it this way.
The most important thing to note when placing your css and script tags is that the order you place them determines the order they are loaded in and if style or code is loaded later it over writes the code written before. So if you have css styling that assigns different styles to the same attributes of the same element then it is the one loaded later that takes effect. And with script tags it's important to remember that for dependency reasons. You should load the dependencies first so that they are there for the other scripts to use. Aside from that normally css tags are in the head and script tags at the bottom of your body element
I was watching Doug Crockford's Theory of DOM video and at 16:50, he talks about placement of <script> tags and CSS <link>. He mentions placing <script src> as close to bottom of body as possible, and <link> as high in the head as possible. From this, I have a few questions:
1) I learned JavaScript by tutorials. Many programs put their JavaScript within their <head> tags just after the CSS <style> tags. Is the information in his (2006?) video outdated now?
2) Do these rules apply to JavaScript <script type="text/javascript"> and CSS <style> tags as well. If so, why, and what are the differences between these tags and the <script src> and <link> tags?
3) He says "reduce the number of script files as much as possible"... but if I'm coding a large project, I want to stay away from clumping all my JavaScript together... rather I'd prefer to separate my code out into files that make sense. How much of an impact does this have?
He mentions placement can impact performance, as "the way in which the browser does incremental loading is very sensitive to the placement of these assets." Yet, although I haven't done rigorous performance tests, I haven't noticed large changes in performance from placement differences. He doesn't explain further how this impacts performance and why it's so important.
1) No, the information is not necessarily outdated, but many people just load all of their resources at once. It is often advised to load scripts at the end of your <body> because browsers stop to load the referenced files, lengthening the load time. Style-sheets are included at the beginning of the file so that elements are styled as the document loads, rather than all at once at the end.
2) The <script src> and <link> tags require a new connection to be opened, slowing load times. The <script type> and <style> tags are inline, so new connections are not required to be opened and waited on.
3) Each script file is another connection that must be opened. The fewer connections to be opened, the faster the site will load.
Overall, these rules are more effective for reducing load time on slower connections or larger projects.
1) when you are working on large project then if js code and css are used in many pages then you do not put these all code in each and every pages just include the files in your pages.
2) if your code will minify then it will help to load fast.
3) you can use <link> for including css and <script> for javascript.
my platform delivers some similar widgets on the same webpage. These widgets are embedded on iframes, and share the same CSS definition among them.
Current version loads this definition using <link rel="stylesheet"> tag. But, I am thinking to change loading strategy to css inline definition inside <style> tag.
Load base javascript on target page
Create a hidden iframe, and load CSS <link> on it (async document.write call)
Set this CSS content into javascript var on target page context.
Steps 1 and 2 are already implemented and working. Now, how should step 3 be implemented?
After some new tests, I'll post here any positive results.
You don't want to use Javascript for something that can be done (or at least done easily) with pure CSS. There are a lot of people who don't have JS enabled...I don't think you want to limit their access to your site. What you are looking for can be done with the CSS #import rule. It's pretty simple -- all you need to do is place #import "path/to/css/file" above all your other style rules. The path is relative to the current stylesheet; if it's in an HTML file then it's relative to the HTML file.
For example, if you had a domain like stackunderflow.com, a stylesheet in the top-level folder, and a stylesheet called style2.css in a folder called extra-styles, then you could import the stylesheet from extra-styles via a relative path: #import "extra-styles/style2.css" Another good thing about this is that it's supported in almost all browsers.
I have developed a mobile application which loads 3 css and 7 javascript files. Problem is if the wifi signal is very slow, HTML loads before all javascript and stylesheets are loaded. Since stylesheet is not loaded, HTML looks disturbed and after few seconds (i guess after css and js are loaded properly), HTML structure automatically take correct format but I dont want to show the disturbed format and to do that I need to make sure that all js files are loaded first then only HTML should display.
If you have any idea how can this be achieved ?
You can do using Cache manifests. Read these resources:
http://appcachefacts.info/
http://en.wikipedia.org/wiki/Cache_manifest_in_HTML5
https://developer.mozilla.org/en/docs/HTML/Using_the_application_cache
Alternatively - ensure your resources are loaded before the body by placing them in the right place (head tag).
You should link to your external css stylesheet at the top of your webpage in the header like this:
<link rel="stylesheet" type="text/css" href="http://whiterootmedia.com/css/example.css" />
or insert your <style> element in the header. Likewise this should be done for your JavaScript if it effects your initial layout. Keep in mind that if you are using an external JS file, the browser will stop rendering your page at the point in your code where your external JavaScript file is referenced, to load that external JavaScript file. If you're using a lot of JavaScript, place it at the bottom of your page (contrary to what most people do) or use an onload() function.
The webpage is loaded top-to-bottom, so the problems you're having should be related to the order of your css (most likely).