async function asyncFn() {
console.log('asyncFn start'); // 2
await Promise.resolve(); // микро 2
console.log('asyncFn finish'); // 4
}


function fn() {
console.log('hello'); // 1

setTimeout(function() {
console.log('setTimeout1'); // макро 1 // 6
}, 0);

new Promise(function(resolve) {
resolve();
}).then(function() {
console.log('then1'); // микро 1
}).then(function() {
console.log('then2'); // микро 3 // 5
});

asyncFn()

console.log('bye'); // 3
}

fn();

// ==============


setTimeout(() => console.log('setTimeout'), 0); //макро 1
function myAsync(start = 0) {
console.log(start);
return Promise.resolve(start + 1).then(myAsync);
}
myAsync(); // 0, 1, ..., n, ...

/*
== 200 OK - server
1. parse HTML
<link rel="preconnect" ...>
<style src="./style.css" />
2. DOM

3. CSSOM r

4. DOM + CSSOM = Render Tree

5. Layout - позиционирование, + layers (+ z-index(возможно в конце))

6. Painting - цвета

==если что-то поменялось
бэкграунд - painting

==script -
*empty*
async
defer



HTTP:



GET
POST
PUT
PATCH
DELETE

(OPTIONS, HEAD)



COOKIE:

path: куда прикреплять куки /home


https://code.wb.ru

secure

httpOnly


fetch(.., {
credentials: true

})

Cookie:
*/


// ===============




const node = $('.js-node');

node.addClass('node').toggleClass('item')
.removeClass('node')
.css({
color: 'red',
paddingTop: '10px'
})
.html('<li>hello</li>');

// элементов несколько
// аффектятся все

class Nodes {
constructor(elements) {
this.elements = elements;
}

addClass(className) {
this.elements.forEach(element => {
element.classList.add(className);
});
return this;
}

removeClass(className) {
this.elements.forEach(element => {
element.classList.remove(className);
});
return this;
}

css(style) {
Object.entires(style).forEach(entries => {
const [styleName, styleValue] = entries;
this.elements.forEach(element => {
element.style[styleName] = styleValue;
});
})

return this;
}

html(text) {
this.elements.forEach(element => {
element.innerHTML = text;
});

return this;
}
}

function $(selector) {
const elements = document.querySelectorAll(selector);
return new Nodes(elements);
}