Включение файла JavaScript в страницы HTML - что происходит внизу в браузере?
Вашей проблемой является родитель position:relative. Так как у Вас есть то расположение на элемент, внутреннее поле будет ВСЕГДА оставаться в переполнении (position:absolute, относительно ближайшего расположенного родителя).
Для предотвращения проблемы можно удалить "position:relative" из внешнего отделения и добавить отделение обертки с "position:relative";. необходимо будет тогда добавить "top:0"; объявление Вашему внутреннему отделению (у Вас должно всегда быть это, на самом деле).
конечным результатом является одно дополнительное отделение, и это похоже на это: (можно удалить стиль "z-index:-1", я просто добавил это, таким образом, Вы видите результат лучше)
<div style="position:relative;border:1px solid blue;">
<div style="height: 100px; width: 100px; background: red; overflow: auto;">
if there is some really long content here, it will cause overflow, but the green box will not
<div style="position:absolute; z-index:-1; left: 20px; top:0; height: 200px; width: 200px; background: green;">
</div>
</div>
</div>8 ответов
Любой скрипт, который вы загружаете на свою страницу, даже после загрузки и кеширования, все равно должен быть проанализирован, прежде чем остальная часть страницы сможет загрузиться. Так что в этом смысле есть штраф за память, и все еще есть вероятность того, что что-то в скрипте значительно задержит рендеринг.
Однако в случае тщательно разработанной библиотеки, такой как YUI, я бы ожидал, что время синтаксического анализа будет минимизировано .
Если вы можете загрузить все свои скрипты в конце страницы, это может значительно повысить производительность, так как вся страница может отображаться до того, как будет заблокирована выполнением javascript, и ваш сайт будет работать намного быстрее.
I предлагает изучить панель Firebug Net и расширение YSlow , чтобы получить конкретную статистику производительности вашего веб-сайта.
Внешние сценарии задерживают отображение следующего HTML до тех пор, пока они не загрузятся и не выполнятся. Воздействие намного меньше после загрузки первой страницы, поскольку они уже кэшированы, хотя браузеры время от времени проверяют наличие новых версий, что по-прежнему имеет задержку. Я стараюсь ограничивать количество скриптов и по возможности перемещать теги скриптов в нижнюю часть страницы. Пользователи не заметят задержки загрузки скрипта, если страница уже полностью отображена.
если данный сценарий ничего не делает, это не повлияет на производительность. Очевидно, что первая страница будет загружаться медленно, но остальным не нужно загружать все сценарии, потому что они будут кэшированы. Таким образом, следующие страницы будут загружаться быстрее
Советы:
1) Загрузите скрипт внизу страницы (непосредственно перед закрывающим тегом BODY).
2) Используйте неблокирующий способ загрузки скриптов . Это тот, который я использую.
<script type="text/javascript">
function AttachScript(src) {
var script = document.createElement("script");
script.type = "text/javascript";
document.getElementsByTagName("body")[0].appendChild(script);
script.src = src;
}
AttachScript("/js/jquery.min.js");
AttachScript("/js/ndr.js");
AttachScript("/js/shadowbox.js");
AttachScript("/js/libraries/sizzle/sizzle.js");
AttachScript("/js/languages/shadowbox-es.js");
AttachScript("/js/players/shadowbox-img.js");
AttachScript("/js/adapters/shadowbox-jquery.js");
Не могу найти исходную веб-страницу: - (
Используйте конфигуратор YUI, чтобы определить, какие файлы включают и порядок, а также как использовать Yahoo! Комбинированный сервис CDN для объединения всех файлов YUI в один тег сценария.
Потребление памяти:
Если сценарии хорошо написаны, то потребление памяти и проблемы с производительностью должны быть номинальными. Самая большая проблема с одновременным включением всех скриптов будет заключаться в задержке взаимодействия с пользователем в первый раз или в случае внесения изменений, потому что им придется загружать их все за один раз. Я считаю, что вам следует включать только те скрипты, которые вам нужны для каждой страницы, а не все скрипты сразу.
Вы можете оценить влияние самостоятельно, используя простые инструменты, такие как диспетчер задач / процессы в Windows для мониторинга использования памяти / процессора, или плагины, такие как Firebug для FireFox .
Вы также можете изучить то, что называется минификация , чтобы сделать ваши файлы сценариев как можно меньше.
Зависимости:
Порядок, в котором вы включаете сценарии, важен, так как некоторые сценарии могут зависеть от функциональности других сценариев. Поэтому, если код в одном сценарии пытается запустить, а для этого требуется код другого сценария, который не был загружен, он завершится ошибкой. Я бы посоветовал действительно понять эти зависимости в ваших файлах сценариев, а не просто загружать все сразу, потому что это кажется проще.
Scriptaculous реализует удобный способ обработки js-зависимостей. Думаю, вы могли бы проверить это и «заново реализовать». ; D
Что касается раздувания памяти и проблем с производительностью ... до тех пор, пока ваш JS не протекает много (YUI, вероятно, нет), память не будет большой проблемой, хотя и заставит ваши страницы загружаться медленнее, особенно если загружено в заголовок.
Внешние ресурсы HTML-страницы обычно кэшируются браузером. Внешние ресурсы - это все, что запрашивается из HTML, например изображения, CSS, JavaScript и все остальное. Таким образом, если вы загружаете все 10 файлов сценариев заранее, вы вызываете одноразовую массовую загрузку для своего пользователя. После этого единственного раза пользователю не нужно будет загружать сценарии снова, если только временная метка изменения файлов не изменится.
Ваша страница будет использовать только то, что ей нужно. Если конкретная страница запрашивает js4.js и js5.js, тогда все функции в этих файлах будут загружены в интерпретатор в том порядке, в котором они сначала запрашиваются из HTML, а затем - в порядке, в котором они указаны в каждом из эти файлы. Если есть какие-либо конфликты пространств имен, то побеждает то, что когда-либо загружалось в интерпретатор последним. Интерпретатор очистит функции, как только страница будет выгружена из браузера.
Для эффективности я бы предложил использовать процесс включения на стороне сервера для чтения каждого из файлов js и включения содержимого каждого файла в новый отдельный файл js. файл. Это уменьшит количество HTTP-запросов к серверу и сэкономит вашим пользователям огромное количество ресурсов полосы пропускания в отношении HTTP-заголовков и запросов GET. Кроме того, поместите запрос этого нового файла сценария непосредственно перед закрывающим тегом тела вашего HTML. Загрузка скриптов блокирует параллельные загрузки в IE, поэтому вы хотите загружать скрипты в самом нижнем месте страницы.
Для повышения эффективности я бы предложил использовать процесс включения на стороне сервера для чтения каждого из файлов js и включения содержимого каждого файла в новый отдельный файл js. Это уменьшит количество HTTP-запросов к серверу и сэкономит вашим пользователям огромное количество ресурсов полосы пропускания в отношении HTTP-заголовков и запросов GET. Кроме того, поместите запрос этого нового файла сценария непосредственно перед закрывающим тегом тела вашего HTML. Загрузка скриптов блокирует параллельные загрузки в IE, поэтому вы хотите загружать скрипты в самом нижнем месте страницы.
Для эффективности я бы предложил использовать процесс включения на стороне сервера для чтения каждого из файлов js и включения содержимого каждого файла в новый отдельный файл js. Это уменьшит количество HTTP-запросов к серверу и сэкономит вашим пользователям огромное количество ресурсов полосы пропускания в отношении HTTP-заголовков и запросов GET. Кроме того, поместите запрос этого нового файла сценария непосредственно перед закрывающим тегом тела вашего HTML. Загрузка скриптов блокирует параллельные загрузки в IE, поэтому вы хотите загружать скрипты в самом нижнем месте страницы.
Вы можете прочитать о методах кэширования с использованием PHP для передачи нескольких файлов javascript в виде одного большого файла JS, который включает все, что вам нужно. Для дополнительного повышения производительности вы можете заставить браузер кэшировать файл локально в дополнение к его отправке в сжатом виде (если браузер поддерживает кодировку с использованием чего-то вроде ob_start ("ob_gzhandler");). Используя кодировку gzip, вы можете значительно уменьшить размер отправляемого вами основного JS-файла, который включает весь ваш JS-код (поскольку простой текст сжимается так хорошо). Недавно мне пришлось сделать это на моем собственном веб-сайте, и это прекрасно сработало как для файлов JS, так и для файлов CSS.
http://www.ejeliot.com/blog/72
Обратите внимание, что следуя инструкциям по этому поводу учебник, ваш файл JS будет отправлен только один раз, а браузер на клиенте