Браузерные API, без которых не стоит жить

DOM

• новые методы интерфейсов 

  ParentNode

  и 

  ChildNode

• Element#matches, Element#closest
• Node#contains
• новый интерфейс 

  EventListenerOptions

• и многое другое...

ParentNode

appendChild(node) => append(...nodes)

ParentNode

prepend(...nodes)

ChildNode

insertBefore(newNode, referenceNode) => before(...nodes)

ChildNode

after(...nodes)

ChildNode

replaceNode(newNode, oldNode) => replaceWith(newNode) 

ChildNode

removeChild(node) => remove()

Element

matches(selectors: string)

Element

closest(selectors: string)

Node

contains(node: Node)

EventListenerOptions

Поддержка браузерами:

Web Animations API

Краткая история

• Декабрь 2005 – Synchronized Multimedia Integration Language (SMIL 2.0) - Черновик Animation Module
• Март 2009 – Черновик CSS Animations Module Level 3, Черновик CSS Transitions Module Level 3
• Июнь 2014 - Черновик Web Animations 1.0

Демо

Synchronized Webpack

Плюсы

• удобство управления анимациями
• простота динамического создания анимаций
• оптимизации производительности
• возможности дебага

Минусы

• малая поддержка в браузерах (но есть полифил!)

Объявление анимаций

CSS

@keyframes slowspin {
  0% {
    transform: rotateX(-33.5deg) rotateY(45deg)
  }
  90%,to {
    transform: rotateX(-33.5deg) rotateY(225deg)
  }
}

Web Animations

const slowSpin = [
  {transform: 'rotateX(-33.5deg) rotateY(45deg)'},
  {transform: 'rotateX(-33.5deg) rotateY(225deg)', offset: 0.9},
  {transform: 'rotateX(-33.5deg) rotateY(225deg)'}
]

Объявление анимаций

CSS

animation: slowspin 5s ease-in-out infinite;

const options = {
  duration: 5000,
  easing: 'ease-in-out',
  iterations: Infinity,
}

cube.animate(slowSpin, options)

Web Animations

Популярные сценарии использования

Популярные сценарии использования

Поддержка браузерами :(

Полифил (1.5k commits, 30k+ LOC):

Support: Chrome 56+, FF 27+, IE10+, Safari 9+
https://github.com/web-animations/web-animations-js

Mutation Observer API

Краткая история

2000 – Появление Mutation Events (DOM Level 2)

2011 – Предложение прекратить поддержку Mutation Events

2014 – Появление Mutation Observer API

Демо

Назойливый попап

Пример использования

const observer = new MutationObserver(callback)

observer.observe(node, options)

childList

(boolean)

subtree

(boolean)

attributes

(boolean)

Поддержка браузерами :)

Intersection Observer API

Демо

Ленивая загрузка изображений

Пример использования

const observer = new IntersectionObserver(callback, options)

observer.observe(target)

Демо

Виртуальный список

Поддержка браузерами

Performance API

domInteractive

domComplete

performance.navigation.type

• TYPE_NAVIGATE = 0

• ​TYPE_RELOAD = 1

• TYPE_BACK_FORWARD = 2

• TYPE_RESERVED = 255

performance.getEntries()

Демо

Декоратор для измерения производительности

Ссылки

• Спецификация DOM
• Спецификация Web Animations
• Спецификация Mutation Observer Article (MDN)
• Спецификация Intersection Observer
• Спецификация Performance Timeline
• Спецификация Navigation Timing