Total error otimization in nav-menu.js
-
Мое количество элементов в меню ~800 элементов. Обнаружил грубую ошибку в версии начиная 6.7 версии — скрипт nav-menu.js приводит к полному зависанию страницы редактирования списка элементов меню.
В ходе решения проблемы обнаружил — 800 элементов меню перемножались и в итоге получилось 800*800=640000 элементов в node.
initAccessibility : function() {
var menu = $( '#menu-to-edit' );
api.refreshKeyboardAccessibility();
api.refreshAdvancedAccessibility();
// Refresh the accessibility when the user comes close to the item in any way.
menu.on( 'mouseenter.refreshAccessibility focus.refreshAccessibility touchstart.refreshAccessibility' , '.menu-item' , function(){
api.refreshAdvancedAccessibilityOfItem( $( this ).find( 'a.item-edit' ) );
} );
// We have to update on click as well because we might hover first, change the item, and then click.
menu.on( 'click', 'a.item-edit', function() {
api.refreshAdvancedAccessibilityOfItem( $( this ) );
} );
// Links for moving items.
menu.on( 'click', '.menus-move', function () {
var $this = $( this ),
dir = $this.data( 'dir' );
if ( 'undefined' !== typeof dir ) {
api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), dir );
}
});
(далее виновный код, из-за которого все ломается)
// Set menu parents data for all menu items.
menu.updateParentDropdown();
// Set menu order data for all menu items.
menu.updateOrderDropdown();
// Update menu item parent when value is changed.
menu.on( 'change', '.edit-menu-item-parent', function() {
api.changeMenuParent( $( this ) );
});
// Update menu item order when value is changed.
menu.on( 'change', '.edit-menu-item-order', function() {
api.changeMenuOrder( $( this ) );
});
},
-
800 элементов — это правильное решение в нашем случае, новый Муниципальный сайт, это уже далеко не блог 🙂 В нашем случае острая необходимость в том чтобы меню было хорошее и работало правильно.
Точно Вам говорю это не из-за Max Mega Menu, кто то из разработчиков упустил этот критически важный момент, в который упираются все серьёзные пользователи системы WordPress.
Виновник испорченного кода в 6.7.1 … class-walker-nav-menu-edit.php (
<div class="field-move-combo description-group">
<p class="description description-wide">
<label for="edit-menu-item-parent-<?php echo $item_id; ?>">
<?php _e( 'Menu Parent' ); ?>
</label>
<select class="edit-menu-item-parent widefat" id="edit-menu-item-parent-<?php echo $item_id; ?>" name="menu-item-parent[<?php echo $item_id; ?>]">
</select>
</p>
<p class="description description-wide">
<label for="edit-menu-item-order-<?php echo $item_id; ?>">
<?php _e( 'Menu Order' ); ?>
</label>
<select class="edit-menu-item-order widefat" id="edit-menu-item-order-<?php echo $item_id; ?>" name="menu-item-order[<?php echo $item_id; ?>]">
</select>
</p>
</div>в этот edit-menu-item-parent и edit-menu-item-order загружается вся структура существующего меню (повторение 800). Т.е. каждый пункт меню содержит в себе select с повторением 800 итого 800*800=640000 и все это для javascript вызывает нагрузку до 10 минут для отображения страницы… 🙁
Я исправил эту ошибку — время формировнаия страницы редактирования меню от 9 до 20 секунд(!) Ура победа.
В итоге перешел на новую версию 6.7.1 (она мне нравиться чистотой кода и скоростью), но сделал следующие исправления
30/01/2025
Действие: Replace nav-menu object (all code files) in 6.7.1 from 6.6.2
Результат: Исправлена ошибка зависания интерфейса редактирования элементов меню, которая проявляется с версии 6.7\iwa.toprayon.ru\mnt\toprayon.ru\wp-admin\includes
class-walker-nav-menu-edit.php (файл вывода формы html шаблон)<p class="field-link-target description" style="display:none"> <label for="edit-menu-item-target-<?php echo $item_id; ?>"> <input type="checkbox" id="edit-menu-item-target-<?php echo $item_id; ?>" value="_blank" name="menu-item-target[<?php echo $item_id; ?>]"<?php checked( $menu_item->target, '_blank' ); ?> /> <?php _e( 'Open link in a new tab' ); ?> </label> </p> <span style="display:none"> <button type="button" class="button-link menus-move menus-move-left" data-dir="left"></button> <button type="button" class="button-link menus-move menus-move-right" data-dir="right"></button> </span>\iwa.toprayon.ru\mnt\toprayon.ru\wp-admin
nav-menus.php\iwa.toprayon.ru\mnt\toprayon.ru\wp-admin\js
nav-menu.js
nav-menu.min.js\iwa.toprayon.ru\mnt\toprayon.ru\wp-includes
nav-menu.php
nav-menu-template.php
class-walker-nav-menu.php***************************************************************************
ПРЕДЛАГАЮ СДЕЛАТЬ ВЕСЬ ИНТЕРФЕЙС РЕДАКТИРОВАНИЯ НАВИГАЦИОННОГО МЕНЮ НА AJAX событиях. Не удаляйте интерфейс редактирования навигационного меню — это правильный путь, порядок, ядро, удобство для разработчиков и конечных пользователей.
С уважением, Алексей
- Для ответа на тему необходимо авторизоваться.