Как облегчить страницу
 

Всем добрый день!

Обращаюсь к вам за советом.
Заранее прошу прощения за длинный текст.

Делаю опросник в специальном программном обеспечении.
Данное ПО - своеобразный конструктор, в который я запихиваю тексты вопросов и варианты ответов. На выходе программа выдает набор файликов .pl, в которых формируется страничка.
По условиям задачи, необходимо было сделать так, чтобы все вопросы анкеты были размещены на одной странице.
Плюс, в анкете есть логика (напр. При ответе на один вопрос показать / скрыть другие вопросы, или отфильтровать список чекбоксов по выбранным и т.д.). Все эти скрипты я писала в head.

В итоге: в анкете получилось более 600 вопросов, страница весит 1.7 Мб.:blink:

Заполнять ее будут с планшетов, я проверяла работоспособность на телефоне.
На компе анкета грузится от 2 до 5 секунд, в процессе заполнения, замечаний никаких нет, все работает быстро.
Но вот на телефоне, страница грузится около минуты((:cray:
Помимо этого, подвисает обработка кликов и ввода текста (клик срабатывает чуть меньше чем через секунду).

Что я перепробовала:
1) Сжала все скрипты и стили. По возможности выкинула все ненужное, выцепив необходимые куски кода (запихала в head).
На компе, разница в загрузке в нескольких мс. На телефоне не ощутила разницы (ну может она и была в пару секунд, но по сравнению с загрузкой в минуту, меня это не особо радует).
2) В файле .htaccess закэшировала все и вся. Разницы не ощутила…
3) В качестве эксперимента, удалила все скрипты (и самописные с ссылки на jquery), удалила все стили. Картинок у меня толком нет, только маленький логотип внизу страницы весов в 7 кб и иконка на вкладке – 1 кб.
Т.е. остался только чистый html. Разницы никакой, страница грузится минуту.

Что НЕ пробовала:
Знаю, что было бы не плохо подгружать контент динамически. Не рассматриваю такой вариант по двум причинам:
1. Понятия не имею, как объяснить программе, в которой я работаю, что не нужно загружать всю страницу (там ведь и сбор данных и их отправка прописываются, я не могу просто удалить часть вопросов).
2. Еще одно условия задачи – после открытия ссылки, должна быть возможность заполнять весь этот кошмар в отсутствии интернета. Если что-то погружать динамически, то понадобится интернет.

Прошу совета, можно ли как-то ускорить загрузку страницы и убрать тормоза при кликах?

Что так, что эдак он нужен :)
Если вы в первый раз зашли на вашу страничку, то без подключения к сети вы ничего не увидите, кроме уведомления об отсутствии соединения с Интернет.
Можно загрузить разметку странички, подгрузить первоначальные вопросы, закинуть их в какое-нибудь клиентское хранилище, после подгрузить в этот кеш остальные 1.5 мб вопросов.
Нужно, чтобы приложение изначально обращалось за данными к хранилищу, только после фейла к удаленному серверу.

ps. если сервер возвращает не сжатые данные, то лучше сжатие включить.
pps. стили и скрипты лучше вынести в отдельные файлы, браузеры их кешировать умеют + страничка приложения станет легче.

ссылку в студию

Да, но сейчас я могу загрузить страницу с включенным интернетом, когда все прогрузится уйти в подвал, где нет жизни, и прекрасно заполнять сию анкету без инета))
Спустя 2 часа мучений, когда все заполнено, я выползаю из подвала и нажимаю кнопку Отправить. Такая система сейчас работает.

Вот я и не знаю, как это сделать в рамках моего ПО(( По умолчанию загружается сразу все.

Вот пример ссылки (немножко подчистила):
http://www.maronline.ru/marina_test/...ame& visit=15
Пожалуйста, сильно не ругайте за кривизну, времени было катастрофически мало((

Может нужно выложить папку, которую генерит программа?
Прикладываю на всякий случай.

Ок, вынесу, спасибо. Сейчас в head остался не сжатый код, не обращайте внимания, я его пока слишком часто правлю, чтобы каждый раз сжимать.

Лиса моментом грузит и отрисовывает, а вот на базе хрома - Опера ковыряет и что плохо долго отрисовывает, Хром вообще загрузил, а на экране пусто.

Зачем такой простой по дизайну страницы подгружаемые шрифты, query UI и т.п.?

Зачем каждый вариант ответа на вопрос записывается в отдельную таблицу?

Вообще - непонятно чем объяснимая вложенность таблиц. Вот всего один вопрос (более чем наполовину сокращенный, целиком сюда не влез)

<div class="question" id="INFOx2">
    <table class="outer_table" cellspacing="0" cellpadding="3" border="0" width="100%">
        <tbody>
            <tr>
                <td align="left">
                    <div class="nQues">
                        Вопрос №1 (на странице)</div>
                    <div class="header1">
                        Специальность врача (выбрать из списка ниже)</div>
                </td>
            </tr>
            <tr>
                <td align="left">
                    <div class="question_body">
                        <table class="inner_table" cellspacing="0" cellpadding="0" border="0">
                            <tbody>
                                <tr>
                                    <td align="left">
                                        <table cellspacing="0" cellpadding="2" border="0">
                                            <tbody>
                                                <tr>
                                                    <td valign="top" align="left">
                                                        <table cellpadding="0" cellspacing="0" border="0">
                                                            <tbody>
                                                                <tr>
                                                                    <td align="right" valign="top">
                                                                        <input type="radio" name="INFOx2" value="1" id="INFOx2_1" onclick="SSI_ClearRadioOtherText_INFOx2(1);">
                                                                    </td>
                                                                    <td valign="middle" align="left" style="padding-left: 5px;">
                                                                        <div class="options">
                                                                            <label for="INFOx2_1">
                                                                                <font color="navy">Кардиолог амбулаторный</font>
                                                                            </label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td valign="top" align="left">
                                                        <table cellpadding="0" cellspacing="0" border="0">
                                                            <tbody>
                                                                <tr>
                                                                    <td align="right" valign="top">
                                                                        <input type="radio" name="INFOx2" value="2" id="INFOx2_2" onclick="SSI_ClearRadioOtherText_INFOx2(2);">
                                                                    </td>
                                                                    <td valign="middle" align="left" style="padding-left: 5px;">
                                                                        <div class="options">
                                                                            <label for="INFOx2_2">
                                                                                <font color="navy">Терапевт высокопотенциальный амбулаторный</font>
                                                                            </label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td valign="top" align="left">
                                                        <table cellpadding="0" cellspacing="0" border="0">
                                                            <tbody>
                                                                <tr>
                                                                    <td align="right" valign="top">
                                                                        <input type="radio" name="INFOx2" value="3" id="INFOx2_3" onclick="SSI_ClearRadioOtherText_INFOx2(3);">
                                                                    </td>
                                                                    <td valign="middle" align="left" style="padding-left: 5px;">
                                                                        <div class="options">
                                                                            <label for="INFOx2_3">
                                                                                <font color="navy">ВОП высокопотенциальный амбулаторный</font>
                                                                            </label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td valign="top" align="left">
                                                        <table cellpadding="0" cellspacing="0" border="0">
                                                            <tbody>
                                                                <tr>
                                                                    <td align="right" valign="top">
                                                                        <input type="radio" name="INFOx2" value="4" id="INFOx2_4" onclick="SSI_ClearRadioOtherText_INFOx2(4);">
                                                                    </td>
                                                                    <td valign="middle" align="left" style="padding-left: 5px;">
                                                                        <div class="options">
                                                                            <label for="INFOx2_4">
                                                                                <font color="navy">Терапевт непрофилированный амбулаторный</font>
                                                                            </label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

И в каждом инпуте прописан онклик
(Хром у меня вполне загрузил - но не очень быстро)

У меня тоже, но кроме серости на экране ничего нет, хотя весь DOM на месте.

Напишите, пожалуйста, Вы на компе проверяли или на телефоне/планшете?
стиль по умолчанию, так исторически сложилось)).
А query UI - будет менюшка в виде всплывающего окна, делаю через dialog().

Можно все это удалить, но как я писала в 1-м сообщении, на загрузке это почти не сказалось. Проверила сейчас, в хроме на стили и jqury-ui ушло 12ms.

Так программа по умолчанию делает, я не могу это изменить. :(

Странно, ошибок нет в консоли?
Сейчас уберу серость (она в стилях).

Убрала, ссылки на query UI тоже удалила.

И это тоже не мое)):no:
Программа довольно старая, видимо на тот момент так придумалось.

На настольном, это единственный компьютер, который можно назвать "для работы", других не имею и надеюсь не потребуется. :)

То есть паримся с проблемой, а сделать легкий (у вас даже более чем легкий) css для стилей это страницы нельзя?

В помойку, для этого хватит и одного JQ c небольшим добавлением строк кода.

У вас лишнего "мусора" для такой простой таблицы хоть отбавляй. Почему Хром не рисует загруженное я не знаю, просто серый фон вашего стиля и все, главное что скроллинг есть при этом, уже приятно. :)

laimas,
на компе у меня тоже все летает, но вот на телефоне - беда. Я знаю, что заполнять будут точно с планшетов, а там тоже все висит.

ок

тоже ок

ничего не могу с этим сделать((

попробуйте обновить страницу, должно исправиться.

Ребята,
большое спасибо за потраченное время к моему вопросу!
Думается мне, придется смириться с тем, что есть.

В следующем году будет похожий проект, у меня есть целый год, чтобы придумать что-то более адекватное без использования стороннего ПО (заодно знания по серверной части подтяну:D ). Видимо, с этой программой каши не сваришь.

То есть я на столько туп, что не знаю о F5? :D Ничего не исправится, у меня единственное предположение, что отрисовкой, ну или прилагает на вашей странице к этому процессу "свою руку" JS, так как Хромом я не пользуюсь и он только для отладки, и JS для страниц в нем я подключаю по мере, изначально же он для всех отключен. Ваша страница не входит в число "разрешено для ...". Другого объяснения нет, и если так, то зачем.

Я бы не сказал так ;)

помимо громоздкого html еще и скрипты максимально растянуты
вот пример есть длинная длинная функция, вот ee кусок

function SSI_subVerify(){
			if(SSI_CustomJScriptShell_main()== false){ return false;}
			else if(SSI_RadCheck(document.mainform["INFOx2"], "INFOx2", "", 1, true)== false){ return false;}
			else if(SSI_NumCheck(document.mainform["INFOx2N"], "INFOx2N", "", 2, true, 1, 10, false)== false){ return false;}
			else if(SSI_RadCheck(document.mainform["INFOx3"], "INFOx3", "", 3, true)== false){ return false;}
			else if(SSI_RadCheck(document.mainform["INFOx5"], "INFOx5", "", 4, true)== false){ return false;}
			.........
		}

компактней в цикл или так.

var SSI_subVerify = [
SSI_CustomJScriptShell_main(),
SSI_RadCheck(document.mainform["INFOx2"], "INFOx2", "", 1, true),
SSI_NumCheck(document.mainform["INFOx2N"], "INFOx2N", "", 2, true, 1, 10, false),
SSI_RadCheck(document.mainform["INFOx3"], "INFOx3", "", 3, true),
SSI_RadCheck(document.mainform["INFOx5"], "INFOx5", "", 4, true),
...........
].every(function(el){
	return el;
});

если глубже копнуть можно еще компактней я уверен.

в общем весь нижний скрипт такой. вот например

strMessage = strMessage.replace(/\[%ERRFIELD\(\)%\]/ig, intQNum);
strMessage = strMessage.replace(/\[%ERRQNAME\(\)%\]/ig, strName);
strMessage = strMessage.replace(/\[%ERRTEXT\(\)%\]/ig, strErrTxt);
strMessage = strMessage.replace(/\[%ERRMIN\(\)%\]/ig, intMin);
strMessage = strMessage.replace(/\[%ERRMAX\(\)%\]/ig, intMax);

Ни в коем случае!!:stop:
Я подумала, что может стили у Вас не обновились, и добавила строчку в код, вот и попросила обновить.

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

Manyasha,
делить на части и использовать service worker для погрузки зависимых частей и работе в офлайне, но если вам обычные правки на сервере недоступны, то наверное такое тоже не получится.

j0hnik,
спасибо, почитаю!

Но мне кажется