Бен Регенспан
По словам Данные, собранные построенными наборами 6% от топ-10 000 самых высокопоставленных сайтов нагрузки нагрузки от серверов Facebook. Для подавляющего большинства из них этот контент, скорее всего, JavaScript SDK Facebook, огромный блок кода, необходимый для отображения таких функций, как кнопка «Нравится» (как видно на многие медиа-сайты) и виджеты комментариев Facebook (также используются на многих больших носителях. Сайты, Buzzfeed среди них).
Этот код SDK настолько велик, что он представляет около 16% от общего размера всего JavaScript на средняя веб-страница Отказ
Как значительную и широко используемую программную библиотеку, SDK Facebook является хорошим способом иллюстрации некоторых ответов на вопросы: только почему средний сайт сегодня настолько большой? И сколько на самом деле имеет размер?
Почему так большой?
Facebook SDK очень полнофункциональный, дублирующий многие из инструментов, средний сайт, скорее всего, будет уже включать для своих собственных пользовательских разработчиков: методы для получения данных с других сайтов, для определения того, какой браузер и устройство пользователь использует так, чтобы Целевые определенные функции для них и для отображения элементов пользовательского интерфейса (например, диалоги и кнопки подтверждения). Если мы классифицировать все штуки SDK, поломка выглядит так:
Наборов особенностей, три выделяются больше всего:
«Canvas» – это система Facebook для приложений, предназначенных для загрузки в рамках Facebook (Facebook сделал главный толчок в прошлом, чтобы поощрять разработчиков для создания приложений, которые жили в рамках Facebook; я не совсем уверен, насколько широко используются такие приложения, Но в любом случае, обычный веб-сайт не использует никаких функций, связанных с Canvas.) Стоимость в том числе их в SDK довольно маргинально: всего 1,5% от общего размера.
После этого у нас есть устаревшие функции поддержки. Это отражает тот факт, что API накапливает несколько интерфейсов для обработки одинаковых функций со временем. Например, разработчики могут писать код, который вызывает либо Fb.getloginstatus () (Наследийный подход к запрашиванию текущего состояния входа в Facebook) или Auth.getloginstatus () (новый, поощренный подход). Способ обрести, нуждающийся в том, чтобы включить оба набора методов, выпускают их в отдельных версиях SDK, но Facebook решил не делать этого, скорее всего, упростить опыт разработчиков и максимизировать количество сайтов, использующих тот же самый файл ( Чтобы увеличить вероятность того, что средний пользователь уже его скачал). Это решение приходит на небольшую стоимость: примерно 3,5% СДК-кода предназначена для обработки функций, которые явно помечены как «наследие» (и вполне возможно, что существует много более «устаревших» функций, которые просто не четко помечены как таковые ).
Наиболее значительно, SDK включает в себя несколько многобиловных и многобизневых коммунальных услуг, которые составляют более 15% своего кода. Polyfills используются для поставки признаков, которые обнаружены в более новых браузерах на более старые браузеры, а иногда также для предоставления новых функций, которые предстоят, но не были добавлены в любые браузеры. Большинство многобировщиков, включенных в Facebook SDK, предназначены для функций, которые уже включены в браузеры, используемые подавляющим большинством пользователей Интернета. Они служат только для того, чтобы сделать работу SDK для < 1% пользователей глобальных интернет-пользователей, которые используют старые браузеры, такие как Internet Explorer 8, который многие (если не подавляющее большинство) основных сайтов отказались от поддержки.
Остальных ~ 80% SDK, это немного сложнее расслабиться, какие функции необходимы для каких целей. Это связано с тем, что написано так, чтобы использовать простую функцию, такую как кнопка «Нравится», необходимо также включить код, который используется только для комментариев, встраиваемых видео, кнопок входа в систему и другие несвязанные функции. Facebook мог бы выбрать для распределения гораздо меньших файлов для включения только одних функций, таких как кнопки, как есть бизнес-цель поощрения сайтов, которые можно использовать как можно больше предоставленных FB.
Размер имеет размер?
Из-за широко распространенного использования SDK Facebook, и тот факт, что он меняет относительно нечасто Многие пользователи могут уже загрузить его, прежде чем загружать сайт. На самом деле, это большая часть обоснования, почему Facebook будет распространять такой огромный файл, а не меньший для определенных функций, таких как кнопки. И на сетевых подключениях большинства пользователей – по крайней мере, в развитых странах – время, необходимое для загрузки файла, является предельным.
Но независимо от того, есть ли браузер пользователя уже скачал SDK, все еще есть накладные расходы, участвующие в запуске большого блока JavaScript, особенно на мобильных устройствах. На относительно новом MacBook Pro я пишу это, SDK Facebook занимает около 50 мс (1/20 в секунду), запустить на сайте, как BuzzFeed. Неплохо – особенно при принятии в контексте с остальной частью кода JS, включая код, связанный с рекламой, который требуется гораздо дольше для выполнения – но все же нетривиальная стоимость для чего-то, что используется только для отображения комментариев на самом нижней части страница.
На очень новом смартфоне (пиксель Google) время выполнения JS удвоилось, теперь принимает более 1/10 секунды:
При рассмотрении в контексте это крошечная фракция общего времени выполнения кода на странице. Но он добавляет к количеству времени, в течение которого прокрутка или в противном случае взаимодействуют с страницей, может быть измельченным и неприятным опытом. И это получает в важном моменте: этот конкретный SDK имеет предельную стоимость, но современные веб-сайты – особенно медиа-сайты – часто включают в себя аналогичный код из большого количества третьих лиц ( этот пример, который я поймал из Gawker, прежде чем он был убит Миллиардер вампир показывает, сколько таких запросов может быть).
Даже устанавливает влияние конфиденциальности отправки некоторой пользовательской информации каждому из этих третьих сторон, стоимость всех этих функций быстро добавляет. Каждый сторонний скрипт, который добавляет сайт, поставляется по стоимости, как с точки зрения производительности, так и в помощи рационализации добавления следующего «относительно безобидной» куски стороннего кода. Помимо немедленного воздействия на аддитивную стоимость всего этого кода, это влияет на мораль разработчиков: представьте себе работу в течение нескольких дней, чтобы побрить 10% времени загрузки вашего собственного кода, только чтобы увидеть гигантский блок стороннего кода, добавил, что гнома влияние этого кропотливого усилия. И тогда (если вы работаете на медиа-сайт), видя этот же паттерн, повторяю себя снова и снова каждые несколько месяцев.
Если вы включите это?
Если вам нужно использовать функцию, такую как комментарии Facebook, нет необходимости загрузить SDK Facebook. Но в зависимости от того, как ваш сайт структурирован, вы сможете ограничить влияние производительности SDK, только загрузка его при необходимости (например, после того, как пользователь прокручивается до такой степени, что комментарии должны быть видимыми).
Если вы хотите использовать кнопку «Нравится», остановитесь и пересмотреть. Facebook больше не отображает лайки страницы заметно (или, в большинстве случаев) на времен пользователях пользователей. Это лучше Используйте простой пользовательскую кнопку обмена или ссылку И как побочная выгода, это позволит помешать Facebook отслеживать все посещения вашей страницы и вмешиваться в конфиденциальность ваших пользователей. Сайты, которые устранили кнопку «Нравится», не смогли определить любое негативное влияние, когда речь идет о рефералах Facebook.
Коррекция к названию: Первоначально я под названием «Почему 16% кода на среднем участке принадлежит Facebook, а что это значит». Как и некоторые правильно указанные, это подразумевает, что полный 16% JavaScript на всех сайтах в Интернете (или, по крайней мере, все верхние сайты) состоит из Facebook JavaScript SDK. Это не было моим намерением, и я вижу, как он наткнулся как чрезмерно сенсационный.
Надеюсь, новый заголовок дает более понятнее, что Facebook SDK измеряет на 16% размера JavaScript среднего сайта, и больше не подразумевает, что он представляет 16% от общего размера сайта JavaScript через Интернет. В качестве Дэвид Гилбертсон отмечает здесь Фактическое глобальное число будет намного меньше – 0,96%. Он также поднимает хорошую точку Re: кэширование: SDK Facebook JavaScript SDK вообще не вступит в кэшируется, он только получает кэшировать в самых идеальных модах в течение 20 минут, после чего браузер пользователя обратно с серверами Facebook, чтобы убедиться, что это Уже есть последняя версия.
Оригинал: “https://www.freecodecamp.org/news/why-16-of-the-code-on-the-average-site-belongs-to-facebook-and-what-that-means-68956cd731be/”