Czy zdarzyło Ci się zastanawiać się nad ilością pracy wykonywanej w ramach usługi porównywania cen? Zmieniasz singla i nagle cała witryna ma inny układ. Jest swego rodzaju magia. Do tej pory nasza społeczność programistów internetowych ale nie zdołał dostrzec magii. A co, jeśli chcemy wymyślić dzięki naszej magii? A jeśli chcemy zostać iluzjonistą?
Czas na Houdini!
Grupę zadaniową Houdini tworzą inżynierowie z Mozilli, Apple, Opery Microsoft, HP, Intel i Google współpracują nad udostępnieniem niektórych części CSS dla programistów stron internetowych. Grupa zadaniowa pracuje nad zbiorem wersji roboczych, które mają zostać zaakceptowane przez W3C. do standardów statystycznych. Wyznaczyła sobie kilka ogólnych celów, wersje robocze specyfikacji, które z kolei doprowadziły do powstania zestawu uzupełniających, wersji roboczych specyfikacji niższego poziomu.
Zbieranie tych wersji roboczych ma zazwyczaj znaczenie, gdy ktoś mówi „Houdini”. W momencie pisania lista wersji roboczych to są niekompletne, a niektóre wersje robocze są zwykłymi obiektami zastępczymi.
Specyfikacje
Worklety (spec)
Worklety nie są raczej przydatne. Przedstawiają one koncepcję umożliwienia tworzenia wielu późniejszych wersji roboczych. Jeśli myślisz o Web Worker ale się mylisz. Pod względem koncepcyjnym te pojęcia bardzo się pokrywają. Dlaczego? to coś nowego, gdy mamy już pracowników?
Celem Houdini jest udostępnienie nowych interfejsów API umożliwiając programistom stron internetowych podłączanie własnego kodu do silnika CSS w otaczających ją systemach. Prawdopodobnie nierealne jest przypuszczenie, że niektóre z tych fragmenty kodu trzeba uruchamiać co najmniej raz. dla singli. ramki. Niektóre muszą z definicji. Cytując specyfikację usługi Web Worker:
Oznacza to, że pracownicy sieci nie nadają się do tego, co planuje Houdini. Tak więc wynaleziono worklety. Worklety używają klas ES2015 do określania To zbiór metod, których podpisy są wstępnie zdefiniowane typu Worklet. Są lekkie i krótkotrwałe.
CSS Paint API (specyfikacja)
Interfejs Paint API jest domyślnie włączony w Chrome 65. Przeczytaj szczegółowe przedstawienie.
Worklet kompozytora
Opisany tu interfejs API jest przestarzały. Worklet kompozytora ma został przeprojektowany i obecnie nosi nazwę „Worklet animacji”. Przeczytaj więcej na bieżącą iterację interfejsu API.
Mimo że specyfikacja Worklet kompozytora została przeniesiona do WICG i to ta specyfikacja najbardziej mnie interesuje. Niektóre operacje są zlecane dla karty graficznej Twojego komputera przez usługę porównywania cen choć zależy to zarówno od karty graficznej, jak i urządzenia ogólne.
Przeglądarka zwykle pobiera drzewo DOM i, na podstawie określonych kryteriów, postanawia stworzyć osobną warstwę dla niektórych gałęzi i poddrzewa. Te podrzędne drzewa malują się na nim (np. za pomocą farby w przyszłości). Na koniec wszystkie te elementy, po wymalowaniu, nakładają się na siebie i są rozmieszczone jeden na drugim, z uwzględnieniem indeksów Z, przekształceń 3D i aby uzyskać ostateczny obraz widoczny na ekranie. Ten proces jest nazywane kompozytowaniem i jest wykonywana przez kompozytora.
Zaletą procesu komponowania jest to, że nie trzeba wykonywać całego procesu elementy są ponownie malowane, gdy strona delikatnie się przewija. Zamiast tego: można ponownie użyć warstw z poprzedniej klatki i po prostu ponownie uruchomić kompozytor do zaktualizowanej pozycji przewijania. Przyspiesza to pracę. Pomaga to osiągnąć prędkość 60 kl./s.
Worklet kompozytora umożliwia połączenie z kompozytorem i wpływają na sposób, w jaki warstwa elementu, która została już namalowana, jest i nałożone na inne warstwy.
Aby zwiększyć
do konkretnej przeglądarki, możesz wskazać przeglądarce, że chcesz podłączyć się do
dla określonego węzła DOM oraz może poprosić o dostęp do określonych atrybutów, takich jak
pozycja przewijania (transform lub opacity). Powoduje to, że element
w osobnej warstwie, a w każdej ramce wywoływany jest Twój kod. Możesz przenieść warstwę
modyfikując warstwy i zmieniając ich atrybuty (takie jak opacity)
który pozwala tworzyć fantazyjne i innowacyjne rozwiązania z szybkością 60 klatek na sekundę.
Oto pełna implementacja przewijania paralaksy przy użyciu kompozytora Worklet.
// main.js
window.compositorWorklet.import('worklet.js')
.then(function() {
var animator = new CompositorAnimator('parallax');
animator.postMessage([
new CompositorProxy($('.scroller'), ['scrollTop']),
new CompositorProxy($('.parallax'), ['transform']),
]);
});
// worklet.js
registerCompositorAnimator('parallax', class {
tick(timestamp) {
var t = self.parallax.transform;
t.m42 = -0.1 * self.scroller.scrollTop;
self.parallax.transform = t;
}
onmessage(e) {
self.scroller = e.data[0];
self.parallax = e.data[1];
};
});
Robert Flack napisał kod polyfill dla możesz go wypróbować – oczywiście ze znacznie mają większy wpływ na wydajność.
Worklet układu (spec)
Zaproponowano pierwszą wersję roboczą rzeczywistej specyfikacji. Wdrożenie nie jest za późno.
Specyfikacja tego atrybutu jest praktycznie pusta, ale koncepcja
intrygujące: napisz własny układ! Worklet układu ma umożliwiać Ci
za pomocą polecenia display: layout('myLayout') i uruchomić kod JavaScript, aby rozmieścić
podrzędne w polu węzła.
Oczywiście przeprowadzenie pełnej implementacji JavaScriptu układu flex-box CSS.
jest wolniejsze niż stosowanie równoważnej implementacji natywnej, ale
wyobraźmy sobie scenariusz, w którym wycinanie drobnych zakrętów może przynieść wzrost skuteczności. Wyobraź sobie, że:
witryny składającej się wyłącznie z kafelków, np. Windows 10 lub
układ. Pozycjonowanie bezwzględne i stałe nie jest używane. Ani z-index, ani nie
elementy nakładają się na siebie lub nakładają na siebie jakiekolwiek obramowania lub nadmiary. Możliwość pomijania
Wszystkie te testy mogą poprawić wydajność.
registerLayout('random-layout', class {
static get inputProperties() {
return [];
}
static get childrenInputProperties() {
return [];
}
layout(children, constraintSpace, styleMap) {
const width = constraintSpace.width;
const height = constraintSpace.height;
for (let child of children) {
const x = Math.random()*width;
const y = Math.random()*height;
const constraintSubSpace = new ConstraintSpace();
constraintSubSpace.width = width-x;
constraintSubSpace.height = height-y;
const childFragment = child.doLayout(constraintSubSpace);
childFragment.x = x;
childFragment.y = y;
}
return {
minContent: 0,
maxContent: 0,
width: width,
height: height,
fragments: [],
unPositionedChildren: [],
breakToken: null
};
}
});
Wpisany CSSOM (spec)
Wpisany model CSSOM (CSS Object Model lub Cascading Style Arkusze Object Model) odpowiada adresowi że każdy z nas na pewno się z nimi poradził. Przeanalizujmy to za pomocą wiersza JavaScript:
$('#someDiv').style.height = getRandomInt() + 'px';
Przeprowadzamy matematykę. Konwertujemy liczbę na ciąg znaków, aby dołączyć jednostkę po to, aby przeglądarka analizuje ten ciąg znaków i przekształca go z powrotem w liczbę na potrzeby mechanizmu CSS. Jest to jeszcze bardziej efektowne, gdy manipulujesz przekształceniami za pomocą JavaScriptu. To już wszystko. CSS za chwilę zacznie pisać.
Ta wersja robocza jest jedną z bardziej dopracowanych wersji, a element polyfill jest nad którymi już pracujemy. (Wyłączenie odpowiedzialności: użycie kodu polyfill będzie oczywiście większe wymagania obliczeniowe. Chodzi o ukazanie użytkownikom, API.
Zamiast ciągów będziesz pracować na właściwości StylePropertyMap elementu, gdzie
każdy atrybut CSS ma własny klucz i odpowiedni typ wartości. Atrybuty
takich jak width, mają LengthValue jako typ wartości. LengthValue to
słownik wszystkich jednostek CSS, takich jak em, rem, px, percent itd. Ustawienie
Funkcja height: calc(5px + 5%) zwróci LengthValue{px: 5, percent: 5}. Niektóre
usługi takie jak box-sizing akceptują tylko określone słowa kluczowe i dlatego mają
Typ wartości: KeywordValue. Można sprawdzić poprawność tych atrybutów.
w czasie działania aplikacji.
<div style="width: 200px;" id="div1"></div>
<div style="width: 300px;" id="div2"></div>
<div id="div3"></div>
<div style="margin-left: calc(5em + 50%);" id="div4"></div>
var w1 = $('#div1').styleMap.get('width');
var w2 = $('#div2').styleMap.get('width');
$('#div3').styleMap.set('background-size',
[new SimpleLength(200, 'px'), w1.add(w2)])
$('#div4')).styleMap.get('margin-left')
// => {em: 5, percent: 50}
Właściwości i wartości
Czy znasz usługi niestandardowe CSS (lub ich nieoficjalny alias „Zmienne CSS”)? To tylko te, ale z różnymi typami! Dotychczas zmienne mogły mieć tylko wartości w postaci ciągów znaków, zastosowaliśmy prostą metodę „wyszukaj i zastąp”. Ta wersja robocza pozwoli Ci uniemożliwić określ tylko typ zmiennych, a także zdefiniujesz wartość domyślną i wpływa na zachowanie dziedziczenia za pomocą interfejsu JavaScript API. Technicznie rzecz biorąc, pozwala też na animację właściwości niestandardowych ze standardowymi przejściami CSS. i animacje.
["--scale-x", "--scale-y"].forEach(function(name) {
document.registerProperty({
name: name,
syntax: "<number>",
inherits: false,
initialValue: "1"
});
});
Dane dotyczące czcionek
Dokładnie widać dane czcionek. Jaka jest ramka ograniczająca (lub ramki ograniczające) podczas renderowania ciągu X z czcionką Y w rozmiarze Z? Co, jeśli użyję adnotacje rubinowe? Otrzymywaliśmy wiele próśb i wreszcie Houdini niech te życzenia się spełnią.
Poczekaj, to jeszcze nie wszystko.
Lista wersji roboczych Houdini zawiera jeszcze więcej specyfikacji, ale ich przyszłość jest są raczej niepewne i są raczej obiektami zastępczymi pomysłów. Przykłady: niestandardowe działanie dodatkowych elementów, interfejs API rozszerzenia składni CSS, rozszerzenie natywnego zachowania przewijania i podobnych ambitnych celów, które wcześniej nie były możliwe.
Prezentacje
Udostępniam kod wersji demonstracyjnej na zasadach open source (prezentacja na żywo z użyciem kodu polyfill).