Quante volte abbiamo aperto una pagina web sul nostro browser e ci siamo lamentati di quanto il nostro strumento di navigazione sia "pesante" o "divoratore di risorse"? Sappiamo quanta fatica fa un browser per renderizzare una semplice pagina web e quante sfide deve affrontare? Beh, di recente mi sono posto queste domande e ho tentato di capire di più come è fatto un browser e quali sfide deve affrontare per far sì che le nostre pagine web (o applicazioni) possano oggi essere così interessanti come le pensiamo. Conoscerlo meglio ci aiuterà a realizzare forse un web migliore e magari rendere la vita più facile al browser stesso ed al nostro amato computer. Proverò a dare anche a voi un po' di ciò che ho capito e che mi ha aiutato a stare più attento e responsabile come artigiano del web!
Building a World in the Clouds: MMO Architecture on AWS (MBL304) | AWS re:Inv...Amazon Web Services
Can you really build the infrastructure required to bring a massively multiplayer online game (MMO) to life in the cloud? This session discusses the evolution of Red 5 Studios' FireFall—a free-to-play MMO. FireFall runs entirely on the AWS platform and allows players from around the world to play together in the cloud. The session covers some of the design decisions made over the last two years—the things that worked well and not so well. The session also presents some of the solutions Red 5 implemented to ease the transition from dedicated data center hardware to virtual servers in AWS.
[IGC 2017] 펄어비스 민경인 - Mmorpg를 위한 voxel 기반 네비게이션 라이브러리 개발기강 민우
펄어비스의 MMORPG, 검은사막에 적용되어있는 AI 네비게이션 기능은 VOXEL 기반으로 자체 개발한 엔진을 이용해 구현되어 있습니다. 기존의 대다수 상용 라이브러리들이 네비 메쉬라고 하는 이동가능한 평면을 표현하는 폴리곤 기반의 데이터를 이용해 길찾기를 수행해주는 것에 비해 근간이 다릅니다. 이 강연에서는 검은사막의 네비게이션 엔진을 구현하고, 서버 / 클라이언트에 적용하면서 얻게된 노하우와 적용된 결과물들을 소개합니다.
Building a World in the Clouds: MMO Architecture on AWS (MBL304) | AWS re:Inv...Amazon Web Services
Can you really build the infrastructure required to bring a massively multiplayer online game (MMO) to life in the cloud? This session discusses the evolution of Red 5 Studios' FireFall—a free-to-play MMO. FireFall runs entirely on the AWS platform and allows players from around the world to play together in the cloud. The session covers some of the design decisions made over the last two years—the things that worked well and not so well. The session also presents some of the solutions Red 5 implemented to ease the transition from dedicated data center hardware to virtual servers in AWS.
[IGC 2017] 펄어비스 민경인 - Mmorpg를 위한 voxel 기반 네비게이션 라이브러리 개발기강 민우
펄어비스의 MMORPG, 검은사막에 적용되어있는 AI 네비게이션 기능은 VOXEL 기반으로 자체 개발한 엔진을 이용해 구현되어 있습니다. 기존의 대다수 상용 라이브러리들이 네비 메쉬라고 하는 이동가능한 평면을 표현하는 폴리곤 기반의 데이터를 이용해 길찾기를 수행해주는 것에 비해 근간이 다릅니다. 이 강연에서는 검은사막의 네비게이션 엔진을 구현하고, 서버 / 클라이언트에 적용하면서 얻게된 노하우와 적용된 결과물들을 소개합니다.
Addressables for live content management – Unite Copenhagen 2019Unity Technologies
Learn best practices on how to leverage the Addressable Asset System to simplify your content management at both edit and runtime. We will explore how Addressables can enable your success through you game's initial and updated releases.
Speaker: Bill Ramsour – Unity
Watch the session on YouTube: https://youtu.be/THs7h-wXHBg
NDC2012_마비노기 영웅전 카이 포스트모템_시선을 사로잡는 캐릭터 카이 그 시도와 성공의 구현 일지영준 박
온라인 게임에서 새로운 캐릭터를 만든다는 것은 어떠한 컨텐츠와 비교 안될 만큼 많은 코스트가 드는 작업 입니다.
당연, 이러한 비싼 코스트의 신캐릭터는 유저들의 시선을 사로잡을 수 있는 독특한 매력을 가져야만 성공할 수 있습니다.
시선을 사로잡는 외형뿐만 아니라 핵심 플레이의 재미, 그리고 그것을 뒷받침해주기 위한 기술적 시도가 조화 되어야만
이러한 매력적인 캐릭터들이 탄생하게 됩니다.
현 세션에선 영웅전의 주인공인 리시타, 피오나, 이비, 카록을 개발하면서 겪었던 여러 가지 기술적인 시행 착오에 대해 알아보고
그 노하우를 엮어서 어떻게 궁수 <카이>를 성공적으로 런칭 할 수 있었는지를 공유하고자 합니다.
대략 다음과 같은 항목들을 다룹니다.
- 영웅전 궁수 캐릭터 카이를 개발하면서 겪었던 좌충우돌 생생한 개발 스토리.
- 구세대 엔진을 이용해 신세대 엔진 따라잡기
- 카이는 궁수 캐릭터의 기술적 난제를 어떻게 해결했을까? – 블렌딩 애니메이션 구성
- 카이 캐릭터 제작에서의 기술적 특이한 시도 및 시행착오들
- 타격감 개선 및 궁수의 재미를 살리기 위한 노하우
- 실시간 체형 변화 시스템
- 실시간 시퀀스 키 프레임 디포메이션 기법.
FAST è una raccolta di tecnologie, basate su Web Components e su Web Standards moderni, che ci aiuta ad affrontare in modo efficiente alcune delle sfide più comuni nella progettazione e nello sviluppo di siti ed applicazioni Web.”
FAST ci aiuta a creare interfacce si adattano facilmente a qualunque Design System e che possono essere utilizzate con qualsiasi framework!
SMConnect 2022 - Con lo sviluppo del web, delle nuove tecnologie e web API, i motori di ricerca hanno iniziato ad utilizzare veri e propri browser per il rendering delle pagine web, creare un Web Rendering Service per il rendering su larga scala nasconde però molte insidie. In questo talk parliamo della session isolation nel rendering delle pagine web, da parte di motori di ricerca e tool, e di come questa può influenzare i dati di crawling.
Addressables for live content management – Unite Copenhagen 2019Unity Technologies
Learn best practices on how to leverage the Addressable Asset System to simplify your content management at both edit and runtime. We will explore how Addressables can enable your success through you game's initial and updated releases.
Speaker: Bill Ramsour – Unity
Watch the session on YouTube: https://youtu.be/THs7h-wXHBg
NDC2012_마비노기 영웅전 카이 포스트모템_시선을 사로잡는 캐릭터 카이 그 시도와 성공의 구현 일지영준 박
온라인 게임에서 새로운 캐릭터를 만든다는 것은 어떠한 컨텐츠와 비교 안될 만큼 많은 코스트가 드는 작업 입니다.
당연, 이러한 비싼 코스트의 신캐릭터는 유저들의 시선을 사로잡을 수 있는 독특한 매력을 가져야만 성공할 수 있습니다.
시선을 사로잡는 외형뿐만 아니라 핵심 플레이의 재미, 그리고 그것을 뒷받침해주기 위한 기술적 시도가 조화 되어야만
이러한 매력적인 캐릭터들이 탄생하게 됩니다.
현 세션에선 영웅전의 주인공인 리시타, 피오나, 이비, 카록을 개발하면서 겪었던 여러 가지 기술적인 시행 착오에 대해 알아보고
그 노하우를 엮어서 어떻게 궁수 <카이>를 성공적으로 런칭 할 수 있었는지를 공유하고자 합니다.
대략 다음과 같은 항목들을 다룹니다.
- 영웅전 궁수 캐릭터 카이를 개발하면서 겪었던 좌충우돌 생생한 개발 스토리.
- 구세대 엔진을 이용해 신세대 엔진 따라잡기
- 카이는 궁수 캐릭터의 기술적 난제를 어떻게 해결했을까? – 블렌딩 애니메이션 구성
- 카이 캐릭터 제작에서의 기술적 특이한 시도 및 시행착오들
- 타격감 개선 및 궁수의 재미를 살리기 위한 노하우
- 실시간 체형 변화 시스템
- 실시간 시퀀스 키 프레임 디포메이션 기법.
FAST è una raccolta di tecnologie, basate su Web Components e su Web Standards moderni, che ci aiuta ad affrontare in modo efficiente alcune delle sfide più comuni nella progettazione e nello sviluppo di siti ed applicazioni Web.”
FAST ci aiuta a creare interfacce si adattano facilmente a qualunque Design System e che possono essere utilizzate con qualsiasi framework!
SMConnect 2022 - Con lo sviluppo del web, delle nuove tecnologie e web API, i motori di ricerca hanno iniziato ad utilizzare veri e propri browser per il rendering delle pagine web, creare un Web Rendering Service per il rendering su larga scala nasconde però molte insidie. In questo talk parliamo della session isolation nel rendering delle pagine web, da parte di motori di ricerca e tool, e di come questa può influenzare i dati di crawling.
Angular kit e Design system del Paese - Meetup ngRome 30 Gennaio 2023AndreaStagi3
Slide del MeetUp di Angular Roma dove Cristian Borelli e Andrea Stagi ci hanno raccontato le evoluzioni fatte sul Design Kit e Bootstrap Italia: dalle nuove tecnologie ai temi dell'accessibilità. L’occasione è stata utile per presentare i lavori per il nuovo Design Kit Angular che andrà ad arricchire le componenti Bootstrap Italia.
IoT Saturday PN 2019 - S8-6 Francesco NotFrancesco Not
La gran parte dei progetti IoT parte dallo sviluppo di un Proof-of-Concept basato su piattaforme di prototipazione rapida (Arduino, Raspberry Pi, ecc.) , che permettono di valutare velocemente la fattibilità dell'idea e mettono le basi per l'implementazione della soluzione. Quando il PoC è validato, il sistema funziona ed il backend è operativo, è il momento di pensare all'industrializzazione. Ottimizzazioni, portabilità, prototipi, test, certificazioni, produzione... quanto complesso è realizzare un prodotto?
Node js: che cos'è e a che cosa serve?
oppure
Node.js
Dimmi con quale contorno ti posso mangiare?
All'interno di queste slide, 25 di numero e per essere esatti, cerco di rispondere ad alcune domande che ho ricevuto e riguardavano NodeJS. Mi auguro che siano di vostro gradimento e spero che vi siano utili.
Aspetto i vostri commenti qui sotto, in più potete trovare anche altre informazioni all'interno delle pagine di InsiDevCode (http://www.insidevcode.eu/)
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptxAndrea Verlicchi
Durante questo talk sulle prestazioni web, scoprirai come rendere il tuo sito web più veloce ed usabile, e come questo comporti un miglioramento dell’esperienza utente e l’aumento della visibilità del tuo sito sui motori di ricerca, riducendo persino i costi di marketing digitale.
Andrea condividerà la sua esperienza nel campo delle web performance e fornirà suggerimenti pratici, ad alto impatto e facilmente applicabili alla maggior parte dei siti web su come migliorare le performance nel 2023.
Andrea Verlicchi, web performance consultant @ Cognizant Netcentric, ha acquisito una vasta esperienza nel settore lavorando ad ottimizzare le prestazioni web, prima di alcuni tra i più grandi brand nel settore e-commerce della moda e del lusso, poi di clienti nel settore della chimica e dell'automotive.
Andrea è da qualche mese Google Developer Expert per le Web Performance, ha scritto di web su importanti riviste online specializzate, e condivide regolarmente quello che ha imparato a conferenze e Meetup, in Italia e all'estero.
Programmiamo iPhone e iPad (e non solo!) con MonoTouchStefano Ottaviani
MonoTouch ha delle caratteristiche che lo differenziano rispetto agli altri framework per lo sviluppo su iPhone / iPad: vediamo quali sono, che vantaggi ci possono dare e in che modo possono rivelarsi più divertenti :), in particolar modo nell'ambito delle applicazioni LOB (Line of Business).
Anche se MonoTouch non è direttamente cross-platform, cercheremo inoltre di dare uno sguardo a come organizzare i nostri progetti in modo tale da farli girare anche su altri device, in particolare Android, Windows Phone 7, e perché no, desktop e netbook, col minor sforzo possibile.
È uscita la release 1.0 da pochi giorni e non è chiaro se è una meteora o qualcosa che resterà sul mercato e ritaglierà una fetta della torta...ma proviamo a capire insieme cosa offre questo nuovo runtime per Javascript che vanta maggiore sicurezza rispetto a Node e la possibilità di utilizzare TypeScript...e non solo!
Piano Didattico Personalizzato on-line (PDP on-line)Michele Maffucci
Sperimentazione di sviluppo di un sistema informatico economico e veloce basato sulle Google App per rendere semi-automatica la produzione del PDP (Piano Didattico Personalizzato) on-line, da parte del consiglio di classe.
Seminario all'interno del corso in Comunicazione Visiva e Design delle Interfacce - Laurea magistrale in Teoria e tecnologia della comunicazione presso Università degli studi di Milano-Bicocca
Similar to Siamo tutti bravi con il browser degli altri! (20)
Creare una Progressive Web App in Angular è un processo semplice e potente. Vediamone tutte le caratteristiche messe a disposizione dal famoso framework frontend, per rendere le nostre Single Page Application pronte per lavorare offline, ricevere notifiche e tanto altro!
Repository GitHub: https://github.com/fsciuti/ng-pwa-conf-demo
ES6 è stata una rivoluzione nel mondo JavaScript ed ha portato il linguaggio ad uno step successivo.
In questo talk si affrontano gli aspetti che hanno resto fondamentale questo nuovo standard.
Un talk che affronta gli aspetti principali di una Progressive Web App, dal Manifest ai Service Worker, passando da tutte le Web API utili per le app mobile del prossimo futuro.
Visual Studio Code è il editor di codice sorgente che rende subito produttivi grazie alla sua semplicità e leggerezza ed in questo talk troverete una panoramica, oltre a tip & tricks utili.
Acadevmy - AngularDay 2018 - Change Detection, Zone.js ed altri mostriFrancesco Sciuti
Un talk dedicato agli aspetti più arcani di Angular tra i quali sono presenti alcuni mostri, che una volta conosciuti non fanno poi così tanta paura. Approfondiamo quindi alcuni aspetti della Change Detection di Angular, proviamo a capire a cosa serve e come funziona Zone.js e se sono presenti in giro altre creature o miti da sfatare!
TypeScript ha cambiato il modo di scrivere JavaScript ed in questo talk andiamo a scoprirne le principali caratteristiche per scrivere "JavaScript che non si rompe!"
N.B. Le slides sono aggiornate sino a TS 3.
Una panoramica delle caratteristiche e delle possibilità che hanno reso Angular uno dei framework più importanti sulla scena frontend.
N.B. Le slides sono aggiornate sino ad Angular 6.
Il talk affronta il viaggio attraverso le PWA e dopo una panoramica sulle principali caratteristiche delle Progressive Web App, approfondisce tutti gli aspetti principali della realizzazione di una PWA in Angular.
Acadevmy - GraphQL & Angular: Tutto il REST è noia!Francesco Sciuti
Un workshop da 2h con una prima parte dedicato ai fondamenti di GraphQL ed un’approfondita seconda parte che affronta l’ecosistema Apollo ed in particolar modo l’integrazione di Apollo Client su Angular.
Acadevmy - GraphQL & Angular: Tutto il REST è noia!
Siamo tutti bravi con il browser degli altri!
1. Siamo tutti bravi
con il browser
degli altri!
Francesco Sciuti
Google Developer Expert / Microsoft MVP / Codemotion devrel
2. agenda
● alziamo la mano
● Cos’è un browser
● come è fatto
● i processi del browser
● come funziona
● rendering
● i motori
● conclusioni
Francesco Sciuti
Google Developer Expert / Microsoft MVP / Codemotion devrel
4. Cos’è un browser
Tutti lo usano, pochi lo sanno
Francesco Sciuti
Google Developer Expert / Microsoft MVP / Codemotion devrel
5. il browser
● Sono il tipo di software in assoluto più utilizzato
● Sono fatti da milioni di righe c++ ed altra roba tosta
● Sono cambiati moltissimo nel tempo
● Sono un concentrato di tecnologia ed algoritmi,
che neanche la batmobile!
è un'applicazione che richiede dati ai server
web, invia una richiesta di rete all'URL, ottiene
risorse e le rappresenta in modo interattivo!
facile, no? e che ce vo’?
6. Gli utenti adorano vedere i pixel sullo schermo
il più velocemente possibile,
ed è ciò che rende veloce un'applicazione web!
ma chi scrive browser ha un piccolo casino da gestire…
Francesco Sciuti
Google Developer Expert / Microsoft MVP / Codemotion devrel
7. e a me che ç@#!^
me ne frega a me?
Io mica scrivo browser!
P.s. se qualcuno di voi dovesse essere del team chromium…
vi prego, siate clementi!
8. come sviluppatori web, abbiamo il dovere di
conoscere alcune delle meccaniche dei browser,
così da prendere decisioni migliori
e capire alcune cose che a volte ci sembrano assurde.
(cit. del famoso filosofo: ciccio da val demone)
9. come è fatto
siamo tutti bravi a navigare con il timone degli altri
Francesco Sciuti
Google Developer Expert / Microsoft MVP / Codemotion devrel
10. L’architettura
● applicazioni multi-processo
● ogni processo si occupa di un logica
specifica
● Ogni processo ha un main thread ed
eventuali thread speciali dedicati
Non ci sono specifiche standard su come si
potrebbe costruire un browser web.
L'approccio potrebbe essere completamente
diverso da un browser ad un altro.
11. p
processi & thread
I processi possono comunicare tra loro attraverso IPC.
I thread possono comunicare tra loro anche all'interno del processo che li contiene, ma non direttamente con i thread in altri processi.
La comunicazione tra processi è, in generale, più lenta della comunicazione tra thread all'interno di un processo.
● Un processo può essere descritto come il
programma in esecuzione di un'applicazione.
● Un thread è quello che vive all'interno del
processo ed esegue qualsiasi parte del processo
al quale appartiene.
p
ipc
ipc
p
t
t
t
t
12. i processi del browser
sembra il titolo di un film ma c’è comunque tanto da investigare
Francesco Sciuti
Google Developer Expert / Microsoft MVP / Codemotion devrel
13. HIGHEST LEAST
Browser Process
Render Process
IFRAME
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt, nunc nec tincidunt vestibulum, ante metus maximus
neque, eget fringilla ante diam sed nibh. Nullam nibh libero, consequat eu ligula non, aliquet laoreet sapien. Aenean
ultricies sed odio quis tempus. Vivamus facilisis tellus eget nunc venenatis malesuada. Phasellus metus metus, tincidunt eu
libero a, lobortis tempus neque. Donec condimentum leo semper leo malesuada, non pretium neque dictum. Integer sit amet
augue non neque dapibus pretium. Nullam id dui ac purus mattis suscipit nec ac nisl. Phasellus dignissim a risus quis cursus.
Curabitur nec lacus faucibus, elementum felis nec, blandit turpis. Duis mollis enim eu tincidunt sagittis. Morbi mauris tellus,
pellentesque id tellus vitae, lobortis fringilla ex.
Render Process
GPU Process
STORAGE
Process
UI
Process
NETWORK
Process
1 PER OGNI TAB
LOWER
PRIORITY:
Architettura multi-processo
14. Architettura multi-processo
● Sand-boxing
● Black Sheep Detection
● Optimal memory footprint
● Private Data
● Site Isolation
Vantaggi
● Memory Overhead
● Process Creation Overhead
● IPC overhead
SVantaggi
Francesco Sciuti
Google Developer Expert / Microsoft MVP / Codemotion devrel
15. COME FUNZIONA
NAVIGARE SEMBRA FACILE, MA GUIDARE IL TITANIC È RISCHIOSO
Francesco Sciuti
Google Developer Expert / Microsoft MVP / Codemotion devrel
16. Scrivo sulla barra degli indirizzi e…
● viene valutato l’input
Browser process | UI thread/Process
● inizia la navigazione!
Browser process | network thread/Process
● viene letta e gestita la risposta
Browser process | network thread/Process
● Viene attivato un render process
Browser process | UI thread/Process
● viene “presa in carico” la navigazione
Render Process
● inizia la document loading phase
Render Process
https://devmyit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt, nunc nec tincidunt vestibulum, ante metus maximus
neque, eget fringilla ante diam sed nibh. Nullam nibh libero, consequat eu ligula non, aliquet laoreet sapien. Aenean
ultricies sed odio quis tempus. Vivamus facilisis tellus eget nunc venenatis malesuada. Phasellus metus metus, tincidunt eu
libero a, lobortis tempus neque. Donec condimentum leo semper leo malesuada, non pretium neque dictum. Integer sit amet
augue non neque dapibus pretium. Nullam id dui ac purus mattis suscipit nec ac nisl. Phasellus dignissim a risus quis cursus.
Curabitur nec lacus faucibus, elementum felis nec, blandit turpis. Duis mollis enim eu tincidunt sagittis. Morbi mauris tellus,
pellentesque id tellus vitae, lobortis fringilla ex.
17. Browser Process
ui
Scrivo sulla barra degli indirizzi e…
https://devmyit
NETWORK
Process
Render Process
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt, nunc nec tincidunt vestibulum, ante metus maximus
neque, eget fringilla ante diam sed nibh. Nullam nibh libero, consequat eu ligula non, aliquet laoreet sapien. Aenean
ultricies sed odio quis tempus. Vivamus facilisis tellus eget nunc venenatis malesuada. Phasellus metus metus, tincidunt eu
libero a, lobortis tempus neque. Donec condimentum leo semper leo malesuada, non pretium neque dictum. Integer sit amet
augue non neque dapibus pretium. Nullam id dui ac purus mattis suscipit nec ac nisl. Phasellus dignissim a risus quis cursus.
Curabitur nec lacus faucibus, elementum felis nec, blandit turpis. Duis mollis enim eu tincidunt sagittis. Morbi mauris tellus,
pellentesque id tellus vitae, lobortis fringilla ex.
Francesco Sciuti
Google Developer Expert / Microsoft MVP / Codemotion devrel
19. renderizziamo una pagina
Il processo di rendering, di cui si occupa il
buon render process, è di certo la parte più
articolata ed interessante ed è quella in cui
dobbiamo affrontare il tanto temuto
critical rendering path!
Un processo, tanti threads: main thread, worker threads,
compositor thread, raster thread, …
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt, nunc nec tincidunt vestibulum, ante metus maximus
neque, eget fringilla ante diam sed nibh. Nullam nibh libero, consequat eu ligula non, aliquet laoreet sapien. Aenean
ultricies sed odio quis tempus. Vivamus facilisis tellus eget nunc venenatis malesuada. Phasellus metus metus, tincidunt eu
libero a, lobortis tempus neque. Donec condimentum leo semper leo malesuada, non pretium neque dictum. Integer sit amet
augue non neque dapibus pretium. Nullam id dui ac purus mattis suscipit nec ac nisl. Phasellus dignissim a risus quis cursus.
Curabitur nec lacus faucibus, elementum felis nec, blandit turpis. Duis mollis enim eu tincidunt sagittis. Morbi mauris tellus,
pellentesque id tellus vitae, lobortis fringilla ex.
Francesco Sciuti
Google Developer Expert / Microsoft MVP / Codemotion devrel
20. Rendering di una pagina
● Parsing
● Style Calculation
● Layout
● Paint
● Compositing
Il processo di rendering, per buona parte
grazie al suo main thread, si snoda tra:
Francesco Sciuti
Google Developer Expert / Microsoft MVP / Codemotion devrel
21. parsing
● Bytes -> characters
● characters -> token
● Token -> nodes
● nodes -> dom (finalmente!)
● Subresource loading
i dati vengono inviati su Internet come
pacchetti ed il browser legge i byte grezzi
dell’HTML (anche dal disco rigido).
al main thread il compito di:
00111100 01101000 01110100 01101101
01101100 00111110 00101110 00101110
00101110 00111100 00101111 01101000
01110100 01101101 01101100 00111110
<html><head>...</head>
<body><p>...</p></body></Html>
Start-tag: html
start-tag: head
…
end-tag: head
start-tag: body
…
bytes characters
tokens
html head p span
nodes
html
Head
link
body
span
p
…
dom tree
22. bytes
characters
tokens
nodes
body
span
p
…
CSSom tree
style calculation
● css Bytes -> characters
● characters -> token
● Token -> nodes
● nodes -> cssom
● layout (o render) tree!
Il main thread analizza CSS e determina il
computed style per ogni nodo del DOM in base ai
selettori CSS.
background-color: red
font-size: 1.1em
color: blue
color: yellow
margin: 10px
23. layout
Il layout (o reflow) è IL processo IN CUI Il
MAIN thread attraversa il DOM e gli stili e
crea IL LAYOUT TREE (O RENDER TREE), che
contiene informazioni come le coordinate
e le dimensioni DEGLI ELEMENTI.
IL PROCESSO DI LAYOUT è ESTREMAMENTE
ONEROSO PER IL BROWSER PERCHé DEVE CALCOLARE
L’ESATTA POSIZIONE E DIMENSIONE DI OGNI
ELEMENTO DELLA PAGINA!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt, nunc nec tincidunt vestibulum, ante metus maximus
neque, eget fringilla ante diam sed nibh. Nullam nibh libero, consequat eu ligula non, aliquet laoreet sapien. Aenean
ultricies sed odio quis tempus. Vivamus facilisis tellus eget nunc venenatis malesuada. Phasellus metus metus, tincidunt eu
libero a, lobortis tempus neque. Donec condimentum leo semper leo malesuada, non pretium neque dictum. Integer sit amet
augue non neque dapibus pretium. Nullam id dui ac purus mattis suscipit nec ac nisl. Phasellus dignissim a risus quis cursus.
Curabitur nec lacus faucibus, elementum felis nec, blandit turpis. Duis mollis enim eu tincidunt sagittis. Morbi mauris tellus,
pellentesque id tellus vitae, lobortis fringilla ex.
x,y
x,y
w,h
25. layout - Layout tree o render tree
per costruire il layout (o render) Tree, il browser
dovrà:
● attraversare ricorsivamente il dom e cercare
gli elementi visibili
● costruire / aggiornare il nodo del layout Tree
puntando il nodo del DOM
● derivare le Computed Styles per il nodo del
DOM, ed associarle con il nodo del layout Tree
layout tree
26. paint
conosciamo le dimensioni e le posizioni
degli elementi ma non l’ordine con il
quale li andremo a disegnare sulla nostra
pagina.
il main thread attraversa il layout tree per
costruire una coda di paint record, che
consentono di gestire l’ordine di disegno
degli elementi.
background: …
testo
box (x,y …)
,,,
27. Compositing
Il compositing è una tecnica per gestire parti di
una pagina in livelli, rasterizzarle
separatamente e comporre come pagina in un
thread separato chiamato compositor thread.
Se si verifica lo scrolling (una delle operazioni più
onerose ma comuni), poiché i livelli sono già
rasterizzati, tutto ciò che deve fare è comporre un nuovo
fotogramma.
Francesco Sciuti
Google Developer Expert / Microsoft MVP / Codemotion devrel
28. Compositing
● Il main thread esegue il traversing del
layout tree per generare il layer tree
● il main thread invia tali informazioni
nel compositor thread
● Il compositor thread rasterizza ogni livello
● Il compositor thread divide in riquadri
ed invia ogni riquadro (Draw quad) ai
raster thread
● Un compositor frame viene quindi inviato
al processo del browser tramite IPC
layout
tree
layer
tree
29. Compositing
● Draw quads
contiene le informazioni, come la
posizione della tile in memoria e dove nella
disegnarla nella pagina.
● Compositor frame
Una raccolta di Draw quads che
rappresentano il frame di una pagina.
Il vantaggio del compositing è che viene eseguito senza
coinvolgere il main thread!
layout
tree
layer
tree
30. Browser Process
Compositing - EVENTS
● Browser process riceve una gesture (click) ED invia
l’event type e le cooRDINATE AL RENDERER PROCESS
● Renderer process GESTISCE L’EVENTO NEL CASO IN CUI
CI SIA UN LISTENER
● NEL CASO IN CUI NON CI SIA IL COMPOSITOR THREAD
CREA UN FRAME SENZA CHIEDER NULLA AL MAIN THREAD!
● IL COMPOSITOR THREAD MARCA ED ASSOCIA GLI EVENT
HANDLERS ALLE AREE DELLA PAGINA (Non-Fast Scrollable Region)
NEL CASO IN CUI L’event AVVIENE FUORI DALLE REGION, IL COMPOSITOR THREAD
NON CHIEDE NUOVAMENTE NULLA AL MAIN THREAD
Render Process
ui
C
M
31. critical rendering path (CRP)
ogni ritardo è critico in questa occasione
Francesco Sciuti
Google Developer Expert / Microsoft MVP / Codemotion devrel
32. critical rendering path (CRP)
L'intero processo tra la ricezione dei byte HTML, CSS e JS e la loro trasformazione in pixel
renderizzati sullo schermo è chiamato critical rendering path (per gli amici CRP).
network
html
css
dom tree
js
cssom tree
layout tree
paint records
layer tree
layout (reflow)
paint
compositing
Francesco Sciuti
Google Developer Expert / Microsoft MVP / Codemotion devrel
33. Se è in esecuzione un'animazione, una transizione, l'utente sta scorrendo le pagine o fa uno
zoom il browser deve creare frames alla frequenza di aggiornamento del dispositivo.
Sono 60 al secondo i frames per far si che un’animazione sia fluida e questo
costringe il browser a risolvere la pipeline di rendering in circa 10 ms!
critical rendering path (CRP)
35. jank - il peggior nemico
Quando il browser non riesce a raggiungere questo obiettivo, la
frequenza dei fotogrammi diminuisce e il contenuto non sarà
fluido e ciò avrà un impatto negativo sull'esperienza dell'utente!
Questo è spesso indicato come jank!
0–100 ms — Instant feel, constant flow;
100–300 ms —Slight percetible delay;
300–1000 ms — Loss of task focus, perceptible delay;
1 s+ — Mental context switch;
10s+ — User leaves! Francesco Sciuti
Google Developer Expert / Microsoft MVP / Codemotion devrel
36. critical rendering path (CRP)
… > Style > Layout > Paint > compositing
quando ci sono cambiamenti sulle geometrie, dimensioni, posizioni, …
… > Style > Layout > Paint > compositing
quando ci sono cambiamenti in ciò che non influenza il layout (background image, text color, …)
… > Style > Layout > Paint > compositing
in poche parole ciò che non influenza il layout ed il Paint (transform, opacity)
Dopo il caricamento, la pagina cambia in risposta a due tipologie di input:
interazione dell'utente ed aggiornamenti al DOM effettuati da JavaScript.
38. Una rapida distinzione
alle Web application viene concesso un singolo
thread, il main thread, per eseguire la maggior
parte della logica dell'applicazione e
dell'interfaccia utente,
i browser Web non sono assolutamente un
environment a thread singolo!
Francesco Sciuti
Google Developer Expert / Microsoft MVP / Codemotion devrel
39. Il Browser Event Loop è probabilmente il concetto di prestazioni frontend
più importante da comprendere…ma noi già lo conosciamo, vero?
Ci basta solo sapere che ESSO vive all’interno del main thread!
Il suo comportamento determina il comportamento
delle applicazioni Web in fase di esecuzione.
Browser Event Loop
43. forse non è come pensavamo
il povero browser, forse, non ha quindi una vita così facile
Francesco Sciuti
Google Developer Expert / Microsoft MVP / Codemotion devrel
44. QUALCHE idea?
● requestAnimationFrame | REQUESTIDLEFRAME
● WILL-CHANGE (MA CON CAUTELA)
● ASYNC / DEFER ATTRIBUTES
● WORKERS
● PRIORITà DELLE RISORSE
● VALUTARE I CSS TRIGGERS
● VALUTARE COSA FORZA LAYOUT & PAINT
● …
Francesco Sciuti
Google Developer Expert / Microsoft MVP / Codemotion devrel
45. proviamo ad aiutare lo strumento che ogni
giorno ci fa viaggiare tra miliardi di pagine
piene di cose da imparare (e di gattini)!
Francesco Sciuti
Google Developer Expert / Microsoft MVP / Codemotion devrel
46. io lo faccio a modo mio...
Francesco Sciuti
Google Developer Expert / Microsoft MVP / Codemotion devrel
49. Qualche link
quick references
● https://csstriggers.com/
● https://gist.github.com/paulirish/5d52fb081b3570c81e3a
Inside browser
● https://developer.chrome.com/blog/inside-browser-part1/
● https://developer.chrome.com/blog/inside-browser-part2/
● https://developer.chrome.com/blog/inside-browser-part3/
● https://developer.chrome.com/blog/inside-browser-part4/
Francesco Sciuti
Google Developer Expert / Microsoft MVP / Codemotion devrel
50. Qualche link
Rendering Ng
● https://developer.chrome.com/articles/renderingng/
● https://developer.chrome.com/articles/renderingng-architecture/
● https://developer.chrome.com/articles/renderingng-data-structures/
● https://developer.chrome.com/articles/blinkng/
● https://developer.chrome.com/articles/layoutng/
● https://developer.chrome.com/articles/videong/
Francesco Sciuti
Google Developer Expert / Microsoft MVP / Codemotion devrel
51. Qualche link
articles & sites
● https://web.dev/mainthread-work-breakdown/
● https://web.dev/fast/#prioritize-resources
● https://web.dev/optimize-javascript-execution/
● https://web.dev/simplify-paint-complexity-and-reduce-paint-areas/
● https://web.dev/avoid-large-complex-layouts-and-layout-thrashing
● https://web.dev/stick-to-compositor-only-properties-and-manage-layer-count/
Francesco Sciuti
Google Developer Expert / Microsoft MVP / Codemotion devrel
52. Qualche link
articles & sites
● https://www.webperf.tips/
● https://www.html5rocks.com/en/tutorials/internals/howbrowserswork
● https://blog.logrocket.com/how-browser-rendering-works-behind-scenes/
● https://www.toptal.com/web/website-performance-critical-rendering-path/
● https://grosskurth.ca/papers/browser-refarch.pdf
Francesco Sciuti
Google Developer Expert / Microsoft MVP / Codemotion devrel
53. francesco sciuti
Developer per scelta e per passione,
amante di nerdaggini di ogni
tipo ed amante della
condivisione del sapere!
Francesco Sciuti
Google Developer Expert / Microsoft MVP / Codemotion devrel
54. Software Factory
● Project Management
● Architecture Design
● Team Augmentation
● Code Review
● Mentoring
● Outsourcing
Learning Factory
● Formazione in azienda
● Corsi e Workshop
● Eventi online e offline
● questo talk!
Francesco Sciuti
Google Developer Expert / Microsoft MVP / Codemotion devrel
55. Le illustrazioni sono della mia amica elena pianta
https://elenapianta.it - info@elenapianta.it
56. grazie a tutti!
● https://www.facebook.com/francesco.sciuti
● https://www.linkedin.com/in/francescosciuti/
● https://twitter.com/FrancescoSciuti
● https://www.facebook.com/Devmy.it
● https://www.linkedin.com/company/devmyfactory/
● https://twitter.com/DevmyFactory
● https://www.instagram.com/Devmy.it/
● https://www.youtube.com/c/devmy
Francesco Sciuti
Google Developer Expert / Microsoft MVP / Codemotion devrel