[{"title":"What the heck is the event loop anyway? | Philip Roberts | JSConf EU","description":"JavaScript programmers like to use words like, “event-loop”, “non-blocking”, “callback”, “asynchronous”, “single-threaded” and “concurrency”.\n\nWe say things like “don’t block the event loop”, “make sure your code runs at 60 frames-per-second”, “well of course, it won’t work, that function is an asynchronous callback!”\n\nIf you’re anything like me, you nod and agree, as if it’s all obvious, even though you don’t actually know what the words mean; and yet, finding good explanations of how JavaScript actually works isn’t all that easy, so let’s learn!\n\nWith some handy visualisations, and fun hacks, let’s get an intuitive understanding of what happens when JavaScript runs.\n\nTranscript: http://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html\n\nLicense: For reuse of this video under a more permissive license please get in touch with us. The speakers retain the copyright for their performances.","availableLangs":["zh-CN","zh-Hant","en","fr","de","hi","id","it","ja","ko","pl","pt","pa","ru","es-ES","ta","th","tr","vi"],"lengthInSeconds":"1612","thumbnails":[{"url":"https://i.ytimg.com/vi/8aGhZQkoFbQ/default.jpg?sqp=-oaymwEkCHgQWvKriqkDGvABAfgB_gmAAtAFigIMCAAQARhyIEYoajAP&rs=AOn4CLDvhbqE-A2AXoKiqAd60_F6_re0Jg","width":120,"height":90},{"url":"https://i.ytimg.com/vi/8aGhZQkoFbQ/mqdefault.jpg?sqp=-oaymwEmCMACELQB8quKqQMa8AEB-AH-CYAC0AWKAgwIABABGHIgRihqMA8=&rs=AOn4CLC_7X6ep6qSAGxbGEgrNeDipNDk4g","width":320,"height":180},{"url":"https://i.ytimg.com/vi/8aGhZQkoFbQ/hqdefault.jpg?sqp=-oaymwEmCOADEOgC8quKqQMa8AEB-AH-CYAC0AWKAgwIABABGHIgRihqMA8=&rs=AOn4CLABwixVJ0IvCZ-zf_hBMFALLImy8Q","width":480,"height":360},{"url":"https://i.ytimg.com/vi/8aGhZQkoFbQ/sddefault.jpg?sqp=-oaymwEmCIAFEOAD8quKqQMa8AEB-AH-CYAC0AWKAgwIABABGHIgRihqMA8=&rs=AOn4CLBNf-dCujikR6sOD9rQJLIYZB4FbQ","width":640,"height":480},{"url":"https://i.ytimg.com/vi/8aGhZQkoFbQ/hq720.jpg?sqp=-oaymwE2CK4FEIIDSEbyq4qpAygIARUAAIhCGAFwAcABBvABAfgB_gmAAtAFigIMCAAQARhyIEYoajAP&rs=AOn4CLAPhpOuUwdXcAm3ZNMw90ezPQYKXQ","width":686,"height":386}],"transcription":[{"subtitle":">> (Phillip Roberts) bonjour, venez et asseyez-vous.","start":1.64,"dur":2.88},{"subtitle":"Pour cette dernière session avant la pause\naprès-midi, notre invité est Phillip Roberts qui travaille","start":4.52,"dur":5.78},{"subtitle":"chez &yet et qui est venu de Londres ‑‑ d'Écosse.","start":10.3,"dur":2.52},{"subtitle":"Édimbourg.","start":12.82,"dur":1},{"subtitle":"‑‑ eh ben, ma mémoire ne dure que 10 secondes, il va nous\nparler de l'event loop.","start":13.82,"dur":3.69},{"subtitle":"Pouvez-vous tous donner à Philip\nun tonnerre d'applaudissements.","start":17.51,"dur":1.089},{"subtitle":">> Phillip Roberts : OK, bonjour à tous et merci\nd'avoir ici au side track, c'est génial","start":18.599,"dur":2.34},{"subtitle":"de voir une audience si nombreuse ici.","start":20.939,"dur":1.691},{"subtitle":"Pouvez-vous tous faire un étirement ?","start":22.63,"dur":2.19},{"subtitle":"Je dois m'étirer, pour que j'aie l'air moins étrange.","start":24.82,"dur":6.99},{"subtitle":"Je voudrais parler de l'event loop \net de quoi s'agit l'event loop","start":31.81,"dur":5.409},{"subtitle":"dans JavaScript.","start":37.219,"dur":2.401},{"subtitle":"Donc, comme on vient de le mentionner, je travaille chez &yet\nqui est une petite et fabuleuse boîte de dév","start":39.62,"dur":7.279},{"subtitle":"USA, contactez-nous s'il vous faut de l'aide\npour des trucs en temps réel.","start":46.899,"dur":3.851},{"subtitle":"C'est notre spécialité.","start":50.75,"dur":1.51},{"subtitle":"Donc, il y a 18 mois--Moi, un développeur pro\nrémunéré de JavaScript, je me suis posé cette question","start":52.26,"dur":7.74},{"subtitle":"comment JavaScript fonctionne-t-il en fait ?","start":60,"dur":3.98},{"subtitle":"Et je n'étais pas vraiment sûr.","start":63.98,"dur":1.87},{"subtitle":"J'ai entendu parler du terme V8 , le Runtime de chrome\nMais je ne savais pas ce que ça voulait dire,\nni à quoi ça servait.","start":65.85,"dur":6.87},{"subtitle":"J'ai entendu des choses comme single threaded, vous\nsavez certainement que j'utilise des callbacks","start":72.72,"dur":3.55},{"subtitle":"Comment les callbacks fonctionnent-ils ?","start":76.27,"dur":1.7},{"subtitle":"Je me suis lancé dans un voyage de lecture et de recherche\net j'ai commencé à faire des expériences dans le navigateur","start":77.97,"dur":7.28},{"subtitle":"en commençant comme ça.","start":85.25,"dur":1},{"subtitle":"‑‑ J'ai posé cette question : JavaScript, \nqu'es-tu ?","start":86.25,"dur":4.29},{"subtitle":"Je suis un langage concurrent à thread unique ‑‑\nd'accord.","start":90.54,"dur":5.14},{"subtitle":"ouais, c'est cool, je possède un call stack, un event\nloop, une callback queue, et quelques autres API","start":95.68,"dur":5.38},{"subtitle":"et d'autres trucs.","start":101.06,"dur":1.559},{"subtitle":"‑‑ Je vois.","start":102.619,"dur":1},{"subtitle":"Je n'ai pas obtenu de diplôme en informatique.","start":103.619,"dur":1.64},{"subtitle":"Enfin, ces mots, ça reste des mots, oui j'ai entendu\nparler du V8 et des divers Runtimes et des différents","start":105.259,"dur":6.161},{"subtitle":"navigateurs, j'ai donc interrogé V8, tu as un call\nstack, un event loop, une callback queue, et","start":111.42,"dur":4.45},{"subtitle":"d'autres APIs et trucs, j'ai un call stack\net un heap, je ne connais rien sur les autres","start":115.87,"dur":4.429},{"subtitle":"trucs, d'accord, c'est intéressant, donc en gros\n18 mois se sont écoulés.","start":120.299,"dur":9.38},{"subtitle":"Et je pense avoir compris cela.","start":129.679,"dur":2.871},{"subtitle":"(Rires) et donc, voici ce que je veux\npartager avec vous aujourd'hui.","start":132.55,"dur":3.42},{"subtitle":"J'espère que cela vous sera utile si vous venez récemment\ndécouvrir JavaScript, vous aider à comprendre pourquoi","start":135.97,"dur":5.54},{"subtitle":"JavaScript est si étrange lorsqu'on le compare\nà d'autres langages que vous avez peut-être utilisés, pourquoi les","start":141.51,"dur":4.55},{"subtitle":"callbacks sont quelque chose d'important qui nous donne des cauchemars\nmais dont on ne peut pas se passer.","start":146.06,"dur":3.23},{"subtitle":"Et si vous êtes un JavaScript chevronné\nj'espère vous offrir quelques nouvelles informations","start":149.29,"dur":6.25},{"subtitle":"sur le fonctionnement du Runtime que vous utilisez\npour vous permettre d'y songer un peu mieux.","start":155.54,"dur":5.35},{"subtitle":"Donc si nous jetons un coup d'œil sur le JavaScript Runtime\nlui-même comme V8, le Runtime de Chrome.","start":160.89,"dur":10.49},{"subtitle":"Voici une vue simplifiée du\nJavaScript Runtime.","start":171.38,"dur":3.749},{"subtitle":"Le heap (tas), où a lieu l'allocation mémoire,\net ensuite le call stack (pile d'exécution), où","start":175.129,"dur":6.72},{"subtitle":"se trouvent vos stack frames (blocs de pile) et tout\nce genre de choses, mais, si par exemple, vous clonez le code base et le grep","start":181.849,"dur":8.081},{"subtitle":"du V8 pour des trucs comme setTimeout\nune requête DOM ou HTTP, vous ne les trouverez pas,","start":189.93,"dur":7.79},{"subtitle":"elles n'existent pas V8, chose qui\nm'a surpris.","start":197.72,"dur":3.66},{"subtitle":"C'est la première chose que vous utilisez lorsque vous pensez\naux trucs async et pourtant, elle est absente du code source du V8.","start":201.38,"dur":6.55},{"subtitle":"Hum… intéressant.","start":207.93,"dur":1.46},{"subtitle":"Donc, au cours de ces 18 mois de découvertes, j'ai\nfini par comprendre que c'est vraiment, c'est vraiment","start":209.39,"dur":6.47},{"subtitle":"la vue d'ensemble, c'est ce que j'espère\nvous aider à suivre aujourd'hui et comprendre","start":215.86,"dur":4.189},{"subtitle":"ce que sont ces pièces, nous avons le V8 Runtime\nmais aussi ces trucs qu'on appelle web API","start":220.049,"dur":5.05},{"subtitle":"qui sont des suppléments fournis par le navigateur.","start":225.099,"dur":2.811},{"subtitle":"DOM, AJAX, setTimeout, des trucs comme ça, nous\navons aussi ce mythique event loop et la","start":227.91,"dur":6.95},{"subtitle":"callback queue.","start":234.86,"dur":1},{"subtitle":"Je suis certain que vous avez entendu quelques-uns de ces termes\nauparavant, sans bien comprendre de quoi il s'agissait.","start":235.86,"dur":3.57},{"subtitle":"comment ces pièces agissent ensemble.","start":239.43,"dur":2.44},{"subtitle":"Donc, je vais commencer dès le début,\ncertaines choses pourraient être nouvelles pour vous, les mots évoqués","start":241.87,"dur":4.759},{"subtitle":"pourraient être nouveaux pour vous, quelques-uns les reconnaîtront.","start":246.629,"dur":2.261},{"subtitle":"Nous allons enchaîner rapidement à partir de là,\nsoyez indulgents si c'est évident, je pense que ce n'est pas","start":248.89,"dur":5.05},{"subtitle":"le cas pour de nombreuses personnes.","start":253.94,"dur":2.24},{"subtitle":"Donc, JavaScript est un langage de programmation à\nthread unique dont le Runtime est à thread unique, il dispose","start":256.18,"dur":5.11},{"subtitle":"d'un seul call stack.","start":261.29,"dur":2.1},{"subtitle":"Et il peut faire une seule chose à la fois,\nc'est ce que signifie thread unique, le programme peut","start":263.39,"dur":5.18},{"subtitle":"exécuter un seul morceau de code à la fois.","start":268.57,"dur":2.35},{"subtitle":"Donc, essayons de visualiser cela pour\nnous faire idée de ce que cela veut dire,\ndonc si j'ai","start":270.92,"dur":4.47}]},{"_note":"Response truncated for documentation purposes"}]