[BLANK_AUDIO]
>> Okay, so I think I have a handle on optimizing
HTML and CSS. So, are we moving on to the render tree?
>> Almost, we haven't really talked about JavaScript,
and obviously that's an important step, so let's
take a look at that. Okay, well let
me guess, minify it, compress it and cache it?
>> Yup. All of those are good strategies. But for JavaScript you may have seen
piece bit insighs also complain about parser
blocking scripts. Let's take a look at what
that means and how we can optimize it.
I've extended our hello world page with
a simple inline script at the bottom. Let's
walk through it. First of all, we reach into the DOM and look for the first
span element. Which, as you can see, contains
the web performance text. Next, we modify the
DOM element by changing its inner text and
also changing its CSS properties. Seems simple enough.
>> Yeah, this shows that JavaScript can manipulate
both the DOM and the CSS Object Model. It's
a very powerful tool. And it gets a
bit more interesting from here. Next, we create a
new div element, set its text content. CSS
caller property, and append it to the page. Let's
try to load this page on our phone. Notice
that the text now says, Hello interactive students instead
of Hello web performance students. And we also have our new element right below
it. Right, as expected. So is there
anything here we can do to optimize performance?
>> Definitely, optimizing JavaScript could be an entire course. But,
in this particular example, it's not really the code, but how
it's included on the page. Let's take a step back and
think about how the browser would go about building this page
[BLANK_AUDIO]
>> حسنًا، أعتقد الآن أن لدي الوسائل اللازمة لتحسين
HTML وCSS. فهل ننتقل إلى شجرة العرض؟
،>> تقريبًا، لم نتحدث بعد عن JavaScript
ومن الواضح أن هذه خطوة مهمة؛ لنلق
نظرة على ذلك. حسنًا، دعوني
أخمن التصغير والضغط والتخزين؟
>> نعم. هذه كلها إستراتيجيات جيدة. ولكن بالنسبة إلى JavaScript، لعلك استمعت إلى
بعض الآراء التي تشتكي أيضًا من البرامج النصية التي تقوم بحظر
المحلل. لنلق نظرة على ما هو مقصود من ذلك
.وكيف يمكننا تحسينه
لقد قمت بتوسيع صفحة hello world
ببرنامج نصي مضمن بالأسفل. دعونا
نتحدث عنه. قبل كل شيء، نأتي إلى النموذج DOM ونبحث عن أول
عنصر span. وهو كما ترون يحتوي على
النص "أداء الويب". وبعد ذلك، نقوم بتعديل عنصر
DOM من خلال تغيير نصه الداخلي وكذلك
.تغيير خصائص CSS الخاصة به. يبدو الأمر بسيطًا للغاية
>> نعم، هذا يبين أن JavaScript يمكنها التعامل مع كل من
نموذج DOM ونموذج كائن CSS. إنها
أداة فعالة للغاية. وتبدو أكثر تشويقًا
من هنا. فيما يلي سنقوم بإنشاء
عنصر div جديد، وتعيين محتواه النصي. وخاصية
CSS caller، ثم نلحقها بالصفحة. دعونا
نحاول تحميل هذه الصفحة على هاتفنا. لاحظوا
أن النص الآن يقول Hello interactive students بدلاً من
Hello web performance students. ولدينا أيضًا العنصر الجديد الخاص بنا أسفله
مباشرة. نعم، كما هو متوقع. إذًا، هل هناك
أي شيء هنا يمكننا فعله لتحسين الأداء؟
،>> بالتأكيد، قد يتطلب الحديث عن تحسين أداء JavaScript دورة تدريبية كاملة. ولكن
في هذا المثال المحدد، لا يتعلق الأمر بالتعليمة البرمجية في حد ذاتها، بل يتعلق
بكيفية تضمينها في الصفحة. دعونا نرجع خطوة إلى الوراء
.ونفكر في كيفية تعامل المستعرض مع بناء هذه الصفحة
Optimizando JS
Todas las cosas que pueden bloquear el renderizado
Okay, creo que ya controlo la optimización de HTML y CSS,
¿pasamos ahora al árbol de renderizado?
A punto. Aún no hemos hablado sobre JavaScript,
y obviamente esa es una fase importante,
así que echémosle un vistazo.
Bien, déjame adivinar: ¿reducir, comprimir y guardar en caché?
Exacto. Todo eso son buenas estrategias.
Pero para JavaScript habrás visto
a PageSpeed Insights quejarse de los scripts que bloquean el parser.
Veamos lo que esto significa y cómo podemos optimizarlo.
He extendido nuestra página de "Hola Mundo"
con un simple script inline al final. Recorrámoslo.
Primero, llegamos al DOM y buscamos el primer elemento span
que, como vemos, contiene el texto de rendimiento web.
A continuación, modificamos el elemento DOM
cambiando su innerText y sus propiedades CSS.
Parece sencillo.
Sí. Esto muestra que JavaScript
puede manipular a la vez el DOM y el modelo de objetos CSS.
Es una herramienta muy útil.
Y ahora se hace más interesante.
Ahora creamos un nuevo elemento div, fijamos su contenido de texto,
la propiedad color del CSS y lo anexamos a la página.
Intentemos cargar la página desde nuestro teléfono.
Fíjate que el texto ahora dice: "Hola estudiantes interactivos";
en vez de: "Hola estudiantes de rendimiento web".
Y también tenemos nuestro nuevo elemento justo abajo.
Exacto, como era de esperar.
¿Hay algo aquí que podamos hacer para optimizar el rendimiento?
Claro. Podríamos dedicar un curso entero a la optimización de JavaScript.
Pero aquí, más que el código, lo que importa es cómo incluirlo en la página.
Volvamos un paso atrás
y pensemos cómo haría el navegador para construir esta página.
HTMLとCSSを最適化する手段を得たように思います
次はレンダーツリーですね？
まだJavaScriptを説明していません
重要なステップなので見てみましょう
分かりました
縮小して圧縮してキャッシュするのですか？
はい いずれもよい戦略ですが
JavaScriptにおいて パーサをブロックするスクリプトについても
洞察があるかもしれません
その意味と最適化法について見てみましょう
“Hello World”ページの下端に
単純なインラインスクリプトを追加しました
見ていきましょう
まずDOMに達して最初のspan要素を探します
ご覧のように “web performance”というテキストを含みます
次にinnerTextを変え CSSプロパティも変えることで
そのDOM要素を修正します
まったく単純ですね
そうですね
つまりJavaScriptがDOMと CSSOMの両方を操作できるのです
とても強力なツールです
また少し興味深い点もあります
次に新たなdiv要素を作成して
テキストの内容とCSSで 色のプロパティを設定してページに追加します
スマートフォンで このページを読み込んでみましょう
“Hello performance students！”の代わりに
“Hello interactive students！”となっています
新たな要素が下にあることも分かります
予想どおりです
パフォーマンスを最適化するために できることがあるのでしょうか？
もちろんです JavaScriptの最適化が講義のすべてかもしれません
この特殊な例ではコードというほどでは ありませんがページに含まれています
ブラウザがこのページをどう構築するか ステップを戻って考えましょう
>> 좋아요, 이제 전 HTML과 CSS 최적화에 대한
감을 잡은 것 같아요 그러면, 이제 렌더 트리로 옮겨가나요?
>> 거의요, 아직 자바스크립트는 다루지 않았어요
그리고 자바스크립트는 가장 중요한 단계이니 한 번 짚고 넘어가도록 합시다
좋아요, 음 맞춰볼게요, 최소화하고, 압축하고, 캐싱 하나요?
맞아요, 그 전략들은 아주 좋은 것들이죠
하지만 지금까지 보았던 자바스크립트도
파서 방해 스크립트라는 문제가 있어요
그 의미가 무엇인지 보도록 합시다
그리고 우리가 어떻게 최적화시킬 수 있는지 보도록 해요
저는 우리 Hello world 페이지의 아래편에
간단한 인라인 스크립트를 추가했어요
살펴봅시다, 첫 번째로, DOM이 완성되면 첫 span 요소를 찾게 됩니다
보시다시피 그건
web performance라는 텍스트를 포함하고 있죠
그다음 내부 텍스트와 CSS 속성을 바꾸어서 DOM 요소를 수정합니다
>> 매우 간단해 보이네요
>> 그렇죠, 이 예제는 자바스크립트가
DOM과 CSSOM 모두 조종할 수 있음을 보여주고 있어요
자바스크립트는 매우 강력한 도구이죠
그리고 여기서부터 좀 더 흥미로운 부분입니다
새로운 div 요소를 생성하고, 텍스트 내용을 설정하고
CSS 색상 속성을 설정하고, 페이지에 덧붙이죠
폰에서 페이지를 로드해 봅시다
텍스트는 이제 Hello web performance students가 아니라,
Hello interactive students로 보이게 되죠 그리고 바로 아래에 새로운 요소가 있어요
>> 맞아요, 예상한 대로네요
그렇다면 여기에서 우리가 성능을 최적화할만한 요소가 있나요?
>> 확실히 있죠, 자바스크립트의 최적화만으로도 한 과정이 될 수 있어요
하지만 이 특정 예제에서는, 코드 자체에 관한 것이 아니라
어떻게 페이지에 포함되어 있는지를 볼 거에요 다시 뒤로 돌아가서
이 페이지를 만들 때 브라우저가 어떻게 작동하는지 생각해 봅시다
[ÁUDIO VAZIO]
Acho que já entendi a otimização de HTML e CSS.
Vamos passar para a árvore de renderização?
Quase. Ainda não falamos sobre o JavaScript e,
obviamente, essa é uma etapa importante;
então, vamos dar uma olhada.
Certo. Deixe-me adivinhar: minificar, compactar e armazenar em cache?
Isso. São todas boas estratégias.
Mas, para o JavaScript, talvez você tenha visto
reclamações sobre scripts bloqueadores de análise.
Vamos ver o que isso significa e como podemos otimizá-lo.
Ampliei a página "Hello world" com um
script inline simples no final.
Vamos analisá-lo.
Primeiro, acessamos o DOM e procuramos o primeiro elemento span.
O qual, como você vê, contém o texto sobre desempenho da Web.
Depois, modificamos o elemento DOM, alterando o texto interno
e também as propriedades CSS.
>> Parece bem simples.
É, isso mostra que o JavaScript pode manipular
tanto o DOM quanto o modelo de objeto CSS.
É uma ferramenta muito avançada.
E daqui em diante fica um pouco mais interessante.
Criamos um novo elemento div, definimos o conteúdo de texto,
a propriedade de cor CSS, e anexamos à página.
Vamos tentar carregar esta página no celular.
Note que agora o texto diz "Hello interactive students"
em vez de "Hello web performance students".
E o novo elemento está logo abaixo.
Conforme esperado.
Podemos fazer alguma coisa aqui para otimizar o desempenho?
É claro. A otimização do JavaScript dá um curso inteiro.
Mas, neste exemplo específico, a questão não é bem o código,
mas como ele é incluído na página.
Vamos recuar um pouco e pensar em
como o navegador faz para criar esta página.