44

FacebookとGmailの#idと.classの名前が本当に変わっていることに気づきました。

彼らは故意にそれらを難読化しますか？または彼らのIDEはそれをしますか？開発のためにそのような読めない名前を持つことは論理的ではないようです

たとえば、これはGmailの更新ボタンです。id/classを「refresh」にするのが妥当です

<div class="G-Ni J-J5-Ji" style="">
<div class="T-I J-J5-Ji nu T-I-ax7 L3" act="20" role="button" tabindex="0" style="-webkit-user-select: none;" data-tooltip="Refresh" aria-label="Refresh">
<div class="asa">
<span class="J-J5-Ji ask">&nbsp;</span><div class="asf T-I-J3 J-J5-Ji"></div></div></div></div>

ステータス更新のためのFacebookの投稿ボタン

<button class="_42ft _42fu _11b selected _42g-" type="submit">Post</button>

パフォーマンスについて-名前を短くすると、実際に読み込み時間に影響しますか？（FacebookやGmailなどの大きなページの場合）100kb多いように見えますが、今日のブロードバンド回線では、必要な時間はごくわずかです。

例外として-twitterとpinterestには読みやすい名前があります

4

2 に答える 2

24

更新: CSS モジュール

このプラクティスは現在「CSS モジュール」として知られており、Webpack の人気に伴い、より広く採用されるようになっています。概念は、CSS セレクターを一意のクラス名に変換 (ハッシュ) して、モジュール間でスタイルの衝突がないようにすることです。

Webpackのcss-loader モジュールmodulesには、この機能を有効にするオプションがあります。これは一般的に React で使用され、CSS ファイルをインポートすることで使用可能になる JS オブジェクトを介してマークアップにクラス名を割り当てます。

import styles from './style.css

その CSS ファイルにセレクターがある場合、たとえば.sidebar、 を介してマークアップに適用されます。

className={styles.sidebar} // JSX

Webpack は、一意性を確保するために、クラス名と対応するセレクターをハッシュします。

元の回答↓</h3>

これは、縮小と圧縮の産物です。人間が読める ID とクラス名で書かれていることは間違いありませんが、Zeta がコメントしたように、これらはバイトを節約するために省略形に置き換えられます。そのようなことは、平均的な Web サイトでは問題になりませんが、1 分間に数十億のページビューを取得している場合、すべてが重要になります。

jQueryの開発バージョンと製品バージョンの違いを見てみましょう。縮小・圧縮した結果の一例です。

于 2013-02-07T12:39:13.273 に答える