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.
Related
I want to be able to use Meteor template helpers to dynamically specify the content of a <meta> tag. It seems like there is no way to do this.
If I put the <meta> tag in a free-floating <head> element (i.e. not in a template), both will be included correctly in the HTML, but I can't use template helpers.
If I move the <meta> to a template, and try to render the template within a free-floating <head> element, it complains.
And if I move the whole <head> element into a template, now I have a <head> block nested within the <body>, which is ugly, and I suspect invalid HTML (though Chrome seems to handle it gracefully).
Is there a solution?
It is not currently possible to this without post load insertion due to they way Meteor parses templates
Just to bump an old thread as this is now possible on initial page load, you can try out this package https://atmospherejs.com/pip87/initial-iron-meta not tested it outside my environment much but seems to work well. Was hacked apart from kadiras fast render to handle og tags etc getting inserted onto initial page load only so it, doesn't handle switching between pages at the moment only renders for the initial page load which was what I wanted for seo bots. Also needs iron router to work.
Data gets injected from the server side call to the route in the same way the iron routers fast-render package works
I wouldn't recommend this on its own as some bots like Google will penalise if the content isn't available so having ssr or spiderable for seo bots is defiantly advisable to offer a fully rendered page to the bot, this package was meant as more of a fallback for non ajax supporting bots and those only interested in head tags
I have a website that has menu on every page. But, When I try to add new link on the menu, I
had to add the link on every page individually. So, I used HTML and CSS like this so I just have to edit one thing, but it will just show up as "Home" with "a" tag on it instead of showing "Home" as hyperlink.
<!DOCTYPE html>
<html>
<head>
<style>
.menu:after{
content: "HomeGames";}
</style>
<title>Page</title>
</head>
<body bgcolor="#cccccc">
<center>
<div class="menu"></div>
<center>
</body>
</html>
create a page call
menu.php and put the menu, for example with your code
HomeGames;
then in your index.php
<?php
include('menu.php');
?>
You cannot do that using CSS because the style would have to alter the DOM. CSS is simply not designed and not legitimized to alter the DOM.
CSS content property: is it possible to insert HTML instead of Text?
What you probably should do is using a server-sided pre-processing language like PHP to go with templating.
Another solution would be using jQuery (javascript):
$('.menu').prepend('Home');
That is the wrong way to go about doing something like that. What you really need is to use a language that can make templating possible. I would recommend learning PHP, it makes stuff like that much easier. With PHP, you could have a file called menu.php, with the HTML markup for the menu inside the file, and then just type include "menu.php"; when you need it. PHP (and similar languages) can do so much more than that, you won't regret learning it.
Yikes, that is a really messy way to do it. You don't say weather you can or can't... but I really recommend using PHP for this. Create your menu in a PHP file, say 'menu.php' and include it like this
require_once("menu.php");
You will also have to change the file you put this in from .html to .php. As far as I know there is no performance issues with your method, and while you are solving your problem by putting the link in CSS, this sort of goes against everything CSS stands for. The content attribute is mainly for inserting certain characters to be styled differently.. like a custom bullet or something.
PHP is the best way to go about this, as other have mentioned. Javascript can accomplish this, but it wouldn't break gracefully. If the Javascript didn't work or was turned off, you would be left without navigation.
I thought I would just mention some other possibilities.
iframe:
<iframe src="/nav.html" seamless></iframe>
seamless isn't compatible with older browsers, but you can fix that with css.
SSI:
<!--#include virtual="/nav.html" -->
file would have to be saved as .shtml or the server configured to parse html for ssi
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
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
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".