I use JSF 2.3 for developing web application.
As a web developer, I care about the performance of loading speed of a site.
As I was exploring on how I could make my site faster, I encountered this post on Stack Overflow. And the quote from the accepted and most up-voted answer said
stylesheets should always be specified in the head of a document for better performance, it's important, where possible, that any external JS files that must be included in the head (such as those that write to the document) follow the stylesheets, to prevent delays in download time.
I know that JavaScript performs better when it is placed at the bottom of the <body>, but I want to include reCAPTCHA and Google instructs us to place the required external JavaScript before the closing </head> tag.
So, I decided to include the required external JavaScript before the closing </head> tag and after CSS files to boost the performance.
However, my CSS files are declared in a JSF way like <h:outputStylesheet name="css/default.css"/>, and I realized that the CSS files declared this way are always placed after files that are declared in a non-JSF way, which is <script src="https://www.google.com/recaptcha/api.js"></script>. I also considered making the external JavaScript behave in a JSF way by changing <script> to <h:outputScript>, but the <h:outputScript> can only render local scripts as described in this post .
So, the result will always be as follows.
<head>
<script src="https://www.google.com/recaptcha/api.js"></script>
<link type="text/css" rel="stylesheet" href="/project/javax.faces.resource/css/default.css.xhtml" />
</head>
insted of
<head>
<link type="text/css" rel="stylesheet" href="/project/javax.faces.resource/css/default.css.xhtml" />
<script src="https://www.google.com/recaptcha/api.js"></script>
</head>
Maybe I'm thinking too much, and the placement order of link and script doesn't affect the performance that much, but if the loading speed gets faster even a little, I want to follow the better way.
Related
I have some mathjax enhanced WWW pages on Dropbox (e.g., mathjax_test.html), that are rendered like this
while on localhost they are rendered like this
The code of the page is
<html>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<head>
<title>Test of mathjax</title>
<meta http-equiv="content-type" content="text/html;charset=latin-1"></>
</head>
<body>
We analyze the common case in which the dynamic load can
be expressed by a constant load vector \(\boldsymbol r\)
modulated by an adimensional function of time,
\(f(t)\) (e.g., the seismic excitation can be
described in such terms).
</body>
</html>
Is there something that can be done to have mathjax code rendered correctly when the page is fetched from Dropbox?
The problem is that Dropbox only serves content over https but in your source MathJax.js is loaded via src="http://cdn.mathjax.org/....
Browsers block such http calls (see this SO post), hence MathJax is not loaded and accordingly can't render the page.
(You can open the JavaScript console in the developer tools of your browser to see an error message about this.)
I have a project in jsf that is shared by multiple projects. The structure of the project is the same as that mentioned in the answer to the question Structure for multiple JSF projects with shared code
The someTemplate.xhtml mentioned in that structure has a outputStyleSheet statement immediately after the opening
<h:body>
tag :
<h:outputStylesheet name="css/some.css" library="common"></h:outputStylesheet>
The shared project is packaged into shared.jar and is placed into the WEB-INF/lib directory of a client project.
When I make a client file (as part of a client project) that uses the someTemplate.xhtml as a template using
<ui:composition template="/common/someTemplate.xhtml">
the file some.css is not recognized. None of the styles mentioned in some.css take effect.
When I look into the source of the page that is generated, I see these two lines:
<link type="text/css" rel="stylesheet" href="/javax.faces.resource/some.css.jsf" />
<link type="text/css" rel="stylesheet" href="RES_NOT_FOUND" />
I have tried many different combinations of file names and locations for the css file, and the template file as well. But the problem remains the same. In all cases, the styles in some.css were not recognized. I am also curious as to why it says 'RES_NOT_FOUND' in the href. Any help will be highly appreciated.
Thanks
Mahendra
I'm using the linkedIn fork of Dust with Node.JS & Express.
My template hierarchy is having:
1 layout template - The base template
1 Page template - This is the template that will be rendered
Optional number of partials - Might be included by the page template
layout.dust (layout template):
<html>
<head>
<script src="/js/layout.js"></script>
<link rel="stylesheet" href="/css/layout.css">
<script src="/js/home.js"></script>
<link rel="stylesheet" href="/css/home.css">
<script src="/js/sidebar.js"></script>
<link rel="stylesheet" href="/css/sidebar.css">
<script src="/js/widget.js"></script>
<link rel="stylesheet" href="/css/widget.css">
</head>
<body>
{+content}{/content}
</body>
</html>
home.dust (page template):
{>layout/}
{<content}
<div>
{>sidebar/}
</div>
<div>
{>widget/}
</div>
{/content}
When the user visits the website homepage, then home.dust will be rendered, and the user will see a page with the sidebar and some widget. The content of sidebar.dust and widget.dust is irrelevant.
As you can see in layout.dust, there are 4 sets of JavaScript and CSS included in the head section, one for each of the templates and partials. My problem is finding a way to automatically include each asset into the layout (without hardcoding). Ideally I would like to be able to just do this:
{#scripts}
<script src="{.}"></script>
{/scripts}
Different pages may require different assets.
How can I push each script source path into the context of layout.dust?
What do other developers do, do they just hardcode them?
I'd be adding all scripts to the head of the layout without pushing any from the pages that extend from this layout. I'm not sure how knowledgeable you are on javascript minification but it's common practice to bundle all (or most) of your javascript assets into one file and serve them up to the user with a single HTTP request. This speeds up your page a lot; checkout what Google has to say about it here.
It's not hard because there are a few tools to do this for you automatically. You could go for an asset manager or Grunt.
ASSET MANAGER:
There are a few on npm. I found one called Express Asset Manager and another called Asset Pipeline.
GRUNT:
Use contrib-uglify and contrib-concat to handle you minification. There are plenty of others that you should find useful. You can do the exact same thing with all of your CSS too.
Obviously in development you don't really want to try to debug minified code so you can do something like the following:
{?production}
<script src="production-minified-script.js"></script>
{:else}
{#scripts}
<script src="{.}"></script>
{/scripts}
{/production}
where production is a variable passed to your template from process.env.NODE_ENV. To avoid manually adding in each script, you could pass them in as an array by
STILL WANT TO ADD FROM OTHER PAGES?
If you still want to add from other pages, add in a block to your head below your main scripts, something like:
{+otherScripts}{/otherScripts}
I encounter in some web app that some partial view that is used has head element (it loads some Jquery things).
The thing is that with that and the _layout.xml I get this wierd HTML page structure
<head>
...
</head>
<body>
...
</body>
<head>
...
</head>
<body>
....
</body>
doesn't feel right..
What's the best practice to load some .css.js to particular page? is it all done by _layout.xml and bundles?
and in general - only _layout.xml should contain head element? no other view in my solution?
You want only one head. Use layout with sections and add MVC sections in normal pages to add CSS or JScript. See here on basic section usage http://weblogs.asp.net/scottgu/archive/2010/12/30/asp-net-mvc-3-layouts-and-sections-with-razor.aspx. If you want to use partial create a helper to render section from partial see this answer Using sections in Editor/Display templates
We have a web application written with JSF and are trying to add a mobile version to it. Ideally, we'd have a separate folder with templates, CRUD and resources (e.g. jQuery Mobile) and our landing page would be able to choose the appropriate template based on the user-agent attribute of the header.
One way would be to use a scriptlet and redirect to mobile/index.xhtml - end of story, but people don't like scriptlets :D
Another way would be to wrap the content of the landing page (includind the templated parts) in a panelGroup with rendered="#{mobileDetector.isMobile()}", having a backing bean perform what the scriptlet would have done otherwise. But I think it kind of cripples the templates, plus it doesn't apply to the head section.
So - is there a better way?
Either use a separate subdomain, e.g. mobile.example.com for mobile users and (www.)example.com for desktop users, and/or sniff the user agent. There are public APIs available on:
http://user-agent-string.info
http://www.useragentstring.com
Alternatively, you can use CSS to hide/change parts of the the HTML markup based on the media type.
<link rel="stylesheet" href="css/desktop.css" media="screen,projection">
<link rel="stylesheet" href="css/mobile.css" media="handheld">
<link rel="stylesheet" href="css/print.css" media="print">
<link rel="stylesheet" href="css/iphone.css" media="all and (max-device-width: 480px)">
<link rel="stylesheet" href="css/ipad-portrait.css" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
<link rel="stylesheet" href="css/ipad-landscape.css" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">