Skip to content

Instantly share code, notes, and snippets.

@NerOcrO

NerOcrO/annexes.md

Last active November 19, 2020 17:39
Show Gist options
  • Save NerOcrO/ca9aaf1dfbf90a244b781ffe4339962d to your computer and use it in GitHub Desktop.
Save NerOcrO/ca9aaf1dfbf90a244b781ffe4339962d to your computer and use it in GitHub Desktop.
Download ZIP
html css performance
Raw
css-performance.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML performance</title>
<style>
/* 17ms (moins lisible dans l'inspecteur) */
/* body table tbody tr td.td-column {
background-color: red;
} */
/* 20ms */
td {
background-color: red;
}
/* 23ms */
/* .td-column {
background-color: red;
} */
/* 25ms */
/* body table tbody tr * {
background-color: red;
} */
</style>
</head>
<body>
<!-- Chrome->Performance->Lancer l'enregistrement X fois->Regarder dans Summary le Painting -->
<table>
<thead>
<tr>
<th class="th-column"><input class="select-offer-checkbox" id="select-offer-checkbox" type="checkbox"></th>
<th class="th-column"><label for="select-offer-checkbox">Tout sélectionner</label></th>
<th class="th-column">Icone</th>
<th class="th-column">Lieu</th>
<th class="th-column">Stock</th>
<th class="th-column">Statut</th>
<th class="th-column">Stock</th>
<th class="th-column">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="td-column">Checkbox</td>
<td class="td-column">Icone</td>
<td class="td-column">Bonjour bonjour test endpoing</td>
<td class="td-column">Mairie de Nice</td>
<td class="td-column">Illimité</td>
<td class="td-column">active</td>
<td class="td-column">Stocks</td>
<td class="td-column">Pen</td>
</tr>
<tr>
<td class="td-column">Checkbox</td>
<td class="td-column">Icone</td>
<td class="td-column">Bonjour bonjour test endpoing</td>
<td class="td-column">Mairie de Nice</td>
<td class="td-column">Illimité</td>
<td class="td-column">active</td>
<td class="td-column">Stocks</td>
<td class="td-column">Pen</td>
</tr>
<tr>
<td class="td-column">Checkbox</td>
<td class="td-column">Icone</td>
<td class="td-column">Bonjour bonjour test endpoing</td>
<td class="td-column">Mairie de Nice</td>
<td class="td-column">Illimité</td>
<td class="td-column">active</td>
<td class="td-column">Stocks</td>
<td class="td-column">Pen</td>
</tr>
<tr>
<td class="td-column">Checkbox</td>
<td class="td-column">Icone</td>
<td class="td-column">Bonjour bonjour test endpoing</td>
<td class="td-column">Mairie de Nice</td>
<td class="td-column">Illimité</td>
<td class="td-column">active</td>
<td class="td-column">Stocks</td>
<td class="td-column">Pen</td>
</tr>
<tr>
<td class="td-column">Checkbox</td>
<td class="td-column">Icone</td>
<td class="td-column">Bonjour bonjour test endpoing</td>
<td class="td-column">Mairie de Nice</td>
<td class="td-column">Illimité</td>
<td class="td-column">active</td>
<td class="td-column">Stocks</td>
<td class="td-column">Pen</td>
</tr>
<tr>
<td class="td-column">Checkbox</td>
<td class="td-column">Icone</td>
<td class="td-column">Bonjour bonjour test endpoing</td>
<td class="td-column">Mairie de Nice</td>
<td class="td-column">Illimité</td>
<td class="td-column">active</td>
<td class="td-column">Stocks</td>
<td class="td-column">Pen</td>
</tr>
<tr>
<td class="td-column">Checkbox</td>
<td class="td-column">Icone</td>
<td class="td-column">Bonjour bonjour test endpoing</td>
<td class="td-column">Mairie de Nice</td>
<td class="td-column">Illimité</td>
<td class="td-column">active</td>
<td class="td-column">Stocks</td>
<td class="td-column">Pen</td>
</tr>
<tr>
<td class="td-column">Checkbox</td>
<td class="td-column">Icone</td>
<td class="td-column">Bonjour bonjour test endpoing</td>
<td class="td-column">Mairie de Nice</td>
<td class="td-column">Illimité</td>
<td class="td-column">active</td>
<td class="td-column">Stocks</td>
<td class="td-column">Pen</td>
</tr>
<tr>
<td class="td-column">Checkbox</td>
<td class="td-column">Icone</td>
<td class="td-column">Bonjour bonjour test endpoing</td>
<td class="td-column">Mairie de Nice</td>
<td class="td-column">Illimité</td>
<td class="td-column">active</td>
<td class="td-column">Stocks</td>
<td class="td-column">Pen</td>
</tr>
<tr>
<td class="td-column">Checkbox</td>
<td class="td-column">Icone</td>
<td class="td-column">Bonjour bonjour test endpoing</td>
<td class="td-column">Mairie de Nice</td>
<td class="td-column">Illimité</td>
<td class="td-column">active</td>
<td class="td-column">Stocks</td>
<td class="td-column">Pen</td>
</tr>
</tbody>
</table>
</body>
</html>
Raw
html-performance.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML performance</title>
</head>
<body>
<!-- Chrome->Performance->Lancer l'enregistrement X fois->Regarder dans Summary le Rendering -->
<!-- Oui, supprimer des balises inutiles a un petit impact sur le temps de rendu -->
<div id="root"><div class="app"><header class="navbar"><div class="container"><div class="navbar-brand"><a class="logo navbar-item active" aria-current="page" href="/accueil"><img alt="Logo" src="/icon/logo-full-hppro.png"></a><button class="navbar-burger" type="button"><span></span><span></span><span></span></button></div><div class="navbar-menu"><div class="navbar-end"><a class="navbar-item" href="/guichet"><span class="icon"><img alt="" src="/icons/ico-guichet-w.svg"></span><span>Guichet</span></a><div class="navbar-item has-dropdown is-hoverable"><a class="navbar-link" href="/accueil"><span class="icon"><img alt="" src="/icons/ico-user-circled.svg"></span><span>PC Test Admin 93 0</span></a><div class="navbar-dropdown is-right"><a class="navbar-item" href="/profil"><span class="icon"><img alt="" src="/icons/ico-user.svg"></span><span>Profil</span></a><a class="navbar-item" href="/structures"><span class="icon"><img alt="" src="/icons/ico-structure-r.svg"></span><span>Structure juridique</span></a><a class="navbar-item" href="/remboursements"><span class="icon"><img alt="" src="/icons/ico-compta.svg"></span><span>Remboursements</span></a><a class="navbar-item" href="/styleguide"><span class="icon"><img alt="" src="/icons/ico-stars.svg"></span><span>Styleguide</span></a><a class="navbar-item" href="https://aide.passculture.app/fr/category/acteurs-culturels-1t20dhs/" rel="noopener noreferrer" target="_blank"><span class="icon"><img alt="" src="/icons/ico-help.svg"></span><span>Aide</span></a><a class="navbar-item"><span class="icon"><img alt="" src="/icons/ico-deconnect.svg"></span><span>Déconnexion</span></a></div></div></div></div></div></header><div class="__react_component_tooltip place-top type-dark " data-id="tooltip"></div><main class="page home-page with-header white-header container"><div class="columns is-gapless"><div class="page-content column is-10 is-offset-1"><div></div><div class="after-notification-content"><div class="main-content"><div class="home-cards columns"><a class="home-card column" href="/guichet"><img alt="" src="/icons/ico-guichet-w.svg"><div class="home-card-text"><h1 class="title is-1 is-spaced">Guichet</h1><p class="subtitle is-2">Enregistrez les codes de réservation des porteurs du Pass.</p></div></a><a class="home-card column" href="/offres"><img alt="" src="/icons/ico-offres-w.svg"><div class="home-card-text"><h1 class="title is-1 is-spaced">Offres</h1><p class="subtitle is-2">Créez et mettez en avant vos offres présentes sur le Pass.</p></div></a></div></div></div></div></div></main><div class="notification-v2 is-info hide"><img alt="" src="/icons/null.png"></div><div class="modal" role="dialog" style="background-color: rgba(0, 0, 0, 0.8);"><div class="modal-dialog" role="document" style="transition-duration: 250ms; transform: translate(100vw);"><button class="close" type="button"><img alt="ico-close-b" src="/icons/ico-close-b.svg"></button></div></div></div></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment