Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Markdown conversion for ru - Cleanup - Performance section #8564

Merged
merged 1 commit into from
Sep 28, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -66,9 +66,9 @@ <h2 id="Стоимость_CSS_свойств">Стоимость CSS-свойс
<tr>
<td>Свойства, затрагивающие геометрию или позицию элемента, запускают <strong>весь</strong> процесс заново: новое вычисление стилей, layout и перерисовку.</td>
<td>
<img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/recalculate-style.png" loading="lazy" width="246" height="52">
<img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/layout.png" loading="lazy" width="244" height="52">
<img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/paint.png" loading="lazy" width="246" height="52">
<img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/recalculate-style.png">
<img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/layout.png">
<img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/paint.png">
</td>
<td>
<p><code><a href="/en-US/docs/Web/CSS/left">left</a></code><br>
Expand All @@ -83,9 +83,9 @@ <h2 id="Стоимость_CSS_свойств">Стоимость CSS-свойс
<p>Свойства, не затрагивающие геометрию и позиционирование элементов, но не лежащие в отдельном слое, запускают только вычисление стилей и перерисовку, но не Layout.</p>
</td>
<td>
<img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/recalculate-style.png" loading="lazy" width="246" height="52">
<img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/layout-faint.png" loading="lazy" width="246" height="52">
<img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/paint.png" loading="lazy" width="246" height="52">
<img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/recalculate-style.png">
<img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/layout-faint.png">
<img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/paint.png">
</td>
<td>
<p><code><a href="/en-US/docs/Web/CSS/color">color</a></code></p>
Expand All @@ -96,9 +96,9 @@ <h2 id="Стоимость_CSS_свойств">Стоимость CSS-свойс
<p>Свойства, которые рендерятся в отдельном слое не запускают даже repaint, так как результат обновления обрабатывается на этапе композиции.</p>
</td>
<td>
<img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/recalculate-style.png" loading="lazy" width="246" height="52">
<img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/layout-faint.png" loading="lazy" width="246" height="52">
<img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/paint-faint.png" loading="lazy" width="246" height="52">
<img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/recalculate-style.png">
<img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/layout-faint.png">
<img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/paint-faint.png">
</td>
<td><code><a href="/en-US/docs/Web/CSS/transform">transform</a></code><br>
<code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code></td>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
- Performance
translation_of: Web/Performance/Critical_rendering_path
---
<p><span class="seoSummary">Критические этапы рендеринга (Critical Rendering Path) - это последовательность шагов, которые выполняет браузер, когда преобразуется HTML, CSS и JavaScript в пиксели, которые вы видите на экране. Оптимизация этих шагов улучшает производительность рендера. Эти этапы включают в себя работу с <a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model </a>(DOM), <a href="/en-US/docs/Web/API/CSS_Object_Model">CSS Object Model </a>(CSSOM), деревом рендера (render tree) и компоновкой объектов (layout)</span></p>
<p>Критические этапы рендеринга (Critical Rendering Path) - это последовательность шагов, которые выполняет браузер, когда преобразуется HTML, CSS и JavaScript в пиксели, которые вы видите на экране. Оптимизация этих шагов улучшает производительность рендера. Эти этапы включают в себя работу с <a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model </a>(DOM), <a href="/en-US/docs/Web/API/CSS_Object_Model">CSS Object Model </a>(CSSOM), деревом рендера (render tree) и компоновкой объектов (layout)</p>

<p>Объектная модель документа DOM создаётся в тот момент, когда браузер парсит HTML. Этот HTML может запрашивать JavaScript, который может модифицировать DOM. HTML может запросить стили, которые участвуют в создании CSS Object Model. Движок браузера комбинирует эти две объектные модели, чтобы создать дерево рендера (render tree). Компоновка (layout) определяет размеры и позицию каждого элемента на странице. Как только компоновка определена - пиксели отрисовываются на экране.</p>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ <h3 id="Запуск_теста">Запуск теста</h3>

<p>Для начала, в нашем тесте мы будем анимировать 1000 элементов {{htmlelement("div")}} с помощью CSS.</p>

<p><span style="line-height: 16.7999992370605px;">{{JSFiddleEmbed("https://jsfiddle.net/zt94oew2/1/","","480")}}</span></p>
<p>{{JSFiddleEmbed("https://jsfiddle.net/zt94oew2/1/","","480")}}</p>

<p>Нажав на кнопку, вы можете переключить метод анимации на <code>requestAnimationFrame()</code>.</p>

Expand Down
4 changes: 2 additions & 2 deletions files/ru/web/performance/dns-prefetch/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
- preconnect
translation_of: Web/Performance/dns-prefetch
---
<p><span class="seoSummary"><code><strong>DNS-prefetch</strong></code> (предзагрузка DNS) - это попытка определить IP адрес по имени домена до того, как ресурс с этого домена будет фактически запрошен. Это может быть загрузчик файлов, который используется позже или ссылка, по которой, вероятно, перейдёт пользователь. </span></p>
<p><code><strong>DNS-prefetch</strong></code> (предзагрузка DNS) - это попытка определить IP адрес по имени домена до того, как ресурс с этого домена будет фактически запрошен. Это может быть загрузчик файлов, который используется позже или ссылка, по которой, вероятно, перейдёт пользователь. </p>

<h2 id="Зачем_использовать_dns-prefetch">Зачем использовать dns-prefetch?</h2>

Expand Down Expand Up @@ -42,7 +42,7 @@ <h2 id="Лучшие_практики">Лучшие практики</h2>

<p><strong>Во-вторых,</strong> существует возможность добавить <code>dns-prefetch</code> (и другие подсказки) как <a href="/en-US/docs/Web/HTTP/Headers">HTTP заголовок</a> с помощью <a href="/en-US/docs/Web/HTTP/Headers/Link">HTTP Link field</a>:</p>

<pre class="brush: unix">Link: &lt;https://fonts.gstatic.com/&gt;; rel=dns-prefetch</pre>
<pre>Link: &lt;https://fonts.gstatic.com/&gt;; rel=dns-prefetch</pre>

<p><strong>В третьих, </strong> хорошей практикой считается использование <code>dns-prefetch</code> в паре с <code>preconnect</code>. В то время, как <code>dns-prefetch</code> срабатывает только при DNS поиске, <code>preconnect</code> устанавливает соединение к нужному серверу. Этот процесс включает в себя DNS resolution, установку TCP соединения и установление безопасного соединения (<a href="/en-US/docs/Glossary/TLS">TLS</a> рукопожатие), если оно доступно. Комбинирование этих двух инструкций даёт возможность ещё больше сократить время ожидания для кросс-доменных запросов. Вы можете использовать их вместе таким образом:</p>

Expand Down
2 changes: 1 addition & 1 deletion files/ru/web/performance/fundamentals/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
original_slug: Web/Performance/Основы
---
<div class="summary">
<p><span class="seoSummary">Английское слово Performance, которое используется в статьях о производительности приложений, также можно перевести, как "эффективность". Этот документ объясняет основы производительности, того как браузеры помогают улучшить её и какие инструменты и процессы вы можете использовать, чтобы её улучшить. </span></p>
<p>Английское слово Performance, которое используется в статьях о производительности приложений, также можно перевести, как "эффективность". Этот документ объясняет основы производительности, того как браузеры помогают улучшить её и какие инструменты и процессы вы можете использовать, чтобы её улучшить. </p>
</div>

<h2 id="Что_такое_производительность">Что такое производительность?</h2>
Expand Down
2 changes: 1 addition & 1 deletion files/ru/web/performance/how_browsers_work/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
---
<p>Пользователи хотят использовать приложения, в которых загрузка контента происходит быстро, а взаимодействие - плавно. Разработчик должен стараться оптимизировать своё приложение как минимум по этим двум показателям.</p>

<p><span class="seoSummary">Чтобы понять, как улучшить производительность и ощущаемую пользователем производительность (User Perceived Performance, UPP), вам необходимо понимать, как работают браузеры.</span></p>
<p>Чтобы понять, как улучшить производительность и ощущаемую пользователем производительность (User Perceived Performance, UPP), вам необходимо понимать, как работают браузеры.</p>

<h2 id="Обзор">Обзор</h2>

Expand Down
Loading