mdn · SphinxKnight · Sep 28, 2022 · Sep 16, 2022
@@ -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>
@@ -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>
@@ -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>

@@ -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>
 

@@ -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>
 

@@ -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>
 
@@ -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>
 

@@ -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>

@@ -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>