today I've a question. Is faster to load a web page designed from static html example:
<html>
<head>
<title>Web page</title>
</head>
<body>
<p>Hi community</p>
</body>
</html>
Or by static Javascript with DOM? Example with document.createElement("...")
Serving the HTML directly would be the faster approach, as your browser only have to render the elements, and not manipulate the dom :)
Populating HTML statistically is much faster than populating through javascript.
The HTML document gets downloaded
The parsing of the HTML document starts
HTML Parsing reaches <script src="jquery.js" ...
jquery.js is downloaded and parsed
HTML parsing reaches <script src="xyz.js" ...
xyz.js is downloaded, parsed and run
HTML parsing reaches <link href="abc.css" ...
abc.css is downloaded and parsed
HTML parsing reaches <style>...</style>
Internal CSS rules are parsed and defined
HTML parsing reaches <script>...</script>
Internal Javascript is parsed and run
HTML Parsing reaches <img src="abc.jpg" ...
xyz.jpg is downloaded and displayed
Parsing of HTML document ends
So, if you have static html loading with javascript will be overhead for page rendering.
It's faster to send a static html, because the client doesn't have to execute js. Sending complete HTML is also better for search engines, even if google can now execute js.
You can still use js to add elements in your DOM once the page is loaded
Like others said, it is always faster to output static HTML rather than generating it dynamically using Javascript/JQuery. However, sometimes the content cannot be served directly and generating the HTML dynamically is the only choice. I have worked on a few applications where this was the case. In general, generate static HTML whenever you can.
Related
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
Hello everyone quick question.
First time working with java script
I have a jsp file that will create a data grid and one of the columns of the data grid are checkboxes. My question is can a JSP file contain javascript in it or will I have to create a different file for just the javascript. The function of the java script will be a select all button.
If JSP can hold javascript where does the code belong? by this I mean what headers does the code reside int?
<html>
Thanks for the help everyone.
I've just answered a similar question here:
https://stackoverflow.com/questions/25059168/java-websocket-client-in-jsp-possible/25059382#25059382
The generic answer is: JSP can contain anything that a regular HTML page can contain. JSP is an HTML extended with JSP tags that are processed on a server. After the JSP tags are processed and a response is generated there is no any difference between that response and a regular HTML.
So, the question really is where to store the java scripts in an HTML. I think, the cleanest way would be to put them to a separate file or files and then use a <script> tag with an 'src' attribute:
<script src="<java-script-url>"></script>
But in cases when java scripts are not that big and complicated, it's OK to include them to the page itself under <head> element of your page.
Script tags should be added under the head tag of the HTML node.
The script tag can then simply contain JavaScript.
This should not be any different from adding a script tag to a normal html page.
<html>
<head>
<script type="text/javascript"><!-- required for FF3 and Opera --><jsp:text> </jsp:text></script>
</head>
</html>
Add inline javascript to the body of the jsp:text (jsp:text may not be necessary, I am not sure), or add a src="" attribute containing the path relative (or absolute) to the URL the browser will consume the page from.
Yes, it technically can. You'd simply put it under a <script> tag inside <head>. However, I recommend including a JavaScript file using a <script> tag, instead of inserting JavaScript directly into your JSP.
There is no dependency between JavaScript and JSP because JavaScript is used for client side scripting and JSP is used to produce HTML pages or contents dynamically using Java EE. JavaScript can be used along with HTML on any browser that supports JavaScript (all browsers we use for work and development supports JavaScript).
Feel free to write JavaScript functions and code for HTML page to create an interactive website, it doesn't matter whether you are using ASP, JSP or PHP for server side scripting and dynamic HTML content generation because all these frameworks produce and use HTML, CSS, JavaScript and Media Contents. Your browser can only understand HTML, CSS and JavaScript, its the web server application which understands JSP and its Java code.
Why don't you write this code in your JSP page and check yourself whether it works or not.
<script type="text/javascript">alert('Hello World!');</script>
JavaScript is not limited to be written inside <head> tag, you can write it anywhere you want in a HTML page. There are some cases in which you would like to write a JavaScript function at the end of <body> tag.
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.
I want to know HTML parser's parsing sequence.
Given two html files:
page1.html
<html>
<body>
<iframe id="x" src="page2.html"></iframe>
<div id="z"></div>
<--! something that need to be parsed -->
</body>
</html>
page2.html
<html>
<body>
<div id="y">
<body>
</html>
I know iframe tag downloads src in parallel (i.e., HTML parser parses subsequent lines of iframe tag although iframe src (in the example, page2.html) is not yet downloaded).
So, the question is, when the page2.html is parsed?
In other words, when the div element (id=y) is added to DOM tree?
Is it done after parsing codes in page1.html or done immediately after complete downloading of page2.html by blockinig page1.html parsing? Or, do HTML parser parses page1.html and page2.html in parallel (at the same time)?
Any comments and links would be appreciated.
Thanks!
(If there are wrong questions, please let me know. Actually, I am new to JavaScript and HTML)
Exact timing depends on the browser. page1 should be downloaded and ready first, before page2 is ready. However, page1 is not ready prior to the start of downloading and parsing page2.
The actual order things are done in is browser dependent, but in a typical browser, it first builds a tree of the HTML in the page you are visiting and then processes it. When it gets to processing the iframe, it will then go and request that page.
Now, this is complicated by the fact that the HTML is downloaded in chunks from the server, so from the partial tree, it might start downloading the content from the iframe before it's even seen half of page 1.
The take-away though is that you shouldn't be relying on this behaviour.
So... Just so you have less reasons to call me an idiot, here's why I need this:
I'm currently working on an offline project that uses jruby. So, to generate reports on the fly, it was decided (by my superiors) to use JavaFX's WebView component - so, HTML, CSS and JS.
But here's the catch: no using file system. All the content is drawn from DB and generated on the fly. No internet either. So all the content to be loaded into the WebView is to be in a single file, however enormous.
I have an HTML page and two huge files - one js, one css. When I use <link> tag for css and <script src="..."> for js - all works. Both in a browser and if I artificially load the page into a WebView. But if should I copy-paste the files into corresponding <style> and <script> tags (as it, probably, will be handled in the program), half the things do not work. Is there a special way for doing it right?
Here are the html, css and JS I'm working with (html is filled with sample data so it can be seen if everything works):
html filecss filejavascript file
You could try and merge them. Read more about this here.