Отправляем данные из esp на веб-страницу с минимальными усилиями

Элементы управления ASP.NET AJAX

194

ASP.NET — Веб-сайты ASP.NET — Элементы управления ASP.NET AJAX

Функциональные возможности веб-служб ASP.NET AJAX предоставляют клиентскому коду ценный доступ к серверу. Однако они возлагают на плечи разработчика приложения большую часть трудной работы.

Ему приходится самостоятельно создавать соответствующие веб-методы, вызывать их в нужное время и соответствующим образом обновлять страницу, используя только JavaScript.

В сложном приложении это может оказаться довольно затруднительным.

Поэтому ASP.NET предлагает серверную модель более высокого уровня, предоставляющую элементы управления и компоненты, которые можно использовать внутри веб-формы.

С помощью этих ингредиентов всю работу можно проделать исключительно в серверном коде. Элементы управления ASP.NET AJAX будут генерировать требуемый им сценарий ASP.

NET AJAX, а “за кулисами” использовать библиотеки сценариев ASP.NET AJAX.

Потенциальный недостаток этого подхода – меньшая гибкость по сравнению с самостоятельным программированием JavaScript.

Хотя серверные элементы управления являются более производительными, чем JavaScript даже при поддержке клиентских библиотек ASP.NET AJAX, они ограничивают также диапазон возможных действий.

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

В последующих разделах будет показано, как применять три элемента управления ASP.NET AJAX, которые входят в состав ядра платформы ASP.NET.

К ним относятся чрезвычайно мощные элементы управления UpdatePanel, Timer и UpdateProgress. Все эти элементы управления поддерживают частичную визуализацию, являющуюся ключевой концепцией Ajax.

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

Все элементы управления ASP.NET AJAX нуждаются в ScriptManager. Если их разместить на странице, которая не содержит ScriptManager, работать они не будут и приведут к генерации исключения InvalidOperationException.

UpdatePanel

UpdatePanel – удобный элемент управления, который позволяет взять обычную страницу с серверной логикой и обеспечить ее обновление в лишенном мерцания стиле Ajax.

Основная идея состоит в том, что веб-страница делится на одну или более отдельных областей, каждая из которых помещается в невидимый элемент управления UpdatePanel.

Когда в Updatepanel происходит событие, которое обычно инициирует обратную отправку, элемент управления UpdatePanel перехватывает это событие и выполняет асинхронную обратную отправку.

Ниже описан пример того, как это происходит:

  1. Пользователь щелкает на кнопке внутри UpdatePanel.

  2. Определенный клиентский код JavaScript (который был сгенерирован ASP.NET AJAX) перехватывает клиентское событие щелчка и выполняет асинхронный обратный вызов к серверу.

  3. На сервере запускается нормальный жизненный цикл страницы, со всеми обычными событиями. И, наконец, страница визуализируется в виде HTML-кода и возвращается браузеру.

  4. Клиентский код JavaScript принимает полный HTML-код и обновляет каждый элемент управления UpdatePanel на странице, заменяя его текущий HTML-код новым содержимым. (Если изменение было внесено в содержимое, которое расположено вне элемента управления UpdatePanel, оно игнорируется.)

Элемент управления UpdatePanel в AJAX ASP.NET служит той же цели, что и специальный элемент управления DynamicPanel, который был разработан в статье «Использование Ajax с клиентскими обратными вызовами» с применением средства клиентского обратного вызова ASP.NET.

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

Однако созданный ранее элемент управления DynamicPanel более ограничен, поскольку он должен применяться совместно с DynamicPanelRefreshLink, чтобы инициировать асинхронное обновление.

Элемент управления UpdatePanel может перехватить обратную отправку, инициированную любым элементом управления, расположенным в панели. Кроме того, элементы управления UpdatePanel работают вместе – по умолчанию, каждый элемент UpdatePanel обновляется после каждой обратной отправки, хотя это поведение можно изменить.

Элемент управления UpdatePanel работает совместно с элементом управления ScriptManager. При использовании UpdatePanel следует убедиться, что свойство ScriptManager.EnablePartialRendering установлено в true (значение по умолчанию). Затем, вслед за ScriptManager, к странице можно добавить одни или более элементов управления UpdatePanel.

По мере перетаскивания элементов управления в UpdatePanel содержимое появляется в разделе . Вот пример элемента управления UpdatePanel, который содержит метку и кнопку:

UpdatePanel является элементом управления, основанным на шаблоне. При своей визуализации он копирует содержимое из своего шаблона ContentTemplate в страницу.

Это значит, что динамическое добавление элементов управления в UpdatePanel через коллекцию UpdatePanels.Controls невозможно. Однако элементы управления можно вставлять динамически, используя коллекцию UpdatePanels.

ContentTemplateContainer.Controls.

Класс UpdatePanel унаследован не от Panel, а непосредственно от Control. Причина в том, что UpdatePanel играет только одну роль – он служит контейнером для содержимого, которое требуется обновлять асинхронно. В отличие от стандартного элемента управления Panel из ASP.

NET, UpdatePanel не имеет никакого визуального представления и не поддерживает настройки стиля.

Если требуется отобразить границу вокруг элемента UpdatePanel или изменить цвет фона, в него придется поместить обычный элемент управления Panel (или хотя бы статический дескриптор ).

На странице элемент управления UpdatePanel визуализируется как дескриптор .

Тем не менее, изменив значение свойства RenderMode элемента управления UpdatePanel с Block на Inline, его можно сконфигурировать так, чтобы он визуализировался в виде встроенного элемента.

Например, этот шаг можно было бы предпринять, когда требуется создать UpdatePanel, который охватывает текст внутри абзаца или иной блочный элемент.

На рисунке ниже показан пример веб-страницы, состоящей из трех элементов управления UpdatePanel. Каждый элемент управления UpdatePanel имеет то же самое содержимое – элементы управления Label и Button. При каждой отправке страницы серверу событие Page.Load заполняет все три метки значением текущего времени:

protected void Page_Load(object sender, EventArgs e) { Label1.Text = Label2.Text = Label3.Text = DateTime.Now.ToLongTimeString(); }

Эта страница демонстрирует лишенное мерцания обновление с помощью асинхронного обратного вызова. Достаточно щелкнуть на любой кнопке, и все три метки тут же будут обновлены. Единственное исключение – ситуация, когда браузер клиента не поддерживает объект XMLHttpRequest. В этом случае UpdatePanel вернется к использованию полностраничных обратных отправок.

Обработка ошибок

Когда UpdatePanel действует как асинхронный обратный вызов, код веб-страницы выполняется точно так же, как если бы страница была отправлена обратно.

Единственное различие заключается в средствах коммуникации (страница использует асинхронный вызов XMLHttpRequest, чтобы получить новые данные) и способе обработки полученных данных (UpdatePanel обновляет свое внутреннее содержимое, но остальная часть страницы не изменяется).

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

Вместе с тем, проблемы могут возникать при выполнении асинхронной обратной отправки, точно так же, как при синхронной обратной отправке. Это поведение можно протестировать, добавив к обработчику серверного события Page.Load следующий код:

protected void Page_Load(object sender, EventArgs e) { Label1.Text = Label2.Text = Label3.Text = DateTime.Now.ToLongTimeString(); if (IsPostBack) throw new ApplicationException(“Какая-то ошибка”); }

Когда веб-страница генерирует необработанное исключение, ошибка перехватывается элементом управления ScriptManager и передается обратно клиенту. Затем клиентские библиотеки ASP.NET AJAX генерируют в странице ошибку JavaScript.

То, что происходит после этого, зависит от настроек браузера. Если отладка сценариев была включена, Visual Studio останавливается на строке, которая вызвала ошибку. Но поскольку эта ошибка преднамеренно вызывается инфраструктурой ASP.

NET AJAX, чтобы уведомить о серверной проблеме, это поведение помогает мало. Невозможно исправить проблему на сервере, изменяя клиентский код, который генерирует ошибку.

Вместо этого придется просто либо остановить приложение, либо продолжить его выполнение, проигнорировав проблему.

Источник: https://professorweb.ru/my/ASP_NET/sites/level5/5_9.php

Пример Веб-сервера на ESP32

“);              client.println(”

ESP32 – Web Server

“);              client.println(“

LED #1 ON OFF

“);              client.println(“

LED #2 ON OFF

“);              client.println(“”);              break;            }            if (c == '
') {              // начинаем новую строчку:              currentLineIsBlank = true;              if (strstr(linebuf,”GET /on1″) > 0){                Serial.println(“LED 1 ON”);                digitalWrite(led1, HIGH);              }              else if (strstr(linebuf,”GET /off1″) > 0){                Serial.println(“LED 1 OFF”);                digitalWrite(led1, LOW);              }              else if (strstr(linebuf,”GET /on2″) > 0){                Serial.println(“LED 2 ON”);                digitalWrite(led2, HIGH);              }              else if (strstr(linebuf,”GET /off2″) > 0){                Serial.println(“LED 2 OFF”);                digitalWrite(led2, LOW);              }              // начинаем новую строчку:              currentLineIsBlank = true;              memset(linebuf,0,sizeof(linebuf));              charcount=0;            } else if (c != '
') {              // в строке попался новый символ:              currentLineIsBlank = false;            }          }        }        // даем веб-браузеру время, чтобы получить данные:        delay(1);             // закрываем соединение:        client.stop();        Serial.println(“client disconnected”);  //  “клиент отключен”      }

    }

Не забудьте указать данные, соответствующие вашей сети. Это делается в самом верху скетча в константах ssid и password.

Теперь подключите ESP32 к компьютеру и следуйте инструкциям ниже:

  • Выберите свою плату в меню Инструменты > Плата (Tools > Board). В данном случае это «ESP32 Dev Module».
  • Выберите COM-порт.
  • Чтобы перевести ESP32 в режим загрузки прошивки, зажмите кнопку BOOT и нажмите на кнопку EN. Это перезагрузит ESP32.
  • Нажмите кнопку «Загрузка» в IDE Arduino и подождите несколько секунд, пока код скомпилируется и загрузится на плату. Если все было сделано правильно, вы должны увидеть примерно следующее:
  • Снова перезапустите ESP32, чтобы запустить новую прошивку.

Необходимые компоненты и схема

Ниже – список компонентов, необходимых для нашего проекта:

  • Один модуль ESP32
  • Два светодиода
  • Одна макетная плата
  • Два резистора на 270 Ом
  • Провода-перемычки

Подключите друг к другу все эти компоненты как показано на картинке ниже:

Доступ к веб-серверу

Перезапустившись, ESP32 напечатает в мониторе порта IDE Arduino свой IP-адрес. Скорость передачи данных нужно выставить на 115200 бод.

Теперь, чтобы получить доступ к веб-серверу, вам нужно вбить в адресной строке браузера IP-адрес, который ESP32 напечатал в мониторе порта IDE Arduino. В данном случае это «192.168.1.116».

Используя кнопки в браузере, попробуйте включить и выключить светодиоды, подключенные к модулю ESP32. В дальнейшем вместо светодиодов можно подключить какие-либо нагрузки через транзисторные ключи или реле.

Источник: http://micpic.ru/home/proekty-na-esp32/197-primer-veb-servera-na-esp32.html

Отправка данных с Arduino на WEB-сервер GET-запросом

Здравствуйте уважаемые пользователи сайта «паяльник», сегодня мне хотелось бы поделиться своим опытом проектирования и разработки устройства под управлением Arduino, основная задача которого сбор данных с датчиков и отправка их на полноценный WEB-сервер с PHP/MySQL.

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

Описание устройства

Вычислительным мозгом устройства является платформа Arduino UNO, для связи с сетью используется Ethernet Shield, помимо этого, я установил LCD KeyPad Shield для вывода информации о состоянии различных устройств и команд, также установил все возможные датчики и реле.

Полный список используемых компонентов:

  • Arduino UNO – мозг системы;
  • Ethernet Shield – связь с сетью;
  • LCD KeyPad Shield – дисплей для вывода информации;
  • DHT11 – датчик температуры и влажности;
  • Датчик движения;
  • Реле-модуль;
  • Пульт ДУ.

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

Клиентская часть на Arduino

Усвойте как незыблемую истину, что чудес в мире информационных технологий не бывает, и если устройство работает не так, как вы задумывали, значит, Вы где-то ошиблись.

Итак, давайте для начала разберемся, как вообще послать какой-либо запрос к Web-серверу. Если Вы думаете, что это слишком сложно, то Вы ошибаетесь. Человек так устроен, что просто не способен создавать что-то невообразимое, в чем он сам же не смог разобраться.

В нашем распоряжении имеется устройство на базе Arduino с которого необходимо отправить запрос на WEB-сервер. Инициатором обмена данными обычно выступает браузер, в нашем случае – Arduino. Web-сервер никому и никогда просто так ничего не пошлет, чтобы он что-нибудь отправил клиенту надо, чтобы клиент его об этом попросил. Простейший HTTP запрос может выглядеть, например, так:

GET http://www.php.net/ HTTP/1.0

Читайте также:  Карманный источник питания на 12 вольт своими руками

GET – тип запроса, тип запроса может быть разным, например POST, HEAD, PUT, DELETE.
http://www.php.net/ – URI от которого мы хотим получить хоть какую-нибудь информацию.
HTTP/1.0 – тип и версия протокола, который мы будем использовать в процессе общения с сервером.

– конец строки, который необходимо повторить два раза.

В нашем случае запрос к серверу выглядит следующим образом:

GET /add.php?k=asREb25C&t=24.00&h=35.00 HTTP/1.1
Host: site.ru
Connection: close

Скетч программы представлен ниже:

#include
#include
#include “DHT.h” //Константы
#define DHTPIN 2
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE); byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; // Мак адрес EthernetClient client; //Переменные
unsigned long int timeConn = millis(); // Частота отправки данных о t/h на сервер
float h; // Значение температуры
float t; // Значение влажности
char server[] = “site.ru”; /*————————————————————– Необходимые настройки ————————————————————–*/
void setup()
{ //Старт Serial.begin(9600); Ethernet.begin(mac); dht.begin();
}
/*————————————————————– Основное тело программы ————————————————————–*/
void loop()
{ h = dht.readHumidity(); t = dht.readTemperature(); if (millis() – timeConn > 2000) { sendData(t,h); timeConn = millis(); Serial.println(“CONNECT SERVER: Send temp/hum”); }
}
/*————————————————————– Функция отправляет данные о температуре и влажности на WEB сервер. ————————————————————–*/
void sendData(float t, float h) { client.connect(server, 80); client.print( “GET /add.php?”); client.print(“k=”); // Специальный код, например asREb25C client.print(“&”); client.print(“t=”); client.print(t); client.print(“&”); client.print(“h=”); client.print(h); client.println(” HTTP/1.1″); client.print( “Host: ” ); client.println(server); client.println( “Connection: close” ); client.println(); client.println(); client.stop(); client.flush();
}

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

Источник: http://cxem.net/arduino/arduino174.php

Автоматическая система контроля насосов — необычное решение необычной задачи с микроконтроллером ESP8266. Часть 3. Колдуем над прошивкой

В предыдущих частях я упоминал о возможных вариантах реализации системы контроля утечек воды на протяженной магистрали, а заодно коснулся конкретной аппаратной реализации.

В качестве сердца системы я использую два сенсора наличия переменного тока и микроконтроллер ESP8266 в реализации WeMos D1 Mini Pro.

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

В качестве экосистемы, которая более-менее подходит для решения подобных задач, я использовал среду Arduino.

Да, ESP8266 может делать куда больше, чем позволяет получить от аппаратной платформы Arduino, но для поставленной задачи большего и не надо.

А то, что плата использует лишь 5% от всех своих ресурсов — ничего не поделаешь, стоит она все равно настолько мало, что экономить на микроконтроллере тут просто глупо.

Итак, устройство контроля насосов должно:

  • Отслеживать превышение порога времени работы насоса или насосов по алгоритму скользящего окна и отключать потребителя в случае превышения порога.
  • Собирать статистику в пределах одной сессии и отправлять ее на регулярной основе на сервера ThingSpeak.
  • Быть доступным внутри сети через встроенный web-сервер.

Начнем с самого простого, с Web-сервера.

Web-сервер на ESP8266

Реализация веб-сервера на ESP8266 под Arduino настолько проста и банальна, что в примерах библиотеки ESP8266 есть готовые модули, которые можно скопировать и слегка модифицировав использовать в своих проектах.

Благо ESP8266 оборудована встроенным модулем Wi-Fi и позволяет подключаться к беспроводной сети не просто, а очень просто. Кстати, мало кто знает, что под Arduino, имя сети и пароль для подключения к ней, по умолчанию относятся к persistent значениям, т.е.

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

Веб-сервер для контроля устройства аварийного отключения насосов

В плане реализации веб-сервера, мне захотелось реализовать его не просто черным текстом по белому фону, а привнести хоть какую-то изюминку в реализацию проекта.

По задумке я решил сделать дизайн единственной веб-странички в некоем ностальгическом стиле, когда мониторы были монохромными и часто отображали только янтарный или зеленый цвета.

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

Отправляем данные на ThingSpeak

С серверами для хранения и обработки данных от устройств «интернета вещей» я уже сталкивался неоднократно, описывал методики и способы отправки, получения данных с ThingSpeak, на страницах своего блога. Поэтому добавить тут особо нечего. Формируем строку запроса, отправляем ее на сервер. Если все получилось — успокаиваемся, если нет, то повторяем попытку чуть позже.

Время работы насосов на протяжении нескольких дней

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

Оно и понятно, колодезный насос качает исключительно питьевую воду, ее расходуется очень мало. А вот скважинная вода, ввиду ее потенциальной неограниченности, расходуется уже на все остальные бытовые нужды. Графики могут выступать и в качестве удаленного средства мониторинга.

Так, например, будучи в отсутствии, я все равно могу, посмотрев на график работы насоса определить, что фильтры очистки автоматически промылись.

Реализация алгоритма скользящего окна

А вот это, пожалуй, самая сложная часть реализации прошивки для микроконтроллера. Алгоритм скользящего окна нетривиален, хотя и не так сложен, как может показаться. Самым простым вариантом реализации алгоритма можно назвать массив значений или же кольцевой буфер.

Если время работы насоса у нас определяется с точностью до секунды, то и размерность массива (или буфера) должна быть равна размеру окна в секундах.

Затем, каждый цикл, необходимо сдвигать массив на один элемент, а для оценки определения превышения границы времени работы суммировать все элементы массива, помеченные как «время работы».

В принципе, ресурсов ESP8266 с лихвой хватит для реализации подобной задачи, но уж очень не хотелось связываться с динамическими массивами, да и наверняка подобная задачка может быть решена куда более изящным способом.

И как оказалось, решение есть. Для подсчета значений времени работы насосов в рамках окна можно использовать механизм со счетчиками.

Ресурсов при этом тратится в разы меньше, чем с массивом, а работает алгоритм почти так же точно.

{ // Line 1 processing if (!deBouncerLine1.read()) { // Sensor detects Usage value = 1; } if (value == 0 && L1Counter < L1Window) { L1Counter++; } if (value == 1 && L1Counter > 0) { L1Counter = L1Counter – L1Parts; } if (L1Counter < 0 || L1Counter == 0) { L1Counter = 0; shutDownLine(1); } } // End of Line 1 processing

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

Для задания скользящего окна, периода времени, в рамках которого подсчитывается количество единиц времени, в которые работал насос, используется переменная L1Window. В моем случае размерность счетчика приравнена к секундам, а цикл проверки вызывается ежесекундно.

L1Counter — текущее значение единиц времени которые осталось работать до превышения порога, измеряется в секундах. L1Parts — константа, на значение которой уменьшается счетчик L1Counter за каждую секунду, когда работает нагрузка.

Значение L1Parts задается как делитель от L1Window. Например, если L1Window составляет 3600 секунд, а порог для работы 100 секунд, то L1Parts будет равняться 3600/100=36.

При инициализации переменная L1Counter равна константе L1Window. Если нагрузка выключена, то L1Counter увеличивается на единицу до тех пор, пока значение меньше L1Window.

А вот при работающей нагрузке, каждую секунду из L1Counter вычитается L1Parts. Таким образом, уменьшение счетчика происходит быстрее, чем его приращение.

А при достижении L1Counter вызывается процедура аварийного отключения нагрузки.

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

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

Для вызова процедуры со скользящим коном я использовал аппаратные прерывания таймера, доступные для использования в ESP8266.

Что еще?

При долговременном использовании электромеханического реле, есть риск того, что его контакты приварятся друг к другу. И дело тут вовсе не в возникновении электрической дуги при принудительном отключении нагрузки. Эффект приваривания может возникать и по другим причинам.

В частности, в том числе и по этой причине, современные УЗО требуется проверять на возможность отключения каждый месяц. При реализации устройства я реализовал и такую функцию. Каждую неделю, реле автоматически перещелкивается: размыкается, а затем замыкается обратно.

Данная процедура выполняется только тогда, когда отключена нагрузка. В силу того, что электромеханические реле срабатывают далеко не мгновенно, то после отправки команды на размыкание, следует подождать как минимум четверть секунды, чтобы размыкание действительно произошло.

А уже затем можно посылать сигнал на замыкание контактов.

Для реализации вызова таких некритических процедур, как размыкание контактов реле или же публикация информации на ThingSpeak я использую не механизм, основанный на прерываниях, а обычный счетчик, построенный на вызове системной функции millis().

Функция millis() возвращает количество миллисекунд с момента инициализации микроконтроллера.

Такая техника позволит избежать коллизий связанных с возможным вызовом прерывания из прерывания, когда вызывается функция для обработки скользящего окна, а посреди ее прерывает функция, связанная с перещелкиванием контактов реле.

При написании своего кода, а я намеренно не привожу весь код проекта, так как он тривиален, необходимо учитывать то, что сенсоры переменного напряжения отрабатывают тоже не мгновенно и несмотря на полупроводниковую природу, в их сигналах может присутствовать определенный процент «дребезга контактов». Для фильтрации таких нестабильных состояний в программе используется популярная библиотека Bounce2. С ее помощью успешно отфильтровываются не только переходные процессы при нажатии кнопок, но и дребезг других переключателей, в том числе и электронных.

Выводы

Устройства для автоматического мониторинга и отключения насосов — мне очень долго не хватало. Отключать каждый раз воду, чтобы в случае чего, не оказаться на месте размытой воронки, откровенно надоедало.

Да и всякие автоматические операции, например, прочистка фильтров, выполняется несмотря на наличие или отсутствие людей на объекте. Поэтому вода нужна и нужен четкий контроль за ее потреблением.

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

Читайте предыдущее: Автоматическая система контроля насосов — необычное решение необычной задачи с микроконтроллером ESP8266. Часть 2. Воплощение в железе.

Читайте далее: Автоматическая система контроля насосов — необычное решение необычной задачи с микроконтроллером ESP8266. Часть 4. Используем OLED-дисплей от Digole.

Источник: http://blog.kvv213.com/2017/05/avtomaticheskaya-sistema-kontrolya-nasosov-neoby-chnoe-reshenie-neoby-chnoj-zadachi-s-mikrokontrollerom-esp8266-chast-3-kolduem-nad-proshivkoj/

Рекомендации по повышению скорости работы вашего веб-сайта

…<\p>

Проведенные Yahoo! исследования демонстрируют высокую эффективность данного метода оптимизации.

Используйте функцию GET для запросов AJAX

Команда разработчиков Yahoo! Mail изобрела этот способ при использовании XMLHttpRequest, функция POST используется в два этапа: сначала отправляются функции, затем сама информация.

Так что лучше всего использовать функцию GET, которая отправляет только пакет TCP (если только у вас не слишком много cookies).

Максимально возможная длина адреса в IE – 2K, так что если вы отправляете больше информации, функция может не сработать.

Интересный побочный эффект, обнаруженный ими, заключается в том, что функция POST, если не брать в расчет непосредственное размещение информации, функционирует примерно так же, как GET. Это обусловлено некоторыми специфическими характеристиками HTTP, в соответствии с которыми функция GET применяется для поиска информации, так что если ваша цель – только запрос, используйте функцию GET.

Читайте также:  Уроки arduino: создаем вольтметр на 5 вольт своими руками

Пост-загрузка компонентов

Вы можете внимательно посмотреть на свой сайт и задать себе вопрос: «Какие компоненты страницы нужно загрузить в первую очередь, а какие могут подождать?»
Для разделения компонентов на те, которые стоит загрузить раньше или позже, идеально подходит JavaScript.

Предположим, у вас есть код JavaScript, который содержит анимацию и спецэффекты, которые могут подождать, так как сначала нужно загрузить основные элементы.

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

Вот что может вам помочь: YUI Image Loader для откладывания загрузки сжатых изображений, YUI Get utility для включения компонентов JS и CSS в список максимально быстрой загрузки.

Как следует обдумайте порядок загрузки компонентов – желательно, чтобы самые важные элементы контента загружались в первую очередь. Возможно, следует сначала запустить страницу без разделения компонентов, а затем уже расформировать их на более и менее важные.

Компоненты для начальной загрузки

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

Если некоторые компоненты будут внесены в список предварительной загрузки, вы сможете спокойно воспользоваться временем, необходимым для загрузки остальных компонентов (рисунков, стилей, скриптов), пока пользователь рассматривает то, что уже загрузилось.

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

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

• Предусмотренная загрузка – предварительная загрузка до выпуска редизайна. В случае изменения дизайна сайта часто бывает так, что новый сайт выглядит лучше, но работает намного медленнее. Дело здесь в основном в пустой кэш-истории, так что неплохо было бы организовать предварительную загрузку основных компонентов сайта – сначала пользователи увидят их, а затем уже новый дизайн.

Сократите число DOM элементов

Сложный сайт предполагает загрузку большого количества информации и замедляет доступ элементов стандарта консорциума к JavaScript. Когда вы, к примеру, решаете добавить новый элемент управления, то многое зависит от того, сколько элементов стандарта консорциума вам придется просматривать – 500 или 5000.

Большое количество элементов консорциума может свидетельствовать о том, что в страницу нужно внести некоторые изменения, не обязательно связанные с удалением некоторых частей контента. Возможно, стоит оптимизировать разметку, сократить коды, которые не несут важной функциональной нагрузки.

Вам пригодится программа YUI CSS utilities, которая поможет совершить общий обзор страницы и помочь выявить элементы, тормозящие загрузку. Пересмотрев разметку, вы, возможно, сможете разработать оптимальный вариант ее огранизации.

Число элементов системы консорциума подсчитать очень просто:

document.getElementsByTagName('*').length

А какое количество элементов считается слишком большим? Проверьте другие страницы с хорошей разметкой – к примеру, стартовая страница yahoo сделана очень неплохо, а компонентов там всего 700.

Распределяйте компоненты между доменами

Распределение компонентов позволит максимизировать число одновременных загрузок, однако не используйте более 4 серверов. К примеру, HTML-код и динамические компоненты можно разместить на www.example.org, а статичные компоненты распределить между static1.example.org и static2.example.org

Сведите к минимуму количество iframe-компонентов

Компоненты iframe отвечают за включение HTML-документа в родительский документ. Необходимо понять механизм работы этих компонентов для их эффективного использования.

Преимущества : • Помощь в загрузке малозначимых компонентов • Обеспечение безопасности

• Параллельная загрузка

Недостатки : • Занимают много места, даже если пустые • Замедляют загрузку

• Не семантические

Никаких ошибок 404

Если в ответ на свой запрос пользователь будет регулярно ответ «Ошибка 404 – страница не найдена», ни к чему хорошему это не приведет.

На некоторых сайтах существуют так называемые «подсказки-404»: «Возможно, вы имели в виду…?» Это удобно для пользователей, но ресурсы сервера все равно тратятся впустую.

Постарайтесь ни в коем случае не допускать ошибок в JavaScript, которые приводят к ссылке на «страницу 404».

Сократите размер cookies

HTTP cookies используются во многих случаях, в частности, для идентификации и персонализации. Информация, записанная в cookies передается с сервера на сервер, так что их размер необходимо свести к минимуму, чтобы не увеличивать время загрузки сайта.

• Не используйте данные функции без крайней необходимости • Сведите к минимуму размер cookies • Не используйте домены более низкого уровня в процессе передачи информации с помощью cookies

• Устанавливайте дату истечения срока годности

Используйте для компонентов домены без cookies

Когда браузер посылает запрос на статическое изображение и вместе с ним отправляются cookies, их нет на сервере, так что они совершенно бесполезны, только создают дополнительный траффик. Вам необходимо удостовериться, что все запросы на статические компоненты совершаются без cookies. Создайте дополнительный сервер и разместите эти компоненты на нем.

Если ваш домен – www.example.org, вы можете разместить статические компоненты на static.example.org. Однако если они уже размещены на домене более высокого уровня example.org вместо www.example.org, во все запросы static.example.org будут включены cookies. В этом случае придется приобрести новый домен, разместить на нем статические компоненты и не допускать появления там cookies.

Еще одно преимущество размещения статических компонентов на отдельном домене – это то, что некоторые прокси-серверы отказываются кэшировать элементы, запросы на которые сопровождаются cookies.

Сократите доступ к элементам консорциума

Доступ к элементам DOM от JavaScript замедляет загрузку, так что вам следует: • Кэшировать элементы, к которым предоставляется доступ • Организовать узловые события “offline”

• Не использовать JavaScript при разметке

Оптимизируйте обработчик событий

Иногда страницы загружаются медленно из-за слишком большого количества обработчиков событий, прикрепленных к различным элементам страницы. Следует максимально сократить их количество, к примеру, объединив некоторые события в один функциональный обработчик.

Также вам не обязательно ждать события «начало загрузки» для того, чтобы начать работать с деревом стандартов консорциума. Часто вам нужен всего один элемент – не обязательно ждать загрузки остальных. Вместо события «начало загрузки» можно использовать DOMContentLoaded , однако, пока эта функция не стала доступной для всех браузеров, пользуйтесь YUI Event

Предпочитайте , а не @import

Установлено, что элементы CSS должны располагаться в начале страницы, что способствует максимальной скорости загрузки.
В IE @import функционирует так же, как , но находится внизу страницы, так что лучше его не использовать.

Избегайте фильтров

Фильтр IE под названием AlphaImageLoader применяется для создания прозрачного эффекта изображений PNG в версиях IE до 7. Проблема в том, что этот фильтр мешает загрузке страницы, а также увеличивает объем запроса в целом.

Оптимальный вариант – не применять этот фильтр вообще и вместо него использовать PNG8, который отлично работает в IE. Однако если без вышеупомянутого фильтра никак не обойтись, воспользуйтесь функцией _filter, чтобы не создавать пользователям неудобств.

Оптимизируйте изображения

После того, как дизайн сайта разработан, подумайте о некоторых улучшениях и дополнениях к нему:
• Проверьте файлы GIF и удостоверьтесь, что их палитра соответствует цветовой комбинации. Это легко сделать с помощью imagemagick.

Если в изображении используется 4 цвета, а в палитре 256 цветовых оттенков, кое-что нужно подправить. • Попробуйте перевести изображения GIF в PNG и посмотрите, сохранятся ли они. Скорее всего, да.

Разработчики часто избегают использования PNG-рисунков, так как не все браузеры поддерживают этот формат, но сейчас это уже неактуально. Единственная проблема – это альфа-прозрачность PNG, однако изображения GIF также не могут быть прозрачными.

Так что все, что возможно для GIF, возможно и для PNG (PNG8), кроме анимации. Вот эта простая команда переводит изображение в формат PNGs: convert image.gif image.png

• Используйте функцию pngcrush (или любую другую функцию оптимизации PNG) для всех изображений данного типа. Пример:

pngcrush image.png -rem alla -reduce -brute result.png • Используйте функцию jpegtran для всех файлов JPEG. Эта функция не портит качество изображений формата JPEG и может быть использована для их изменения и улучшения. jpegtran -copy none -optimize -perfect src.jpg dest.jpg Оптимизируйте графические объекты CSS • Горизонтально расположенные изображения занимают меньший объем памяти, чем вертикальные • Комбинирование похожих цветов в графическом объекте снизит нагрузку на сервер

• Не оставляйте больших пробелов между рисунками в графическом объекте. Это не повлияет на размер файла, но снизит нагрузку на сервер. Рисунок 100×100 – это 10 тысяч пикселей, а 1000×1000 – это 1 миллион пикселей

Не используйте слишком большие изображения

Не используйте изображения слишком большого размера – ведь ширину и высоту можно задать непосредственно в коде.
Если вам нужно

ваше изображение (mycat.jpg) должно быть 100x100px, а не 500x500px.

Сделайте иконку сайта небольшой и кэшируемой

Иконка сайта – это изображение, которое находится в корне сервера. Ее наличие является обязательным – даже если вам она не нужна, браузер все равно ее потребует, так что во избежание сообщения 404 Not Found следует создать иконку. Иконка является первостепенным элементом загрузки, даже если вы организовали порядок загрузки элементов самостоятельно.

Удостоверьтесь, что иконка сайта:

• Небольшого размера, лучше всего не более1K.
• Контролируется функцией Expires оптимальным для вас образом (так как ее нельзя переназвать)..

Сайт Imagemagick поможет вам в создании небольшой иконки.

Не создавайте компоненты, размер которых превышает 25К

Это ограничение обусловлено тем, что устройства iPhone не кэшируют компоненты, размер которых превышает 25К. Обратите внимание, что это должен быть размер файла до его сжатия.

Упакуйте компоненты в документ, состоящий из нескольких частей

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

  • Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.
  • Создание вебсайта – процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.
  • Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.
  • Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.
  • Ни для кого не секрет как в MySQL реализовать массовый INSERT, а вот с UPDATE-ом могут возникнуть сложности. Чтобы не прибегать к манипуляциям события ON_DUPLICATE можно воспользоваться специальной конструкцией CASE … WHEN … THEN.

Видеокурс “HTML с нуля”

Если вы давно хотите как следует изучить HTML, то у меня для Вас есть отличная новость!

Вы можете совершенно бесплатно получить полноценный курс по HTML из моего платного сборника. 33 видеоурока от Евгения Попова!

Читайте также:  Ардуино термометр ds18b20: схемы соединения, код проекта

Бесплатно!

Список уроков и подробности получения курса здесь

Видеокурс “CSS с нуля”

Если вы уже изучили HTML и хотите двигаться дальше, то следующим шагом будет изучение технологии CSS.

Так же, как и в случае с HTML, вы можете совершенно бесплатно получить полноценный курс по СSS из моего платного сборника. Вас ждет 45 подробных видеоуроков от Евгения Попова!

Бесплатно!

Список уроков и подробности получения курса здесь

При регистрации введите промокод 1popov и получите 28 дней бесплатного использования.

Источник: https://ruseller.com/lessons.php?id=463&rub=28

Embeddedsoft.ru

В прошлой статье (ссылка на статью) я рассказывал о том, как сделать минимальную обвязку модуля esp8266 и залить свежую прошивку.
Теперь мы приступим к конфигурированию модуля и попробуем установить TCP соединение и передать первые данные.

Напомню что у меня установлена прошивка AT22SDK100-2015-03-20-boot1.3 а эначит у меня набр AT команд версии 0.22. Вот описание команд можно найти тут 4A-ESP8266 AT Instruction Set_v0.22.
Модуль имеет неплохой функционал, он может не только подключаться к точке доступа, но и сам быть в этой роли.

Реализует TCP подключение, запускает сервер и слушает открытый порт. Для того чтобы это все заработало нужно установить первоначальные настройки. Для этого будем использовать USB-UART переходник и уже знакомую нам программу HTerm или другой терминал.

Не забываем в конце каждой команды должны стоять специальные символы «
» иначе команда не будет воспринята.
В этой версии прошивки имеется возможность выбирать сохранять настройки в flash память модуля или хранить их до перезагрузки в оперативной памяти.

Для этого в конце некоторых команд ставится окончание DEF – default сохранить в flash, и CUR – current не сохранять. Мы будем писать команды вручную по этому сохраним, чтобы не тратить время и не писать их повторно.

Вот команды которые нам понадабятся:

AT

Базовая команда для проверки связи и работы модуля.

Ответ: OK

ATE0 – включить эхо

ATE1 – выключить эхо

AT+CWAUTOCONN=

Автоматическое подключение к точке доступа при старте0 – выкл 1 – вкл

AT+CWMODE=

Выбор режима работы модуля:1 – режим станции (STA) 2 – режим точки доступа (SAP)3 – совмещенный режим (STA+SAP)

AT+CWDHCP_DEF=,

mode:0 – для режима точки доступа (SAP)1 – для режима станции (STA)2 – для режима точки и станции (SAP+STA)enable: 1 – enable0 – disable

AT+CIPMUX=
Режим одиночных или множественных подключений

0 – одиночные1 – множественные

AT+CIPSTA_DEF=,,

Установить ip адрес в режиме станции (STA)

Пример: AT+CIPSTA_DEF=”192.168.0.100″,”192.168.0.1″,”255.255.255.0″

AT+CIPAP_DEF=

Установить ip адрес в режиме точки доступа (AP)

Пример: AT+CIPAP_DEF=”192.168.0.1″

AT+CWSAP_DEF=,,,
Настройка программной точки доступа

ssid – имя точкиpwd – пароль максимум 64 символаch – канал на котором будет работать точкаenc – тип защиты соединения:    0 – открытое    1 – WPA_PSK    2 – WPA2_PSK    3 – WPA_WPA2_PSKПодключимся к существующей точке доступа:

AT+CWJAP_DEF=,

Пример: AT+CWJAP_DEF=”TP-LINK”,”12345678” 

AT+CIPSERVER=,

Запустить TCP сервер

Пример: AT_CIPSERVER=1,80

—————————————————-Передать данные на сокет:

AT+CIPSEND=,
socket – номер открытого сокета

length – количество байт для передачи

Пример: AT_CIPSEND=1,5

Ждем готовности к передаче данных “>”Затем посылаем нужное количество байт—————————————————-Входящие данные в формате:

+IPD=,:

socket – номер открытого сокетаlength – количество байт данныхdata – входящие данные

Пример: +IPD=0,5,Hello

Настроим терминал для работыТеперь настроим соединение по UART. Откроем терминал HTerm, о котором я говорил в предыдущей статье и настроим соединение. У меня переходник USB – UART подключился как COM16. Скорость передачи данных 115200. Данные 8 бит, стоп бит 1, проверка четности отключена.Теперь настроим отправку спец символов CR LF в конце каждой команды.

В терминале HTerm есть для этого специальная функция. В окне программы Input control установим параметр Send on enter CR-LF.Теперь, можно просто писать в терминале команду а он сам добавит спец символы.Пишем «AT» и в окне Transmitted видим «AT
» Отлично.Настроим модуль как точку доступа.Для проверки соединения напишем следующие команды:Спросим у модуля версию прошивки.

AT+GMR

Ответ:

AT+GMRAT version:0.22.0.0(Mar 20 2015 10:04:26)SDK version:1.0.0

compile time:Mar 20 2015 11:00:32

Из этого видно, что у нас AT команды версии 0.22 Все правильно, продолжим. Как вы заметили, в ответе приходит эхо введенной нами команды, отключим эхо, по моему так удобнее.ATE1Ответ:OKПереведем ESP в режим точки доступа:AT+CWMODE=2Включим DHCP для режима точки доступа (SAP):AT+CWDHCP_DEF=0,1Установим IP адрес точки доступа:AT+CIPAP_DEF=”198.162.0.

1”Настроим имя, пароль, точку доступа:Имя – ESP8266, Пароль – 12345678, Канал – 4, Тип защиты 3 – WPA2-PSKAT+CWSAP_DEF=”ESP8266”,”12345678”,4,3Чтобы принимать или получать данные, нужно либо быть клиентом (подключаться к серверу), либо запустить свой сервер, и ждать запроса. Запустить сервер на ESP будет проще, поэтому пойдем этим путем.

Чтобы запустить сервер, необходимо разрешить несколько подключений:

AT+CIPMUX=1

Запускаем сервер и открываем порт 8080

AT+CIPSERVER=1,8080

С настройкой модуля закончено, TCP сервер запущен, все готово для передачи данных. Для этого можно использовать любой TCP терминал. Для Android есть “TCP UDP Client” а для Windows я использую “Hercules 3.2.8” Подключаемся к нашей точке доступа ESP8266, вводим пароль 12345678, ждем подключения.

В терминале TCP вводим параметры подключения ip-192.168.0.1 port-8080.

Должен открыться сокет «0» и в UART терминале получим сообщение от ESP о том что установлено соединение: 0,CONNECTТеперь напишем в TCP терминале что то вроде “Hello” В ответ по UART от ESP получим следующее: +IPD,0,5:Hello Назначение аргументов после IPD следующее:

+IPD,,:

Теперь передадим данные от ESP к клиенту (в нашем случае клиент это TCP терминал) Данные отправляются в два этапа: первый – сообщаем количество байт данных, затем отправляем это количество байт без каких либо дополнительных символов. Максимальное количество байт, которые можно отправить за один раз – 2048.Отправим данные:

AT+CIPSEND=0,8   
Ждем приглашения “>”     

Посылаем данные:  

HelloESP

Ответ:В терминале TCP мы увидим наше сообщение “HelloESP”. Можно считать что наши старания прошли не зря и данные успешно переданы. Следующим этапом мы будем выступать в роли станции и подключимся к Wi-Fi роутеру.Настроим модуль в режиме станции.Перезагрузим модуль.

Переведем ESP в режим станции:
AT+CWMODE=1

Включим DHCP для режима станции (STA): (включен по умолчанию)

AT+CWDHCP_DEF=1,1

Отключим автоматическое подключение к точке доступа:

AT+CWAUTOCONN=0

Установим IP адрес станции, адрес роутера, маску подсети:

AT+CIPSTA_DEF=”198.162.0.100”,”192.168.0.1”,”255.255.255.0”

Подключимся к точке доступа:

AT+CWJAP_DEF=”TP-LINK”,”12345678”

Разрешаем множественные подключения:

AT+CIPMUX=1

Запускаем сервер и открываем порт 8080

AT+CIPSERVER=1,8080

Здесь все аналогично, подключаем компьютер или смартфон к той же точке доступа, к которой подключен ESP модуль, открываем терминал, соединяемся по адресу 192.168.0.100 к порту 8080.

Должен открыться сокет «0» и в терминале получим сообщение от ESP о том что установлено соединение: 0,CONNECT. В TCP терминале пишем «Hello TCP» И радуемся результату :)Для передачи и приема данных команды точно такие же.На сегодня это все.

Успехов Вам в покорении Wi-Fi модуля esp8266!

С уважением Валерий Егоров.

Источник: http://embeddedsoft.ru/?page=44

Несколько советов как увеличить скорость загрузки сайта с минимальными усилиями – Каталог Вебмастера

Высокая скорость загрузки страниц сайта не только обеспечит комфорт и лояльность пользователей, но и напрямую влияет на позиции сайта в поисковых системах. Поэтому чем быстрее будет наш сайт, тем успешнее он будет. Мы дадим несколько советов по ускорению HTML-кода, мобильных сайтов и CMS.

Как увеличить скорость загрузки сайта, сокращая число HTTP-запросов

Почти 80% времени загрузки сайта приходится на различные изображения, скрипты, таблицы CSS, видео и flash ролики. Спецификация HTTP/1.1, предусматривает только две параллельных загрузки и если уменьшить количество компонентов и HTTP-запросов мы увеличим среднюю скорость загрузки страниц

Есть несколько способов уменьшить число запросов к серверу без изменения внешнего вида страницы:

• CSS-спрайты – изображение, состоящее из нескольких малых изображений, которые извлекаются в нужный момент с помощью параметров: background-position и background-image.

• Использование inline-изображений. Вставить inline-изображения на страницу можно двумя способами: с помощью URL-тега data: или непосредственно в CSS-таблицу сайта. Во втором случае мы уменьшим количество запросов к серверу и HTML-код страницы не увеличится.

• Объединение файлов. Если на странице загружается несколько таблиц стилей или файлов JavaScript, то рекомендуется объединить файлы в одну таблицу или скрипт. Это уменьшит время загрузки и количество запросов к серверу. Для разработки вы можете сохранить весь набор скриптов или CSS и объединять их в один только перед загрузкой на сервер.

Подключайте таблицы CSS в начале страницы

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

Если таблицы CSS подключаются в конце страницы, то это не позволит браузеру сразу корректно обрабатывать интерфейсные элементы. Некоторые версии браузеров вообще не перерисовывают элементы, если их стиль меняется после загрузки страницы.

Подключайте JavaScript внизу страницы

В отличие от CSS подключать файлы JavaScript рекомендуется в конце страницы. Этим мы позволим браузеру в первую очередь загрузить весь контент и только затем загрузить необходимые скрипты.

Все современные сайты содержат множество скриптов для поддержки различных слайдеров, Ajax-меню, форм обратной связи и т.д.

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

Также необходимо помнить, что загрузка JavaScript может блокировать параллельные загрузки. В спецификации HTTP/1.1 предусмотрено не более двух параллельных загрузок контекстных элементов с одного хоста.

Если элементы находятся на разных хостах, что часто бывает с картинками или скриптами, то мы имеем более 2-х загрузок. Такая сложная очередь неизбежно уменьшит среднюю скорость загрузки страниц.

Составьте схему загрузки элементов страницы и вы сразу увидите как увеличить скорость загрузки сайта, сократив количество хостов.

Уменьшите CSS и JavaScript файлы

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

Даже незначительное уменьшение размера таблиц стилей и скриптов дает существенное снижение трафика на сайт и как следствие увеличение скорости загрузки страниц, особенно для высоконагруженных сайтов. Для оптимизации файлов воспользуйтесь одним из онлайн-сервисов, которых достаточно в Интернет. На рисунке пример статистики сервиса YSlow.

Посмотрите на размер JavaScript –если это высоконагруженный сайт, то уменьшение размера скриптов пусть даже на 100-200Кб это приведет с снижению нагрузки на сервер и повышению скорости сайта.

Задействуйте кэш браузера

Как увеличить скорость загрузки сайта с помощью кэша браузера написано достаточно, но как это ни странно, многие веб-разработчики до сих пор забывают его использовать. Не заставляйте пользователя каждый раз загружать одни и те же картинки, скрипты JavaScript и таблицы CSS.

Кэш избавит сервер от лишней загрузки и ускорит загрузку страниц, что очень важно при мобильном доступе. Для того чтобы сделать определенные элементы страницы кешируемыми используйте заголовок Expires в файле .htaccess, который поместите в корневой каталог сайта.

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

Если контент сайта часто меняется, рекомендуется уменьшить срок хранения кешируемых данных.

Используйте общедоступный CDN для подключения JavaScript-библиотек

Источник: http://webmastercat.com/ru/stati/neskolko-sovetov-kak-uvelichit-skorost-zagruzki-sajta-s-minimalnymi-usiliyami.html

Ссылка на основную публикацию
Adblock
detector