Задать вопрос
HeadOnFire

Игорь Воротнёв

PHP, Laravel & WordPress Evangelist
Ответы пользователя по тегу JavaScript

  • Как оптимизировать Script Evaluation?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Script evaluation time зависит от количества JS кода, который браузеру надо выполнять. Меньше кода - быстрее выполнение, меньше блокируется основной поток. Два джедайских пути - использовать меньше js вообще, и разгружать основной поток (на заставлять браузер выполнять все за раз в основном потоке, блокируя рендеринг - здесь частично поможет асинхронность).

    Полезное чтиво:

    https://developers.google.com/web/fundamentals/per...
    https://developers.google.com/web/fundamentals/per...
    Ответ написан
    Комментировать
    Комментировать

  • Не работает ajax сервер WAMP?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Ошибки нужно читать, они содержат детальное описание проблемы. Разобьем вот эту ошибку на кусочки:
    Notice: Undefined index: text in D:\Wamp\www\tost\index.php on line 12


    1. Notice: - ошибка уровня notice, по сути даже не ошибка, а уведомление.
    2. Undefined index: text - индекса "text" не существует, это говорит о том, что вы пытаетесь обратиться к индексе "text" какого-то массива, но такого индекса (элемента массива) не существует.
    3. D:\Wamp\www\tost\index.php on line 12 - а вот это конкретное место в вашем коде где эта ошибка возникла. Это строка 12, она содержит вот такой код: echo 'Данные приняты - '.$_POST['text'];

    Что с этим кодом не так? Вы пытаетесь вывести элемент массива $_POST под индексом "text", но еще до того, как вы отправили данные этим самым методом POST. Чтобы этого избежать, необходимо выполнить проверку:

    <html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script src="jquery-3.3.1min.js"></script>
    <script src="js.js"></script>
</head>
<body>
<h1>Нажать</h1>
 
<?php
if (isset($_POST['text'])) {
    echo 'Данные приняты - ' . htmlspecialchars($_POST['text']);
} ?>
 
</body>
</html>


    В этом случае мы сначала проверяем, чтобы данные были действительно отправлены, и только тогда их выводим. Кроме того, мы используем https://www.php.net/manual/en/function.htmlspecial... чтобы обезопасить себя.
    Ответ написан
    Комментировать
    Комментировать

  • Почему долго грузится страница?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Нормально все грузится:

    https://tools.pingdom.com/#5b84b8f28d400000

    Все "ваше" меньше 1 секунды, еще пару секунд работа с сервисами Яндекса. Если конкретно у вас что-то "крутится" во всех браузерах, возможно ваш провайдер, роутер, VPN или еще какой-то man-in-the-middle не дружит с тем же Яндексом (или Яндекс с ним). Например, у нас в Украине Яндекс заблокирован, поэтому у меня оно будет крутиться вечно, пока браузер не оборвет соединение. Но если я включаю VPN или блокировщик запросов к Яндексу - все грузится моментально.
    Ответ написан
    3 комментария
    3 комментария

  • Как убрать конфликт плагинов в wordpress?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Uncaught TypeError: j$(...).appear is not a function
    Uncaught TypeError: j$(...).hasClass is not a function

    j$ - муть какая-то, которой не существует, соответственно у нее не существует функций appear, hasClass и любых других. Похоже на криво прикрученный jQuery и опечатки в коде.
    Ответ написан
    Комментировать
    Комментировать

  • Как лучше подключать сторонние js библиотеки?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Вы немножко не в ту сторону смотрите и не совсем понимаете реальный смысл (и пользу) CDN как сервиса/технологии в целом.

    Время, которое уходит именно на скачивание файла с сервера CDN не является главным пожирателем времени. Еще до того, как эта закачка начнется, браузер вынужден отрезолвить DNS, отправить запрос на конкретный сервер, пожаться ручками, сверить сертификат и установить соединение. Именно на это уходит большая часть времени. Плюс сама загрузка, в силу влияния механизма Congestion Control и специфики работы протокола TCP не начинается моментально с максимальной пропускной способности канала, а с минимальных пакетов и растет по мере их успешной доставки. А если еще и канал не очень ок в плане потери пакетов (и отката размера пакета), например мобильный 3G, то в результате скорость скачивания будет не особо высокой. А если у вас еще и каждый скрипт со своего CDN подключается - проблема увеличивается многократно. Частично ситуацию можно улучшить с помощью prefetch / preconnect / preload. Но полностью она не решается.

    Также, нужно учесть что утверждение "у пользователя уже закешировано" сильно преувеличено. Кеши не такие уж огромные чтобы все умещать, они чистятся, инвалидируются, устаревают чуть более чем постоянно. А с учетом целого зоопарка версий - вероятность что именно ваша версия будет у пользователя вообще-то не так уж и высока.

    В это же время если у вас HTTP/2 и все отдается одним или несколькими файлами (для HTTP/2 это действительно не принципиально до определенного уровня) - DNS, SSL и соединение уже установлены на момент запроса, и предшествующий поток данных уже достаточно раскачал канал. Поэтому загрузка (которая и так не самая медленная часть этого процесса) произойдет быстро. Плюс, еще же можно push сделать, сдвинув время начала загрузки.

    А теперь про сам CDN и зачем он нужен.

    Если у вас основная целевая аудитория находится в РФ (а еще лучше - в Мск и регионе например, что вполне нормально для локальных бизнесов), ставите сервер в этом же регионе и не паритесь. CDN вам не нужен ни свой, ни сторонние CDN для скриптов, ни Google Fonts какой-нибудь. Со своего сервера по HTTP/2 это будет отдаваться всегда быстрее.

    Но если аудитория у вас - весь мир, а сервер всего один - вот тут CDN придет на помощь. Живой пример - клиент из Австралии, 60% аудитории - Австралия. Естественно, сервер мы берем в Мельбурне, прямо под боком у его ЦА. И для этих 60% все работает максимально быстро без каких-либо CDN. На среднем мобильном девайсе и на 3G - пару секунд. А вот для оставшихся 40% - США, Канада и Европа - один только RTT до Мельбурна 400-800ms даже на хорошем офисном вайфае. А на среднем девайсе и 3G - вообще жесть - TTI порядка 30 секунд, иногда до 40-45 проседает. И вот тут на помощь приходит CDN - пользователям из Канады, например, файлы начинают отдаваться с ближайшего сервера в Монреале. Да, мы потеряем <0.5 секунды на установку соединения с этим CDN (он ведь прямо под боком, RTT ~50ms), но благодаря скорости передачи данных сэкономим очень много. В результате, на среднем девайсе на 3G, с использованием CDN пользователь из Канады получит TTI практически такой же, как и пользователь из Австралии, на секунду-две больше максимум.

    Вот для этого и нужен CDN. А вся эта ересь про "у пользователя уже закешировано" - муть. Использовать CDN только для скриптовых библиотек а не для всех файлов, а тем более разные CDN для разных библиотек - это антипаттерн и проявление лени 80го левела.

    Update:

    Та же ситуация, кстати, со всеми этими маркетинговыми скриптами и трекерами, которые так любят наши клиенты понавешивать на свои сайты. Вот пример waterfall-графика загрузки странцы и всех ресурсов. Обратите внимание, что все ресурсы с нашего сервера по HTTP/2 (независимо от приоритета ресурса с точки зрения браузера) прилетают вообще мгновенно и практически одновременно. Это заслуга именно HTTP/2. А вот все сторонние скрипты с внешних CDN - при чем казалось бы, которые должны быть быстрыми, ведь это Google, Facebook и тд - занимают кучу времени. И большая часть этого времени это соединение с этими серверами. Кстати, здесь стоит preconnect для всех до единого внешних адресов, без него еще печальнее.

    5cf004a8937d7582506735.jpeg

    Для сравнения:

    - Скорость загрузки страницы целиком без всех этих счетчиков, все файлы со своего сервера по HTTP/2 (включая, кстати, 2 autoplay видео по ~1Mb каждое) - около 250-300ms.
    - С Google Tag Manager и зоопарком трекеров под ним - 3000ms. В 10 раз больше.
    Ответ написан
    Комментировать
    Комментировать

  • Как в Wordpress реализовать полноценный поиск через Ajax без тега form?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist 
    $('.my-class').keypress(function(eventObject){
  eventObject.preventDefault();
  ..

    Давно не писал на js, но вроде так.
    Ответ написан
    17 комментариев
    17 комментариев

  • Можно ли узнать насколько нагружена память устройства?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    При использовании "бесконечного скролла" многие почему-то делают только скролл вниз, а про верх забывают. Это архитектурная ошибка. Должно быть как - порцию нового подгрузили, порцию старого выгрузили. В обе стороны. И тогда никаких проблем с затупами не возникнет никогда. От слова совсем.
    Ответ написан
    Комментировать
    Комментировать

  • Максимальный вес JS файлов?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    У каждого проекта должен быть "бюджет", так называемый performance budget. Исходя из него можно сказать сколько будет "много", а сколько - "в самый раз". Необходимо адекватно понимать, что браузеру нужно не только скачать, но и распаковать, проанализировать и выполнить. При чем если вы бандлите стопиццот слайдеров и прочих jQuery-плагинов, все это будет делаться со всеми, даже если на конкретной странице используется только один из плагинов. Самая главная проблема с этим - это даже далеко не загрузка этих файлов, а именно parse, execute и render time в браузере. Идеальный вариант - как можно меньше. Но в реальности - нужно исходить из баланса - время на разработку (кастомная ванилька под нужные браузеры отнимет больше времени чем паклепать на jQuery), производительность у конкретной ЦА (если 80% на мобилах и далеко не iPhone 7, то даже 200Кб распакованного скрипта будет заметно тупить).
    Ответ написан
    Комментировать
    Комментировать

  • Как легко перейти с jQuery на VUE?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Конкретно в перечисленном вами примере нет совершенно ничего сложного и я вообще не вижу необходимости использовать какой-либо фреймворк. Все можно легко решить ванильным js, часть вообще чистым CSS.

    Пожалуй, единственное исключение - если бюджет более чем скромен, сроки небольшие, надо просто сделать и забыть. Тогда это может быть экономией.

    Что касается фреймворков в целом, и jQuery тоже - держите в голове, что цифры размера этих библиотек "gzipped and minified" это очень обманчиво. Они влияют исключительно на скорость загрузки этих скриптов, а этим можно даже пренебречь. При использовании протокола HTTP/2 тем более. Проблема с ними начинается позже - когда браузер их разгзипит и начнет анализировать. Вот здесь происходит существенная трата времени, которая тормозит отрисовку страницы. Тот же jQuery последний в неупакованном виде - почти 260Кб кода, который нужно распарсить и выполнить. Это весьма ресурсоемко.
    Ответ написан
    Комментировать
    Комментировать

  • Появляется карта сайта на 1-2 сек. при загрузке сайта, как исправить?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Это называется FOUC – Flash Of Unstyled Content. Происходит он потому что у вас невалидный и кривой HTML, менюшка ваша выводится в HEAD (где ее быть не может по определению, только в BODY), и до CSS. Отсюда и проблема – сначала браузер выплевывает HTML-разметку, а потом спохватывается, что вот еще стили есть, берет их и перерисовывает страницу.

    И да, счетчики эти всякие и прочие говноскрипты смело ставьте в футер, а еще лучше асинхронно и с задержкой. Раньше их выполнять не стоит.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как правильно написать или подключить js файл в wordpress?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    из обсуждения:

    var slides = document.querySelectorAll('.slider-item');
var sliderToggles = document.querySelectorAll('.slider-toggle');
var currentSlide = 0;

if ( slides.length > 0 ) {
    var slideInterval = setInterval(nextSlide, 2500);
}

function nextSlide() {
    sliderToggles[currentSlide].classList.remove('slider-toggle--active');
    slides[currentSlide].classList.remove('active');
    currentSlide = (currentSlide+1)%slides.length;
    sliderToggles[currentSlide].classList.add('slider-toggle--active');
    slides[currentSlide].classList.add('active');
}


    Проблема была в том, что слайдер запускался без проверки есть ли вообще слайды. Соответственно, если на других страницах их не было, то все ломалось.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать редактор произвольных полей?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Advanced Custom Fields или любой другой аналогичный плагин.

    Мне нужно решение без плагинов!

    Ну так вам придется писать свой "плагин" по сути. А работы тут немало:

    - регистрация метабокса(ов)
    - создание views (html внутри этих метабоксов, собственно сами формы и их поля)
    - при создании полей чуть сложнее чем просто текст - стилиация, интеракция (js) и взаимодействие с WP и данными (поиск, подгрузка и тп)
    - обработчик формы
    - валидация входящих данных
    - запись/обновление данных

    Установите плагин, который уже решил все эти вопросы, да еще и предоставляет уже красивый и удобный UI.
    Ответ написан
    9 комментариев
    9 комментариев

  • Как сделать древовидные комментарии?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    1. В структуре БД понадобится колонка "parent_id":

    ID - автоинкремент, уникальный ID комментария
    parent_ID - уникальный ID родительского комментария
    object_ID - уникальный ID страницы/записи/объекта, к которому комментарий относится
    ... - остальные колонки

    2. Как выводить деревья знает гугл.
    Ответ написан
    4 комментария
    4 комментария

  • Как прикрепить файл картинку при отправке сообщения?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Раз уж вы тег WordPress поставили, и сайт у вас на нем - то делайте все как положено. Почитайте про работу с ajax, загрузку файлов и отправку писем с вложениями:

    https://wp-kama.ru/id_2018/ajax-v-wordpress.html
    https://wp-kama.ru/id_9026/jquery-ajax-zagruzka-fa...
    https://codex.wordpress.org/Function_Reference/wp_...
    https://developer.wordpress.org/reference/function...

    Грубо говоря, WP из коробки предоставляет вам возможность обрабатывать ajax-запросы с фронта, загружать файлы (одновременно проводя проверку загружаемых файлов), отправлять письма с вложениями.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как использовать javascript на странице index.php в wordpress?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Javascript должен либо работать в том месте, где он стоит и будет прочитан (что не совсем правильно, имхо, потому как это скриптовый язык и ему в 99.99% нужен готовый DOM, а не его кусок), либо по событию. Подходящее событие определяется исходя из задачи. В вашем случае это DOMContentLoaded.

    Вставлять не обязательно (и даже нежелательно) в начало BODY, хоть многие счетчики / чаты поддержки и прочее говнецо именно так рекоммендуют. Минус такого подхода в том, что эти ваши скрипты, которые стоят в начале BODY и вызываются не по ивенту, а "сразу", будут блокировать все остальное. Это антипаттерн в плане оптимизации. Ставьте такой код перед закрывающим BODY. Эффект будет тот же, за исключением мелочей - например, счетчики статистики могут не успеть посчитать какое-то мизерное количество юзеров, которые ушли с сайта чуть раньше, чем страница прогрузилась до скрипта. Ну и хрен с ними, этими данными можно пренебречь. Намного важнее чтобы 99% пользователей получали страницу быстрее благодаря меньшему TTI.

    Как подгрузить их в WP? Да обычными стандартными средствами через functions.php. Если грузить в конце документа. Лучше всего сам js-код разместить в отдельном js-файле, его подключать в подвал, с async / defer по возможности.

    Было бы интересно узнать что это у вас за код такой, который нужно конкретно ставить в нужном месте. Скорее всего это просто неправильно написанный js.
    Ответ написан
    Комментировать
    Комментировать

  • Как заставть нормально работать скролл на сайте Wordpress?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    1. Проверил в Chrome, Firefox, Safari на macOS - все работает. Скролит мышкой, трекпадом, клавиатурой. Правда в некоторых местах адски тормозит, чего на предпоследнем MacBook Pro быть не должно в принципе. То есть, производительность скриптов и анимаций на сайте - ниже плинтуса.

    2. Проблемы со скроллом не имеют никакого отношения к WordPress. Это исключительно фронтенд проблема - CSS и Javascript. Что стоит на бекенде - WordPress, Symfony или крутая хипстерская CMS на Ruby - не имеет никакого значения.
    Ответ написан
    Комментировать
    Комментировать

  • Как реализовать на WP обновление определенной части страницы?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Ajax
    Ответ написан
    7 комментариев
    7 комментариев

  • Как оптимизировать сайт на wordpress+visual composer?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Бекенд у вас весьма шустрый:

    bf3ea512b4264ec0a546b7e2a70bafee.jpg

    Это весьма и весьма достойный результат. С сервером и на серверной стороне все в порядке. А теперь узкие места:

    1. Загрузка шрифтов с серверов Google. С вашим шустрым сервером имеет смысл шрифты стянуть себе и отдавать локально. Срежете секунды полторы:

    67053ff4cfef4f458eb6d4723a36a7e2.jpgab83df494f21431284650396046227eb.jpg

    2. Далее, есть проблема с несколькими стилями:

    vcare.uz/wp-content/plugins/js_composer/assets/lib...
    vcare.uz/wp-content/plugins/js_composer/assets/lib...
    vcare.uz/wp-content/plugins/js_composer/assets/lib...

    Они долго грузятся, можете сами в Developer Tools посмотреть. Проблема не только в том, что они долго грузятся, но и в том, что они встают в очередь так как расположены в подвале и из-за использования HTTP/1.1. Можно решить 2мя путями:

    - конкатенация в один файл
    - использование HTTP/2

    В идеале, можно искать баланс между HTTP/2 + выборочная конкатенация.

    3. Файлы

    - new.vcare.uz/wp-content/uploads/2017/08/header-1.j...
    - new.vcare.uz/wp-content/uploads/2017/08/bg-white22...

    С ними 2 проблемы:

    - грузится с поддомена (+ DNS lookup и прочие потери на новый коннект)
    - динамический параметр, который предотвращает кеширование файла на стороне клиента

    Перенесите файл на основной домен и уберите параметр.

    4. Contact Form 7

    7cad4ec44dba469b86e2fbaa7c31558d.jpg

    У вас 7 (!!!) аякс-запросов этот плагин генерит. Я так понимаю, это 7 разных форм на странице. Запросы запускаются достаточно рано в цикле жизни страницы, и блокируют других ресурсов, занимая соединения с сервером. По протоколу HTTP/1.1, насколько я помню, браузер открывает до 6 соединений с сервером. В вашем случае, часть из этих 6 к моменту вызова этих ajax-запросов уже занята, и они встают в очередь друг за другом, вместе с другими ресурсами. Это умножает время ожидания. Переход на HTTP/2 заметно снизит влияние, но желательно избавиться от них вообще. Я бы советовал заменить CF7 на более адекватный плагин. Попробуйте, к примеру, Torro Forms (толковый и бесплатный, еще и с нормальным интерфейсом).

    5. Еще один запрос к admin-ajax.php

    f94caf0158b642b2958aefe1b9825ae5.jpg

    Собственно, он инициирован Visual Composer'ом - это Masonry сетка. Возможно, он у меня дозапустился потому что я начал скролить страницу и докрутил до того места, где он нужен. Возможно, он не запускается по умолчанию и проблемой не является.

    6. Front-end performance (парсинг и рендеринг):

    1691686d9b5f493fb147d10e0da4a894.jpg

    Парсинг скриптов занимает много времени, ибо их много. Но от этого можно избавиться только путем уменьшения их количества, что, возможно, не вариант. А вот второй очень тревожный сигнал - это как раз время ожидания (Idle). Это как раз говорит о невозможности браузера продолжать работу на каких-то этапах из-за того, что он ждет пока прилетят запрошенные ресурсы. Переход на HTTP/2 крайне желателен + замена CF7. Это как раз тот случай, когда HTTP/2 должен дать ощутимый эффект.

    Ну это так, беглый анализ. Посмотрите результаты тестирования тут: https://tools.pingdom.com/#!/2GQ2d/http://vcare.uz/
    Ответ написан
    3 комментария
    3 комментария

  • Как редиректить аяксом?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    https://api.jquery.com/event.preventdefault/
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать, что бы после ФРОНТЭНД публикации поста Вордпресс автоматически определял ФОРМАТ записи, зависящий от содержания этой записи?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Смотрите, есть ли в плагине какой-то хук при создании нового поста. Если нет - используйте save_post. Далее, регулярками определяйте что прилетает и выставляйте нужный формат.
    Ответ написан
    Комментировать
    Комментировать