web-dev-qa-db-ja.com

FacebookがCSSクラスの名前を難読化するのはなぜですか？

FacebookなどのWebサイトのソースコードを見ると、そのような多くのクラスが表示されます。

<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="[[&quot;HelpLiteFlyoutBootloader&quot;,&quot;loadFlyout&quot;]]" 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>

肉眼では、彼らは意味不明な名前のクラスのように見えます。しかし、なぜそれらが難読化されているのかはわかりません。子要素に意味のあるクラスがあるpostという名前のクラスはありません。この慣行には理由がありますか？ Facebookなどの大規模なWebサイトがこのパターンを実行しているのを私は多く見ていますが、理由があるかどうかはわかりません。

javascriptprogramming-practicesweb-applicationscsspatterns-and-practices
7
1234567

それは minification と呼ばれます。 CSSファイル（および場合によってはJavascriptファイルも）が小さくなり、ダウンロードに必要な帯域幅が少なくなります。これにより、特にワイヤレスデバイスのパフォーマンスに大きな違いが生じる可能性があります。

13
John Wu

これはおそらく故意の難読化ではありません。

トランスパイルとミニファイを組み合わせることで、ブラウザのページソースが元のソースコードとはまったく異なるものになる可能性があります。

1
Lewis Marhin