1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
---
title: Optimisation des pages pour l'analyse spéculative
slug: Glossary/speculative_parsing
tags:
- Avancé
- Cookies
- Développement Web
- HTML
- HTML5
- NeedsUpdate
translation_of: Glossary/speculative_parsing
original_slug: Web/HTML/Optimizing_your_pages_for_speculative_parsing
---
<p><span id="result_box" lang="fr"><span>Traditionnellement dans les navigateurs, l'analyseur HTML a été exécuté sur le fil principal et a été bloqué après une balise <code></script></code> jusqu'à ce que le script ait été extrait du réseau et exécuté.</span> <span>L'analyseur HTML dans Firefox 4 et versions ultérieures prend en charge l'analyse spéculative sur le fil principal.</span> <span>Il analyse "en avant" pendant que les scripts sont téléchargés et exécutés.</span> <span>Comme dans Firefox 3.5 et 3.6, l'analyseur HTML lance des chargements spéculatifs pour les scripts, les feuilles de style et les images qu'il trouve à l'avance dans le flux.</span> <span>Toutefois, dans Firefox 4 et versions ultérieures, l'analyseur HTML exécute également l'algorithme de construction de l'arborescence HTML de manière spéculative.</span> <span>L'avantage est que lorsqu'une spéculation réussit, il n'est pas nécessaire d'analyser la partie du fichier entrant qui a déjà été analysée pour les scripts, les feuilles de style et les images.</span> <span>L'inconvénient est qu'il y a plus de travail perdu quand la spéculation échoue.</span><br>
<br>
<span>Ce document vous aide à éviter le genre de choses qui font échouer la spéculation et ralentir le chargement de votre page.</span></span></p>
<h2 id="Réussir_les_chargements_spéculatifs">Réussir les chargements spéculatifs</h2>
<p><span id="result_box" lang="fr"><span>Il n'y a qu'une seule règle pour réussir les chargements spéculatifs de scripts liés, de feuilles de style et d'images :</span></span></p>
<ul>
<li>Si vous utilisez un élément <code><base></code> p<span id="result_box" lang="fr"><span>our remplacer l'URI de base de votre page, placez l'élément dans la partie non-scriptée du document.</span></span> Ne l'ajoutez pas par <code>document.write()</code> ou <code>document.createElement()</code>.</li>
</ul>
<h2 id="Éviter_de_perdre_la_sortie_du_constructeur_d'arborescence">Éviter de perdre la sortie du constructeur d'arborescence</h2>
<p>L'analyse spéculative du constructeur d'arborescence échoue quand <code>document.write()</code> change l'état du constructeur d'arborescence, au point que l'état spéculatif après la balise <code></script></code> <span class="short_text" id="result_box" lang="fr"><span>ne tient plus lorsque tout le contenu inséré par</span></span> <code>document.write()</code> a été analysé. <span id="result_box" lang="fr"><span>Cependant, seules les utilisations inhabituelles de</span></span> <code>document.write()</code> entraînent ce genre de problèmes. Ici, les choses à éviter :</p>
<ul>
<li><span class="short_text" id="result_box" lang="fr"><span>n'écrivez pas d'arborescences déséquilibrées.</span></span> <code><script>document.write("<div>");</script></code> est mauvais. <code><script>document.write("<div></div>");</script></code> est valide.</li>
<li>n'écrivez pas de balisage infini. <code><script>document.write("<div></div");</script></code> est mauvais.</li>
<li><span id="result_box" lang="fr"><span>ne terminez pas votre écriture avec un retour chariot</span></span> . <code><script>document.write("Hello World!\r");</script></code> est mauvais. <code><script>document.write("Hello World!\n");</script></code> est valide.</li>
<li><span id="result_box" lang="fr"><span>notez que l'écriture de balises équilibrées peut entraîner la déduction d'autres balises de telle manière que l'écriture est finalement déséquilibrée</span></span>. Par exemple, <code><script>document.write("<div></div>");</script></code> <span id="result_box" lang="fr"><span>à l'intérieur de l'élément d'en-tête sera interprété comme</span></span> <code><script>document.write("</head><body><div></div>");</script></code> qui est déséquilibré.</li>
<li><span class="short_text" id="result_box" lang="fr"><span>ne pas formater une partie de tableau</span></span>. <code><table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table></code> est mauvais. Par contre, <code><script>document.write("</code><code><table></code><code><tr><td>Hello World!</td></tr></code><code></table></code><code>");</script></code> est valide.</li>
<li><span id="result_box" lang="fr"><span>À FAIRE : document.write inclus dans d'autres éléments de formatage.</span></span></li>
</ul>
|
