Подробная инструкция по установке любого скрипта на любой хостинг. Как установить скрипт на страницу конструктора Это самый быстрый способ загружать скрипты, так? Так
- Перевод
- Tutorial
Буквально несколько часов назад на HTML5 Rocks появилась замечательная статья о текущем положении дел, касающихся загрузки скриптов на странице. Представляю вашему вниманию ее перевод. Поправки можете присылать в личные сообщения.
Введение В этой статье я хочу научить вас как загружать в браузер JavaScript и выполнять его.Нет, подождите, вернитесь! Я знаю, что это звучит заурядно и просто, но помните, что это происходит в браузере, где теоретически простое превращается в набор причуд, определенных наследственностью. Знание этих причуд поможет вам выбрать самый быстрый, наименее разрушительный способ загрузки скриптов. Если вы спешите, то можете перейти сразу к краткому справочнику в конце статьи.
Для затравки, вот как спецификация определяет различные способы загрузки и выполнения скриптов:
Как и все спецификации WHATWG, на первый взгляд данная спецификация выглядит как последствия кассетной бомбы на фабрике Scrabble. Но, прочитав ее на 5 раз и вытерев кровь из своих глаз, начинаешь находить ее довольно интересной:
Мое первое подключение скриптаАх, блаженная простота. В данном случае браузер скачает оба скрипта параллельно и выполнит их как можно скорее, сохраняя заданный порядок. «2.js» не будет выполняться пока не выполнится «1.js» (или не сможет этого сделать), «1.js» не выполнится пока не выполнится предыдущий скрипт или стиль, и т.д. и т.п.
К сожалению, браузеры блокируют дальнейшую отрисовку страницы, пока это все происходит. Еще со времен «первого века веба» это обусловлено DOM API, который позволяет строкам добавляться к содержимому, которое пережовывает парсер, например с помощью document.write . Более современные браузеры продолжат сканировать и парсить документ в фоновом режиме и загружать нужный сторонний контент (js, картинки, css и т.д.), но отрисовка по-прежнему будет блокирована.
Вот почему гуру и специалисты производительности советуют размещать элементы script в конце документа, потому что это блокирует меньше всего контента. К сожалению, это означает, что ваш скрипт не будет увиден браузером до того времени, как будет скачен весь HTML, а также уже запущена загрузка CSS, картинок и iframe-ов. Современные браузеры достаточно умны, чтобы отдавать приоритет JavaScript над визуальной частью, но мы можем сделать лучше.
Спасибо, IE! (нет, я это без сарказма)В Microsoft обнаружили эти проблемы с производительностью и ввели «defer» в Internet Explorer 4. В основном, оно говорит следующее: «Я обещаю ничего не вставлять в парсер, используя штуки, наподобие document.write . Если я нарушу это обещание, вы можете меня наказать любым приемлемым вам способом». Этот атрибут был введен в HTML4 и он также появился в других браузерах.
В примере выше, браузер параллельно скачает оба скрипта и выполнит их прямо перед тем, как вызовется DOMContentLoaded , порядок сохранится.
Как и кассетная бомба на фабрике овец, «defer» стал мохнатым беспорядком. Помимо «src» и «defer», а также тегов скрипт и динамически загружаемых скриптов, у нас есть 6 паттернов добавления скрипта. Естественно, что браузеры не договорились о порядке, в котором они должны выполняться. Mozilla замечательно описала эту проблему еще в 2009.
WHATWG сделали это поведение явным, объявив, что «defer» не будет иметь никакого эффекта на скрипты, которые были добавлены динамически или не имеют «src». В противном случае, скрипты с «defer» должны запускаться в заданном порядке после того, как документ был распарсен.
Спасибо, IE! (ну ладно, теперь с сарказмом) Одно дали - другое отобрали. К сожалению, есть неприятный баг в IE4-9, который может спровоцировать выполнение скриптов в неверном порядке . Вот что происходит:1.js
console.log("1");
document.getElementsByTagName("p").innerHTML = "Changing some content";
console.log("2");
2.js
console.log("3");
Допустим, что на странице есть параграф, ожидаемый порядок логов - , но в IE9 и ниже результат будет . Некоторые операции DOM вынуждают IE приостановить выполнение текущего скрипта и перед продолжением начать выполнение других скриптов в очереди.
Тем не менее, даже в реализациях без бага, таких как IE10 и других браузерах, выполнение скрипта будет отложено до момента, когда весь документ будет загружен и распарсен. Это удобно, если вы в любом случае ждете DOMContentLoaded , но если вы хотите получить реальный прирост производительности, то вскоре вы начнете использовать listeners и bootstrapping…
HTML5 спешит на помощьHTML5 дал нам новый атрибут «async», который предполагает, что вы также не используете document.write, но при этом не ожидает окончания парсинга документа. Браузер параллельно скачает оба скрипта и выполнит их как можно скорее.
К сожалению, так как они постараются выполниться максимально скоро, «2.js» может выполниться раньше «1.js». Это отлично, если они не зависят друг от друга. Например, если «1.js» - это отслеживающий скрипт, не имеющий ничего общего с «2.js». Но если «1.js» - это CDN-копия jQuery, от которой зависит «2.js», то ваша страница будет устлана ошибками, как после кассетной бомбы в… я не знаю… здесь я ничего не придумал.
Я знаю, нам нужна JavaScript-библиотека! В Святом Граале содержится набор скриптов, загружающихся сразу, без блокирования отрисовки страницы и выполняющихся максимально скоро, в том порядке, в котором мы их добавили. К сожалению, HTML ненавидит вас и не позволит вам этого сделать.Проблема была решена с помощью JavaScript на разный манер. Некоторые способы требовали от вас вносить изменения в JavaScript, оборачивать всё в callback, который библиотека вызовет в правильном порядке (например, RequireJS). Другие использовали XHR для параллельной загрузки, а затем eval() в нужном порядке, который не работает для скриптов на другом домене, если там нет заголовка CORS и поддержки его в браузере. Некоторые использовали даже супер-магические хаки, как это было сделано в последнем LabJS.
Хаки всяческим образом обманывали браузер, чтобы тот загружал ресурс, вызывая при этом событие по окончанию загрузки, но не начинал его выполнение. В LabJS скрипт сначала добавлялся с некорректным mime-типом, например. Как только все скрипты были загружены, они добавлялись снова, но уже с корректным mime-типом, в надежде на то, что браузер возьмет их прямо из кэша и сразу выполнит в нужном порядке. Данный способ надеялся на удобное, но непредсказуемое поведение, и сломался, когда HTML5 объявил, что браузеры не должны поддерживать скрипты с непонятным типом.
Оба этих приема имеют проблемы с производительностью сами по себе, вам нужно дожидаться момента, когда JavaScript-код библиотеки загрузится и распарсится прежде чем начнут загружаться скрипты, загрузкой которых библиотека управляет. Кроме того, как мы собираемся загружать загрузчик скриптов? Как мы собираемся загружать скрипт, который говорит загрузчику скриптов что загружать? Кто охраняет Хранителей? Почему я голый? Это всё сложные вопросы.
DOM спешит на помощь! На самом деле, ответ находится в спецификации HTML5, хоть он и скрыт в низу раздела о загрузке скриптов.The async IDL attribute controls whether the element will execute asynchronously or not. If the element"s "force-async" flag is set, then, on getting, the async IDL attribute must return true, and on setting, the "force-async" flag must first be unset…
Давайте переведем это на "земной язык":
[ "//other-domain.com/1.js", "2.js" ].forEach(function(src) { var script = document.createElement("script"); script.src = src; document.head.appendChild(script); });
Скрипты, которые созданы и добавлены динамически, асинхронные по-умолчанию , они не блокируют отрисовку и выполняются сразу после загрузки, что означает, что они могут появиться в неверном порядке. Однако мы можем явно пометить их неасинхронными:
[ "//other-domain.com/1.js", "2.js" ].forEach(function(src) { var script = document.createElement("script"); script.src = src; script.async = false; document.head.appendChild(script); });
Это даст нашим скриптам сочетание с поведением, которое не может быть достигнуто чистым HTML. Явно заданные неасинхронными, скрипты добавляются в очередь на выполнение, такую же, как они попадали в нашем первом примере на чистом HTML. Однако, создаваемые динамически, они будут выполняться вне парсинга документа, что не будет блокировать отрисовку, пока они будут загружаться (не путайте неасинхронную загрузку скрипта с синхронным XHR, что никогда не является хорошей вещью).
Скрипт выше должен быть встроен в head страниц, начиная очередь загрузок как можно раньше, без нарушения постепенной отрисовки, и начиная выполнять как можно раньше, в заданном вами порядке. "2.js" может свободно загружаться до "1.js", но он не будет выполнен до тех пор, пока "1.js" успешно не скачается и выполнится или не сможет сделать что-либо из этого. Ура! Асинхронная загрузка, но выполнение по порядку!
Загрузка скриптов этим методом поддерживается везде, где поддерживается атрибут async , за исключением Safari 5.0 (на 5.1 все хорошо). Кроме того все версии Firefox и Opera, которые не поддерживают атрибут async, все равно выполняют динамически-добавленные скрипты в правильном порядке.
Это самый быстрый способ загружать скрипты, так? Так? Ну если вы динамически решаете какие скрипты загружать - да, иначе - возможно, что нет. В примере выше браузер должен распарсить и загрузить скрипт, чтобы определить какие скрипты загружать. Это скрывает ваши скрипты от сканеров предзагрузки. Браузеры используют эти сканеры для обнаружения ресурсов, которые вы скорее всего посетите следующими и для обнаружения ресурсов страницы пока парсер заблокирован другим ресурсом.Мы можем добавить обнаружаемость обратно, поместив это в head документа:
Это сообщает браузеру о том, что страница требует 1.js и 2.js и видима для предзагрузчиков. link похож на link , но с . К сожалению, это поддерживается только в Chrome, и вам нужно объявлять скрипты для загрузки дважды: первый - в элементах link, второй - в вашем скрипте.
С появлением HTTP2/SPDY вы сможете уменьшить накладные ресурсы до точки, где доставка скриптов в маленьких самостоятельно-кэшированных файлах будет самым быстрым способом. Только представьте:
…
Каждый enhancement-скрипт имеет дело с конкретным компонентом страницы, но требует вспомогательные функции в dependencies.js. В идеале, мы хотим загрузить все асинхронно, затем выполнить enhancement-скрипт как можно раньше, в любом порядке, но после dependencies.js. Это прогрессивное прогрессивное улучшение!
К сожалению, нет декларативного способа для того, чтобы достичь этого, только если модифицировать сами скрипты для отслеживания состояния загрузки dependencies.js. Даже async=false не решит эту проблему, потому что выполнение enhancement-10.js будет заблокировано на 1-9. По факту, есть только один браузер, в котором можно достичь этого без хаков…
У IE есть идея! IE грузит скрипты не так, как другие браузеры.var script = document.createElement("script"); script.src = "whatever.js";
IE начинает закачивать "whatever.js" сейчас, другие же браузеры не начнут загрузку до того момента, пока скрипт не будет добавлен к документу. У IE также есть событие "readystatechange" и свойство "readystate", которые сообщают о процессе загрузки. Это на самом деле очень полезно, потому что позволяет нам управлять загрузкой и выполнением скриптов независимо друг от друга.
var script = document.createElement("script"); script.onreadystatechange = function() { if (script.readyState == "loaded") { // Our script has download, but hasn"t executed. // It won"t execute until we do: document.body.appendChild(script); } }; script.src = "whatever.js";
Мы можем строить сложные модели зависимости, выбирая когда добавлять скрипты в документ. IE поддерживает такую модель, начиная с 6-ой версии. Довольно интересно, но у этого есть такой же недостаток с обнаруживаемостью браузером, как и у async=false .Хватит! Как я должен загружать скрипты? Ладно, ладно. Если вы хотите загружать скрипты способом, который не блокирует отрисовку, не требует дублирования и имеет прекрасную поддержку браузеров, то я советую вот этот:
Именно этот. В конце элемента body. Да, быть веб-разработчиком - это как быть царем Сизифом (бум! 100 хипстерских очков за упоминание греческой мифологии!). Ограничения HTML и браузеров не позволяют нам сделать сильно лучше.
Я надеюсь, что модули JavaScript нас спасут, предоставив декларативный неблокирующий способ загружать скрипты и иметь контроль над порядком их запуска, даже если это потребует написание скриптов в виде модулей.
Иуу, должно быть что-то получше, что мы можем использовать сейчас? Ладно, ради бонусных очков, если вы всерьез думаете о производительности и не боитесь сложности и дублирования, то можете объединить несколько рассмотренных трюков.Во-первых, мы добавим объявление subresource для предзагрузчиков:
Затем прямо в head документа мы загружаем наши скрипты с помощью JavaScript, используя async=false , уступая место скрипту для IE на основе readystate, который, в свою очередь, уступает место defer.
var scripts = [
"1.js",
"2.js"
];
var src;
var script;
var pendingScripts = ;
var firstScript = document.scripts;
// Watch scripts load in IE
function stateChange() {
// Execute as many scripts in order as we can
var pendingScript;
while (pendingScripts && pendingScripts.readyState == "loaded") {
pendingScript = pendingScripts.shift();
// avoid future loading events from this script (eg, if src changes)
pendingScript.onreadystatechange = null;
// can"t just appendChild, old IE bug if element isn"t closed
firstScript.parentNode.insertBefore(pendingScript, firstScript);
}
}
// loop through our script urls
while (src = scripts.shift()) {
if ("async" in firstScript) { // modern browsers
script = document.createElement("script");
script.async = false;
script.src = src;
document.head.appendChild(script);
}
else if (firstScript.readyState) { // IE
Запускаем файл example2.html. Убеждаемся, что пример работает.
Скачать исходные файлы примера (32,1 кб):
Важно!
Для того, чтобы примеры работали корректно, необходимо:
1. Все файлы должны быть записаны в кодировке UTF-8.
2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файлы.
3. Если вы формируете JavaScript-файл из PHP-скрипта, следует в начале PHP-файла обязательно добавить вызов функции header(), как это сделано в примере №2.
Хотите почувствовать себя в роли администратора? НО! Как установить скрипт (хайпа, букса или другого)? В этой статье вы найдёте все ответы.
Здравствуйте, дорогие читатели блога сайт.
Хотите иметь свою инвестиционную игру? Хотите почувствовать себя в роли администратора проекта? А не знаете, как правильно установить скрипт? Не переживайте… В этой статье я всё подробно об этом расскажу.
Итак, поехали…
Первым делом, хочется сказать, откуда можно скачать такие скрипты. Я, выделил для себя три проекта, которые, на мой взгляд, самые лучшие и без вирусов. Узнать о них вы можете в другой моей статье. Ссылка .
Мы скачали готовый скрипт, который находится в архиве. Открываем его и копируем все файлы в отдельную папку. Далее, нам нужно купить себе хостинг и домен. Я пользуюсь Hostia. Качественный, надёжный и что главное, очень дешёвый. Одним словом «Рекомендую».
Я не буду на этом останавливаться, потому что не каждый хостинг имеет одинаковую панель управления.
Мой хостинг поддерживает Direct Admin, но знайте, что у вас может быть совсем другая система управления (например: ISPManager, ZPanel, WHM/CPanel). Если у вас одна с них, то в этом нет ничего страшного. Весь процесс установки скрипта ничем не отличается.
Инструкция установки скрипта (инвестиционной игры, хайпа, букса) Шаг 1. Заливаем сам скрипт на хостингДля этого нам понадобится одна с программ: FileZilla (рекомендую), Total Commander или Notepad++ . Скачиваем любую себе на компьютер, запускаем и создаем подключение по FTP. Забыл сказать, что панели управления хостингом также имеют «встроенный» загрузчик файлов. Можете воспользоваться им. Я, выбрал для себя FileZilla. Программа стабильна в работе и полностью бесплатна.
Что касается FTP, то здесь нам понадобятся некие данные, которые без проблем, можно узнать у своего хостера:
Если будут проблемы с входом в админку, напишите в комментарии. Помогу!
Ждём завершение загрузки…
Шаг 2. Создаем базу данныхПереходим в раздел «Базы данных (MySQL)» и нажимаем «Создать новую» или «Создать базу данных». Прописываем имя и пароль. Поля: Имя Базы Данных и Имя Пользователя БД можно заполнить одинаково. Внимание! Логин и пароль запомните или где-нибудь запишите. Они нам понадобятся, когда будем изменять файл config. На примере покажу, как это выглядит в Direct Admin. Смотрите:
Сейчас нам нужно найти в своем личном кабинете «PhpMyAdmin ». Утилита служит для импорта или редактирования баз СУБД MySQL. Заходим в неё, подключаемся (если нет аккаунта, то обязательно проходим несложную регистрацию).
Заходим, и слева видим список созданных нами баз данных. Выбираем ту, которую создали во втором шагу. А дальше все делаем по скриншотам:
В папках скрипта ищем файл с названием config. В хайпах ищите файл в папке «classes». Нашли? Отлично! Открываем его. Видим:
public $HostDB = «localhost»;
public $UserDB = «Имя Пользователя БД»
;
public $PassDB = «пароль»
;
public $BaseDB = «Имя Базы Данных»
;
Заменяем свои данные и сохраняем. Этим самым, мы подключили скрипт к нашей базе данных.
Всё друзья! Я вас поздравляю! Скрипт полностью установлен!
А сейчас небольшое дополнение…
Бесплатные скрипты с интернета зачастую бывают с дырами. Будьте осторожны! Проверяйте файлы на вирусы. Также удалите все дополнительные ссылки в файлах скрипта. Зачастую они выглядят так:
Но все же, если у вас не получается установить скрипт, мы можем сделать за вас всю работу. Например, установить скрипт любой сложности, подключить дополнительные платежные системы, сделать скрипт уникальным и т. д.
Большое спасибо, что дочитали статью до конца. . Впереди будет еще очень много разных вкусняшек!
Первоначальные действия по установке практически любого скрипта на любой нормальный хостинг одинаковы: нужно создать базу данных, залить файлы скрипта на сервер, прилинковать домен. В этом посте будет приведена подробная инструкция по установке скрипта интернет магазина (или любой другой CMS) на хостинг BeGet . Этот хостинг подойдет как нельзя кстати: 30 дней бесплатного тестового доступа позволят вам вдоволь потренироваться.
Эта инструкция подойдет практическидля любого хостинга. Так как панели управления всех хостингов схожи. Возможны различия в названиях пунктов меню и в диалогах. Но я думаю вы разберётесь: все хостинги выполняют одну функцию и смена названий не меняет общий смысл.
Итак, вы зарегистрировались на хостинге, вы скачали дистрибутив со скриптом. Давайте осмыслим что мы будем делать дальше. Скрипт это набор папок и файлов. В этих файлах содержится инструкции по управлению сайтом. А что же есть сайт — это набор данных: текста, картинок, товаров, производителей. Для хранения этих данных скрипт будет использовать базу данных. Чаще всего MySQL. Значит перед тем как установить скрипт нам нужно на хостинге создать базу данных, а скрипту сообщить параметры доступа к этой базе. Это делается один раз при установке. Сайт также должен иметь уникальное имя: доменное имя. Это имя привязывается к папке со скриптом.
Получается, что сайт физически это папка со скриптом, который имеет доступ к базе данных, для хранения всей информации. К этой папке можно прилинковать любое доменное имя. Отсюда хронология наших действий будет такая:
- зарегистрироваться на хостинге , выбрав любой тариф (во время тестового периода тариф не важен, а потом можно сменить)
- скачать скрипт с официального сайта или с нашего.
- создать на хостинге базу данных
- создать сайт (директорию для скрипта) и прилинковать доменное имя
- закачать файлы скрипта на хостинг
- начать установку
Зарегистрироваться на хостинге я думаю не составит труда: выбираем тариф Старт (впринципе не важно какой, если станет тесно — в любой момент можно сменить тариф), вводим в форме своё имя и E-mail и ждём письма, в котором будут указаны пароли для доступа на хостинг. После регистрации у вас есть 30 дней на попробовать, если не захотите пользоваться хостингом, то через 30 дней ваш аккаунт и сайты просто будут удалены.
После регистрации и входа на хостинг видим Панель управления (ПУ) хостингом:
Для того что бы создать базу данных на хостинге нужно в ПУ кликнуть на пиктограмме MySQL. В результате откроется панель управления базами данных:
Сдесь мы указываем имя базы данны и пароль. Жмём кнопку Создать. База данных создана. Нам остаётся только запомнить введённые данные. Мы их и будем передавать скрипту при установке. Замечаем что перед именем базы данных есть префикс и именем базы будет считаться то имя которое получается в результате склейки этого префикса и того имени которое вы ввели. В дальнейшем при установке скрипта нужно будет ввести: имя базы данных, имя пользователя, пароль. Имя пользователя на этом хостинге не вводится — оно совпадает с именем базы данных.
Создаём сайт (директорию для сайта) и прилинковываем доменное имяДля того что бы закачать файлы скрипта на хостинг нам нужно создать под сайт отдельную папку: ведь на хостинге может быть расположено несколько сайтов — файлы каждого должены располагаться в отдельной директории. При создании аккаунта на хостинге автоматически создаётся одна папка: public_html. В неё и будем заливать скрипт. Если в дальнейшем понадобится создать второй сайт то используем пункт Сайты в ПУ:
Для того что бы создать сайт (директорию) указываем имя и жмём кнопку создать.
Ничего сложного. В дальнейшем созданную директорию увидим в файловом менеджере при загрузке файлов скрипта на хостинг. Так же в этом пункте панели управления можно прилинковать (прикрепить) одно из имеющихся доменных имен к директории сайта. В нашем случае к директории public_html должно быть прилинковано бесплатное доменное имя третьего уровня вида НазваниеАккаунта.bget.ru. Его мы плучаем при создании аккаунта. В дальнейшем к уже созданному сайту можно прилинковать нормальное доменное имя второго уровня.
Существует два способа закачки скрипта на хостинг: через файловый менеджер панели управления хостингом или через FTP.
Как установить скрипт?
Даже небольшой пользовательский опыт взаимодействия с системой uCoz при наличии понимания основ HTML и CSS позволит вам лично установить скрипт, приобретенный на нашем сайте. В том случае, если вам не удаётся установить скрипт, вы можете заказать услугу по установке скрипта нашими специалистами.
В архиве к каждому скрипту вы сможете найти файл с инструкцией. Это может быть текстовой файл в формате txt , либо страничка формата html . Они дадут вам общую информацию по установке скрипта на сайт в системе uCoz.
Каждый скрипт имеет собственный zip или rar архив, который вам необходимо скачать. Ссылка для скачивания придет на ваш e-mail только после того, как вы произведете оплату заказа.
ПОДРОБНЫЙ АЛГОРИТМ ДЕЙСТВИЙ ПРИ УСТАНОВКЕ:
Внимание: все файлы (например, которые имеют расширение txt , js , php или css ), можно открыть в любом текстовом редакторе (например, "Блокнот"), однако для редактирования файлов в формате css , js или php мы рекомендуем скачать специальный редактор, предназначенный для использования файлов данного типа (например, Sublime Text 2 ).
В первом случае , чаще всего – это просто графические файлы картинок, шрифты и так далее, которые необходимо загружать в соответствующие папки img\images, fonts, js и прочие. Если файлов много, то удобней всего загружать посредством FTP-клиента.
Во втором – это файл скрипта. Проверьте в инструкции, не нужно ли как-либо изменить файл скрипта (формат.php) перед его загрузкой на сервер. После чего подключитесь к PHP-серверу посредством FTP и загрузите папку с файлами/файл скрипта в корневую директорию "scripts".
Все CSS-стили, как правило, необходимо размещать в шаблоне "Таблица стилей (CSS)" , например, в самом низу шаблона после всего кода, который присутствовал по умолчанию.
Отметим , что после покупки вам необходимо внимательно ознакомиться с установочным файлом, так как правила настройки и установки каждого скрипта индивидуальны.
У меня не получилось, что делать?
В случае, если ваши попытки установить скрипт оказались безуспешными или кажутся вам слишком утомительными, вы можете приобрести услугу установки скрипта отдельно . Опытные специалисты системы uCoz быстро и квалифицированно произведут установку на ваш сайт.
