Skip to content

Latest commit

 

History

History
336 lines (310 loc) · 28.8 KB

OTHER.md

File metadata and controls

336 lines (310 loc) · 28.8 KB
Raw

Other

  • cookies types

    • sesiion cookie теряются при закрытии вкладки
    • persistent cookie с определенным временем жизни
    • secure cookie зашифрованные куки
    • http only нельзя получить на клиенте
    • super cookie сетается на домен

  • как сделать куки?

    • js document set cookie
    • Response header: Set-Cookie: name = value
    • Manually C://users ...
    • meta tag in html: <meta http-equiv="set-cookie" name="" value="">
    • plugins

  • Что такое LocalStorage и в чём его отличия от Cookie & Session storage?
    LS - внутреннее хранидище браузера, сохраняющее данные на неопределенный срок, очистить можно только из JS или очистив кэш браузера, имеет самые большие играничения по объему данных. можно прочитать только на клиенте
    SS - тоже самое только время хранения ограничено закрыием окна браузера данные не отсылаются на сервер никогда. лимит примерно 5мб. можно прочитать только на клиенте
    СOOKIE - сохраняет данные которые должны быть отправленны обратно на сервер. размер менее 4кб. доступны с клиенти и сервера. что бы ограничить доступ с клиента нужно поставить флаг HttpOnly = тру

  • Как защитить запись в куке, чтобы её не смог прочитать js
    (флаг HttpOnly)

  • Что такое WebSocket? Что такое long-polling и в чём их разница? Какие проблемы они решают?
    WebSocket — протокол связи поверх TCP-соединения, предназначенный для обмена сообщениями между браузером и веб-сервером в режиме реального времени. ДЛя открытия соединения используются специальные заголовки запрещенные в XMLHttpRequest.
    Длинные опросы – отличная альтернатива частым опросам. Они также удобны в реализации, и при этом сообщения доставляются без задержек.

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

  • doctype
    Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

    Параметры:

      Элемент верхнего уровня — указывает элемент верхнего уровня в документе, для HTML это тег html.

  Публичность — объект является публичным (значение PUBLIC) или системным ресурсом (значение SYSTEM), например, таким как локальный файл. Для HTML/XHTML указывается значение PUBLIC.  

  Регистрация — сообщает, что разработчик DTD зарегистрирован в международной организации по стандартизации (International Organization for Standardization, ISO). Принимает одно из двух значений: плюс (+) — разработчик зарегистрирован в ISO и - (минус) — разработчик не зарегистрирован. Для W3C значение ставится «-».

  Организация — уникальное название организации, разработавшей DTD. Официально HTML/XHTML публикует W3C, это название и пишется в <!DOCTYPE>.

  Тип — тип описываемого документа. Для HTML/XHTML значение указывается DTD.

  Имя — уникальное имя документа для описания DTD.

  Язык — язык, на котором написан текст для описания объекта. Содержит две буквы, пишется в верхнем регистре. Для документа HTML/XHTML указывается английский язык (EN).

  • async, def attr у скрипта
    При наличии атрибута async браузер при возможности запускает скрипт асинхронно. Это означает, что указанный в атрибуте src файл будет выполняться без ожидания загрузки и отображения веб-страницы. В то же время и страница не ожидает результата выполнения скрипта, а продолжает загружаться как обычно.
    скрипт запускается как только загрузится
    Отличия от defer:

    1. браузер гарантирует, что относительный порядок скриптов с defer будет сохранён.
    2. скрипт с defer сработает, только когда весь HTML-документ будет обработан браузером.

  • Event loop
    JS - однопоточный, имеет только один главный поток
    event loop - в нем запускаются все асинхронные действия
    Task - cb, setTimeOut
    Micro Tasks - promise, mutation observer, fetch, async-await
    Задачи исполняются по порядку и браузер может рендерить в промежутках между ними
    Микрозадачи исполняются по порядку и исполняются:
    после каждого колбека, если только это не часть выполнения какого-то другого сценария в конце каждой задачи

  • Browser rendering pipeline

    1. JS Обычно JavaScript используется для выполнения работы, результатом которой будут визуальные изменения, будь то функция jQuery animate, сортировка набора данных или добавление DOM-элементов на страницу. Однако вызывать визуальное изменение можно не только с помощью JavaScript: Также часто используются анимация CSS, переходы и API-интерфейс веб-анимации.
    2. Style - вычисление стилей
      В процессе вычисления стилей определяется, какие правила CSS к каким элементам применяются с учетом соответствующих селекторов, например: .headline или .nav > .nav__item. Отсюда, после того как правила определены, они применяются и вычисляются итоговые стили для каждого элемента.
    3. Layout - расчет макета
      Как только браузер будет знать, какие правила применяются к элементу, он может начать вычислять, сколько места он займет, и где он находится на экране. Модель макета для Интернета означает, что один элемент может влиять на другие, например: ширина элемента <body> обычно влияет на значения ширины дочерних элементов и так далее по всему дереву, поэтому этот процесс для браузера может быть довольно сложным.
    4. Painting прорисовка
      Прорисовка – это процесс заполнения пикселей. Он подразумевает вывод текста, цветов, изображений, границ и теней, по сути – всех визуальных частей элементов. Прорисовка обычно выполняется на нескольких поверхностях, которые называются слоями.
    5. Composite Поскольку части страницы потенциально были прорисованы на нескольких слоях, они должны быть выведены на экран в надлежащем порядке, с тем чтобы страница отображалась правильно. Это особенно важно для элементов, которые перекрывают другие элементы, поскольку ошибка может привести к тому, что один элемент будет неправильно показан поверх другого элемента.

  • V8 optimisations / optimisation killers

  • memory leaks

  • regex methods

  • CODE QUALITY:

    • DRY
    • KISS
    • YAGNI
    • SOLID

  • HTTP, структура

    1. строка звпроса указывает метод передачи, URL-адрес, к которому нужно обратиться и версию протокола HTTP.
    2. заголовки описывают тело сообщений, передают различные параметры и др. сведения и информацию
    3. тело сообщения(необязательно) это сами данные, которые передаются в запросе

  • пример запроса:

    GET / HTTP/1.1
Host: webgyry.info
User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:18.0) Gecko/20100101 Firefox/18.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ru-RU,ru;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Cookie: wp-settings
Connection: keep-alive

  • пример ответа: Ответ сервера:

    HTTP/1.1 200 OK
Date: Sun, 10 Feb 2013 03:51:41 GMT
Content-Type: text/html; charset=UTF-8
Transfer-Encoding: chunked
Connection: keep-alive
Keep-Alive: timeout=5
Server: Apache
X-Pingback: //webgyry.info/xmlrpc.php

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
    <head>
        <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
        <title>Документ без названия</title>
    </head>
    <body>
    </body>
</html>

  • HTTP основан на технологии клиент сервер

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

  • HTTP vs HTTPS

    1. HTTPS не является отдельным протоколом передачи данных, а представляет собой расширение протокола HTTP с надстройкой шифрования;
    2. передаваемые по протоколу HTTP данные не защищены, HTTPS обеспечивает конфиденциальность информации путем ее шифрования;
    3. HTTP использует порт 80, HTTPS — порт 443.

  • OSI 7)application - http 6)presentation 5)session 4)trensport 3)network - TCP\UDP 2)datalink 1)physical

  • DNS система доменных имен - ставит в соответсвие ip к сетевому имени
    !! кэшируется браузером - браузер сохраняет Ip адреса

  • HTTP methodth
    - GET
    - POST
    - PUT
    - DELETE
    - OPTIONS
    - HEAD

  • GET vs POST
    кроме назначения
    get - данные передаются в строке запроса(видны в юрл)
    post - данные передаются в теле(не видны пользователю)

  • Status codes 1xx - informational 2xx - success 3xx - redirect 4xx - client error 5xx - server error

  • REST API get: /object/user post: /object/user put ....

  • CRUD C - post /object/user R - get /object/user U - put /object/user D - delete /object/user

  • SOUP - передача xml

  • HOW brousers work

    • Высокоуровневая структура браузераЖ 1) Пользовательский интерфейс: В него входит адресная строка, кнопки продвижения вперёд/назад, меню закладок и так далее. Сюда относятся все элементы, кроме окна, в котором собственно отображается веб-страница. 2) «Движок» браузера: Распределяет действия между движком рендеринга и интерфейсом пользователя. 3) «Движок» рендеринга: Отвечает за отображение запрашиваемого контента. К примеру, если запрашивается HTML, то «движок» разбирает код HTML и CSS, а затем отображает полученный контент на экране. 4) Сетевая часть: с помощью сетевых функций браузер обрабатывает вызовы, вроде HTTP-запросов, с применением различных реализаций для разных платформ. 5) Бэкенд интерфейса (UI): Используется для отрисовки базовых виджетов, вроде комбо-боксов и окон. 6) Интерпретатор JavaScript: Используется для парсинга и выполнения JavaScript-кода. 7) Хранилище данных: Браузеру может понадобиться локально хранить некоторые данные (например, cookie). Кроме того, браузеры поддерживают различные механизмы хранения, такие как localStorage, IndexedDB, WebSQL и FileSystem.
      • lexer - разбирает на токены
      • parser - применяет синтаксические правила
      • MAIN FLOW - psrsing(dom tree) -> render tree -> layout(расчет рпозиции и размера) - painting

  • что происходит после ввода юрл в браузерную строку

    • ПЕРЕДАЧА ЗАПРОСА БРАУЗЕРУ 1) enter pressed -> сигнал 2) электросхма кдавиатуры -> код клавиши 3) контроллер клавиатуры -> конвертирует код для передачи компьютеру 4) ...

      • ПАРСИНГ ЮРЛ 5) браузер получает введенный юрл запрос скармливает его поисковой машине и получает сформированный юрл запрос(добавляет текст если необходимо) 6) проверяет список пердзагруженных сайтов требеющих HTTPS соединения, если этот сайт есть в списке то использует HTTPS вместо HTTP. Отправляет запрос 7) если сайт использует HTTPS но в списке его нет, то он отправит браузеру ответ что надо использовать HTTPS 8) дальше браузер производит конвертацию не ASCII символов в запросе (not a-z, A-Z, 0-9) 9) если такие символы обнаружены то браузер использует PUNYCODE кодировку для этой части юрл

      • ОПРЕДЕЛЕНИЕ DNS 10) брайзер проверяет наличие домена в кэше 11) если его там нет вызывает ф-цию getHostByName 12) которая проверяет сначала его наличие в hosts 13) если хост нигде не закеширован , то отправляется запрос к сетевому DNS серверу 14) если DNS сервер находится в той же подсети , то ARP запрос(определяющий мак адрес) отправляется этому серверу 15) если нет , то ARP запрос отправляется на IP адрес шлюза по умолчанию ... отпределили IP адрес

      • ОТКРЫТИЕ СОКЕТА 16) когда у браузера есть IP и порт(80 - http, 443 - https) 17) вызывается системна ф-ция socket 18) запрос проходит транспортный уровень, сетевой и канальный и формируется пакет для передачи данных 19) отправка пакета с компьютера через локальную сеть, потом модем ... пакет доберется до маршрутизатора, управляющего локальной подсетью, потом по цепочке роутеров доберется до конечного сервера назначения

      • TLS handshake

        1. client - hello -> server - hello

        2. клиент проверяет переданный сервером сертификат , определяя можно ли доверять скрверу

        3. генерация ключей для шифрования

        4. передача зашифрованных данных Клиент: «Привет! Я хочу установить безопасное общение между нами. Вот мой набор шифров и совместимая версия SSL/TLS».

          Сервер: «Привет, клиент. Я проверил твой шифр и версию SSL/TLS. Думаю, мы можем продолжить общение. Вот мой файл сертификата и открытый ключ. Проверь их».

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

          Сервер: «Готово».

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

          Клиент: «Я отправлю тебе тестовое сообщение, чтобы проверить, что наш главный секрет работает. Отправь мне расшифрованную версию этого сообщения. Если он работает, наши данные в безопасности».

      • Протокол HTTP

        1. апргрейд от HTTP - SPYDY (если браузер создан гуглом)
        2. если нет , то клиент отправляет сообщение
        3. после отправка пустой строки, значит сообщение закончено
        4. сервер отвечает статусом 200 ок
        5. пустая строка и контент hnml страницы
        6. если в запрос включены спец. версионные заголовки , то сервер смотрит просто на версию и если она не изменилась то сообщает браузеру и он дастает инфу из кэша
        7. процесс повторяется для каждого ресерса в html

      • Обработка запроса сервером

        1. сервер разбирает запрос по методу, запрашиваемому домену, запрашиваемым путям(страницам)
        2. Сервер проверяет существование виртуального хоста, который соответствует google.com.
        3. Сервер проверяет, что google.com может принимать GET-запросы.
        4. Сервер проверяет, имеет ли клиент право использовать этот метод (на основе IP-адреса, аутентификации и прочее).
        5. находит контент по запросу, парсит и отправляет

      • Парсинг HTML, CSS

        1. построение dom tree
        2. render tree
        3. layout
        4. painting

      • КОРОТКО?:

        1. начинается поиск ip адреса соответствующего нашему урлу по dns серверам
        2. если адрес найден, то браузер устанавливает с сервером TCP соединение
        3. если TCP соединени установлен, то браузер отправляет HTTP запрос на сервер
        4. сервер отлавливает наш запрос, обрабатывает его и отправляет HTTP ответ браузеру
        5. здесь что-то из статья "how browser works"

  • TESTS structure

    • setup
    • execution
    • validation
    • cleanup

  • TEST FIRST

  • umit test

  • TDD vs BDD

  • fetch vs httprequest

    fetch
    + use promice
    - you can't abort request
    - you can't report progress
    + You can use the Cache API with the request and response objects
XMLHttpRequest
    - use cb
    + you can abort request
    + can report progress

  • CORS
    механизм использующий специальные корс заголовки что бы получить ресурс запрашиваемый с различающегося домена
    Механизм CORS поддерживает кросс-доменные запросы и передачу данных между браузером и web-серверами по защищенному соединению браузеры ограничивают крос ориджин запросы same origin police

  • какие запросы используют CORS
    Вызовы XMLHttpRequest или Fetch APIs в кросс-сайт манере

  • preflight request
    "preflighted" requests first send an HTTP request by the OPTIONS method to the resource on the other domain, in order to determine whether the actual request is safe to send.

  • оптимизация загрузки сайта:

    • lazy loading подразумевает отказ от загрузки дополнительных данных, когда в этом нет необходимости.
    • cash сохранение часто запрашиваемых данных в кэш
    • divide js вынести используемые в разных скриптах части кода в один файл
    • использование отдельных файлов CSS & JS -> браузер закэширует
    • использование сжатых картинок, разных размеров под разные экраны, миниатюрок, определенных форматов
    • не использовать изображения для показа текста
    • подключение скриптов в конце страницы
    • расположение сервера относительно пользователя(использование распределенных серверов)

  • блокирующий CSS, JS
    если простыми словами, то JS \ CSS которые лежат на каком-то левом серваке, но ты отправил запрос за ними ... а браузер уже в принципе готов показать пользователю DOM ... но т.к. не пришел ещё ответ по этим фалайм, он ожидает ответа от сервера Выход : либо не использовать сторонние ресурсы , либо подгружать из JS динамически

  • утечки памяти

    • циклические ссылки

    • алгоритм: 1) определение корней(напр глобальные переменные) 2) обход корней и их потомков , обнаружение недостижимых элементов

    • распространенные утечки: 1) случайное объявление глобальных переменных:

          ```javascript
    function foo() {
        this.variable = "potential accidental global";
    }

    // Если foo вызвать саму по себе, this будет указывать
    // на глобальный объект (window),
    // вместо того, чтобы быть undefined.
    foo()
    // или
    function foo(arg) {
        bar = "скрытая глобальная переменная";
    }
    ```

2) забытые обработчики событий или таймеры
3) ссылки на удаленные дом элементы (например в живой коллекции)

  • Node js - is

  • особенности нод джс

  • Что такое JSON? формат представляющий данные ввиде строки JSON.parse, stringify