I have converted a web application over to spring boot mostly successfully. The only issue I have encountered is that after login (using spring security) I am supposed to be redirected to a page that contains a link to a local version of a font-awesome.css. However, the first time I login the css file is displayed rather than the actual html page. If I step back and then step forward, the page is properly displayed from then on. My question is what could possibly be causing this behavior?
Here is the link to the css from the html page (which is in the head section):
<link rel="stylesheet" type="text/css" href="/css/font-awesome.css" th:href="#{/css/font-awesome.css}"></link>
I also tested by removing the 'th:href...' attribute but the behavior persists.
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.
I am really unsure what is causing this or whether it is only local to my computer (since I am running the website off by computer -- still in development).
Upon navigation to another webpage, the webpages html file name appears on the browser tab for a second before the title appears. Eg: "contact.html" will appear for a second and will change to my Title which is "Contact"
Any one have any ideas as to why this is happening?
this is normal. and you should not worry about it. but a few points might help :
put title tag on almost top of other tags inside of head
<head>
<title>Page Title</title>
...
</head>
and check your browser network throttling speed. it might be changed already due to developing issues. set it to "No throttling". { on google chrome press CTRL+SHIFT+I and go to Network tab, it's there. }
how do you open your files? are they on local server or not? if not, install a local server like xampp for php or iis for asp. in browser the url should be something like http://localhost/mysite/myfile.html
or http://127.0.0.1/mysite/myfile.html
these methods should solve your problem.
My site has a quiz, and after each question is answered, there is a 'next' link. Since most of the time the user will go to the next question, I'd like to prerender the page.
So I put this in the <head>
<link rel="prerender" href="/">
and this in the <body>
Next
I tried it in Chrome and Firefox and it's not working. What could I be doing wrong?
I also tried putting the full address in the link
<link rel="prerender" href="https://example.com">
but that didn't work either.
It looks like you are using XHMLHttpRequests. According to this doc: https://www.chromium.org/developers/design-documents/prerender a XHML Post request will cancel the prerender and stop it from being swapped in.
I imagine this will be difficult to solve as the server will require the post data from the user before it can safely render the page. So, in this situation the prerended document will always be discarded and a new document will be rendered.
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
I am writing a web application for use by multiple organizations which requires custom styling depending on which customer is using my page (the page is "branded" for different companies).
Basically, I have a database which stores some information such as primary color, background color, and company logo image, all of which vary depending on who is using my site.
When someone comes to my site, I look up their styling information and put it in session scope as a parameter named "brand"
I have a jsp called brandCss.jsp which does things such as:
#logo
{
background-image: url( '${brand.logoImage}' );
}
body
{
color: ${brand.primaryColor};
}
etc.
Then in the <head> tag of my page, I link to my JSP as if it were a css file:
<link type="text/css" href="/brandCss" rel="stylesheet"/>
Using the spring framework, I map a request for /brandCss to my brandCss.jsp view, so that this request returns my JSP as a view.
This works great in IE--someone hits my page and my server code goes off and finds the branding (styling) information they need to see, then splats it into my JSP which is then treated as a css file.
However, in Firefox/Chrome, my brandCss.jsp stylesheet is not used--my page IS pulling down the jsp correctly, and it gets exactly the same information as IE, but for some reason the browser chooses to ignore the styling in it.
Anyone have any idea why this or how to make Firefox treat my JSP like css?
Make sure your page is setting the Content-Type to text/css. If the page isn't being served with the correct Content-Type, I would suspect Firefox would ignore it. This is easy to check with the help of something like the Firebug (see the Net tab for the files that are requested).
I'm not exactly sure how you would go about setting the Content-Type in Spring, or from a Java web app, but that is what I would check first.