Pourquoi Facebook obtient-il les noms des classes CSS?
Si vous regardez le code source d'un site Web tel que Facebook, vous verrez de nombreuses classes comme telles:
<div class="_cy6 _2s24"><div class="_4kny"><div class="uiToggle _8-a _1kj2 _4d1i _-57 _5-sk" id="u_0_8"><a data-hover="tooltip" data-tooltip-content="Quick Help" data-onclick="[["HelpLiteFlyoutBootloader","loadFlyout"]]" class="_59fc" href="#" rel="toggle" role="button" data-tooltip-delay="500" aria-haspopup="true" aria-controls="u_0_7" aria-label="Help Center" data-testid="contextual_help_jewel_button"><div class="_59fb _tmz"></div></a><div id="u_0_7" class="__tw _8-b _tdb toggleTargetClosed uiToggleFlyout"><div class="beeperNub"></div><div id="fbHelpLiteFlyout"><div id="fbHelpLiteFlyoutLoading" class="_5uco"><img class="_26y2 img" src="https://www.facebook.com/rsrc.php/v3/yb/r/GsNJNwuI-UM.gif" alt="" width="16" height="11" /></div></div>
À l'œil nu, ils semblent être gibtilablement nommés classes. Cependant, je ne suis pas sûr de savoir pourquoi ils sont obscurcissés. Je ne vois pas une classe nommée quelque chose comme post avec des classes significatives sur des éléments enfants. Y a-t-il une raison pour cette pratique? Je vois de nombreux grands sites Web tels que Facebook conduisant ce modèle et je suis incertain s'il y a une raison.
Ça s'appelle Minification . Il rend les fichiers CSS (et potentiellement des fichiers JavaScript aussi) plus petits, nécessitant moins de bande passante à télécharger. Cela peut faire une différence significative dans la performance, en particulier pour les périphériques sans fil.
Ce n'est probablement pas un objet d'obfusticatian délibéré.
Grâce à une combinaison de transpersion et de minatinication, vous pouvez vous retrouver avec une source de page dans le navigateur qui ne ressemble à rien comme le code source d'origine.