Placeholder Image

字幕表 動画を再生する

  • >> (Phillip Roberts) hello, come in and sit down.

    >>(Phillip Roberts)こんにちは。 ダウン。午後の前の最後のセッションでは

  • So for the last session before the afternoon break, we have Phillip Roberts who works at

    休憩、私たちはで働くフィリップロバーツがあります アンデアとは、ロンドン - スコットランド出身です。

  • Andea and is here from London ‑‑ Scotland.

    エジンバラうわー、10秒の記憶、 彼はベントループについて話します。もし

  • Edinbrough.

    誰もがフィリップに大きなブラウンを与えることができます 拍手のラウンド。

  •  ‑‑ wow, ten second memory, he's going to talk about the vent loop.

    >> Phillip Roberts:皆さん、こんにちは。 サイドトラックに来るために、それは素晴らしいです

  • If everyone could give Phillip a big brownedder round of applause.

    それがここに詰まっているのを見るために。みんなできますか ストレッチをください。ストレッチする必要があったので

  • >> Phillip Roberts: Okay hello everyone, thanks for coming to the side track, it's awesome

    私は変わって見えません。について話したい イベントループと一体何がイベントなのか

  • to see it packed out in here.

    JavaScript内のイベントループのように、ループします。 彼が私がAndYetのために働くと言ったので、最初に

  • Can everyone give me a stretch.

    これは素晴らしい小さなDevの店です。 アメリカ、リアルタイムで助けが必要な場合は私たちを調べてください

  • I needed to stretch, so I look less weird.

    もの。それが私たちが得意とするところです。だから、について 18か月前 - 私は有料のプロのJavaScriptです。

  • I want to talk about the event loop and what the heck is the event loop, as in the event

    開発者 - 私は自分自身にどのようにするのかと思いました JavaScriptは実際に動作しますか?そして私は完全ではなかった

  • loop inside JavaScript.

    確かに。私はV8という言葉を聞いたことがある、クロムのランタイム それが何を意味しているのか、それが何を意味しているのか、本当にわかりません

  • So first up, as he said I work for AndYet which is an awesome little Dev shop in the

    した。シングルスレッドのようなものが聞こえた 私がコールバックを使っているのは明らかです。どうやって

  • US, look us up if you need help with realtime stuff.

    コールバックは機能しますか?私はの旅を始めました 読書や研究、実験が好きです

  • That's what we're good at.

    基本的に起動したブラウザで この。

  • So, about 18 months ago--I'm a paid professional JavaScript developer--I thought to myself

    - 私はJavaScriptのようなものでした あなたですか?私はシングルスレッドシングル同時です

  • how does, like JavaScript actually work?

    言語の権利ええ、クール、私は持っています コールスタック、イベントループ、コールバックキュー

  • And I wasn't entirely sure.

    そして他のいくつかのAPIともの。 - 儀式。 私はコンピュータサイエンスの学位を取得していません。私

  • I'd heard V8 as a term, chrome's Runtime didn't really know what that meant, what that did.

    つまり、これらの言葉は、言葉なので、聞いたことがある V8とさまざまなランタイムについて

  • I'd heard things like single threaded, you know obviously I'm using callbacks.

    ブラウザなので私はV8を見ましたあなたは電話がありますか スタック、イベントループ、コールバックキュー

  • How do callbacks work?

    他のいくつかのAPIともの、私はコールスタックを持っています そしてヒープ、私はそれらの他に何を知りません

  • I started a journey of like reading and research and experimenting in the browser which basically

    物事は、大丈夫、面白いので基本的に 18ヶ月が経ちました。そして私はこれを手に入れたと思います。

  • started like this.

    (笑)だから、これは私がしたいものです 今日あなたと共有しましょう。うまくいけば、これは

  •  ‑‑ I was kind of like JavaScript what are you.

    比較的JavaScriptが初めての場合に便利です。 JavaScriptがなぜ奇妙なのか理解するのに役立ちます

  • I'm a single threaded single concurrent language ‑‑ right.

    他の言語と比較すると なぜコールバックが問題なのか、原因

  • yeah, cool, I have a call stack, an event loop, a callback queue, and some other APIs

    私たちは地獄だが必須です。そしてもしあなたが うまくいけば、経験豊富なJavaScript開発者

  • and stuff.

    ランタイムがどのようにしてあなたにいくつかの新鮮な洞察を与える 作品を使っているので、考えてみましょう

  •  ‑‑ rite.

    それは少し良くなりました。 JavaScriptを見れば ランタイムそのものであるV8のようなランタイム自体

  • I did not do a computer science degree.

    Chromeの中。これは JavaScriptランタイムとはヒープ、どこ

  • I mean, these words, they're words, so I heard about V8 and the various Runtimes and different

    メモリ割り当てが起こります 呼び出しスタック、ここであなたのスタック

  • browsers so I looked to V8 do you have a call stack, an event loop, a callback queue, and

    フレームはそのようなものですが、 もしあなたが好きなら、V8コードベースをクローンしてgrep

  • some other APIs and stuff, I have a call stack and a heap, I don't know what those other

    setTimeout、DOM、HTTPなどの場合 要求、彼らはそこにいない、彼らはしない

  • things are, okay, interesting so basically 18 months passed.

    私には驚きました。それは 考え始めるときに最初に使うもの

  • And I think I get this.

    非同期のものについては、それはV8のソースにはありません。 うーん...おもしろい。だから、この18ヶ月以上

  • (Laughing) and so, this is what I want to share with you today.

    発見の私はこれが本当にであることに気づくようになりました、 これは本当に大きな絵です、これは

  • Hopefully this will be useful if you're relatively new to JavaScript, help you understand why

    今日あなたを乗船させたいのですが これらの作品が何であるかを理解し、私たちは持っています

  • JavaScript is so weird when you compare it to other languages you might used why callbacks

    V8ランタイムですが、それから私たちはこれらのことを持っています Web APIと呼ばれるもので、

  • are a thing, cause us hell but are required.

    ブラウザが提供します。 DOM、AJAX、タイムアウト、 そのようなこと、私たちはこの神話の出来事を持っています

  • And if you're an experienced JavaScript developer hopefully give you some fresh insights how

    ループとコールバックキュー。きっときっと 以前にこれらの用語のいくつかを聞いたことがありますが、

  • the Runtime you're using works so you can think about it a little better.

    あなたはこれらの部分がどのようにして理解されていないか 一緒に引っ張る。だから、私はから始めるつもりです

  • So if we look at the JavaScript Runtime itself like V8 which is the Runtime inside Chrome.

    初めは、このうちのいくつかは新しいものになるでしょう。 言葉は人々、他の人々にとって新しいかもしれません

  • This is a simplified view of what JavaScript Runtime is.

    これを取得します。私達はすぐに動くつもりです これが明らかな場合は、ここから先に進んでください。

  • The heap, where memory allocation happens, and then there's the call stack, which is

    多くの人にとってはそうではないと思います。そう、 JavaScriptはシングルスレッドプログラミングです

  • where your stack frames are and all that kind of stuff, but, if you, like, clone the V8

    言語、シングルスレッドランタイム、それは持っています 単一の呼び出しスタックそしてそれは一つのことができる

  • code base and grep for things like setTimeout or DOM or HTTP request, they're not in there,

    一度に、それがシングルスレッドの意味です。 プログラムは一度に1つのコードを実行できます。

  • they don't exist in V8, which was a surprise to me.

    時間。それでは、それを試してみましょう。 その意味を理解するために

  • It's first thing you use when you start thinking about async stuff and it's not in the V8 source.

    左側にこのようなコードがあると いくつかの関数、関数乗数があります

  • Hmm ... interesting.

    これは2つの数を乗算します。 同じ数を2回かけて呼び出す

  • So, over this 18 months of discovery I come to realize this is really, this is really

    数の二乗を表示する関数 squareを呼び出してからconsole.logを呼び出す

  • the bigger picture, this is what I'm hoping to get you on board with today and understand

    そして私たちのファイルの一番下に私たちは実際に 印刷広場を実行し、このコードはすべて良いですか?作る

  • what these pieces are, we have the V8 Runtime but then we have these things called web APIs

    センス?クール。それで、これを実行するならば、まあ、私はするべきです ステップをバックアップするので、コールスタックは基本的に

  • which are extra things that the browser provides.

    それは基本的に記録するデータ構造です プログラムのどこにいるのか

  • DOM, AJAX, time out, things like that, we have this mythical event loop and the callback

    関数です。スタックに何かを置きます。 関数から戻ると、ポップアウトします。

  • queue.

    すべてのスタックができるスタックのトップ このファイルを実行すると、

  • I'm sure you've heard some of these terms before, but maybe you don't quite understand

    ファイルのような、メイン関数の一種 それ自体、それで、我々はそれをスタックにプッシュします。

  • how these pieces pull together.

    それから私たちはいくつかの関数定義を持っています、それらは 世界の状態を定義するのと同じように、

  • So, I'm going to start from the beginning, some of this will be new, to words might be

    そして最後に、正方形を印刷するようになりました、右 したがって、print squareは関数呼び出しです。

  • new to people, other people will get this.

    それをスタックにプッシュして、そしてすぐに 印刷広場の中で、積み重ねを押します。

  • We're going to quickly move on from here, bear with me if this is obvious, I think for

    これは乗算を呼び出す、今我々はリターンを持っている 文は、AとBを掛けて戻ります。

  • a lot of people it's not.

    戻ったら、スタックから何かをポップします。 そう、ポップ、スタックの乗数、返す

  • So, JavaScript is a single threaded programming language, single threaded Runtime, it has

    正方形に、印刷正方形、console.logに戻ります、 返品はありません、暗黙のうちに

  • a single call stack.

    関数の終わりに到達しました。 そうすることは、それを視覚化したようなものです。

  • And it can do one thing at a time, that's what a single thread means, the program can

    茎を呼ぶ、それは意味がありますか? (はい、フィル) あなたが電話について考えていなかったとしても

  • run one piece of code at a time.

    スタックする前に、出会ったときに出会った ブラウザサイドの開発を行っているので

  • So, let's try and visualize that just to get our heads around what that mean, so if I have

    このようなコードがあれば、関数baz これはbarを呼び出し、Fooを呼び出します。

  • some code like this on your left, we've got a few functions, a function multiplier which

    Chromeで実行するとエラーになります。 そして、それはスタックトレースを出力します。

  • multiplies two numbers, square which calls multiply with the same number twice, a function

    そのエラーが発生したときのスタックの状態 そう、キャッチされていないエラーおっとFoo、バー、バズ、匿名

  • which prints the square of a number of calling square and then calling console.log and then

    これが私たちのメインです。同様に、あなたがいるならば スタックを吹くような言葉を聞いた

  • at the bottom of our file we actually run print square, this code all good?

    その一例です。 fooという関数があります これはFooを呼び出すので、どうなるでしょう

  • Make sense?

    ? fooを呼び出す関数mainがあります。 これはfooを呼び出し、これはfooを呼び出します。

  • Cool.

    foo、そして最終的にはchromeは fooを16000回再帰的に呼び出すという意味ではありません。

  • So, if we run this, well, I should back up a step, so the call stack is basically ‑‑

    私はあなたのために物事を殺します あなたのバグがどこにあるのかを理解しましょう。そう

  • it's a data structure which records basically where in the program we are, if we step into

    私は新しい面を代表しているかもしれませんが 呼び出しスタックについては、ある程度の感覚があります

  • a function, we put something on to the stack, if we return from a function, we pop off the

    あなたの開発慣習ではすでに。そう、 大きな問題は、何が起こるのかということです。

  • top of the stack that's all the stack can do, ‑‑ so if you run this file, there's

    物事が遅いときは?だから、私たちはブロッキングについて話します そして行動を阻止し、阻止する、

  • kind of a main function, right, like the file itself, so, we push that on to the stack.

    存在するものとそうでないものの厳密な定義はない ブロッキング、実際には遅いコードです。

  • Then we have some function definitions, they're just like defining the state of the world,

    そのため、console.logは遅くはなく、whileループを実行します。 1から100億から遅い、ネットワーク要求

  • and finally we got to print square, right, so print square is a function call, so we

    遅いです。画像リクエストは遅いです。物事 どれが遅く、そのスタック上に何が

  • push that on to the stack, and immediately inside print square, push on to the stack,

    ブロッキング手段です。それで、ちょっとした例があります、 だから我々は持っているとしましょう、これは偽物のようなものです

  • which calls multiply, now we have a return statement, we multiply A and B and we return,

    ちょっとしたコード、getSynchronous、正しい、jQueryのような AJAXリクエストのようなものです。何が起こるだろう

  • when we return we pop something off the stack, so, pop, multiplier of the stack, returning

    それらは同期要求でした。 非同期コールバックについては同期しています。

  • to square, return to print square, console.log, there's no return, it's implicit, because

    私たちが持っているようにそれを通過するならば、私たちは電話します getSyncしてから待つ。

  • we got to the end of the function, and we're done so that's like a visualization of the

    ネットワーク要求をしている、ネットワークは相対的です コンピュータに、遅い、うまくいけばそのネットワーク

  • call stalk, does that make sense?

    リクエストが完了したら、先に進みます。 進む。待って、そしてこのネットワーク要求を意味する

  • (Yes, Phil) even if you haven't thought about the call stack before, you've come across

    決して終わらないかもしれないので…そうだ、私は私がすると思います 家に帰る。最後にこれら3つ、あなたはブロッキングを知っています

  • it when you've been doing browserside development, so if we have code like this, a function baz

    行動は完了し、スタックをクリアできます。 右。だからプログラミング言語では単一です

  • which calls bar, which calls Foo, which throws an error if we run it in Chrome we see this.

    スレッドを使用しています Ruby、それが起こるのです、そう、私達は作ります

  • And it prints the stack trace, right, the state of the stack when that error happened,

    ネットワーク要求、私たちはただ待つまでしなければならない 処理方法がないので、完了です。

  • so, uncaught error oops Foo, bar, Baz, anonymous function, which is our main.

    それ。なぜこれが実際に問題なのでしょうか。の 問題はブラウザでコードを実行しているためです。

  • Equally, if you've heard the term like blowing the stack, this is an example of that.

    それでは、ここに行きましょう。そう これはまさに、これはChromeです、これは

  • Have a function foo which calls Foo , so what's going to happen ? We have a function main

    実行したばかりのコードブラウザは私たちに与えない - よく彼らは私たちに同期AJAX要求を与えます、

  • which calls foo which calls foo, which calls foo, which calls foo, and ultimately chrome

    大きなwhileループを使ってこれを偽造しています、 同期だから、基本的には

  • says, you probably didn't mean to call foo 16,000 times recursively, I'll just kill things

    続行する前に5秒間ループします。 ここでコンソールを開くと見える

  • for you and you can figure out where your bug lies, right.

    何が起こるか、だからリクエストfoo.comで、なぜ これは起こっています、私は何もすることができませんね。

  • So although I may be representing a new side of the call stack you have some sense of it

    実行ボタンでもレンダリングが完了していない クリックしたという事実。ブラウザは

  • in your development practice already.

    ブロックされている、動けなくなっている、何もできない それらの要求が完了するまで。それからすべて

  • So, the big question then comes is like what happens when things are slow?

    私はいくつかのことをしたので、地獄は緩んで壊れ、それは 私はそれができたことを考え出した、それはできませんでした

  • So, we talk about blocking and blocking behavior and blocking, there's no strict definition

    実際にレンダリングしてください。何もできませんでした。 そのコールスタックが物事を持っている場合

  • of what is and didn't blocking, really it's just code that's slow.

    その上で、そしてここでそれはこれらのええを持っている、それは まだ行きます。同期リクエストがあります。

  • So console.log isn't slow, doing a while loop from one to ten billion is slow, network requests

    ブラウザは他に何もできません。できない 他のコードを実行することはできません。

  • are slow.

    立ち往生。理想的ではない 流動的なUIを手に入れるために、

  • Image requests are slow.

    スタック。では、これをどのように処理するのでしょうか。まあ 私たちが提供している最も簡単な解決策は非同期です

  • Things which are slow and on that stack are what are blocking means.

    コールバック、ブロッキング関数はほとんどありません ブラウザでは、ノードでも同じですが、それらはすべてです。

  • So heres a little example, so let's say we have, this is like a fake bit of code, getSynchronous,

    非同期にしました いくつかのコードを実行し、それにコールバックを与え、そして実行します。

  • right, like jQuery is like, AJAX request.

    あとでJavaScriptを見たことがある方は 非同期コールバックを見た、これは何をする

  • What would happen if those were synchronous requests, forget what we know about async

    実際のように見えます。思い出させる簡単な例 私たちがいるところの人々。このようなコード、console.log

  • callbacks they're synchronous.

    こんにちは。書いて、setTimeoutを実行しますが、それは キューは将来のコンソールログなのでスキップします

  • If we go through it like we have, we call getSync and then we wait, because then we're

    JSConfに進み、5秒後に 「そこ」にログを記録する、理にかなっている?ハッピー。基本的に

  • doing network request, network is relative to computers, are slow, hopefully that network

    それはsetTimeoutが何かをしているということです。そう、 に関する非同期コールバック

  • requests completes, we can move on, wait, move on.

    以前見たスタック...これはどのように機能するのですか? コードを実行しましょう。 Console.logこんにちは。 setTimeout

  • Wait, and, I mean, this network request might never finish, so ... yeah, I guess I'll go

    すぐには実行されないことがわかっています。 5秒で走ります

  • home.

    スタックにプッシュできない、どういうわけか 消えるだけで、私たちには道がない

  • Finally those three, you know blocking behaviors complete and we can clear the stack, right.

    これについてはまだ説明していませんが、 それ。 5秒後にJSConfEUをログに記録します

  • So in a programming language is single threaded you're not using threads like say Ruby, that's

    どういうわけか魔法のように「そこ」がスタックに現れます。 それはどのように起こりますか?そしてそれは - これ

  • what happens, right, we make a network request, we have to just wait till it's done, because

    基本的にイベントループが発生する場所です 並行性についてそうです、私は

  • we have no way of handling that.

    部分的に嘘をついていると言って JavaScriptは一度に1つのことしかできません。

  • Why is this actually a problem?

    それはJavaScriptランタイムができることは本当です 一度に一つのことをする。できない

  • The problem is because we're running code in browsers.

    あなたが他のコードをやっている間AJAXリクエスト。 あなたがしている間それはsetTimeoutをすることはできません

  • So, let's you ‑‑ here we go, okay.

    別のコードできること 同時にブラウザが

  • So this is just, this is Chrome, this is the code I just ran.

    ただランタイムです。だから、この図を覚えて、 JavaScriptランタイムは1つのことをすることができます

  • Browsers don't give us ‑‑ well they do give us synchronous AJAX request, I'm faking

    時間が、ブラウザは私達にこれらの他を与えます 物事は、私たちはこれらのAPIを提供し、これらを与える

  • this out with a big while loop, because it's synchronous, I basically while loop for five

    事実上スレッドです、あなたはただ作ることができます ブラウザの呼び出し、およびブラウザのそれらの部分

  • seconds before continuing, so if I open up the console here.

    この同時実行が始まるのを知っている。 このダイアグラムが見えるバックエンドの人

  • We can see what happens, so with request foo.com, why this is happening, I can't do anything,

    ウェブではなく、基本的にノードに対して同一 APIにはC ++ APIがあり、スレッドは

  • right, even the run button hasn't finished rerendering the fact that I clicked it.

    C ++によってあなたから隠されている。今我々は持っています この絵はこのコードがどのように実行されるかを見てみましょう

  • The browser is blocked, it's stuck, it can't do anything until those requests complete.

    ブラウザの外観のより完全な全体像に 好きです。だから、前と同じように、コードを実行し、コンソール

  • And then all hell breaks loose because I did some stuff,it figured that out I'd done it,

    こんにちはログ、こんにちはコンソールに、こんにちはログします。今 setTimeoutを呼び出したときに何が起こるかを見ることができます。

  • it couldn't actually render it.

    このコールバック関数を渡します setTimeout呼び出しの遅延今setTimeout

  • Couldn't do anything.

    ブラウザによって提供されるAPIです。 V8のソースには含まれていません。

  • That's because if that call stack has things on it, and here it's got these yeah, it's

    私たちのもの JavaScriptを実行していることを確認してください。

  • still going.

    ブラウザはタイマーを開始します。 君は。そして今、それはカウントを処理するつもりです

  • We've got the synchronous request, the browser can't do anything else.

    そう、それは私たちのsetTimeoutを意味します。 電話をかけて、それ自体が完成したので、ポップできます

  • It can't render, it can't run any other code, it's stuck.

    スタックをオフにします。 「JSConfEU」、明確、そう、 これで、Web APIにこのタイマーがありました。

  • Not ideal, right if we want people to have nice fluid UIs, we can't block the stack.

    5秒後には完了する予定です。今 ウェブAPIはただあなたの修正を始めることはできません

  • So, how do we handle this?

    コード、それはスタックにものをチャックすることはできません 準備ができたらそれが現れたら

  • Well the simplest solution we're provided with is asynchronous callbacks, there's almost

    コードの途中でランダムに タスクキューまたはコールバックキューの場所

  • no blocking functions in the browser, equally in node, they're all made asynchronous, which

    いずれかのWeb APIがコールバックをプッシュします。 完了したら、タスクキューに移動します。最後に

  • basically means we run some code, give it a callback, and run that later, if you've

    イベントのループ、話のタイトルにたどり着きます。 一体何がイベントループなのか

  • seen JavaScript you've seen asynchronous callbacks, what does this actually look like.

    この方程式全体の中で最も単純な小片 そしてそれは1つの非常に単純な仕事をします。

  • Simple example to remind people where we're at.

    イベントループの仕事はスタックを見ることです そしてタスクキューを見てください。スタックが

  • Code like this, console.log hi.

    空の場合、キューの最初のものになります そしてそれを効果的にスタックにプッシュします。

  • Write, we run the setTimeout, but that queue's the console log for future so we skip on to

    それを実行します。だからここで私たちは今そのスタックを見ることができます タスクキューにコールバックがあります。

  • JSConf and then five seconds later we log "there" right, make sense?

    イベントループが実行されると、 何かをして、コールバックを

  • Happy.

    スタック。スタックはJavaScriptのようなものだということを忘れないでください。 土地、V8の内側に戻ると、コールバックが表示されます。

  • Basically that's setTimeout is doing something.

    スタック上で、console.log「there」を実行します。 これで終わりです。それは理にかなっていますか?みんな

  • So, asynchronous callbacks with regards to the stacks we saw before ... how does this

    私はどこ?驚くばかり!はい。だから、今見ることができます これがおそらく最初のうちの1つとどのように動作するか

  • work?

    Async関連のものがあったはずの出会い これは奇妙な理由で誰かが言う

  • Let's run the code.

    setTimeout zeroを呼び出す必要があります。 さて、あなたは私にゼロで関数を実行してほしい

  • Console.log hi. setTimeout.

    時間?なぜ私はそれをsetTimeoutでラップするのでしょうか? あなたがこれに遭遇したのは初めてのように、

  • We know it doesn't run immediately, we know it's going to run in five seconds time, we

    あなたは私のようです、私はそれが何かをしているのを見ます、しかし 理由はわかりません。その理由は、一般的に、

  • can't push it on to the stack, somehow it just disappears, we don't have like a way

    あなたがまで何かを延期しようとしている場合 スタックは明らかです。だから私たちは見て知っている

  • of describing this yet, but we'll come to it.

    あなたがJavaScriptを書いたのであれば、これは 同じ結果になるでしょう、私たちは行きます

  • We log JSConfEU, clear, five seconds later somehow magically "there" appears on the stack.

    「こんにちは」、「JSConf」、「there」が表示されます。 最後に表示される予定です。見える

  • How does that happen?

    どうやってそれが起こるのか。 setTimeoutゼロ、今 それはすぐに完了してプッシュするつもりです

  • And that's ‑‑ this is basically where the event loop comes in on concurrency.

    それをキューに入れ、私が言ったことを覚えている イベントループ、スタックまで待つ必要がある

  • Right, so I've been kind of partially lying do you and telling you that JavaScript can

    それはコールバックをプッシュすることができる前に明確です あなたのスタックはスタックへと続くでしょう。

  • only do one thing at one time.

    実行するには、console.log“ hi”、“ JSConfEU” そして明らかに、今イベントループはキックすることができます

  • That's true the JavaScript Runtime can only do one thing at one time.

    そしてあなたのコールバックを呼びなさい。それは一例です setTimeoutゼロの場合、その実行は延期されています

  • It can't make an AJAX request while you're doing other code.

    最後の理由にかかわらず、コードの スタックまたはスタックが明確になるまで。はい。

  • It can't do a setTimeout while you're doing another code.

    つまり、これらすべてのWeb APIは同じように機能します。 AJAXリクエストがある場合は、AJAXリクエストを行います。

  • The reason we can do things concurrently is that the browser is more than just the Runtime.

    コールバックでURLにアクセスしても、同じように動作します。 方法、おめでとう、コンソールログ、「こんにちは」、

  • So, remember this diagram, the JavaScript Runtime can do one thing at a time, but the

    AJAXリクエスト、それを実行するためのコード AJAXリクエストがJavaScript Runtimeに存在しません

  • browser gives us these other things, gives us these we shall APIs, these are effectively

    しかし、Web APIとしてブラウザでは、私たちはスピン URLのコールバック、コードでそれを作り上げます

  • threads, you can just make calls to, and those pieces of the browser are aware of this concurrency

    実行し続けることができます。そのXHR要求まで 完了するか、または完了することはありません、それは

  • kicks in.

    大丈夫、スタックは実行を続けることができます 完了し、キューにプッシュされ、ピックされます

  • If you're back end person this diagram looks basically identical for node, instead of web

    イベントループによって起動して実行されます。それは 非同期呼び出しが発生したときに起こるすべてのこと。

  • APIs we have C++ APIs and the threading is being hidden from you by C++.

    狂気の複雑な例をやってみましょう、私は願っています あなたが気付いていないなら、これはうまくいくでしょう

  • Now we have this picture let's see how this code runs in a more full picture of what a

    これらすべてが基調講演になっています このデッキ全体で500のアニメーションステップを知っている。

  • browser looks like.

    (コードが爆発し、アニメーションが炎上する)(拍手) J Whew ...いや…そう…おもしろい、私たちは

  • So, same as before, run code, console log hi, logs hi to the console, simple.

    リンクを与えられた。うーん...これは十分に大きいです、 人々は見ることができますか?さて、基本的に私は書いた

  • now we can see what happens when we call setTimeout.

    講演後、スコットランドJSのこの講演 私はスライドの半分を破ったができなかった

  • We are ‑‑ we pass this callback function and a delay to the setTimeout call.

    それはすべてのスライドをやり直すことに煩わしい 基調講演のお尻の全体の痛みでした

  • Now setTimeout is an API provided to us by the browser, it doesn't live in the V8 source,

    もっと簡単なルートを取ったので(笑) JavaScriptを視覚化できるツールを書くことの利点

  • it's extra stuff we get in that we're running the JavaScript run

    実行時に実行時、そしてそれはループと呼ばれます。 それでは、この例を実行してみましょう。

  • time in.

    私たちが持っていた例のようなものでした 前のスライド、私はまだXHRをシミングしていません、

  • The browser kicks off a timer for you.

    それは実行可能ではありません。あなたとして コードを見ることができます、我々は何かを記録するつもりです、

  • And now it's going to handle the count down for you, right, so that means our setTimeout

    これはaddEventListener、setTimeoutのまわりのシムです。 それではconsole.logを実行します。 -

  • call, itself is now complete, so we can pop off the stack.

    実行して、何が起こるのかを確認します。 ... DOM APIを追加し、タイムアウトを追加します。コードは

  • JSConfEU”, clear, so, now we've got this timer in the web API, which five seconds later

    実行し続け、コールバックをプッシュします 実行されているキューにこれで終わりです。

  • is going to complete.

    ここをクリックしたらそれが…トリガー Web APIでは、クリックのコールバックをキューに入れます。

  • Now the web API can't just start modifying your code, it can't chuck stuff onto the stack

    実行してください。私は百回をクリックすると 何が起こるか見ることができます。クリックして、クリック

  • when it's ready if it did it would appear randomly in the middle of your code so this

    すぐには処理されない、それ自体 キューが取得されると、キューにプッシュされます。

  • is where the task queue or callback queue kicks in.

    処理された、最終的に私のクリックがしようとしている 対処しなさい、そう。だから私はもう少し持っている

  • Any of the web APIs pushes the callback on to the task queue when it's done.

    例ここで実行するつもりです。ここに 私たちは行く、大丈夫、そう、私はただ走るつもりだ

  • Finally we get to the event loop, title of the talk, what the heck is the event loop

    ちょっと話をするためのいくつかの例 あなたが遭遇したかもしれないいくつかのこと

  • is like the simplest little piece in this whole equation, and it has one very simple

    Async APIでは考慮されていません。 この例では、setTimeoutを4回呼び出します。

  • job.

    1秒遅れて、console.log "こんにちは"。コールバックがキューに入れられるまでに...

  • The event loops job is to look at the stack and look at the task queue.

    4回目のコールバック 遅れて、それはまだ待っている、コールバック

  • If the stack is empty it takes the first thing on the queue and pushes it on to the stack

    実行されていませんね。

  • which effectively run it.

    これは、 - like何時を示しています 実際にやっている、それは保証されていません

  • So here we can see that now the stack is clear, there's a callback on the task queue, the

    実行に時間がかかる、それは setTimeoutが0ではないのと同じように実行

  • event loop runs, it says, oh, I get to do something, pushes the callback on to the stack.

    すぐにコードを実行するコードを実行する 次のような、いつか、正しいですか?だから...これで

  • Remember it's the stack is like JavaScript land, back inside V8, the callback appears

    例コールバックについて話したいので、 誰に話をするのかに応じて

  • on the stack, run, console.logthere”, and we're done.

    コールバックは2つのうちの1つになります。 コールバックは他のどの関数でも構いません。

  • Does that make sense?

    関数呼び出しやコールバックはより明示的にすることができます そのような非同期コールバック

  • Everyone where me?

    コールバックキューにプッシュバックされます。 未来。このコードはその違いを示しています。

  • Awesome!

    右。配列に対するforEachメソッドは 実行されません、それは関数を取ります

  • Okay.

    コールバックを呼び出すことができますが、実行されていません 非同期的に実行しています

  • So, now we can see how this works with probably one of the first encounters you would have

    現在のスタック非同期を定義できます 配列、コールバックを取ることができるようにforEach

  • had with Async stuff which for some weird reason someone says says you have to call

    そして、配列の各項目について そのコールバックでsetTimeoutを0にする

  • setTimeout zero, ‑‑ okay, you want me to run the function in zero time?

    これで値が渡されると思いますが、 いずれにせよ、私はそれを実行するつもりです

  • Why would I wrap it in a setTimeout?

    違いが何であるかを見て、最初のために 実行されるコードのブロック、それは座っているつもりです

  • Like the first time you run across this, if you're like me,i see it doing something, but

    そしてスタックをブロックしますね。それが完了するまで Asyncバージョンでは、大丈夫ですが、遅くなります

  • I don't know why.

    ダウンしますが、基本的にはキューに入れます。 コールバックの束と彼らはクリアしようとしている

  • The reason is, generally, if you're trying to defer something until the stack is clear.

    そして、実際に実行して実行することができます console.logこの例ではconsole.log

  • So we know looking at this, if you've written JavaScript, that we're going to see the same

    高速であるため、非同期で実行することの利点 は明らかではないが、あなたがやっているとしましょう

  • result, we're going to seehi” “JSConf”, andthereis going to appear at the

    各要素の処理が遅い アレイ。私はそれがどこかに示されていると思う

  • end.

    いいえ、いいえ、違います。はい。それでは、 おっとだから私はある遅延関数があります

  • We can see how that happens.

    ただ遅い、それはただ遅いことです。それでは… 非同期を処理し、ここで同期を処理すると言います。

  • The setTimeout zero, now it's going to complete immediately and push it on to the queue, remember

    さて、今、私は私のものをオンにするつもりです 今朝文字通り一緒にハッキング

  • what I said about the event loop, it has to wait till the stack is clear before it can

    再描画またはレンダリングをシミュレートすることです。 ブラウザ、私は触れていないもの

  • push the callback on to the stack, so your stack is going to continue to run, console.log

    これらすべてがレンダリングとどのように相互作用するか 私はちょっとそれに触れましたが、本当にそうではありません

  • hi”, “JSConfEUand clear, now the event loop can kick in and call your callback.

    それを説明した。だから、基本的にブラウザは javaScriptを実行していることによって制限される

  • That's like an example of setTimeout zero, is deferring that execution of code, for whatever

    ブラウザは画面を再描画したい 毎秒60フレーム、16.6ミリ秒ごと

  • reason to the end of the stack.

    理想的です、それはそれが再描画する最速です できれば。しかし、それはあなたが何をしているかによって制約を受けます

  • Or until stack is clear.

    JavaScriptでいろいろな理由でやっているので、 もしあれば、実際にレンダリングすることはできません。

  • Okay.

    スタック上のコード、そうです。レンダリングのように 一種の呼び出しは、ほぼコールバックのようなものです。

  • So, all these web APIs work the same way, if we have AJAX request, we make an AJAX request

    自体。スタックがクリアされるまで待つ必要があります。 違いはレンダリングが与えられることです

  • to the URL with a callback, works the same way, oops sorry, console log, “hi”, make

    コールバックよりも優先度が高い 16ミリ秒の間、1つの待ち時間がキューに入れられます。

  • an AJAX request, the code for running that AJAX request does not live in JavaScript Runtime

    スタックがクリアされるまで待つ 実際にそのレンダリングを行います。だからこれは - です

  • but in the browser as a web API, so we spin