[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Большой HTML файл
leo184
Всем привет, такая проблема: есть простой статичный сайт, там есть список городов, при нажатии на которые всплывает модальное окно с адресами и картой конкретного города. Проблема в том что получился слишком большой файл, модальные окна занимают почти 5000 строк, соответственно сайт тормозит (= Что можно предпринять в этом случае ? Как ускорить работу сайта ? Никогда с таким не сталкивался.

Буду благодарен за любую информацию.
walerus
leo184
Что мешает подключить JQuery ? и подгружать необходимые данные на текущий момент...
sergeiss
Цитата (leo184 @ 16.09.2017 - 00:10)
модальные окна занимают почти 5000 строк

Что означает сия фраза? Что там, полноценный код HTML, включающий в себя и данные, и тэги?

Во-первых, как уже было озвучено, что можно подгружать данные по мере необходимости. Но именно данные, а не полный HTML!
Во-вторых, сами списки (селекты и т.д.) формировать уже с помощью JavaScript. И тут есть несколько вариантов.
1. Грузить динамически, аяксом, все необходимые данные. Тебе же в данный момент времени вряд ли нужны все данные, а только их часть.
2. Но, вообще, зачем грузить постоянно аяксом,, если там ничего не меняется (скорее всего)? Можно все эти данные записать в файлы JavaScript и просто подключать их по мере необходимости. То есть тогда, когда они нужны, а не изначально. По сравнению с аяксом это даст то преимущество, что если файл был уже ранее загружен и не был изменен, то он будет взят из кэша браузера. То есть, сетевой трафик будет минимальный, поэтому практически не будет никакой задержки. Дополнительно управлять этим процессом можно с помощью кэширования из HTML5 (гугли на эту тему сам).

Если всё правильно настроить, то по 2-му варианту будет всё "летать мухой".

ПыСы. То, что я описал, имеет прямое отношение к MVC. То есть, к более четкому разделению собственно данных, их представления и функционала (обработки/преобразования данных). В твоем же случае, когда всё заложено в один файл HTML, такого разделения нет.
Также замечу, что тут всё делается на JavaScript, не нужно привлекать ПХП.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
leo184
Цитата (walerus @ 15.09.2017 - 21:24)
leo184
Что мешает подключить JQuery ? и подгружать необходимые данные на текущий момент...

Мешает то что, к сожалению, я не знаю JavaScript и Ajax ((( Может быть ткнете носом в статью или видео, которые помогут мне решить проблему ?)
FatCat
Цитата (leo184 @ 15.09.2017 - 23:10)
модальные окна занимают почти 5000 строк, соответственно сайт тормозит

Даже если строка по килобайту, это всего 5 мегабайт. На самом деле, я думаю, в десятки раз меньше.
Проблема не в трафике, а в том как браузер рендерит код. Особенно, если есть таблицы и формы - современные браузеры на этом затыкаются; 5000 строк таблицы будет знатно тормозить...

_____________
Бесплатному сыру в дырки не заглядывают...
walerus
leo184
Выложи куда нибудь свой "код", попробуем его оптимизировать на небольшом примере.
leo184
Цитата (walerus @ 16.09.2017 - 10:03)
leo184
Выложи куда нибудь свой "код", попробуем его оптимизировать на небольшом примере.

Вот такие модальные окна, их штук 150 наверно идут просто друг за другом


<div class="modal fade" id="yaroslavl" role="dialog">
<div
class="modal-dialog">
<div
class="modal-content sign-in-model">
<div
id="cont" class="contact">
<div
style="padding: 15px;" class="row text-center">
<div
class="col-sm-6">
<div
class="address">
<i
class="fa fa-map-marker" aria-hidden="true"></i>
<h4
class="mt20 mb20">Адрес в Ярославле</h4>
<p>
г. Ярославль, ул. Калинина д.11<br />
г Ярославль, ул Корабельная, д 1<br />
г. Ярославль Пр. Ленина 11/74</p>
</div>
</div>
<div
class="col-sm-6">
<div
class="address">
<i
class="fa fa-phone" aria-hidden="true"></i>
<h4
class="mt20 mb20">Номер телефона</h4>
<p>
+7 (495) 324 3434</p>
<p>
+7 (495) 324 3434</p>
</div>
</div>
</div>
<div
style="padding: 15px;" class="row text-center">
<div
class="col-sm-6">
<div
class="address address2">
<script
type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A6565043c0db51572f4ee87370689009302593d0395987dcdf690c2c459275003&width=100%25&height=235&lang=ru_RU&scroll=true"></script>
</div>
</div>
<div
class="col-sm-6">
<div
class="address address2 text-center">
<i
style="margin-top: 12px; background-color: #86c724;" class="fa fa-gift" aria-hidden="true"></i>
<h3>
Подключение <br /><span style="color: red;">2800 руб.</span><br />
от 5 подключений скидка</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>



Вызываются через обычные ссылки
<a data-toggle="modal" data-target="#yaroslavl" href="#">Ярославль</a>
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.