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);
}