How to increase the scripts downloading faster or decouple with respect to the javascript call of bootstrap

Question

0.00/5 (No votes)

See more:

hi there,
I am currently working on aspnet mvc project. we are almost done with the requirements but the nightmare of mine is to improve the performance of the system.
And after tried a lot of possibilities I came to knew that the javascript calls in the code i.e document.ready(function(){} stopping the screen to render where the required scripts are downloading first then only the screen is starting to render.
This is my assumption only ... can anybody help me out of this ...

thanks in advance.

What I have tried:

$(document).ready(function () {
//$('#idTourDateDetails').datepicker({
// dateFormat: 'dd-mm-yy',
// maxDate: -3650,
// changeMonth: true,
// changeYear: true,
// yearRange: "-100:+0"
// //,
// //altField: "#idTourDateDetailsHidden",
// //altFormat: "yy-mm-dd"
//}).on('changeYear', function (e) {
// // Revalidate the date field
// alert("came");
// $('#defaultForm').bootstrapValidator('revalidateField', 'idTourDateDetails');
//});

$('#date').datepicker({
dateformat:"dd/MM/yyyy",
startDate: "01/01/1950",
endDate: new Date(),
autoclose:true
}).on('changeDate', function (e) {
// Revalidate the date field
$('#defaultForm').bootstrapValidator('validateField', 'DateOfBirth');
});

Posted 14-Feb-16 23:47pm

srinivas vanka

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sinisa Hajnal · Answer 1 · 2016-02-15T00:39:00

Solution 1

Javascript will indeed pause your screen loading if it is encountered at the top of the page.

You should load your CSS in the header or near the top and your javascripts as close to closing body tag as possible so that the engine renders the structure of the document (outline) first and then fills it with data.

It helps somewhat if you minimize styling and script files.

Finally, try to keep javascript DOM additions to a minimum so that scripts fill the data, but with the layout already in place.

Posted 15-Feb-16 0:39am

Sinisa Hajnal

Comments

srinivas vanka 15-Feb-16 7:37am

Thanks for your reply,,
Actually I am following the approach properly as putting the css on top and scripts at the bottom of the page.

I am giving the coding style over here

<html>
<head>


</head>
<body>
<form>
<input name="input1">
<input name="input2">
<input name="input3">
</form>

<script>
$(document).ready(function(){
here Iam putting the validations on the input fields with the help of bootstrap
like

$('#defaultForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {

},
fields: {
input1: {
verbose: false,
message: 'The username is not valid.',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty.'
},
stringLength: {
min: 6,
}
});

});
</script>
</body>

</html>

so the inputs which were linked with bootstrap validators are not rendering until the scripts are being loaded onto browser.

:( it is taking morethan 6 secs to load

thanks