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".
Related
I am trying to figure out a solution for our AEM related pages. I need to change the class of the body tag in our base page based on the logic of a jsp included in a page jsps. I need this so I can style universal widget differently to deal with different height fixed headers.
So I can't really provide code examples as we are talking jsps, controllers and editable content widgets content writers can add to the page. So its hard as I am not sure how to proceed with this.
So let me try to explain what we have here. We have a jsp base page which has the html tags set, head tag set all the meta data, css and js libraries we use, and body tag sets. The base page would also contain included jsps that represent the site wide header and footer used across the site. We also would have optional sub navigations that can be added to the page for sub sections of the site and is activated based on the type of page template used. So this means a universal header plus a sub-navigation.
Then each page jsp extends the above described base page. These are the page jsps that act as different page templates for our CMS to use. Content authors can drag content, and html widgets on to the page.
We also have page templates that contain their own third level sub navigations that can be used either with the universal header alone or the universal header and the sub-navigation.
We also have a new scenario where there could be a 4th level navigation that can come in to play. This navigation would be a draggable widget in the cms.
So what I want to do is based on the page template and based on which combination of sub navigations are in play, class the body tag differently based on if the page is the universal header alone, or different classes for any of the sb navigation combinations. this is needed so as content authors drag widgets to the page or develop content I can offset content or change scroll offsets to get around different fixed header/navigation solutions
This sounds like a good case for client-side code. One option is to use JavaScript code that runs on DOM content loaded event ("ready" event if you are using jQuery) to alter the CSS class of the body tag. You could make it so each component has a particular, unique class. Then the JavaScript function could examine the page and find all the unique components and then assign the correct class to the body tag based on what it finds and the logic you write in that JavaScript function.
JSPs will be processed top to bottom on the server, so once the JSP containing the body tag has been processed you won't be able to change what was processed to the response in some subsequent JSP that is processed afterwards.
Also see
https://stackoverflow.com/a/9899701/230055
If I have html elements in JSP then what is order of execution?
You could make a call to a tag for writing out the body HTML tag and in the Java code for that tag you could examine the page node and see what other components have been included and then write out the body tag HTML accordingly if you want to do this on the server. But the key point is that you must do this before the body tag is written. Once the JSP has been processed and the body tag has been written to the response it is too late to change it in a subsequent JSP.
For example, in your JSP you would do something like this:
<myCustomTags:bodyOpeningTagBuilder />
<html>
<head>
</head>
<c:out value="${bodyOpeningTagFromBuilder}" />
...other JSPs
</body>
</html>
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.
I have a scenario in which I want to test four different versions of a page, each with different javascript content loaded in the HTML head section.
I would like switching between the templates to behave as though the page has been re-loaded, clearing the state and re-running the JS in the head and body of the HTML file.
Can I do this with four different Meteor templates?
The way I'd do this is to append the JS to the head from within the template's onRendered method, like so:
Template.templateName.onRendered(function() {
$('head').append("insert your script here");
});
So I'd keep the default head free of any of these js files, and just add them in depending on what template the user is on. You can also manipulate the user experience from within the onRendered method as well, using things like $(window).scrollTop(0) to make it appear as though the page has refreshed.
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
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.