What is the most effective way of writing JS codes for better web performance?

Question

I always feel unconfident when I write my JS(jQuery) here. Is there a better way to write JS code to have better performance on the web?
This is how I write:
$(document).ready(function(){
//Entire code goes here
});

Answer 1

To increase your web app performance, you have to follow the six step below:
1. Reduce activity in loops (Statements or assignments that can be placed outside the loop will make the loop run faster) :
e.g.: var i, length = arr.length;
for (i = 0; i < length; i++) { ... }

2. Reduce DOM access (Most important for a large website - If you expect to access a DOM element several times, access it once, and use it as a local variable) :
e.g.: var demo;
demo = document.getElementById("demo");
demo.innerHTML = "Hello";

3. Avoid unnecessary variables (Don't create new variables if you don't plan to save values) :
e.g.: Use → document.getElementById("demo").innerHTML = firstName + " " + lastName
// instead of :
var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;

4. Load scripts in last (Putting your scripts at the bottom of the page body lets the browser load the page first - In this case, all parsing and rendering activity might not be blocked).

5. Avoid using "with" (Avoid using the "with" keyword. It has a negative effect on speed. It also clutters up JavaScript scopes. Note that the with keyword is not allowed in strict mode).

6. Always declare local variables instead of a global variable (Local variables must be declared with the var keyword, otherwise they will become global variables).

Answer 2

For better performance, you should use pure JavaScript.

Answer 3

if its only performance you seek then, heres few

# Place javascript at the bottom of the page.

# minimize multiple http requests,

# use NodeLists directly, coz they are live.

# avoid using eval( ), global variables,

# try to use primitive function calls as much as possible coz they are optimized to run faster by browser.

# XMLHttpRequests (AJAX)are Awesome so must be used as much as possible.

# traditional for loop is always faster than,
- for.. in loops
- forEach loops

# inline functions are good

# use of memoized functions ( functions that operate with same values and return similar results should cache the results)

# always use async coding for time taking stuffs, so that they dont block the thread

# use web workers to do heavy processing on separate threa

WARNING: Browser does a ton of optimization for commonly occuring Javascript constructs, so its hard to tell why it was fast here and slow there.

optimization differs with mobile devices, browsers , javascript versions

Answer 4

Use this :)
http://vanilla-js.com

Benchmarks speak for themselves.

Answer 5

For a real web page, you don't really need to wait for the document to be ready if you put the js code after the body of the html file

Answer 6

For the code that you provided, the correct is :
$(document).ready(function(){
// Entire code goes here
});

Answer 7

Correct code :
$(document).ready(function() {
// jQuery code here
})

or

$(function() {
// jQuery code here
})

Answer : You missing the function()

Answer 8

José Ngoyi // Zohir Sorry I mistyped the code.

Answer 9

using pure/vanilla JavaScript is the best way to achieve fast website performance!
also minimize the use of value incrementing "setInterval()"s which does not have an endpoint.

Answer 10

Check this out : https://code.sololearn.com/Wh4jEPNY5UR7/?ref=app

Answer 11

Coder-One
If you can't answer a question, you can just leave it.

Answer 12

can I get a tutor please ?

Answer 13

I always write my js code externally and add an onload function to the html page so when the page start loading it loads with the js

Answer 14

hey guys try this programe
https://code.sololearn.com/c2UxNkfxB0SA/?ref=app

Answer 15

I used jquery because it is easy to write for example I always keep this acronym in mind (SAf) =sélection, action, function

Answer 16

Follow my example below for better JS performance:
<body>
<div id="div1">

</div>
<input type="text" id="textInput"/>
<script>
textInput.oninput=function(){
div1.innerHTML+=textInput.value;
}
</script>
</body>

Answer 17

Some tips http://desalasworks.com/article/javascript-performance-techniques/

Answer 18

Русский чат по разным языкам.

Answer 19

Thanks Md amirozzaman ! :)

Answer 20

jquery and angular both are make effective the web... you should write js with both jquery and angular js