страница+всплывающее окно прогружаются минуту. Кто виноват Twig, JavaScript, руки?

@alex3111 · Регистрация: 08.08.2015

Студворк — интернет-сервис помощи студентам

Заранее извиняюсь если вопрос не в ту ветку и за свой гов**код.

Хочу добавить в родительскую страницу справочник кодов статистики во всплывающем окне.
Сама страница формируется Twig -ом. Массив кодов {{massiv_kod_okdp_json_encode}} примерно 40000 строк передается в JavaScript в функцию поиска строки из массива. Всё работает, но родительская страница прогружается примерно минуту, что не есть хорошо(пока тестирую на localhost). Боюсь что на хостинге будет намного хуже.

1 вопрос:
Никак не пойму, что так нагружает страницу: массив или Twig не любит такие массивы? и как это исправить? если массив не формировать, то страница прогружается за <1 сек.
2 вопрос:
Чтобы не перегружать родительскую страницу, думаю попробовать сделать всплывающее окно как здесь. Поле Заказчик:
Насколько я понял копать в сторону jQuery или нет??? и что такое initialhref
initialhref="/epz/organization/chooseOrganization/chooseOrganizationDialog.html?fieldName= customer&organizationType=ALL&dialogTitl e="

Помогите плиз люди добрые.

HTML

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE HTML>
<html>
<head>
 
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
<link href="/zak_site/css/style_js2.css" rel="stylesheet" type="text/css">
<script src="/zak_site/js/window.js"></script>
 
<title>ФОРМА</title>
 
</head>
<body  onload="initBorders({{est_pustye_polya}});">
 
<!-- ********************************************************initBorders("{{vsego_lotov}}"); onload="initBorders();"-->  
{% include 'header.html' %}
<!-- ******************************************************** -->  
<div class="left_col"><p>
Меню
<br>
</div>
 
 
<!-- ******************************************************** entry.php-->  
<div class="right_col">
<form name="myForm" method="post"  action="entry.php">
 
<!-- ****************************ВКЛАДКИ **************************** -->   
 
<div class="notebook" id="notebook1">
<ul class="tabs" >
{%for row_YY in massiv_vsego_lotov%}
    <li><a href="#page{{row_YY.nomer_lota}}">ЛОТ №{{row_YY.nomer_lota}}</a></li>   
{%endfor%}    
 </ul>
 
 
 <ul class="pages">
{%for row_XX in massiv_vsego_lotov%} 
      <li class="page" id="page{{row_XX.nomer_lota}}">
                <div class="prokrutka">
                <div >
<fieldset>
<legend>Сведения о Лоте №{{row_XX.nomer_lota}}</legend>
{%set nomer_lota = "" %}
{%set nomer_lota = row_XX.nomer_lota %}
 
<!-- ****************************НАЧАЛО ТАБЛИЦЫ**************************** -->   
{%for row_ZZ in massiv_ALL_iz_table%}
{%if row_ZZ.id  == row_XX.nomer_lota %}
<table> 
 
 
<!-- ****************************ОКДП**************************** --> 
<tr>
<td >
<div class="wb_Span">
<span>ОКДП<br>(справочник)</span>
<img style="float: right;" onclick="show(this.id,'block')" src="/zak_site/images/search.png" id="img_lot_okdp_{{row_ZZ.id}}">
</div>
</td>
<!-- ****************************ИЗ БАЗЫ**************************** -->  
<td>   
<textarea class="wb_TextArea" name="lot_okdp{{row_ZZ.id}}" id="lot_okdp{{row_ZZ.id}}" >
{%if row_ZZ.lot_okdp|length > 0  %}{{row_ZZ.lot_okdp}}
{% else %}
{%for row_YY in massiv_trebovaniya_predmet_dogovora%}
{%if row_YY.id  == row_XX.nomer_lota %}{{row_YY.trebovaniya_OKDP}}{% endif %}
{%endfor%}
{% endif %}
</textarea>
</td>
</tr>   
 
</table>
{% endif %}
 
{%endfor%}
</fieldset>
                </div>
                </div>  
</li>
{%endfor%} 
</ul>
 
</div>
<!-- ******************************************************** -->  
{% include 'buttons.html' %}
<!-- ******************************************************** -->  
</form> 
</div>
 
<!-- ******************************************************** --> 
<div>
<form name="sel">
 
<div id="window">
<table style="width: 500px;"> 
<tr>
<td style="width: 400px; min-width: 400px;">
{%set poisk = "Транспортн" %}
 
{{poisk}}
<td style="width: 100px;">
<img class="close" onclick="show(this.id,'none')" src="/zak_site/images/close.jpg">
<br><br>
<tr>
<td style="width: 500px;">
<textarea class="wb_TextArea"  id="okno_kod_type" >
{{poisk}}</textarea>
<td style="width: 100px;">
<img style="float: right;" onclick="poisk({{massiv_kod_okdp_json_encode}});" src="/zak_site/images/search.png">
 
<tr>
<td>
<span>Результаты поиска:</span>
<tr>
<td>
<select style="width: 400px; font-size: x-small;" id="select_kod_type_id" size="15" hidden="" ></select>
 
<tr>
<td>
<img style="float: right;" onclick="copirovanie();" src="/zak_site/images/search.png">
<td>
 
</table> 
</div>
</form>
 
<div onclick="show(this.id,'none')" id="wrap">
</div>
</div>
 
 
<!-- ****************************footer**************************** --> 
<div class="footer"><p></p></div>
 
 
</body>
</html>

JavaScript

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
//функция показа
function show(val_id,state){
    document.getElementById('window').style.display=state;
    document.getElementById('wrap').style.display=state;
 
alert(val_id);
 
if(val_id.indexOf('lot_okdp') !=-1) {
glob_val_type='lot_okdp';
glob_val_name_column='kod_okdp_all';
alert(glob_val_type);
}
 
glob_val_id=Number(val_id.replace(/\D+/g,""))
alert(glob_val_id);
 
var search_lot_okved=document.getElementById(glob_val_type+''+glob_val_id).value;
//alert(search_lot_okved);
document.getElementById('okno_kod_type').value=search_lot_okved;
}
 
function copirovanie(){
var szElement="";
var objSel = document.getElementById("select_kod_type_id");
if ( objSel.selectedIndex != -1)
{
   szElement=objSel.options[objSel.selectedIndex].text;
}
//szElement=document.getElementById('kod_okved_id').text;
alert(szElement);
document.getElementById('okno_kod_type').value=szElement;
alert(glob_val_id);
document.getElementById(glob_val_type+glob_val_id).value=szElement;
 
show('','none');
}
 
 
 
function poisk(massiv_kod_okdp_json_encode){
alert(massiv_kod_okdp_json_encode);
massiv_kod_type_json_encode=massiv_kod_okdp_json_encode;
//что ищем
var searchText=document.getElementById('okno_kod_type').value;
//в нижний регистр
var searchText=searchText.toLocaleLowerCase();
//alert(searchText);
//<select c id="kod_okved_id"
var objSel = document.getElementById("select_kod_type_id");
//Очистка списка SELECT
objSel.options.length = 0;
objSel.options.hidden = false;
alert(massiv_kod_type_json_encode);
 
var strsel=0;
var len=massiv_kod_type_json_encode.length;
for(var i =0;i<len;i++)
{
//var str=0;    
var str_noregistr=massiv_kod_type_json_encode[i][glob_val_name_column];
console.log(massiv_kod_type_json_encode[i][glob_val_name_column]);
//в нижний регистр
if (str_noregistr) {
//    var str = myVar.toString();
var str=str_noregistr.toLocaleLowerCase();
}
 
     
if(str.indexOf(searchText) !=-1) {
//новый элемент в список SELECT
objSel.options[strsel] = new Option(str_noregistr, strsel);
strsel++;
}
}
//меняем  size="15" SELECT
if(strsel<15) {
//alert(strsel);
objSel.options.size = strsel;
}
if(strsel==0) {
//alert(strsel);
objSel.options[strsel] = new Option("ничего не найдено", strsel);
}
//alert(massiv_kod_okved_json_encode.length);
 
}

Добавлено через 25 минут
я так понял массив в 4000 строк для JS это чуть больше, чем много???

Что лучше: массив c 1000 элементов на JS или вычисления на серваке?

@Subik · 01.09.2016, 23:16

Сообщение от alex3111

я так понял массив в 4000 строк для JS это чуть больше, чем много???

Это чуть меньше чем мало.
Без проблем загружал json в 20к+ элементов типа {название, название, ссылка, описание}
Я к тому, что дело точно не в массиве в 4к строк

Сообщение от alex3111

если массив не формировать, то страница прогружается за <1 сек.

Мб все дело в том, как ты формируешь? Там у тебя ничего сверх страшного нету?

@alex3111 · 01.09.2016, 23:20 **[ТС]**

да нет всё стандартно - 40к строк, 3 столбца

PHP
1
2
$massiv_kod_okdp = get_massiv($table_name);
$massiv_kod_okdp_json_encode = json_encode($massiv_kod_okdp);

PHP
1
2
3
4
5
6
7
8
9
10
11
function get_massiv($table_name)     {
$result = mysql_query("SELECT * FROM $table_name");
$row = array();
$strok=mysql_num_rows($result)
for($i = 0; $i < $strok; $i++) 
{
$row[] = mysql_fetch_array($result,MYSQL_ASSOC);
//print_r($row);
}
return $row;
}/** *end function */

@Subik · 01.09.2016, 23:26

Временные промежутки пробовал ставить?
Разбей код на мелкие временные промежутки(тем более тут кода пару строк) и посмотри, какая часть кода выполняется дольше всего.

Кстати а браузер что говорит про время загрузки? с сервера долго приходит или браузер долго обрабатывает?

@alex3111 · 01.09.2016, 23:49 **[ТС]**

Сообщение от Subik

Разбей код на мелкие временные промежутки(тем более тут кода пару строк) и посмотри, какая часть кода выполняется дольше всего.

уже разбивал

PHP
1
$time_finish= microtime(true)-$time_start;

браузер выводит за всё время загрузки страницы =время работы 0.3110 сек.

может дело в сервере? стоит AppServ8.3.0

Добавлено через 7 минут
в IE ищет, но долго. Тестирую в основном в IE/
в FF летает, выводит alert(massiv_kod_type_json_encode); но пусто в "Результаты поиска:"

Добавлено через 6 минут

Сообщение от alex3111

в IE ищет, но долго. Тестирую в основном в IE/

точнее загружает страницу долго, ищет моментально

@Jewbacabra · 02.09.2016, 01:14

Сообщение от alex3111

примерно 40000 строк передается в JavaScript в функцию поиска строки из массива.

Когда нужно такое количество строк передавать клиенту нужно сразу задать себе вопрос: "Все ли я делаю правильно". Никто в здравом уме не будет просматривать все 40К строк, это физически невозможно человеку.

Дальше как я понял все самое интересное происходит в функции poisk (уж извини, особо сильно не разбирался, глаза вытекли от транслита и отсутствия форматирования

). Как я понял, берется текст и inputa, и ищется по всем тем 40К строк те, значения которых начинаются с него. Звучит как SQL запрос, который почему-то по сути выполняет "медленный" javascript вместо "быстрого" MySQL, да еще и от сервера к клиенту кучу ненужных данных гоняет.

По-нормальному нужно делать так: пользователь ввел в input значение, аяксом (или с перезагрузкой страницы, неважно) отправить его на сервер, там выполняется запрос типв

SQL
1
SELECT * FROM `table_name` WHERE `name` LIKE 'input_value%' ORDER BY `name`

, ОБЯЗАТЕЛЬНО значение inputa прогнать через mysql_real_escape_string! (вместо * желательно только те столбцы которые действительно нужны, LIKE вроде как регистро независимый, точно не помню и индекс добавить, чтоб поиск ускорить) и с полученными строками делать уже что дальше нужно.

@alex3111 · 02.09.2016, 07:58 **[ТС]**

Сообщение от Jewbacabra

глаза вытекли от транслита и отсутствия форматирования

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

Буду копать в сторону аякса. Была мысль что не стоит такой массив в JS передавать, но тут как в поговорке: 2 юриста - 3 мнения

Сообщение от alex3111

2 вопрос:
Чтобы не перегружать родительскую страницу, думаю попробовать сделать всплывающее окно как здесь. Поле Заказчик:
Насколько я понял копать в сторону jQuery или нет??? и что такое initialhref
initialhref="/epz/organization/chooseOrganization/chooseOrganizationDialog.html?fieldName= customer&organizationType=ALL&dialogTitl e="

для общего развития подскажите по 2 вопросу

@Subik · 02.09.2016, 09:54

Сообщение от alex3111

для общего развития подскажите по 2 вопросу

https://api.jquery.com/jquery.get/

@Jewbacabra · 02.09.2016, 11:57

Сообщение от alex3111

для общего развития подскажите по 2 вопросу

можно jquery, можно чистый js. В любом случае весь аякс это по сути полторы функции и все, назвать его самостоятельной технологией нельзя.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 19.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .

@Subik 170 / 45 / 5 Регистрация: 10.01.2013 Сообщений: 424
	01.09.2016, 23:26
	Временные промежутки пробовал ставить? Разбей код на мелкие временные промежутки(тем более тут кода пару строк) и посмотри, какая часть кода выполняется дольше всего. Кстати а браузер что говорит про время загрузки? с сервера долго приходит или браузер долго обрабатывает? 1