As you can see, I have a search page open
on my phone. Let's go to Timeline and record a
trace. Okay. Now, let's take a look at what we
have here. First, notice that we see an event for
the HTML Request. Then, the server responds and we get
the Response event. From there, the HTML is streaming in
and the parse is processing each chunk, by following the
same steps we just described. Tokenizing the data, converting tokens
into nodes, and building a [UNKNOWN].
>> Hm. Nice. So the timeline gives us a pretty low
level view into what the browser's doing as it loads a page.
>> Yes, exactly. And it can be a bit overwhelming at first. There's a lot of
different events in here. But don't worry, we're
going to cover most of them. That said, I think
it's a good idea for you to just try and record a few different traces on, on
your own. Pick a couple of favorite sites,
record a few traces. See if you can spot
some interesting patterns. Once you're done,
click this checkbox, to hit continue.
كما ترون، لدي صفحة بحث مفتوحة
على هاتفي. دعونا ننتقل إلى الجدول الزمني ونسجل
التتبع. Okay. والآن دعونا نلقي نظرة على
ما لدينا هنا. أولاً، لاحظوا أننا نشهد حالة طلب لـ
HTML. ثم يستجيب الخادم ونحصل على
،حالة استجابة. من هناك، يتدفق HTML إلى الداخل
ويقوم التحليل بمعالجة كل مجموعة عن طريق اتباع
الخطوات نفسها التي وصفناها للتو. ترميز البيانات وتحويل الرموز المميزة إلى
.[عقد، وبناء [UNKNOWN
>> Hm. جيد. لذا فإن الجدول الزمني يمنحنا عرضًا
.منخفض المستوى للغاية لما يقوم به المستعرض أثناء تحميله إحدى الصفحات
>> نعم، بالضبط. وقد يكون هذا مبهرًا في البداية. يوجد الكثير من
من الأحداث المختلفة هنا. لكن لا تقلقوا، سنقوم
بتغطية معظمها. يقول ذلك، أعتقد
إنها فكرة جيدة بالنسبة لك أن تحاول وتسجل بضعة تتبعات مختلفة
،بمفردك. تخيروا اثنين من مواقعكم المفضلة
وسجلوا بضعة تتبعات. لنرى إذا كان بإمكانكم
،تمييز بعض الأنماط المثيرة للاهتمام. بمجرد انتهاؤكم
.(اضغطوا على مربع التحديد هذا، للضغط على (متابعة
Como puedes ver,
tengo abierta una página de búsqueda
en mi teléfono.
Vamos a Timeline y registramos una señal.
Bien, ahora veamos lo que tenemos aquí.
Primero, date cuenta que hay un evento
para la petición HTML.
Luego, el servidor responde
y tenemos el evento de Respuesta.
El HTML transmite y el parser
procesa cada fragmento,
siguiendo las mismas fases
que acabamos de describir.
Convirtiendo los datos en tokens,
luego estos en nodos,
y construyendo un árbol DOM.
Bien. Entonces Timeline nos da
una visión un poco superficial
de lo que hace el navegador
cuando carga la página.
Sí, exacto. Y puede ser
un poco abrumador al principio.
Aquí hay muchos eventos distintos.
Pero no te preocupes,
vamos a ver la mayoría de ellos.
Una vez dicho esto, creo que es buena idea
que intentes registrar unas pocas señales.
Elige algunos de tus sitios web favoritos,
registra unas cuantas señales.
Intenta descubrir
algún patrón interesante.
Una vez termines, haz clic
en esta cuadrícula y dale a Continue.
ご覧のように
スマートフォンで検索ページを開いています
Timelineを開いてトレースを記録します
それでは何があるか少し見てみましょう
まずHTMLを要求するイベントが起きました
次にサーバからの応答を受信します
これによりHTMLが流れてきて
説明したようなステップに従って
パーサが各チャンクを処理しています
データをトークン化して
トークンをノードへ変換してDOMを構築します
するとTimelineはブラウザが
ページ読み込み時に行うことに対し
かなり下層にわたって表示しているのですね
そのとおりです
最初は量に圧倒されるかもしれません
たくさんの異なるイベントがありますが大丈夫です
この講義でほとんど取り上げていきます
まずは自分でいくつか異なるトレースを
記録してみましょう
お気に入りのサイトを複数選んで
トレースを記録してください
何か興味深いパターンを
見分けられるでしょうか 終わったら
このチェックボックスをクリックし
Continueをクリックしてください
보시다시피, 저는 제 폰에 검색 페이지를 열었고요
타임라인으로 가서 트레이스를 기록해봅시다
자, 여기 뭐가 있는지 볼까요?
첫번째로, HTML 요청에 대한 이벤트를 볼 수 있죠
그리고 서버의 응답과 응답 이벤트를 볼 수 있어요
거기서 HTML이 들어오고
이 방법으로 각각의 부분을 파싱합니다
데이터를 토큰화하고, 토큰을 노드로 변환하고
DOM 트리를 만들죠
>> 흠, 멋지네요
그러니까 타임라인은 브라우저가 페이지를 로딩하면서
어떠한 일을 하는지 매우 낮은 수준에서 보여주는 군요
>> 네 정확해요, 이걸 처음부터 보기는 벅찰 수 있어요
여기에는 많은 이벤트가 있죠
하지만 걱정 마세요
우리는 그 이벤트들의 대부분을 배울 것입니다
트레이스 몇 개를 기록하고 경험해보는 게 좋겠네요
좋아하는 사이트 몇 개를 골라서
트레이스를 기록해보세요
그리고 어떤 흥미로운 패턴이 있는지 살펴보고
완료 후엔 이 체크박스를 클릭해서
계속 진행해보세요
Notem que
tenho uma página de pesquisa
aberta em meu telefone.
Vamos para a linha do tempo,
registrar um rastreamento.
Vejamos o que
temos aqui.
Primeiro, vemos um evento
para a requisição HTML.
Depois, o servidor responde
e temos o evento Response.
A partir daí,
o HTML está correndo
e a análise está processando
cada trecho,
seguindo as mesmas etapas
que acabamos de descrever.
Analisando os dados,
convertendo tokens em nós
e criando uma árvore do DOM.
Legal. A linha do tempo apresenta
uma exibição bem detalhada
do que o navegador está fazendo
enquanto carrega uma página.
Exatamente.
A princípio, isso pode parecer
um pouco complicado.
Há muitos
eventos diferentes aqui.
Mas não se preocupe,
vamos tratar da maior parte deles.
Sendo assim, acho que seria bom
se você tentasse registrar
alguns rastreamentos diferentes sozinho.
Escolha alguns sites favoritos,
registre alguns rastreamentos.
Veja se consegue notar
alguns padrões interessantes.
Ao terminar,
clique nesta caixa de seleção
para continuar.