I am looking for Best practice, Our global master calls multiple js scripts. On page load all scripts get call but not all needed on certain pages. I am using asp.net.
example:
globalmaster:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="website/js/calender.js"></script>
<script src="website/js/home.js"></script>
<script src="website/js/example.js"></script>
**example js also pulls/loads:
<script src="website/js/example1.js"></script>
<script src="website/js/example2.js"></script>
home.aspx:
I only need:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="website/js/home.js"></script>
My main concern is load times. We pull a lot of un-needed js (depending on the page). I understand i could just call individual script tags per page (this would be easier if the site was small).
Related
I'm building a website using a premium html template, part of the template is in Javascript. So in the template I have something like this - its in the 'master template' every page.
//Template JS
<script src="/js/core.min.js"></script>
<script src="/js/script.js"></script>
Also as part of this website I am using an ecommerce plugin and those files also need to be on the page, so something like this:
//Plgin JS
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/underscore.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/App_Plugins/Merchello/client/js/merchello.ui.min.js"></script>
<script src="~/App_Plugins/Merchello/client/js/merchello.ui.settings.js"></script>
<script src="~/App_Plugins/Merchello/client/js/fasttrack.js"></script>
The problem is the JS conflicts when they are all on the page together. is there a way to group the java script files in a way they they can only see whats in that group... like a namespace kind of concept?
Or will I just have to unpick it all?
Using script tags in the same html page no because browser creates only one global space which visible and shared between all scripts.
You can try to use some module bundlers like webpack, requirejs etc.
Or you can use iframe to create a page inside page and move the plugin html and scripts to the iframe.
I'm using this CDN
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
and in parallel two others cdn
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js" type="text/javascript"></script>
If one is working and another not working how can I implement these two or more cdn.
Above both paths are for jquery library so You can not insert jquery library twice in single page, otherwise it will not work.
Include jquery library only once.
What's the best way to load fast javascript in different pages ? Should my custom javascripts go separate for each page or all custom javascripts should be present only in 1 common custom.js file and include this file in footer ?
require_once($header);
include_once($page2.php);
require_once($footer);
<script src="js/custom-page2.js"></script>//separate for each page
require_once($header);
include_once($page1.php);
require_once($footer);
<script src="js/custom-page1.js"></script>//separate for each page
OR
//in footer.php include all js in 1 file
<script src="js/all-custom.js"></script>
If all pages share the same scripts using one script will be better.
If they use different scripts you can cut out what each page DOESN'T need and save on HTTP requests.
Or a mixture of the two.
So...it depends?
Basic rule: If you don't need it, don't load it.
I advise you to create your html page by including in this order :
HTML wrap all
Head (with style in one page for example)
Body with:
Javascript modules
Main HTML DOM
Javascript DOM modifiers and launchers
Same like this :
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script type="text/javascript" src="modules.js"></script>
<div class="body"></div>
<script type="text/javascript" src="functions.js"></script>
</body>
</html>
it's good idea to put all js in header (browser will not render page until all header files are loaded, at least in theory).
browser (proxy etc) will cache your js, so it's not going to be fetched from your site on every request. browser will only check if file has changed.
in most cases browser will keep single connection for all requests, however it still has to ask for every single js file if it hasn't changed. i keep js logic in small seperate files during development, but then i merge them for production.
We have a site created with sharepoint 2013. When I open site from ipad sometimes afew js file not loaded. This cause error in home page.
I included js file in masterpage like;
<script type="text/javascript" src="/SiteAssets/script/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/SiteAssets/script/jquery-ui-1.10.4.custom.min.js" ></script>
<script type="text/javascript" src="/SiteAssets/script/XXX.js"></script>
<script type="text/javascript" src="/SiteAssets/script/AAA.js"></script>
<script type="text/javascript" src="/SiteAssets/script/YYY.js"></script>
<script type="text/javascript" src="/SiteAssets/script/ZZZZ.js"></script>
How can I solve this problem?
I got information about request number is limited with two for js files and js requests blocks all other request.
There were many assets(image,js,css) link in my master page.
So I tried to combine the js files and decrease the number of request for js files in two.
This solved my problem.
Descrease the number of requests as you can.
If I have,
<script src="jquery.js" ></script>
Then any script after this will allows you to use jQuery($) variable. I need to mimic this behavior in javascript. What I need that add my script file,
<script src="myscript.js" ></script>
which will load jquery.js using javascript and any script after this tag will allow you to use jQuery($) variable. I have no control beside myscript.js file. So I need to make sure that jquery.js must be loaded before allowing the browser to run/execute/render next tags.
What you are trying to achieve is not possible. When loading scripts dynamically you need to use callbacks to ensure that those scripts are loaded and use them only inside those callbacks. You cannot have sequential <script> tags in which one of the scripts loads dynamically some other scripts such as jquery and have subsequent scripts use jQuery. Browsers load script tags sequentially and guarantee that they will be loaded in the same order, but once you start injecting dynamic scripts into the DOM the only way to ensure proper load is to use callbacks. Take a look at the following article for more details.
Splitting it up in two parts should work:
index.html:
<html>
<body>
<script src="myscript.js"></script>
</body>
</html>
myscript.js:
document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>');
document.write('<script src="myprog.js"></script>');
myprog.js:
$(function(){
alert('jquery ready');
});