Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

Процесс визуализации

Оптимизация помогает ускорить загрузку страниц. Наша цель - выбрать оптимальный порядок отображения контента в зависимости от его важности для пользователя.

При визуализации страниц браузер проделывает огромную работу, которую мы, веб-разработчики, обычно не замечаем. Мы не знаем, как разметка, стили и скрипты превращаются в страницы на экране.

Об этом и пойдет речь в наших уроках. Вы познакомитесь со всеми этапами визуализации - от скачивания HTML, CSS и JavaScript до вывода пикселей - и узнаете, как оптимизировать этот процесс.

Оптимизированная и неоптимизированная визуализация

Оптимизация помогает сократить время загрузки веб-страниц. Кроме того, изучив процесс визуализации, вы сможете создавать более эффективные интерактивные приложения, потому что они подчиняются тем же принципам (разве что обновление приложения происходит циклично и с частотой 60 кадров/сек. Однако не будем спешить. Сначала разберемся, как браузер визуализирует простую веб-страницу.

Critical Rendering Path

You will learn how to optimize any website for speed by diving into the details of how mobile and desktop browsers render pages.

You’ll learn about the Critical Rendering Path, or the set of steps browsers must take to convert HTML, CSS and JavaScript into living, breathing websites. From there, you’ll start exploring and experimenting with tools to measure performance and simple strategies to deliver the first pixels to the screen as early as possible. You’ll learn how to dive into recommendations from PageSpeed Insights and the Timeline view of Google Chrome’s Developer Tools to find the data you need to achieve immediate performance boosts!

This is a free course offered through Udacity

Take Course