Предварительно загружая внешние файлы (CSS, JavaScript) для других страниц
Так что, хотя все ответы здесь хорошие, я хотел немного больше контролировать результат. Например, я хотел бы предотвратить появление почти белых оттенков, при этом получая яркие яркие цвета, а не размытые оттенки.
function generateColor(ranges) {
if (!ranges) {
ranges = [
[150,256],
[0, 190],
[0, 30]
];
}
var g = function() {
//select random range and remove
var range = ranges.splice(Math.floor(Math.random()*ranges.length), 1)[0];
//pick a random number from within the range
return Math.floor(Math.random() * (range[1] - range[0])) + range[0];
}
return "rgb(" + g() + "," + g() + "," + g() +")";
};
Так что теперь я могу указать 3 произвольных диапазона для выбора значений RGB. Вы можете вызывать его без аргументов и получить мой набор по умолчанию, который обычно генерирует довольно яркий цвет с некогда очевидным доминирующим оттенком, или вы можете указать свой собственный диапазон диапазонов.
9 ответов
Это интересная идея, я не уверен, можно ли это сделать через Javascript (по крайней мере, часть CSS).
Вы можете разместить IFRAME на странице вместе с другими ресурсами вы хотите загрузить, но добавьте немного CSS, чтобы скрыть это ...
.preload {
position : absolute;
top : -9999px;
height : 1px;
width : 1px;
overflow : hidden;
}
Если вы поместите это в конец страницы, я думаю, что он загрузит после остальной части страницы. В противном случае вы можете использовать Javascript и setTimeout для фактического создания IFRAME после загрузки страницы.
Filament Group имеет хороший скрипт jQuery, который предварительно загружает изображения из файла CSS:
На самом деле, есть ряд других решений на основе jQuery, если вы используете Google "предварительная загрузка jquery".
Решение о пропускной способности принимайте вы.
Если вы предварительно загрузите все, вы получите лучший пользовательский опыт, но очень высокое потребление полосы пропускания , поскольку пользователь может даже никогда не использовать тот материал, который был загружен, что делает его очень неэффективным.
Если вы ничего не загружаете предварительно, полоса пропускания используется минимально, а пользователь загружает только ] то, что ему нужно.
Я согласен с Гаретом, я бы создал iframe динамически. Вы захотите поместить этот код в последнюю очередь на вашу целевую страницу.
Например:
....
<script type="text/javascript">
preloadContent();
</script>
</body>
</html>
Что касается кеширования, это действительно зависит от ваших настроек. Но ссылка на Yahoo! веб-сайт должен стать хорошим началом: http://developer.yahoo.com/performance/rules.html#expires Короче говоря, хороший метод - иметь ваши статические файлы (CSS, изображения, возможно, даже скрипты) со сроком годности 1 год. Таким образом, все, что было загружено вашим клиентом, будет храниться в кеше браузера, даже не проверяя наличие новых версий.
Если вы действительно должны изменить файл:
- Создайте другой файл (т.е. другой имя файла) для изображений
- CSS и скрипты могут быть добавлены в конце номера версии / даты.
Это гарантирует, что клиент никогда не будет использовать устаревшее содержимое.
Ура!
Если вы просто хотите загрузить их в кеш браузера, я полагаю, вы могли бы сделать это через документ в скрытом iframe.
Идея скрытого iFrame, которую пропагандируют люди, будет работать нормально.
Если время загрузки целевой страницы тоже является приоритетом, то нужно будет создать iFrame динамически в javascript после завершения загрузки страницы.
Я думаю, вам следует проанализировать, сколько времени требуется пользователю, чтобы перейти на другую страницу после перехода на вашу главную страницу.
Затем проверьте, по каким ссылкам на основных страницах переходят чаще всего, и на главной странице / событии OnLoad активируйте функцию таймера setTimeOut, которая выполнит вашу вспомогательную функцию с кодом предварительной загрузки для наиболее вероятных следующих ссылок.
Таким образом, вы можете предварительно выбрать произвольные файлы (CSS, изображения и т. Д.). Вопрос в том, делают ли небольшая отдача и добавленная стоимость полосы пропускания правильную оптимизацию, которую нужно проводить сейчас. Правила производительности Yahoo - отличная отправная точка. Если это ваша первая оптимизация производительности, то, скорее всего, вы начинаете не с того места. Это определенно оптимизация с серьезным компромиссом (увеличенная пропускная способность), тогда как другие оптимизации, такие как «Минимизация HTTP-запросов», имеют меньшие затраты и, вероятно, гораздо большую отдачу.
Чтобы сделать это кроссбраузерным способом, вы: Я в основном добавлю код к событию onload вашей страницы, который создает объект DOM, например, и устанавливает его src на URL-адрес, который вы хотите предварительно выбрать. Обратите внимание: поскольку значительная часть всех посетителей, вероятно, посещает только вашу главную страницу, они никогда бы не запросили файлы, которые вы предварительно загрузили. Я видел, как такая предварительная загрузка приводила к увеличению количества запросов и пропускной способности для предварительно загруженных файлов в несколько раз.
Загрузка всего в скрытый iframe - не единственный способ. Есть два фантастических поста Стояна Стефанова о предварительной загрузке/выборке JS и CSS файлов для оптимизации.
Вот ссылки:
http://www.phpied.com/the-art-and-craft-of-postload-preloads/
http://www.phpied.com/preload-cssjavascript-without-execution/
Мне лично тоже очень нравится подход AJAX. Он красивый и чистый и работает отлично, если только вы не хотите получить междоменные данные.
Его последняя техника во второй ссылке также выглядит очень перспективной (хотя я ее еще не пробовал)
.