[Перевод] Может, нам слегка успокоиться с JavaScript?28.02.2020 18:53

23a1573ad4ccc76f5cd1b64cfe43193b.pngУ меня очень странная проблема с браузером. Скрипты на некоторых страницах просто не работают, пока не пройдёт около 20-ти секунд.

Что бы вы ни собирались предложить — да, я уже думала об этом, и нет, не помогло. Я рассказываю об этом не в надежде, что кто-то подскажет с отладкой, а потому что этот случай заставил меня остро осознать некоторые, как бы сказать… причуды… разработки на фронте.

(В самом деле, даже не пытайтесь диагностировать проблему по одному предложению, не надо, я слышала и перепробовала почти всё, что вы можете себе представить).
Статья написана в марте 2016 года, некоторые примеры устарели — прим. пер.


Смотрите, вот скриншот твита. В нём красным цветом выделены те части, которые не работают без JavaScript. Я это знаю, потому что по-прежнему 20 секунд гляжу на страницу, на которой ещё не сработала большая часть кода.

376809c435042b0a54e6eeaa0db96379.png

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

С другой стороны…

Эта кнопка × в правом верхнем углу и все пустое окружающее пространство? Их единственная функция — отправить вас в мой профиль, который виден за твитом. С таким же успехом они могли быть обычными ссылками, как стрелки влево и вправо для навигации. Но это сделано иначе, поэтому не работает без JavaScript.

Или маленькая кнопка с графиками, для аналитики? Её единственная функция — загрузить другую страницу в искусственном всплывающем окне со встроенным фреймом. Здесь могла быть обычная ссылка, которая превращается во всплывающее окно с помощью скрипта. Но это сделано иначе, поэтому не работает без JavaScript.

Текстовое поле? Конечно, это просто текстовое поле. Но если нажать на него до запуска JavaScript, в поле останется неуклюжая надпись Reply to @eevee. А когда скрипт всё-таки запускается, он стирает всё, что вы набрали, и снова вставляет Reply to @eevee, только теперь @eevee написано синенькими буквами, а не серенькими.

То же самое происходит на странице поиска Twitter, что очень странно, потому что в поле поиска нет текста! Если вы начнёте печатать до окончания работы скриптов, они просто сотрут всё, что вы набрали. Даже не для того, чтобы вставить свой текст-заполнитель или применить пользовательский стиль. Без всякой видимой причины, просто так.

Поскольку у меня работает NoScript, я частенько замечаю странные дизайнерские решения на сайтах, которые посещаю впервые. Конечно, пустые белые страницы — обычное дело. Довольно долго статьи на сайте Time отлично загружались без скрипта, но только не прокручивались — для страницы применялось свойство overflow: hidden; по причинам, которые я не могу понять. Статьи Vox также загружаются нормально, за исключением того, что перед каждым изображением выводится пустое пространство на всю высоту экрана. Некоторые особенно плохие корпоративные сайты представляют собой месиво перекрывающихся блоков текста. Думаю, что они отказались от CSS и написали макет на JavaScript.

Для этого нет никаких веских причин. Это не передовые интерактивные приложения, это просто страницы с текстом. Мы раньше их печатали на бумаге, но как только перешли на информационные технологии, стало невозможно поместить слова на экран, не запустив на исполнение несколько мегабайт мусора?

Я прямо слышу, как меня называют луддиткой, потому что я не согласна окружать пять абзацев статического текста тысячами строк скриптов. Ну, позвольте заранее ответить: идите в баню. Я думаю, что веб и интерактивные страницы — это здорово, я вижу отличный прогресс в последнее десятилетие. Просто супер, что веб изначально поддерживал пользовательстие настройки, а я могу заранее настроить для каждого сайта разрешения, что он может запускать на моём компьютере, а что нет.

А вот что не очень здорово, так это группа высокооплачиваемых и высококвалифицированных специалистов, у каждого из которых установлен Chrome на последней модели Mac Pro, которые работают в офисе на расстоянии не больше километра от каждого сервера, на который они заходят. И вот эти ребята работают, а потом поворачиваются и хихикают над всеми остальными, у кого нет такой конфигурации. Учтите, что любое из следующих условий помешает работе вашего JavaScript:

  • Кто-то на медленном компьютере.
  • Кто-то на медленном соединении.
  • Кто-то на телефоне, то есть на медленном компьютере с медленным соединением.
  • Кто-то застрял со старым браузером на компьютере, который он не контролирует — на работе, в школе, в библиотеке и т. д.
  • Кто-то пытается написать небольшую программу, которая взаимодействует с вашим сайтом, у которого нет API.
  • Кто-то пытается загрузить копию вашего сайта, чтобы почитать в офлайне.
  • Кто-то — это кэш Google или Архив Интернета.
  • Кто-то сломал графическое окружение в Linux и пытается выяснить, как его починить, загружая статьи с вашего сайта через браузер командной строки Elinks.
  • Кто-то внёс изменения в ваш сайт с помощью пользовательского скрипта, и это мешает вашему собственному коду.
  • Кто-то использует NoScript и видит на вашем сайте только пустой экран. Они настолько раздражён, что просто уходит, а не вносит ваш сайт в белый список.
  • Кто-то использует NoScript и вносит в белый список вас, но не один из десятков трекеров, которые вы используете. Позже вы случайно ставите скрипт в зависимость от трекера, и он таинственным образом больше не работает для таких пользователей.
  • Вы даёте критически важному скрипту название, связанное с рекламой, и он не загружается у десятков миллионов пользователей с блокировщиками рекламы.
  • Ваш CDN упал.
  • У вашего CDN есть адрес IPv6, но на самом деле он не работает (да, я видела такое и у компаний стоимостью в миллиард долларов, и у федерального правительства). Заходит кто-то по IPv6, страница загружается, но JS вылетает по таймауту.
  • Ваш деплой идёт немного неудачно, и JavaScript повреждается.
  • Вы случайно использовали новую функцию, которая не работает в предыдущей версии самого популярного браузера. Выводится синтаксическая ошибка, и ни один из ваших сценариев не запускается.
  • Вы прямо вводите синтаксическую ошибку, и никто не замечает, пока она не попадает в продакшн.


Я не говорю, что следует стереть с лица Земли интерактивные веб-приложения, такие как Google Maps, хотя даже для Google Maps много лет был запасной вариант без скриптов, до текущей версии WebGL! Я говорю, что мы свернули куда-то не туда, когда базовые функции обычного HTML вдруг перестали работать без JavaScript. А именно, без 40 мегабайт JavaScript, согласно about:memory — это данные в памяти, а не размер загрузки. Это может показаться не очень много (для страницы, которая выводит на экран 140 символов?), но в моём браузере часто накапливается десяток открытых вкладок Twitter, то есть полгигабайта памяти, выделенных максимум на 6 КБ текста.
Вам действительно нужно постараться, чтобы добиться такого плачевного результата. Я имею в виду, если вам нужна ссылка, вы просто пишете label, и готово. Но если вы начнёте изобретать это с помощью JavaScript, то нужен обработчик кликов, и он должен работать в нужное время, чтобы вы знали, что ссылка действительно существует, и, возможно, вам придётся сделать некоторую работу, чтобы добавить обработчики кликов к фальшивым ссылкам, которые добавляет Ajax. Так ведь?

Нет! Вы получите лишь бледную, дрянную имитацию ссылки. Рассмотрим все функции нативных ссылок:

  • Я могу перейти по ссылке.
  • Я могу открыть ссылку в новой вкладке или окне с помощью комбинации клавиш ctrl, shift и колёсика (средней кнопки) мыши.
  • Я могу скопировать адрес ссылки и вставить его куда-нибудь или открыть в другом браузере, или ещё что-нибудь.
  • Я могу использовать ' в Firefox для поиска только ссылок.
  • В некоторых браузерах — Opera, Konqueror, uzbl, Firefox с vimperator? — есть горячая клавиша, которая показывает цифру или букву рядом с каждой ссылкой на странице, так что вы можете очень быстро «щёлкнуть» ссылку визуально, даже не касаясь мыши.
  • Я считаю, что скринридеры обрабатывают ссылки специальным образом.
  • Простые краулеры составляют по ссылкам карту сайта.
  • Браузеры начинают экспериментировать с предварительной загрузкой видных ссылок, так что если пользователь действительно нажимает на неё, то страница открывается мгновенно.


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

, то да, нажатие на div что-то сделает, но весь смысл полностью потерян. И наоборот, если использовать , то вы фактически лжёте этим инструментам; вы вызываете смысл, но отдаёте бессмысленную информацию.

Вот что люди имеют в виду, когда говорят о «семантике» — что есть полезная информация, которую нужно собрать. Если вы начинаете изобретать подобие ссылок, то анализ этого синтетического конструкта потребует либо спекулятивного выполнения большого количества произвольного кода, либо написания чрезвычайно умного статического анализатора, либо просто обучения программиста-человека. Декларирование намерений — гораздо более мощный и гибкий метод, чем просто выполнение работы, потому что в первом случае универсальные инструменты делают полезные вещи почти тривиально.

Еще один хороший пример — выпадающие формы