i'm starting with requireJS and need some help to proceed with its implementation.
My site is built following the defaults:
header.html (always the same, containing the requiredjs script tag)
$pageMain (always variable - $pageAbout, $pageContact...)
footer.html (always the same)
I need to load specific js file in different pages from my site, but i have only one header which contains the tag to set my required files.
<script data-main="js/main" src="js/lib/require.js"></script>
When my page is $pageAbout i need to load $pageAbout.js instead $pageMain.js
I'm still not able to do this.
Checking the https://github.com/requirejs/example-multipage# i understood how it works, but in my case, i coudn't do it because i specify the script tag only once in the header.html
Any suggestion ?
I don't know if i was clear in my question. Please let me know to better explain.
There are various solutions here, depending on what you can easily edit.
You could change the script tag in the header, based on the current page. I am assuming from your description that this is not possible.
If you have to always load the same js/main script, you could use that as a switch between different page-specific modules:
// js/main.js
define(function() {
var pageId = getPageId();
require('js/' + pageId);
});
This depends on being able to get the page id when the header loads - either through a JS variable you can set before the header is loaded, or by parsing the URL, or through some other means.
You can simply drop the script tag from the header and include it in the variable body of your page. Script tags can appear anywhere in the document.
You could drop the data-main attribute from the header script tag (so that the header just loads the RequireJS library), then have a script tag in your page body to load the page-specific module:
<script> require('js/pageAbout'); </script>
Any of these should work - the last two are probably simplest. The RequireJS docs are very prescriptive, but there are many paths to a working implementation - you don't have to do it the recommended way.
Related
I noticed that Angular puts its script files in index.html after the <app-root> element in the <body> part of the HTML. I wonder why it is placed there and not at the beginning of the <head> section.
This would decrease page loading time, in my opinion, because it would lead to Angular's code being loaded before all the other Scripts that might be in <head> (for example Google Tag Manager stuff). This way, the page rendering could start while the other libraries are still loading, leading to a faster rendering and increased SEO performance.
I could not find an option where Angular injects its code in angular.json, so I guess I'm missing something here.
If I'm not wrong, where is the option to include Angular's script tags in the head section of index.html?
I'm using Angular 12.1.3 and Node 14.17.3.
You can take a look at the index.html file in the source files and you'll notice it's actually almost empty.
The body actually contains an app-root element which only serves as a bootstrapper (the application takes place on this element).
As the scripts need this element to exist before they execute, they need to be placed after it.
I have the following problem.
I have a typo3 page without any template I made by myself, but it gets in some way the style and the behavior of the other pages (I mean navigation, footer and so on). Now I have written some HTML inside the page by creating an HTML element.
In this HTML element, I included some js-code, which uses jQuery. The problem is, that the page loads the jquery at the footer and my scripts are loading before (in the HTML element). So my script does not recognize jQuery. How can I add my scripts at the whole end of the page? I know, that it has something to do with templates, but when I create a new template for the page, the whole content disappears.
Would be nice to get any help.
Cheers,
Andrej
It is usually good practice to read all your JS from a single file placed in the footer of the page. Add this to the setup section of your page template:
page.includeJSFooter.scripts = fileadmin/js/scripts.js
Then remove the JS from the HTML template and put into this file. This file could hold all your custom JS and possibly even all the libraries you use on the page (if you are not loading them from a CDN).
Bonus: the JS doesn't have to be re-loaded on every page view but can be read from cache.
For reference: https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#includejsfooter-array
I hope by template you mean a template record where you store your TypoScript? Otherwise this answer is not what you are looking for. :)
You can just add an extension template on your page that only adds to the rest of the TypoScript but does not override anything. To do so, go to the template module, choose "info/modify" in the dropdown at the top and use this button
Explanation: an extension template has the checkboxes for clearing the constants and the setup not checked and will not mess with the rest of your site's TypoScript:
Should the RequireJS script tag be located in the <head> or bottom of an HTML page?
<script data-main="resources/js/main" src="require.js"></script>
I have seen reputable sources place the RequireJS script tag in either position, but no reputable source seems to explicitly say where the ideal location is.
Arguments for placing the tag in the head would be that RequireJS could already begin loading and executing dependent scripts asynchronously while the page continues loading (though this gain may be minuscule).
Arguments for placing the tag at the bottom of the page would be that checks for the DOM being ready wouldn't be needed within modules (though not including this check may cause problems if the module is used in a third-party system that loads the script in the <head> tag).
General best practice is to always place your script at the bottom.
You may have seen people including it in the HEAD as it is not doing a big difference.
I'd recommend in the bottom, because as you'll want to build your scripts before production, you'll end up loading all your script in the head otherwise.
Note that if you're running a "single page application", then it really doesn't matter as chances are your body will be empty - or almost empty.
Put it at the bottom of the page, it's better for performance and if you're planning to manipulate the page (as expected) then you want it to load the page first anyway.
Best practice, with few exceptions, is always:
Load styles (css)
Load structure (html)
Load scripts (functionality)
I'm working on a project with a lot of templates and about 1MB of js on page load, and putting requireJS at the top of the page has it's perks. Require can start scheduling and parsing js while the rest of the html downloads. Also, we have noticed that, this allows us to 'require' css in the page before all of the html comes down.
I did find one caveat today, where script tags might execute twice if require is loaded in the page at the head/ before the script tag. I'm trying to create an example to debug.
I have the optimisation problem — my site uses 2 (pretty large) javascript resources:
application.js (minimised jquery, jquery-ui, underscore-js and some shared scripts, 120KB total)
controller-specific file (some modules required for the page + interactions, 4KB total)
I have some scripts in the views that format/convert markup with JavaScript (dependable on both jQuery and my controller-specific JS code) so I need to wait either for $(document).ready or head.ready and it makes the part of website invisible to prevent the flash of unstyled content :(
Now my question comes: should I use head.js for it or just stick with the "before " scripts? Are there any smart ways to speed up page loading time in this case?
Update:
Here's the part of the code (see versusio.com for full code, landing page):
<html>
<head>
... usual stuff
<link (css stuff) />
<script src="head.js"></script>
<script>
// Here some global variables are set like cache keys, actual locale code etc., not dependable on jQuery or any other JS code from the JS assets
</script>
</head>
<body>
... page content
<div id="search">!-- here some code with the "display: none" style to prevent flash of unstyled content</div>
<script>
// Here is code that positions and processes some styles and adds some interactions to the #search div
Application.Position.In.Center($(#search), $(document));
</script>
... more page content
... another "display: none" div and accompanying script
... rest of the page content
<script type="text/javascript">head.js( { 'application': 'application.js' }, { 'landing': 'landing.js' } );</script>
</body>
</html>
First ask yourself this question: Do i really need all this javascript loaded when a user visits my page?
When first loading your website, you actually only need the autocomplete-functionality, the rest isn't needed on load. So you could go for a seperated approach. My advice would be the following:
Build this page without any javascript-functionality and then enhance it with javascript, get rid of the inline styles and scripts.
After you have done this, load the scripts you actually need, you can do this in the head or just before the end of the body
Use a CDN for Jquery, jquery-ui, underscore and the other libraries. If a user already loaded these libraries from another website, you have a performance bonus.
Last of all, already asynchronously load the javascript needed later on, so the user already has the scripts when he hits the compare-button.
Small tweaks:
Use a tool like ySlow or the networking graph in your favorite browser to look for any bottlenecks. It looks like gzipping is not enabled, try and do that.
Do you really need to load the facebook/google/twitter/third-party stuff in the head or could that be done when the page is loaded?
Is the server as fast as possible? It looks like it takes almost halve a second to get the HTML.
I hope i helped you out for a bit, good luck with the performance tweaking!
You could put mask layer that cover all pages with fixed style, then hide or destroy it when loading process finished. That way there's no need to hidden each content, instead it will be covered with mask div
I think, put a load scripts on the bottom of the page (as the last tags in the body). That javascript it will not block the drawing page, like now.
Saw the view source of your page.
There are some inline scripts which can block rendering. Such as this
Application.i18n = {"comparisons":{"off_ratio":
More here. http://calendar.perfplanet.com/2012/deciphering-the-critical-rendering-path/
Quick way: Moving them to the end of body tag.
Best way: They should be loaded as external scripts - with very good cache headers.
May be, you are doing that as - you have to load those messages based on user locale - You can create separate JS files for every locale during your build process - an they can be linked / loaded as external JS files with good cache headers
Another reason, why you might need inline scripts - to take note of the initial loading time. which is not necessary - as the modern browsers provide us with perfomance timings.
http://www.html5rocks.com/en/tutorials/webperformance/basics/
Moving it as an external script file - will also be good for your site security - in case, if you will be trying CSP.
http://updates.html5rocks.com/2012/11/Content-Security-Policy-1-0-is-officially-awesome.
Defer / async attributes.
ga.js is set with async attibute - but other JS files can be tried with defer attributes. Also, as a general rule of thumb, delay loading resources as far as possible,load only when it is needed.
window.onload - $.ready
Starting your script execution with $.ready is always going to be better than window.onload.
because, window.onload fires only after all the images, inner iframes gets loaded.
The following links might be useful.
https://developers.google.com/speed/
The Progressive JPEGs post in http://calendar.perfplanet.com/2012/
http://blog.chriszacharias.com/page-weight-matters
http://www.igvita.com/2013/01/15/faster-websites-crash-course-on-web-performance/
A lot of further optimisations are possible. All the best.
I have a javascript for a specific page that I do not wish to be loaded in my header section. Is it possible to load it in the section of the HTML.
Currently I have all my js code inside the but I want to remove it to a seperate js file that I can load.
I tried using this but it did not work.
<script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.5.1.min.js"></script>
Thanks
Q1 : I have a javascript for a specific page that I do not wish to be loaded in my header section. Is it possible to load it in the section of the HTML.
-Yes you can load javascript any where you want, if writing inline code then make sure you add script tag around your code.
-also you can request files like in body
Q2: Currently I have all my js code inside the but I want to remove it to a seperate js file that I can load.
-- no problem in that, thats even better practice.
Q3 Requesting external file
to request external files you write below written fashion
<script src="http://file_name.js" type="text/javascript"></script>
It's not only possible (ref), it's frequently a good idea.
Putting your scripts as late in the page as possible, which frequently means just before the closing </body> tag, means the browser can parse and display your content before stopping to go download your JavaScript file(s) (if external) and fire up the JavaScript interpreter to run the script (inline or external).
Putting scripts "at the bottom" is a fairly standard recommendation for speeding up the apparent load time of your page.
Yes it is possible. Try and see.
For debugging, hardcode the jquery full path.
It is sometime recommended to load it at the end of the of the body, to make the main content of the page load faster.
Is it possible to load it in the section of the HTML.
Yes.
From the spec:
<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->
SCRIPT is among the elements that may be a child of the BODY elements. Numerous other elements may also have SCRIPT children.
<script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.5.1.min.js"></script>
When I run echo base_url() I get my the hostname of my server. This would result in a URL such as example.comjs/query-1.5.1.min.js. You probably should drop that PHP snippet entirely and just use: src="/js/jquery-1.5.1.min.js" which would resolve to http://example.com/s/query-1.5.1.min.js.
Yahoo engineers recommendation for higher performance is to include your scripts at the end of your HTML, just before </body> tag. Therefore, it's even better.
To see where the problem is, you gotta first make sure that your js file is loading. User Firebug and go to scripts tab. Do you see your script? If not, then something is wrong with your path.
it should work...
Did you try to view the generated source and see if the PHP code indeed generated the right path?
beside that, it is recommended to load jQuery from a CDN such as google's :
https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js