Network: HTML, HTTP, browsers разные хинты

HTTP
HTTP Response Content-Type
В ответе http лучше всего выставлять Content-Type: text/http; charset=utf-8
  • Charset – без него в мобильного браузере могут быть кракозябры т.к. по умолчанию кодировка в cp1251.
  • test/http – если указать text/plain может не работать выгрузка страницы разными утилитами типа PHP file_get_contents, PHP stream_get_contents (в том числе, как я понимаю, поисковыми).
HTTP versions
HTTP 1.0/1.1 по разному себя ведут (1.0 требует 3WHS для каждого запроса с разрывом, а 1.1 в рамках одного соединения позволяет передать несколько запросов). Поэтому пропускная способность для этих протоколов отличается. Большая часть серверов давно уже поддерживает и работает по HTTP 1.1.
$ curl --head weril.me HTTP/1.1 200 OK Server: Apache/2.4.6 (CentOS) OpenSSL/1.0.2k-fips PHP/7.3.13 X-Powered-By: PHP/7.3.13 Link: <https://weril.me/wp-json/>; rel="https://api.w.org/" Content-Type: text/html; charset=UTF-8
  • будущее за HTTP 2.0 (HTTP/2) и HTTP 3.0 (HTTP/3). Facebook уже начинает использовать HTTP/3 совместно с QUIC – заменой TCP!
  • Ранее была наиболее распространена версия HTTP 1.1, но сейчас, судя по статистике, превалирует уже 2.0
HTTP/2 is used by 47.7% of all the websites.
  • в версии HTTP 1.1 (RFC 2616) добавлена
    • http persistent connection – возможность последовательной отправки нескольких транзакций в рамках одного tcp connection (не нужно устанавливать tcp для каждой транзакции)
    • http pipleined connection – возможность одновременной отправки нескольких транзакций в рамках одного tcp connection
Помимо улучшений внутри одного коннекта при использовании HTTP (как в HTTP 1.0, так и в HTTP 1.1) браузер может устанавливать сразу несколько TCP соединений с одной WEB страницей (точнее – одним веб сервером). Это “старая техника Parallel Connections,” ускорения обработки и в HTTP 1.1 самим стандартом это ограничивается, но по факту браузеры продолжают так работать (ограничиваются в среднем 4-6 соединениями, вместо 2 по стандарту). Эта техника подразумевала, что по разным коннекциям параллельно браузер мог забрать разные объекты/транзакции (т.е. разные транзакции разбиваются по разным TCP соединениям).
https://www.w3.org/Protocols/HTTP/Performance/Pipeline
https://tools.ietf.org/html/rfc2616
https://www.oreilly.com/library/view/http-the-definitive/1565925092/ch04s04.html
https://stackoverflow.com/questions/985431/max-parallel-http-connections-in-a-browser

A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy.

HTTP allows clients to open multiple connections and perform multiple HTTP transactions in parallel, as sketched in Figure 4-11. In this example, four embedded images are loaded in parallel, with each transaction getting its own TCP connection. Each component of a page involves a separate HTTP transaction. Four transactions (parallel).

In practice, browsers do use parallel connections, but they limit the total number of parallel connections to a small number (often four).
I'm surprised. Doesn't the HTTP 1.1 RFC say to limit persistent connections to 2 per server? 
Yes it does. Recent browsers don't conform anymore.
Пример ниже – открыта одна страница в браузере (до открытия только подключение по RDP на порту 3389), но по факту открыто 6 (TIME_WAIT) параллельных TCP соединений с ней.
C:\Windows\system32>netstat -n

Активные подключения

Имя Локальный адрес Внешний адрес Состояние
TCP 172.16.1.253:3389 172.16.0.90:55803 ESTABLISHED
TCP 192.168.0.2:59778 192.168.0.246:443 TIME_WAIT
TCP 192.168.0.2:59779 192.168.0.246:443 TIME_WAIT
TCP 192.168.0.2:59780 192.168.0.246:443 CLOSE_WAIT
TCP 192.168.0.2:59783 192.168.0.246:443 TIME_WAIT
TCP 192.168.0.2:59784 192.168.0.246:443 CLOSE_WAIT
TCP 192.168.0.2:59785 192.168.0.246:443 CLOSE_WAIT
TCP 192.168.0.2:59786 192.168.0.246:443 TIME_WAIT
TCP 192.168.0.2:59787 192.168.0.246:443 TIME_WAIT
TCP 192.168.0.2:59788 192.168.0.246:443 TIME_WAIT
TCP 192.168.0.2:59789 192.168.0.246:443 CLOSE_WAIT
TCP 192.168.0.2:59790 192.168.0.246:443 CLOSE_WAIT
TCP 192.168.0.2:59791 192.168.0.246:443 CLOSE_WAIT
http CODES (3xx, 4xx, 5хх)

  • http 304 not modified – браузер из кеша показывает страницу т.к. она не изменена по сравнению с содержимым на сервере. Браузер передает строку (hash), по этой строке сервер сравнивает текущее содержимое и то, которое было у клиента – если ничего не поменялось, значит выдаем http 304.
  • Ошибки 5хх вполне могут быть связаны не с самим сервером, а с забитостью канала до него – по практике так.
    • Со 100 mb каналом 10% ошибок (500, 502, 504)
    • С 1G каналом 0%

 

HTTP METHODS (get, post, PUT, DELETE, etc)

Передача

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

Примеры:

echo "<form action=test2.php>";
echo "<input type=submit name=s_button value=\"Выгрузить\" id=\"submit\">";
echo "<input type=\"hidden\" name=\"test\" value=\"$test\"/>";
echo "</form>";

echo "<form action=test2.php method=\"post\">";
echo "<input type=submit name=s_button value=\"Выгрузить\" id=\"submit\">";
echo "<input type=\"hidden\" name=\"test\" value=\"$test\"/>";
echo "</form>";

И то что прямо наболело – не нужно передавать SQL-запросы, особенно с помощью GET, даже в корпоративной сети. Это жесть.

http://<site>/<script><variable=><SQL statement типо SELECT id FROM table WHERE type = blablabla>

Прием и вывод

Выводим на экран весь POST/GET:

print_r($_POST);
print_r($_GET);

Выводим на экран конкретную переменную в POST/GET:

print_r($_POST['data']);

print_r($_GET['data']);

Передача массива

см. в примере по генерации xlsx

Сохранение формы запроса

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

  // CHECKBOX
 if (isset($_POST['test']))
 {
 echo "<input type=checkbox name=test value=yes checked></td>";
 }
 else
 {
 echo <input type=checkbox name=test value=yes></td>";
 }
// select
echo "<option selected value=\"$val\">$val</option>";
echo "<option value=\"$val\">$val</option>";
// text
echo "<input type='text' name=fd size=11 value=\"$val\";
echo "<input type='text' name=fd size=11> </td>";

 

HTML

Tags

<hr> – нарисовать прямую на весь экран

 

Syntax
Mozila более чувствителен к написанию html в сравнении с Chrome.
Примеры:
1) имена файлов – должны быть в скобках, иначе при пробелах в них будет беда
2) теги /p – внутри ячейки должен быть <p></p>, если не хочешь получить разрыв в таблице при нулевой строке внутри ячейки
3) urlencode – при отправке русских символов обязателен, иначе на приеме будет абракадабра

 

Ссылки (a href) 

  • target=\”_new\” – открывает новую страницу, но если сделаны несколько _new, то открытие будет в одной вкладке
  • target=\”_blank\” – открывает новую страницу и если сделаны несколько _blank, то открытие будет в разных вкладках

 

Границы для блока

Правильный способ делать отступы для блока текста/таблиц и прочего не через жесткие backspace в html коде или формирование таблиц, а через блоки div и установки для них margin.

<div style="margin: 10px;">
   ТУТ БЛОК ТЕКСТА/ТАБЛИЦ
</div>

 

Тип текстового поля

В html можно разные типы текстового поля указать помимо text, например password, email, number (HTML5), search.

  • В случае password все вводимые данные будут закрываться звездочками.
<input type="password" name="password" class="form-control"/>
  • В случае number на мобильных устройствах открывается цифровая клавиатура.
<input type="number" name="sms-code" class="form-control"/>
  • В случае email браузерами зачастую проверяется формат.
  • Удобное для большого по объему текста окно делается через textarea
<textarea class=\"text\" cols = 60 rows = 3 wrap = soft name=\"comment\">$comments</textarea>

Leave a Reply