Alice in browserland

Alice in browserland Alicia en browserlandia

Alice in browserland Alicia en browserlandia Alicia en el país
de los browsers

¿por qué?

Write Once Run Everywhere

entonces.. qué es bien lo que hace el browser

“El browser es el encargado de pedir un recurso web
al servidor y desplegarlo en la UI.”

Componentes

Basado en: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_browser_high_level_structure User Interface Browser Engine Rendering Engine Networking
JavaScript Engine UI Backend Data Persistence

Rendering Engine

“Encargado de mostrar el recurso pedido”

IE, Trident Firefox, Gecko Safari, WebKit Opera & Chrome, Blink

Flujo Principal Parseo de HTML para construir el DOM tree
Cosntrucción del Render tree Layout del Render tree Pintar el render tree

DOM tree <html> <body>
<p> Hello World </p> <div> <img src="example.png"/></div> </body> </html> Tomada de: www.html5rocks.com/en/tutorials/internals/howbrowserswork/

Render tree Tomada de: www.html5rocks.com/en/tutorials/internals/howbrowserswork/

Layout Tomada de: http://blogs.adobe.com/webplatform/2013/02/05/a-visual-method-for-understanding-webkit-layout/

Layout Dirty Bit

Layout Reﬂows globales o incrementales

Painting Tomada de: http://blogs.adobe.com/webplatform/2013/02/05/a-visual-method-for-understanding-webkit-layout/

“Devuélvanme los 10 minutos que acabo de perder ”

Cambiar el color de un nodo N ode C hildren
S iblings P paint L ayout D ocument N P Cambiar la posición de un nodo N C S L P Agregar un nodo N L P Cambiar el tamaño de fuente del documento P L D

event loop

Stack main() function capitalize(t) {
return t.charAt(0).toUpperCase() + t.slice(1); } function greet(name) { return 'Hello ' + capitalize(name); } function print(text) { console.log(greet(text)); } print('cherta');

return t.charAt(0).toUpperCase() + t.slice(1); } function greet(name) { return 'Hello ' + capitalize(name); } function print(text) { console.log(greet(text)); } print('cherta'); print(text)

return t.charAt(0).toUpperCase() + t.slice(1); } function greet(name) { return 'Hello ' + capitalize(name); } function print(text) { console.log(greet(text)); } print('cherta'); print(text) greet(name)

return t.charAt(0).toUpperCase() + t.slice(1); } function greet(name) { return 'Hello ' + capitalize(name); } function print(text) { console.log(greet(text)); } print('cherta'); print(text) greet(name) capitalize(t)

return t.charAt(0).toUpperCase() + t.slice(1); } function greet(name) { return 'Hello ' + capitalize(name); } function print(text) { console.log(greet(text)); } print('cherta'); print(text) greet(name)

return t.charAt(0).toUpperCase() + t.slice(1); } function greet(name) { return 'Hello ' + capitalize(name); } function print(text) { console.log(greet(text)); } print('cherta'); print(text) console.log(text)

return t.charAt(0).toUpperCase() + t.slice(1); } function greet(name) { return 'Hello ' + capitalize(name); } function print(text) { console.log(greet(text)); } print('cherta');

Web API’s main() function printUsers() {
console.log('before'); fetch('/users', function logUsers(response) { console.log(response.users); }); console.log('after'); } printUsers(); Task Queue Stack

Stack Web API’s main() function printUsers() {
console.log('before'); fetch('/users', function logUsers(response) { console.log(response.users); }); console.log('after'); } printUsers(); Task Queue printUsers()

console.log('before'); fetch('/users', function logUsers(response) { console.log(response.users); }); console.log('after'); } printUsers(); Task Queue printUsers() console.log…

console.log('before'); fetch('/users', function logUsers(response) { console.log(response.users); }); console.log('after'); } printUsers(); Task Queue printUsers() fetch(response, logUsers)

console.log('before'); fetch('/users', function logUsers(response) { console.log(response.users); }); console.log('after'); } printUsers(); Task Queue printUsers() fetch(response, logUsers) Magia Negra

console.log('before'); fetch('/users', function logUsers(response) { console.log(response.users); }); console.log('after'); } printUsers(); Task Queue printUsers() console.log… Magia Negra

console.log('before'); fetch('/users', function logUsers(response) { console.log(response.users); }); console.log('after'); } printUsers(); Task Queue printUsers() Magia Negra

console.log('before'); fetch('/users', function logUsers(response) { console.log(response.users); }); console.log('after'); } printUsers(); Task Queue Magia Negra

Stack Web API’s function printUsers() {
console.log('before'); fetch('/users', function logUsers(response) { console.log(response.users); }); console.log('after'); } printUsers(); Task Queue Magia Negra

console.log('before'); fetch('/users', function logUsers(response) { console.log(response.users); }); console.log('after'); } printUsers(); Task Queue logUsers(response)

console.log('before'); fetch('/users', function logUsers(response) { console.log(response.users); }); console.log('after'); } printUsers(); Task Queue logUsers(respon se)

y el event loop

console.log('before'); fetch('/users', function logUsers(response) { console.log(response.users); }); console.log('after'); } printUsers(); Task Queue logUsers(respon se)

conclusiones

Ilustraciones por Alen Chimanoski [email protected] http://portfolioalen.blogspot.com/

Gabriel Chertok @iamcherta github.com/cherta blog.cherta.info Gracias

Artículo de Tali Grasiel & Paul Irish en html5rocks: http://
www.html5rocks.com/en/tutorials/internals/howbrowserswork Bibliografía Philip Roberts talk What the heck is the event loop anyway? en youtube: https://www.youtube.com/watch?v=8aGhZQkoFbQ Concurrency model and Event Loop en la MDN: https:// developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/EventLoop

Alice in browserland

Alice in browserland

Other Decks in Technology

Featured

Transcript