Bestand wählen
Merken

Warp Speed Memory Management

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
my
below thank you everyone for coming very exciting to be here and I hope you all enjoy the conference website book and Mr. by letting you all in a little secret in that I am very much more comfortable in front of a computer that I am doing of public speaking the so so
I tell you about myself my name is kelly center I'm a web developer act ignorant our consultants may also teach you write books I personally like to stay consulting side of things and so I get the great opportunity getting to work on a lot of different and types of technologies and applications and is it also means I get to work with a few different frameworks so if the 1st started telling people that my talk is gonna be about memory management the immediate response was almost always the same 2 questions the 1st 1 being Vol II and the 2nd usually in the form of a sanity check ethnic by forgotten what programming language I was using but here we are able constantly but memory management as I like to share with everyone what I feel like this is still an important topic today and May 1 of those being user experience so when I'm guarantees an internet speed across the country or across the world to have to deal with limited internet access a very connection speeds but even if the users do you have the bus Internet access what is the change that there have to share that connection either at home or at work where a conference like this so the connection speeds here might typically be dead on any given day but now that we have a thousand people turned to down the cat videos things problem starts so that a little bit some hardware can also use impact user experience it's you not guarantee that users are going to have a latest and greatest laptops and desktops including my own until a few weeks ago and I was working on a map that was a few years old but if you insist that your users have great internet access and have great hardware let's talk about your user habits so how many people in this room have at least 10 tabs open in any given browser yeah myself included the so were web developers that's all we do we do things on internet you but that's not all that we do on our computers were checking e-mails were listening to music for streaming videos here and they were actually working so we have text editors and terminals open were deploying tho and you don't worry about debugging in browser plus all of your browser extensions in every single 1 of these days use memory so and developers in why should we care it's an easy answer is that even modern browsers are not exempt from performance concerns so in my old computer crashed all the time and the biggest culprit ways browsers but another reason this topic is important in me is because of the teaching experiences I've had a every past couple of years and I had the opportunity to work with a lot of new developers to spend so much time and and so educational for myself some come from CS background some come from nontraditional backgrounds but regardless of their last questions like why am I writing code display from white should I write it like this why can't I just use library of them do everything forming that's why knowing how things
work under 100 knowing how code you've written actually works or what all those libraries are doing for you cannot prevent
disasters so having a stronger understanding of those underlying technologies to make us all better developers and also make the other make more informed decisions so before jumping into how or what code you right from the basics
the and so restart the memory life cycle it's pretty straightforward and is somewhat at about 3 steps and allocate user release so lower level language is and seeking being a common example all have built-in primitives for allocating and deallocating memory but in JavaScript this is done automatically you values are allocated 1 free and are allocated when treated in Friedman they're no longer used and this automatic process makes it easy for all developers to feel like they don't need to care but we can still 3 objects that stick around afterward and using them so I think a good example is actually look into what's happening with this automation in the 1st step is that you
actually need to allocate memory you need and in JavaScript this is done along side object creation declaring variables but function calls also results on object allocation and some this will create new variables or objects and then you actually use it which is basically just reading and writing in memory both allocate news are explicit in all languages and in Java Script OIC explicit it mean that you actually have to create these variables your code just know that you need a variable called or that going to be a station and the dots that release is this process of d allocating memory when it's no longer needed and this step is also explicit in lower-level languages but in Java Script this is where the
garbage collector concern so all browsers you garbage collection a little bit differently but most modern browsers will utilize the generational and mark-and-sweep garbage collector so taking from crimes the 8 for example we so generational garbage collectors
leverage effect that most of our objects are meant to be short-lived usually do not have a lot of global variables hanging around all the time so objects are generally grad gathered into 2 groups and bring to refer to those as young and old so the newest objects that you create the allocated to this young which is on the top and when this particular young keep is a young garbage collection restricted and if any objects are still being alive after this and by alive and still being used a reference I building move to the next generation In young garbage collection happens more often than old and we'll see why this is a little bit faster processing minutes but old generation collection usually by users on mark-and-sweep algorithm that's based on the idea of reachability or references so an all
garbage collection yr old generation the garbage collector will start at the global object to so for example that the the window object of your browser and from there it would for any objects preference from that rate and then it will continue to look for any object reference from those objects and so on free some larger tree structure and when an object can no longer be reached from that route will be considered garbage but thing to keep in mind is that when an old garbage collection starts a young generation collection will also run and that's 1 reason why it's a much slower process than just young collection on its own so very clean is a
very important part of your performance the collector is a friend and it's designed to make your life easier but it's still important understand and implement effective memory management because it's not only about how many objects that you still have a memory it's also about how you allocate use so while having this type of automatic management is great for developers the browsers collector does not know your applications or your intentions so your code to be very clear about what you wanna do you in what is no longer being used so if we don't have the same primitives at low-level languages why should we bother learning about memory
life cycle well as we mentioned earlier even modern applications in modern rather still have to do with blue leaks and collection sets so what happens when you run into a memory issues the
give slow you eyes you and I can cause reduced battery life because your laptop now working harder or your browser crash and none of your users ever wanna see this space the most it's that you read online about memory leaks are about how the way things that prevent the browser from leasing memory but some of these problems can also be caused by the as developer securing
some of the things include the misuse of variables so if you're creating a lot of global variables that can be cleaned up until a user refreshes closes the chapter closes the browser or navigates away from the page so if a variable script this global object your your garbage collector has no way of knowing unless you explicitly no without when it's not going to be used in more but when you use local variables there anything that when the function has completed and they're not the remaining references to it another thing that developers can cause this is created to me allocations and then your users experience all these garbage collection process you know that slow you and we also have called there waiting for something that never happens also Don changes are a very it's their reactions so few manipulating the DOM you typically get better performance by trying to batch operations together so memory leaks still
happen every single day I still see them to this day if I'm doing any code reviews were under deadlines and you're trying to write code fast and sometimes a few things get messed and usually only the ones that cause big changes in performance of the ones that get noticed but even a small incident add especially in single page applications that were starting to build the browsers job is only to reclaim things that are no longer reachable so this is me if you're accumulating objects and you're not removing them when you're done memory usage continues to rise at the mouth of objects increases there's nothing the browser can do about that so it's the proactive about preventing this these issues but there's no single right way to do things about it to focus on optimizing that you forget to solve your real business problems just mind if you want the performance for your application you should be writing code that is faster more memory efficient so we discussed a lot about memory
and is the basic life cycle now we know that if we write clean code are actually more efficient and at this point you may be thinking if I know how directly in Java Script wonderingly framework like amber while if you've ever built were trying to build a complex application with the wife of user interactions with Alampur you know how difficult it can be to manage data and you i as it begins to scale so for example and regular old jobs that way and it can be hard to know when to remove atlases and ideally you wanna remove them when you take a thing not discrete but to write merely performance script the US to be built up using some type of set of interaction teardown cycle and then you're gonna wanna find ways to streamline your code and how it interacts with the DOM in in a wanted try to find ways that your code can be easier to write test and trouble troubleshoot another basically building framework so we decided to use an verdict production apps because these projects really needed an opinionated framework that would help reduce some of the boilerplate JavaScript and has a lot of great teachers to help you build a clean interface and it's optimized exactly for rendering dyadic data to the dam and helps enforce great coding patterns and this was very very helpful and developer onboarding and resulted in so much less by chatting on how to actually do something these a lot of nice to have but what is the veracity with memory so 1 really good example of how Member helps optimizes for us is would build events and these events include common key presses the mouse events and is that having to register these events manually inverse sets up a global event listener and after an the 1st initializes all of the code is run in response to these events and the great thing is that if an event does occur in bold will look at the target it's a button click it will travel at the DOM tree to find the corresponding method this is quite a bit easier than having to manually find elements ID so when 1 of these event listeners is triggered In number rendered started this is 1 of the things that I think is really need about Amber so immersed candles work by a set of keys also known as the running and by default there 6 and all these cues have a priority in and their in order receipt being the 1st ensuring the in the last and really helps optimize recall that that combining an ordering or code and helps coordinate some of the changes to the DOM so 1 of the biggest efficiency boost that we've seen from America is this ability to coalesce these multiple events otherwise we basically we try to do them ourselves or are you just have to deal with it so all basic user events like clicking the button will start around the In this guarantees that changes made to any properties by the cement are propagated before returning control back to the browser the the so we have all these um divinity 6 events and NYTimes look like words so we step back and just kind of run through actually what they do really great so you're CQ is the 1st you and it's also the 1st priority and this is where your data bindings are handled so we can overlook is triggered by user interaction like in a in text we are going to need these new or updated values before anything else so we can keep our objects and scenes in action is your main work you and that's where indeed in it contains a scheduled tasks and like any of your a sinc functions a promises yeah and before rendering anything ever will attack attempt to promise in here out transitions this helps make sure we don't try to render anything before your and of that word in immediately navigate away from so render Q is when images and generate a data dump and because this occurs after all other changes to review this can help ensure that our Donnelly has to be generated once during this from the and that's great because there are those who are repainting layouts can be kept to a minimum so that after and Q contains jobs that need to happen after you're done been updated were generated and this is commonly used by J. query D 3 here in the other party as a dominant relations and the last 1 is destroyed and it does pretty much what you think it's going to do you have to do is any jobs cleanup object that incidental to destroy so was a lot of information that I just direct you about differently and so hard to take it all in the just talking at you so build up example
a trade show you what it looks like so when you start from low it's going to be democracy here when that state has completed we moved to the actions so here here we can see that there are 8 test you up and wonder what's as tacit completed the removal step back and see if there are any additional jobs in previous and so process those before moving on so I want those are completed and if we have any test the routers transition q any guesses check we're in a back up and make sure that no additional jobs were added to the previous years and so on until all our have been completed so did you still a little bit unsure about how this works it might make more sense with an actual example and I found that the components of pretty good for this and so if you're not
familiar with components they allow you to create reusable pieces of code that extend additional standard which means that they can be used as 1st class elements so not everything has to be a dead seat 8 tags and you all tags and LI tags In components are great because they help solve the problem of duplication and lack of encapsulation front in web development but the behavior of a component is controlled by JavaScript and can be customized with the handlers and the website hooks and these CD lifecycle votes allow urine tests at different points throughout your opponents life and they occur upon initial and we in a short so if we know when they happen during the render cycle we can also begin to see where the handled in out the and this is usually in the render destroyed the life cycle works all you allow also aligned to be more explicit so we use components for things like I date pickers determine the size of input fields and using the dead of and then we even use them during to do horizontal scrolling using the numbers from the several quick example this is a
fairly simple example for just showing hiding in image so in the component we haven't actually called showing image when you press the button to show the image that should be set to true and rendered begins as we can see when log out all the dominate manipulation is being done in the will of the book is also handled in the reader to so another thing about another great thing about compliance is that number will tear them down given during the destroyed the when a component is removed so you'll have to manually turn these things down but
the so let's say we had a more complicated component we might have certain behavior happen after properties been changed and just like in Script ever observers are mainly used for reacting to changes and you can still create your own observers manually member they did not I did the elements within the component we also need to make sure you are removed them but if you use numbers built-in syntax it will automatically turn on the observers and objects destroyed in this helps to avoid memory leaks the chances are opinion observer may just be able to use a computer properties so properties are built on top of the observer patterns and it's great that they can be defined as functions because then you can use it the same way you would any normal or static properties and they can also be using templates so it can be a properties now when its 1st call the results cashed in 1 state changes occurred on 1 independent keys ill recalculate the output but if no changes occur on the real cash result is used because the computer properties observed properties that they depend on this means that you don't have to manually make sure everything is in sync so in writing a web
application knowing how you use them there is like working with this organized in common easy set of operations you kind of feelings you can sit back and the commander chair with the the code with a feeling of safety we can make things look easy the best developer usually have
detailed knowledge of how Member and underlying technology works you can really take advantage of it another we now know a bit more about Maria cycle research utilize a few basic jobs that best practices related garbage you expand I so anger is a lot of
built-in functionality that allows us to focus focus less on boilerplate JavaScript a more on solving real world problems having built events and being able to use a run loop the the life cycle works public applications more efficient and that provide precoding patterns in this ecological headache but these examples in these are the components in their life cycle works earlier very small few examples of how impor helps simplify some of our common JavaScript the big takeaway that I want you to have this talk is that having this type of automatic management and helpful frameworks is really great for developers but be mindful of the underlying technologies and write code that helps a browsers garbage collector collect
and so if you have any questions I'll be around the conference addresses afternoon tomorrow and I also have built the example application has the consul of similar so 1 set of being in the these examples that you saw with dividers as the what was superior kind dig into the wrong loop and some of these cues and I'll be happy to hang out later this afternoon and also the person to get and I also have some nearest lagging anyone want some then the in and you so much for coming thank you yeah he he he's a new he he
Videokonferenz
Web Site
Code
Computer
Warping
ROM <Informatik>
Speicherverwaltung
Subtraktion
Bit
Datensichtgerät
Browser
Mathematisierung
EDV-Beratung
Kartesische Koordinaten
Computer
Computerunterstütztes Verfahren
Code
Framework <Informatik>
Internetworking
Videokonferenz
Bildschirmmaske
Gruppe <Mathematik>
Notebook-Computer
Endogene Variable
Datentyp
Programmbibliothek
Radikal <Mathematik>
Inverser Limes
Maßerweiterung
Softwareentwickler
E-Mail
Programmiersprache
Einfach zusammenhängender Raum
Hardware
Browser
Gleichheitszeichen
Mapping <Computergraphik>
Texteditor
Offene Menge
Festspeicher
Web-Designer
Bus <Informatik>
Speicherverwaltung
Computerunterstützte Übersetzung
Speicherverwaltung
Videospiel
Prozess <Physik>
Formale Sprache
Dreiecksfreier Graph
ROM <Informatik>
Code
Entscheidungstheorie
Übergang
Objekt <Kategorie>
Festspeicher
Dreiecksfreier Graph
Videospiel
Primitive <Informatik>
Speicherverwaltung
Softwareentwickler
Speicherverwaltung
Resultante
Lineares Funktional
Bit
Prozess <Physik>
Browser
Applet
Formale Sprache
Systemaufruf
Sweep-Algorithmus
Code
Unternehmensarchitektur
Objekt <Kategorie>
Generator <Informatik>
Skalarprodukt
Variable
Speicherbereinigung
Festspeicher
Arbeitsplatzcomputer
Skript <Programm>
Speicherverwaltung
Speicherbereinigung
Speicherverwaltung
Soundverarbeitung
Bit
Prozess <Physik>
Routing
Bitrate
Netzwerktopologie
Objekt <Kategorie>
Generator <Informatik>
Variable
Algorithmus
Speicherbereinigung
Bildschirmfenster
Speicherbereinigung
Datenstruktur
Soundverarbeitung
Videospiel
Browser
Formale Sprache
Kartesische Koordinaten
Code
Objekt <Kategorie>
Leck
Menge
Festspeicher
Dreiecksfreier Graph
Mereologie
Datentyp
Primitive <Informatik>
Speicherverwaltung
Softwareentwickler
Speicherverwaltung
Lineares Funktional
Nichtlinearer Operator
Prozess <Physik>
Physikalischer Effekt
Browser
Mathematisierung
Systemzusammenbruch
ROM <Informatik>
Variable
Raum-Zeit
Ordnungsreduktion
Homepage
Objekt <Kategorie>
Leck
Variable
Festspeicher
Notebook-Computer
Skript <Programm>
Speicherverwaltung
Stapelverarbeitung
Softwareentwickler
Speicherbereinigung
Bit
Punkt
Extrempunkt
Browser
Minimierung
Applet
Schreiben <Datenverarbeitung>
Kartesische Koordinaten
Element <Mathematik>
Inzidenzalgebra
Eins
Homepage
Netzwerktopologie
Regulärer Graph
Prozess <Informatik>
Mustersprache
Skript <Programm>
Default
Schnittstelle
Softwaretest
App <Programm>
Schnelltaste
Softwareentwickler
Synchronisierung
Kategorie <Mathematik>
Volumenvisualisierung
Abfrage
Biprodukt
Ereignishorizont
Gruppenoperation
Menge
Festspeicher
Projektive Ebene
Information
Ordnung <Mathematik>
Schlüsselverwaltung
Mathematisierung
Gruppenoperation
Zahlenbereich
Interaktives Fernsehen
Stromlinie <Strömungsmechanik>
ROM <Informatik>
Framework <Informatik>
Code
Demoszene <Programmierung>
Reelle Zahl
Fokalpunkt
Endogene Variable
Datentyp
Softwareentwickler
Leck
Videospiel
Relativitätstheorie
sinc-Funktion
Einfache Genauigkeit
Objekt <Kategorie>
Loop
Dreiecksfreier Graph
Gamecontroller
Codierung
Speicherabzug
Wort <Informatik>
Textbaustein
Router
Abstimmung <Frequenz>
Subtraktion
Prozess <Physik>
Punkt
Klasse <Mathematik>
Gruppenoperation
Zahlenbereich
Geheimnisprinzip
Element <Mathematik>
Code
Komponente <Software>
Prozess <Informatik>
Code
Volumenvisualisierung
Zusammenhängender Graph
Router
Softwaretest
Videospiel
Synchronisierung
Element <Gruppentheorie>
Volumenvisualisierung
Ein-Ausgabe
Gruppenoperation
Warteschlange
Datenfeld
Zahlenbereich
Dreiecksfreier Graph
Web-Designer
Standardabweichung
Aggregatzustand
Resultante
Lineares Funktional
Kategorie <Mathematik>
Template
Mathematisierung
Luenberger-Beobachter
Zahlenbereich
Systemaufruf
Element <Mathematik>
Computer
Synchronisierung
Objekt <Kategorie>
Leck
Benutzerbeteiligung
Reelle Zahl
Festspeicher
Mustersprache
Skript <Programm>
Luenberger-Beobachter
Zusammenhängender Graph
Schlüsselverwaltung
Phasenumwandlung
Bildgebendes Verfahren
Nichtlinearer Operator
Bit
Menge
Prozess <Informatik>
Dreiecksfreier Graph
Kartesische Koordinaten
Softwareentwickler
Code
Lineares Funktional
Videospiel
Browser
Adressraum
Schreiben <Datenverarbeitung>
Kartesische Koordinaten
Fokalpunkt
Teilbarkeit
Code
Ereignishorizont
Framework <Informatik>
Videokonferenz
Loop
Menge
Reelle Zahl
Code
Datentyp
Mustersprache
Dreiecksfreier Graph
Zusammenhängender Graph
Speicherverwaltung
Speicherbereinigung
Textbaustein
Hilfesystem

Metadaten

Formale Metadaten

Titel Warp Speed Memory Management
Serientitel Ember Conf 2016
Autor Senna, Kelly
Lizenz CC-Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported:
Sie dürfen das Werk bzw. den Inhalt zu jedem legalen und nicht-kommerziellen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen und das Werk bzw. diesen Inhalt auch in veränderter Form nur unter den Bedingungen dieser Lizenz weitergeben.
DOI 10.5446/34720
Herausgeber Confreaks, LLC
Erscheinungsjahr 2016
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract In low level languages, primitives exist for memory management. Despite the C-like syntax, JavaScript is garbage collected, causing many front end developers to feel it does a great job of memory management for us. But how does it actually work and does it work how we think it does? This session will discuss memory management in JavaScript (compared to other languages) and what is really going on behind your browser. Using an Ember.js application, we will also discuss best practices to optimize our code, how JavaScript and Ember optimizes for us, and ways we can address common pain points.

Ähnliche Filme

Loading...
Feedback