Presentación
Vídeo
Transcripción
Extracto de la transcripción automática del vídeo realizada por YouTube.
Thank You Divya good morning everyone I'm glad to be here are you guys having a good time so like Divya mentioned today we're going to talk or discuss little bit about hardware acceleration and speaking about acceleration how many of you guys know
this guy so this guy is probably competing with hacker news with respect to how it decreases our productivity in the last couple of years and if you like many people play this on your smartphone today we have a very powerful smartphone that can play this game
in many other more complicated games and they all play the games very well so any mention is smooth objects flying everywhere no problem whatsoever but then did it ever occur to you why the same powerful smartphone struggle as you view web pages or even rich
websites so as a front-end developers you might have got some tricks on how to improve the performance how many of you are familiar with the strengths at three tricks or even give that kind of advice so throughout this presentation we're gonna see that
it takes more than just taking your magic one and then catch the spell translate 3d file in order to speed up your user interface so before I work at Sinjar dealing with html5 and JavaScript development I work on different different things from C++ multi-platform
toolkit to WebKit and then as I move to front end to see how fun in development works I realize that some time there are gaps of knowledge here and there on how certain things works and if if we just know about this then we will be better prepared to handle
all the intricacy of hardware acceleration so today I'm going to focus mostly on css3 some of the principle they are the same so hopefully with some tweaks you can extrapolate to say canvas or ice feature even WebGL so I'm not going to give you an
exhaustive list what to do and what not to do with respect to optimization because if you follow yesterday's talk or any other resource on the internet then you get all this kind of best practices so I use the internet especially the web good luck if you're
still using cover what I'm going to show is a little bit of a sneak peek what happens under the hood and then what kind of tools and platform that you can utilize so that you can explore this by yourself so speaking about Hardware external web browser
we need to have a quickly professor first on how web browser works this is just a 10,000 foot overview web browser is a complicated piece it handles everything that we can possibly imagine and probably the the front models is networking because it's responsible
to pull the bits and pieces of the network server and then all this content needs to be fed to the rendering engine and if there's application logic with in JavaScript the JavaScript engine needs to kicks in and then carry out some execution but at the
end of the day what you want from web browser is that it transformed the contents the web company itself into pixels that you can turn the screen so the user can consume it so this is delegated to something called graphics tag we're going to see what graphics
tech is in the next couple of minutes so the web content itself has typically consist of either not either both HTML to define the contents and then search it to set how how would you won't want the content to to to appear on screen so this to path crosses
as they which the monitor in in form of pixels so these are very high level overview of how all those contents merge or converted at some point so the dawn I'm sure all of you familiar with this this three classes are the actual WebKit classes names in
the source code that maps to the names of the dome itself so if you have a HTML content like this then the browser needs to create the tree that structures that maps to how the dome is structured so there's also something called render tree this is WebKit
terminologies but i was told that fire folk has the same thing under different name every vendor box usually maps to a particular dome node and this render tree is the one that implements the full CSS box model so it handles everything from hit testing all
the metrics how you want to size it position etc etc so if you specify style after being resolved particular element then there will be corresponding render style which roughly match to what you will expect from a dom element if you do get computer style so
these are the ingredients that the browser needs to display your web contents to the screen typical optimization started used to minimize layout we need to be careful and distinguish between style recalculation layout in the first example I just change the
[ ... ]
Nota: se han omitido las otras 2.221 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.