just for example - sleep 10sec css file
<!DOCTYPE html>
<html>
<head>
<link href='http://2.cuzillion.com/bin/resource.cgi?type=css&sleep=10&n=2&t=1379426970&.css?v=1010' rel='stylesheet' />
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Hello world will be shown in 10 sec
http://plnkr.co/edit/HyueD8agoYVmCfuRwjGJ?p=preview
Current browsers will render the content after the linked stylesheets when these are fully loaded. This avoids content flickering otherwise you would always see the pages for a short time without the rules of the stylesheets being applied.
And because the stylesheet has a delay of 10 seconds the part of page rendering after it is delayed also for 10 secs.
This is not only true for stylesheets but also for scripts (that are not loaded with the async attribute).
EDIT
To the comment of Ryan Kinal. The browsers have multiple passes.
One that parses the html code and that will start to download the found resources.
And one pass that will execute the resource and render the html in order.
So the stylesheets and scripts are not necessarily loaded in order. The only important part is that they are applied/executed in the order they appear in the html structure.
It is like a construction manual where it is required to do the things step by step. You can read it before you build. Order the necessary items. But you can only continue with the next step at the time when you receive the necessary items for that step. So if you received everything except the first part you can't start building.
Google-Developer: Put CSS in the document head
[...] Browsers block rendering a web page until all external stylesheets have been downloaded. [...] Therefore, it's important to put references to external stylesheets, as well as inline style blocks, in the head of the page. By ensuring that stylesheets are downloaded and parsed first, you can allow the browser to progressively render the page. [...]
Google-Developer: Optimize the order of styles and scripts
[...] Because JavaScript code can alter the content and layout of a web page, the browser delays rendering any content that follows a script tag until that script has been downloaded, parsed and executed. However, more importantly for round-trip times, many browsers block the downloading of resources referenced in the document after scripts until those scripts are downloaded and executed. On the other hand, if other files are already in the process of being downloaded when a JS file is referenced, the JS file is downloaded in parallel with them. [...]
MDN: Tips for authoring fast-loading HTML pages: Minimize the number of files
Too much time spent querying the last modified time of referenced files can delay the initial display of a web page, since the browser must check the modification time for each CSS or JavaScript file, before rendering the page.
MDN: Optimizing your pages for speculative parsig
Traditionally in browsers the HTML parser has run on the main thread and has blocked after a </script> tag until the script has been retrieved from the network and executed. The HTML parser in Firefox 4 and later supports speculative parsing off the main thread. It parses ahead while scripts are being downloaded and executed. As in Firefox 3.5 and 3.6, the HTML parser starts speculative loads for scripts, style sheets and images it finds ahead in the stream. However, in Firefox 4 and later the HTML parser also runs the HTML tree construction algorithm speculatively. The upside is that when a speculation succeeds, there's no need to reparse the part of the incoming file that was already scanned for scripts, style sheets and images. The downside is that there's more work lost when the speculation fail
Sorry original answer I read question incorrectly:
Ok so the browser interprets html files from top to bottom, this will cause it to download any files that are linked to it before rendering the actual html.
Because of this it is recommended to load JavaScript at the bottom of the file as an example as they can get pretty big.
I have not really seen a real big css file, in terms of actual file size that can cause a very large delay.
I also do not know what the implication are of loading css at the bottom of the html, maybe someone can clarify this.
Try:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Hello Plunker!</h1>
</body>
<link href='http://2.cuzillion.com/bin/resource.cgi?type=css&sleep=10&n=2&t=1379426970&.css?v=1010' rel='stylesheet' />
</html>
UPDATE
See answer by t.niese why css should not be at the bottom
Related
In my Angular app, my menu component html code is displayed briefly when the page is loading. Even if I hide the menu html root element with a display none css, the html is still displayed when the page start loading.
I have read a lot of thing about ng-cloak (https://docs.angularjs.org/api/ng/directive/ngCloak) but it seems Angular 4 not have ngCloak.
So I don't know how to prevent this unpleasant effect.
does Angular 4 have an equivalent directive for ng-cloak?
How can I display properly page without display unstyled html on load?
The index.html file should not contain any application specific HTML code. But just some headers and the root tag of the application. It may contain a placeholder text like "Loading" inside the root tags.
All the html code of the application should be inside the app.component.html and or other components.
#angular/cli generates an index.html "template" file that looks like this:
<!doctype html>
<html>
<head>
...
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
The browser immediately displays the "Loading..." text. After Angular was initialized, it is replaced with the actual application. To get a white page, just removed the text.
I would have gone with #HendrikBrummermann's answer: place a "Loading..." tag.
From your comment, "...which component includes the header... the unstyled html of the header is displayed", I believe you already have your answer: there is no CSS loaded that can style the HTML of the header yet.
Hendrik's answer keeps the tag to a minimum, so this effect is not apparent.
If you really need to style the header immediately, I fear that you need to use an inline style (and with no images or fonts - those won't be loaded yet either). Keep that to the bare minimum is all:
<!doctype html>
<html>
<head>
...
<style>
...
</style>
</head>
<body>
<app-root>(styled header)</app-root>
</body>
</html>
Then upon loading you can remove the placeholder.
You can also try (but it's messy and difficult to maintain) an incremental approach with two "loaders": a very, very minimal one that needs next to no CSS/images, then as soon as the fonts and other very few basic assets are onLoad'ed you can maybe replace it with a simple animation, and from there you load all the rest and activate the full Angular app.
There are also "packager" utilities that will compact most of your HTML, CSS and JS into a single minified SPA bundle; some of them (I'm sorry, I saw a couple of them used, but never used myself and can't reference them) also supply a minimal loader as described above. This might take care of some maintenance for you, and it's perhaps worth a shot. I know this because for one project a colleague of mine had to replace a Flash "Please wait" loader with a HTML5 one (it wasn't an Angular project, but I don't think it matters).
Those are things which you could give a try:
(In my opinion best solution) You can use Angular Universal, for serverside rendering. Workflow is:
User sends request to example.com
Server is not responding with pure HTML (example above), but runs Angular on the server side and render output HTML
This HTML (together with <script> tag pointing to compiled app is send to users browser
On the first look, the user sees HTML + CSS formatted by his browser. Then browser launches *.js file, and after a while replace "static page" with "single page app"
Angular can deal with all action done on "static page" (before JavaScript launch), thanks to BrowserModule.withServerTransition(); More about Universal can be read here.
You can make one step further from Universal, and serve your Angular Universal App as a Progressive Web App (PWA). More about PWA can be read here
Go one more step further, and introduce Accelerated Mobile Page (AMP), from the Google Cache. More about AMP can be read here.
You should never ever place anything more than application root node in your index.html:
<!doctype html>
<html>
<head>
...
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
If you really want to have something "nice" while the user is waiting for Angular, you could create some kind of loader with ie css animation:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="loader.css">
</head>
<body>
<app-root>
<div id="css-loader"></div>
</app-root>
</body>
</html>
Regarding points 1 & 2 & 3: Here you can find an example of Angular Universal & PWA & AMP combined.
I think this behaviour is inevitable. Best you can do is speed it up as much as possible. Using the lastest versions, AOT and lazy-loading helps a lot.
Alternatively you can add some css to your index.html
This is a feature, not a bug.
You can do one of twothree things:
Let UAs get information as soon as they can and assume people can tell when things are loaded fully, or
Make people wait for information, and show it to them only after it has all loaded
Some kind of absurd gray area unicorn implementation that ensures part of the page is loaded before displaying it but doesn't bother for other parts
Historically, #2 has been the most derided approach, especially as so many people want to do it. I suggest not even pursuing it.
Scripts should be included in the <head> part is what I learned from w3c.
Why does Boostrap suggest to load itself in the <body> part as seen here:
http://getbootstrap.com/getting-started/#template
Scripts are technically supposed to be loaded and executed at where they are placed in the body. Imagine that your browser reads your HTML from top to bottom. If the script include is at the top of the document, then the browser is supposed to idle while it fetches the script from the web server.
A more detailed answer is available at
Unobtrusive JavaScript: <script> at the top or the bottom of the HTML code?
if the loading script is at the bottom of the body tage then it will be loaded last, making the rest of the page appear as if it is loaded faster
That really depends on that is on your page. If your page has things that need the js in order to work before displaying to the user, it would be wiser to load them before showing the html to the user
Usually in a web page the <body> tag and <head> loads together in a webpage, Because of this often the webpage looks dull because sometimes the style sheets and java script load slowly and even several times it didn't load. So I am searching for a loader which will load the content which are in the head tag first and then after loading the content in the head tag then it will load the body content.
Is there such kind of script or any other trick to let the <head> tag load first
Pages load linearly from top to bottom. It will retrieve additional linked assets as it encounters them in the source. The order those assets are returned to the browser will depend on the path it takes and size of the files.
Your JS should not be linked from the HEAD section due to the fact that JS files can block concurrent loading of other assets. Instead, place your JS file links immediately before the </body> tag.
As for the CSS files, you COULD write a script that waits for the CSS to fully load before 'displaying' the rest of the page, but I'd strongly recommend AGAINST that, as this is simply how the internet works. The 'dull look' you are concerned about is really of no concern to anyone else that uses the internet.
If I have external stylesheets being included in the <head></head> section of my HTML page, will they be loaded before the HTML and immediately applied upon rendering? Let me present my specific use case.
External styles.css file:
form label {
display: none;
}
Page containing form:
<head>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<form action="process.php" method="post">
<label for="name">Name</label>
<input type="text" id="name" name="name" />
</form>
Can I be confident that the labels will be invisible upon page load (no flickering due to CSS downloading)?
Otherwise, I can add the style attribute inline, but that can be a maintenance nightmare.
If you include the CSS in the head section, you can be confident that the label will not show.
The HTML is downloaded first. The browser starts reading the html from the top, and starts fetching all CSS and JavaScript files referenced in the HEAD section. The page will not be painted (shown) until all the CSS and JavaScript files in the HEAD have been downloaded and evaluated.
Style sheets don't prevent the document from being downloaded, but the browser won't render the document until all of the linked stylesheets have been downloaded and loaded into the DOM.
This is so that the browser doesn't need to render the page twice (wasting time in the process), and so that an unstyled page won't flash in front of the user before the stylesheets have been downloaded and parsed.
I believe everything gets loaded in the exact order you place it in the html (or whatever format) document you create.
So in the case of a stylesheet call, it will be called when it is read directly in relation to where you wrote it (typically in the )
a good 'proof of concept' of this would be to create a javascript function that would load a style sheet after a certain amount of time has passed. in this function you could have the stylesheet load with ajax.
I believe the simplest answer to your question is: "Yes...the stylesheets get loaded first." That's why you link to them in the head. As ghostcake suggested above, you can do funky stuff to adjust the order in which the browser responds to and renders any instructions in your html file, but the default function of the browser is to essentially attempt to address each line of markup in the order it is presented. Hence, that's also why it's best to put tracking scripts, etc., at the bottom of the page...below the footer, but above the body tag. (Doing so let's your page render before dealing with functions otherwise not visible to the user.) If you think of the browser like an artist or draftsman you commission to draw something, you must tell the artist how/what to draw before they put pen to paper. Likewise, telling the browser where to fetch your instructions re. styling via a link in the head allows it to "know" what and how to "draw" before it begins to "draw".
We have a web content management system and I can't get to the header portion of the page. I can see it in the full page when debugging, but can't upload a revised file.
In the header, there's a portion of the same Javascript - about six lines, but it's truncated and not closed.
In the body, I have the full slideshow Javascript which works great in Firefox, Safari, and Chrome. Strangely it even works in IE8 on my PC, but not on the other 10 pcs I've tested it on.
The only thing I can edit/save changes is the body portion of the page.
I originally thought javascripts had to be in the header, but clearly not since the body script is working in the other browsers. Do you know though if IE8 requires the script to be in the header?
I think the problem is defintitely 1) a partially coded, unclosed script in the header and/or 2) perhaps javascripts have to be in the header for IE8?
In that case, I would need the remote server company to post the javascript that's currently in the body into the header.
Thanks for your help,
Debby
Script elements are allowed in many places and MSIE doesn't impose any additional requirements.
If a script element is unclosed, then everything until the next </script> will be treated as part of that script. If that includes HTML then it will error and stop running that script.
Script tags doesn't have to be in the head section. You should place them there unless you have a good reason not to, but it works just fine to have script tags in the body also.
The unclosed tag is quite likely to cause problems. At worst the browser will just ignore everything until it finds a closing tag for it. If you can't get rid of it you should at least put an empty script tag first in the code that you can control.
There are no limitations on where you keep your code, it is common practice that included javascript libraries (such as jQuery, mooTools, etc) go in the <head> element, while custom javascript goes in the end of the <body> element, because it will only run after all the other things in the page were already downloaded.
The reason for your problem is probably the unclosed <script> tag in the head. It makes everything until the closing </script> tag as script, even critical HTML. Which makes the page render incorrectly, and your javascript to throw errors.
Close the tag and resume with your own body
</script>
</head>
<body>
//... your code