Почему на профессиональных веб-сайтах есть нечетные имена #id и .class?

Я заметил, что в 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">
 <div class="asf T-I-J3 J-J5-Ji"></div></div></div></div>

и кнопка post facebook для обновления статуса

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

по производительности - имеет более короткое имя, действительно влияющее на время загрузки? казалось бы, это (для большой страницы, такой как facebook или gmail) еще пара 100kb, что сегодня широкополосная линия пренебрежимо мала для необходимого времени

на исключение - twitter и pinterest имеют читаемые имена

20
nl ja de
Примечание: это не имеет никакого отношения к «профессионализму».
добавлено автор Salman A, источник
Я уверен, что на прошлой неделе я прочитал очень похожий вопрос
добавлено автор Tom Sarduy, источник
Интересный вопрос. Они также (по крайней мере, Gmail) используют тонны вложенных div.
добавлено автор Salvatorelab, источник
Я считаю, что они часто являются просто аббревиатурами, например. xjsi на экране поиска Google может означать x JavaScript init (содержит загрузчик дополнительного JavaScript), а xjsd может означать x JavaScript destination (элемент, где мы сохраняем дополнительные скрипты), где x - это просто знак того, что элемент активен. Однако это только предположения. Однако, кроме этого, сгенерированные имена могут следовать некоторым странным правилам.
добавлено автор Zeta, источник
Учитывая количество данных, отправленных Facebook и Google, да, да, сэкономив несколько байтов здесь и там, вы получите много разницы. Это приводит к меньшему потреблению энергии и используемой полосе пропускания, что напрямую отражается на сохраненных деньгах.
добавлено автор PatrikAkerstrand, источник
Большая часть их содержимого динамична, поэтому нечетные, которые вы видите, вероятно, генерируются соответственно их каркасом, а не вручную. Статические части имеют собственные имена, например, левая панель инструментов facebook имеет идентификатор leftCol .
добавлено автор KBN, источник

2 ответы

Обновление: CSS-модули

Эта практика теперь известна как «CSS-модули» и становится все более популярной благодаря популярности Webpack. Концепция состоит в том, чтобы преобразовать (хеш) CSS-селекторов в уникальные имена классов, чтобы убедиться, что между модулями нет конфликтов стилей.

модуль css-loader для Webpack имеет модули , который позволяет использовать эту функцию. Он обычно используется с React, где вы назначаете имена классов в своей разметке через объект JS, доступный при импорте файла CSS, например.

import styles from './style.css

Если этот файл CSS имеет селектор, например. .sidebar , он применяется в разметке через

className={styles.sidebar}//JSX

Webpack будет использовать хеширование имени класса и селектора для обеспечения уникальности.

Оригинальный ответ ↓

Это было бы результатом минимизации и сжатия. Это, несомненно, будет написано с человекочитаемыми идентификаторами и именами классов, но, как прокомментировал Zeta, они затем заменяются аббревиатурами для сохранения байтов. Такие вещи не имеют значения для среднего веб-сайта, но когда вы получаете миллиарды просмотров страниц в минуту, все это имеет значение.

Взгляните на разницу между развитием и production версии jQuery. Это пример результата минимизации и сжатия.

9
добавлено
кажется логичным, но я его не покупаю. Глядя на верхние сайты alexa, youtube имеет очень читаемые идентификаторы и имена классов, и они не короткие. yahoo, похоже, имеет комбинацию этого .. с чем-то вроде этого <div class = "выбранная вкладка searchlrapper" id = "p_13838465-searchwrapper" role = "tabpanel" aria-labelledby = "yui_3_4_0_1_1360241032142_164"> , Википедия также имеет читаемые имена. Кроме того, twitter и pinterest (которые очень популярны) имеют читаемые имена, amazon.com. Итак, все эти популярные сайты не заботятся об этих байтах, но facebook делает? я сомневаюсь в этом
добавлено автор Nick Ginanto, источник
Вы знаете, что facebook и Google имеют гораздо больше трафика на сервере
добавлено автор Bluedayz, источник

Это происходит потому, что они компилируют свой код, я имею в виду, как Google они пишут код в java и все остальные обрабатываются с помощью GWT то же самое о facebook они пишут с помощью C, а затем делают то же самое.

0
добавлено
Facebook использовал для перевода своего PHP-кода (который используется для разработки интерфейса) в C ++, который затем был скомпилирован в двоичный файл и запущен как исполняемый файл. Это было сделано главным образом по соображениям производительности, но теперь вместо этого PHP-код скомпилирован в промежуточный байт-код, который затем запускается виртуальной машиной HipHop, которая является компилятором точно вовремя.
добавлено автор Chris Rutherfurd, источник
Ваше первое утверждение верно в отношении компилируемого кода. Тем не менее, передним интерфейсом Facebook является not , скомпилированный из C :)
добавлено автор Ruslan, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)