SPECIAL OFFER: ENJOY 3 MONTHS OF SHOPIFY FOR $1/MONTH SPECIAL OFFER: ENJOY 3 MONTHS OF SHOPIFY FOR $1/MONTH SPECIAL OFFER: ENJOY 3 MONTHS OF SHOPIFY FOR $1/MONTH SPECIAL OFFER: ENJOY 3 MONTHS OF SHOPIFY FOR $1/MONTH SPECIAL OFFER: ENJOY 3 MONTHS OF SHOPIFY FOR $1/MONTH SPECIAL OFFER: ENJOY 3 MONTHS OF SHOPIFY FOR $1/MONTH SPECIAL OFFER: ENJOY 3 MONTHS OF SHOPIFY FOR $1/MONTH SPECIAL OFFER: ENJOY 3 MONTHS OF SHOPIFY FOR $1/MONTH SPECIAL OFFER: ENJOY 3 MONTHS OF SHOPIFY FOR $1/MONTH SPECIAL OFFER: ENJOY 3 MONTHS OF SHOPIFY FOR $1/MONTH
optimize javascript

Tips to optimize JavaScript for speed up website Magento 2

1. If possible alternative loop Each with While or For

var arr = new Array ();
for (var i=0; i<9999; i++) {
arr[i] = 0;
}

console.time('native');
var l = arr.length;
for (var i=0;i<l; i++) {
arr[i] = i;
}
console.timeEnd('native');

console.time('jquery');
$.each (arr, function (i) {
arr[i] = i;
});
console.timeEnd('jquery');

2. Use join alternative for + when merge string

var foo = "";
foo = foo + bar;
foo += bar;
[foo, bar].join();

3. Assign value of object or funcion to variable before use in loop

for (var i in App.responsive) {
console.log(App.responsive[i]);
}

var vp = App.responsive;
for (var i in vp) {
console.log(vp[i]);
}

4. Use Observer intersectionObserver run task when in dome when visible


This Observer can use run slider, load ajax when this part visible

var el = document.getElementById(‘#slider’);
var observer = new IntersectionObserver(function (entries) {
entries.forEach(function(entry) {
var slider = el.slick(options);
});
}, );
observer.observe(el)

5. Optimize jQuery

a. Alternative $(“document”).ready() with $()


$("document").ready(function () {
// The DOM is ready!
// The rest of the code goes here
});

Alternative with

$(function () {
// The DOM is ready!
// The rest of the code goes here
});

b. DOM manipulation

$("#element").attr("title", $("#element").text());

$("#element").css("color", "red");

$("#element").fadeOut();

Alternative with


var $el = $("#element");
$el.attr("title", $($el.text());

$el.css("color", "red");

$el.fadeOut();