JavaScript ?? ???? ??? ??? ??? ????? ??? ??? ??? ????. ??? ?? ?????. 1. DOM ??? ??? DocumentFragment ?? ????? ?? ?? ????? ??????. 2. ??? ? ?? ??? ?? ??? ????? ??? ? ??? ???? ?? ???? ?????. 3. ???? ??? ???? ??? ?? ???? ?? ??? ???? ??? ?? ??? ?????. 4. ??? ??? ???, ??? ???? ? ??? ????, ???? ??? ??????,???? ?? ??? ??????. 5. Settimeout, requestIdleCallback ?? ? ??? ?? ??? ??? ???? ?? ??? ??? ??? ?? ??? ?? ??? ??? ??????. 6. ?? import ()? ???? ??? ?? ? ?? ??? ???? ?? ?? ??? ????. 7. ?? ??? ??? ??? V8 ???? ???? ???? ??? ???? ??? ??? ????? ?? ???? ??? ???? ????. ??? ??? ?????? ?? ?? ? ?? ???? ?? ????? ?? ?? ???? ????? ??? ??? ?? ?? ??? ?????.

JavaScript ?? ???? ??? ? ??? ???? ?? ??? ? ???? ??? ??? ??? ??? ??? ??? ????. ??? ??? ??? ????? ?? ????.

1. DOM ??? ???????

DOM? ????. ?????? ??? ??? ????? ???? (???) ? ? ???? ?? ??????, ?? ???? ??? ????????.

?? ??????? :

• ?? ? ????.
• DocumentFragment ? ????? HTML ???? ?????? ??????.
• ?? ??? ????? ?? ?? DOM ????? (? : React)? ??????.

 // ? ?? : ???? DOM? ??? ????
for (i = 0; i <eifts.length; i) {
  const el = document.createelement ( &#39;li&#39;);
  el.textContent = ?? [i];
  List.AppendChild (EL); // ???? ?? ?????
}

// ? ?? : DocumentFragment? ??????
const fragment = document.createDocumentFragment ();
for (i = 0; i <eifts.length; i) {
  const el = document.createelement ( &#39;li&#39;);
  el.textContent = ?? [i];
  Fragment.AppendChild (EL);
}
list.appendChild (??); // ??? ?? ??

2. ?? ???? ?? ? ???

scroll , resize ? input ? ?? ???? ?? ?? ? ?? ? ? ????. ? ????? ??? ??? ???? ??? ?????.

• ??? : x ?? ??? ?? ? ?? ??? ??????.
• ?? : ???? x millionseconds? ??? ?? ? ?? ? ??????.

 ?? ??? (func, Delay) {
  inthrottle? ??;
  return function () {
    if (! inthrottle) {
      func.Apply (?, ??);
      inthrottle = true;
      settimeout (() => inthrottle = false, delay);
    }
  };
}

// ??
window.addeventListener ( 'resize', ??? (handleresize, 100));

??? :

• ?? ?? ?? (??)
• ?? ??? (???)
• ??? ? ?? ???

3. ???? ?? ? ?? ??? ??????

?? ??? ???? ???? ?? ????. ?? for...in ?????. ? ??? ??? for ??? for...of .

?? ?? ?? ??? ?? ????? ?? ????.

• map , filter , reduce ? ????? ??? ??? ????. ??? ??? ??? ?? ???.
• ?? ??? ?? ???? for ?? while ??????.

 // ? ??? ?? ???
for (i = 0; i <arr.length; i) {...}

// ?? ?? ?? ??? ?? ???
arr.foreach (item => {...});

? : ??? ?? ??? ?? :

 for (i = 0, len = arr.length; i <len; i) {...}

4. ??? ??? ?????

JavaScript?? ??? ??? ??? ??? ???? ?? ? ? ????.

• ??? ???? ???? ?? ?? ????.
• ???? ?? ?? (?? ?? ?)? ?? ??? ?????.
• ??? ??? ???? ?????.

???:

• ?? ??? ???? ?????? : elem.removeEventListener() .
• null ? ?? ???? ?? ??? ??????.
• ???? ?? ?? (??? ?)? ???? ??? ??????.

 // ?? : ?? ??? ?? ? ? ????
button.adeventListener ( 'click', () => {...});

// ?? : ?? ?? ??? ??
?? handleClick () {...}
button.addeventListener ( 'click', handleclick);
// ???:
button.removeEventListener ( 'Click', HandleClick);

5. ??? ???? ???????

?? ?? ??? ?? ???? ???? UI? ??????. ??? ???? ??????.

• setTimeout ?? setImmediate ??? ?? ? ????.
• ?? ??? ?? ??? ?? requestIdleCallback .
• CPU? ?? ????? ? ??? (? : ?? JSON? ?? ??).

 ?? processlargearray (arr, ??) {
  const chunksize = 1000;
  index = 0???;

  ?? processChunk () {
    const end = math.min (Index Chunksize, arr.length);
    for (i = index; i <end; i) {
      // ???? arr [i]
    }
    ??? = ?;

    if (index <arr.length) {
      settimeout (ProcessChunk, 0); // ui? ??
    } ? ?? {
      ?? ();
    }
  }

  ProcessChunk ();
}

6. ??? ?? ? ?? ??

??? ????????. Dynamic import() ???? ??? ?? ??? ??? ??????.

 // ??? ???? ?? ????????
button.addeventListener ( 'click', () => {
  import ( './ heavymodule.js'). ?? ?? (module => {
    module.render ();
  });
});

????? ???? ??? ??? ??? ?? ???.

7. ?? ?? ??? ???? ??? ???? ????? (v8)

V8 (Chrome, Node)?? ??? ?? ?? ????? ??? "??? ???"? ???? ??? ??????.

???:

 ?? ??? (??) {
  this.name = ??;
}
?? ??? (??) {
  this.role = 'admin'; // ?? ?? = ?? ??? ???
  this.name = ??;
}

??, ??? ??? ??? ???????.

?? ?? ? ??? ???? ????.

 const obj = {};
obj.x = 1;
obj.y = 2; // ?? ?? - ??

????:

 const obj = {x : 1, y : 2};

????? ??? ??? ???????. DOM ???? ??? ??? ???? ???? ??? ?? ? ??? ??? ??????. ???? ??? ?? ???? ??? ??? ???? ?????.

? ??? ?? ???? ?? ??? ?? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!