|
9 | 9 |
|
10 | 10 | ## Sumário |
11 | 11 |
|
12 | | -* 1. [Global](#global) |
13 | | - * 1.1 [Identation](#identation) |
14 | | -* 2. [Commits](#commits) |
15 | | - * 2.1 [English](#english) |
16 | | - * 2.2 [Task number](#task-number) |
17 | | - * 2.3 [Status](#status) |
18 | | - * 2.4 [Message convention](#message-convention) |
19 | | -* 3. [HTML](#html) |
20 | | - * 3.1 [HTML Syntax](#html-comments) |
21 | | - * 3.2 [HTML Comments](#html-syntax) |
22 | | - * 3.3 [HTML Character Encoding](#html-character-encoding) |
23 | | - * 3.4 [HTML Attribute Order](#html-attribute-order) |
24 | | -* 4. [CSS / SCSS](#css--scss) |
25 | | -* 5. [JavaScript](#javascript) |
| 12 | +1. [Global](#global) |
| 13 | + 1.1 [Identation](#identation) |
| 14 | +2. [Commits](#commits) |
| 15 | + 2.1 [English](#english) |
| 16 | + 2.2 [Task number](#task-number) |
| 17 | + 2.3 [Status](#status) |
| 18 | + 2.4 [Message convention](#message-convention) |
| 19 | +3. [HTML](#html) |
| 20 | + 3.1 [HTML Syntax](#html-comments) |
| 21 | + 3.2 [HTML Comments](#html-syntax) |
| 22 | + 3.3 [HTML Character Encoding](#html-character-encoding) |
| 23 | + 3.4 [HTML Attribute Order](#html-attribute-order) |
| 24 | + 3.5 [HTML Performance](#html-performance) |
| 25 | +4. [CSS / SCSS](#css--scss) |
| 26 | +5. [JavaScript](#javascript) |
26 | 27 |
|
27 | 28 | ### Global |
28 | 29 |
|
@@ -178,6 +179,51 @@ A ordem de atributos facilita a leitura e organização |
178 | 179 | <img class="..." src="..." alt="..."> |
179 | 180 | ``` |
180 | 181 |
|
| 182 | +#### HTML Performance |
| 183 | + |
| 184 | +Se for necessário ter script externo dentro da tag `head`, sempre deve estar por último. |
| 185 | + |
| 186 | +```html |
| 187 | +<!-- Good --> |
| 188 | +<link rel="stylesheet" href="style.css" /> |
| 189 | +<script src="scripts.min.js"></script> |
| 190 | + |
| 191 | +<!-- Bad --> |
| 192 | +<script src="scripts.min.js"></script> |
| 193 | +</head> |
| 194 | +``` |
| 195 | + |
| 196 | +O ideal que os scripts estejam no final do arquivo, antes do fechamento da tag `body`. |
| 197 | + |
| 198 | +```html |
| 199 | +<!-- Good --> |
| 200 | +<script src="scripts.min.js"></script> |
| 201 | +</body> |
| 202 | + |
| 203 | +<!-- Bad --> |
| 204 | +<script src="scripts.min.js"></script> |
| 205 | +</head> |
| 206 | +``` |
| 207 | + |
| 208 | +Eliminar espaços e comentários, sem dúvida trazem uma melhor performance e são dispensáveis no ambiente de produção |
| 209 | + |
| 210 | +```html |
| 211 | +<!-- Good --> |
| 212 | +<html><head>...</head><body><div class="main">...</div></body></html> |
| 213 | + |
| 214 | +<!-- Bad --> |
| 215 | +<html> |
| 216 | + <head> |
| 217 | + ... |
| 218 | + </head> |
| 219 | + <body> |
| 220 | + <div class="main"> |
| 221 | + ... |
| 222 | + </div><!-- /main --> |
| 223 | + </body> |
| 224 | +</html> |
| 225 | +``` |
| 226 | + |
181 | 227 | ## Contribuindo |
182 | 228 |
|
183 | 229 | - Faça o fork! |
|
0 commit comments