【KT】Создайте свою собственную систему знаний переднего плана

JavaScript

Система знаний

Не много чепухи, на то, чтобы наконец написать, ушло 2 часа, ниже представлена ​​​​система знаний А Куана, заинтересованные друзья могут обратиться к ней,👏 Приглашаем всех проверить и заполнить пробелы, а также подарить друг другу Ао Ли.~

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

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

Если вам нужен исходный файл Xmind, зайдите на мой Github для скачивания, у меня нет своего сервера, а сетевой диск Baidu лень это делать, так что все, адрес портала для скачивания: 👉Свод знаний Акуана PNG,Акван знаний XMind

Я чувствую, что будет публичный аккаунтxmindЗагрузите его, затем измените имя на свое, а затем подпишитесь на официальный аккаунт и присоединитесь к группе, чтобы получить подробную систему знаний о интерфейсе.Я хочу сказать, вы можете изменить его, если хотите, и сказать что-то в комментарии area: "Брат, я позаимствовал твой. Xmind ha", в конце концов, я тоже много работал над его организацией, так что передай привет~

основы программирования

HTML

  • SEO
  • Встроенные элементы/элементы блочного уровня
  • семантическое понимание

CSS

  • Новые возможности CSS3
  • Очистить несколько способов плавающих
  • коробочная модель
  • Гибкая компоновка
  • Принцип БФК
  • позиционирование позиции
  • Несколько способов центрирования по горизонтали и вертикали
  • Вес приоритета CSS
  • переход / анимация разница
  • граница: нет/граница: 0 разница
  • display:none/visibility: hidden/opacity: 0 разница

Javascript

  • встроенные объекты

  • typeof

  • instanceof

  • преобразование типов

  • new

  • this

  • Закрытие

  • Прототипы и цепочки прототипов

  • контекст выполнения

  • Среда выполнения и область применения

  • глубокая копия

    • глубокая копия
    • мелкая копия

  • Защита от тряски и дросселирования

    • Овладейте принципом
    • Руки

  • модульный

    • CommonJS
    • AMD

  • наследовать

    • Наследование цепочки прототипов
    • Заимствование наследования конструктора
    • наследование композиции
    • прототипное наследование
    • паразитарное наследование
    • Паразитарная композиционная наследование
    • Наследование классов в ES6

  • позвони, привяжи

    • Овладейте принципом
    • Как реализовать функцию связывания и вызова вручную

  • пусть, константа, вар

  • Принцип обещания и реализация

  • Принцип генератора и реализация

  • Async/Await

  • Карта, Установить, Плоская карта, Уменьшить

  • Proxy

  • 0.1 + 0.2 !== 0.3

Основы браузера

механизм события

  • Событие включает три стадии
  • Проблема с регистрацией
  • Делегат мероприятия / Делегат мероприятия

перекрестный домен

  • JSONP

    • Практическая реализация JSONP

  • CORS

    • Есть ли разница между GET/POST

  • Nginx

    • Знания, такие как расширенная балансировка нагрузки

  • PostMessage

  • document.domain + iframe

место хранения

  • куки, localStorage, sessionStorage, indexDB
  • service worker

Event Loop

  • Цикл событий в узле
  • Цикл событий в браузере

Принцип рендеринга в браузере

  • Разница между Load и DOMContentLoaded

  • HTML Tree / CSS Tree

  • перерисовывать, перерисовывать

  • Как уменьшить перерисовку reflow

    • Какие свойства CSS вызывают перерисовку при перерисовке

сеттаймаут, сетинтервал

Основы сети

пятиуровневый протокол

  • прикладной уровень
  • Транспортный слой
  • Сетевой уровень
  • канальный уровень
  • физический слой

протокол PPP

Протокол CSMA/CD

Протокол разрешения адресов ARP

ICMP Протокол контрольных сообщений Интернета

Протокол пользовательских дейтаграмм UDP

  • Ненадежный
  • ориентированный на сообщение
  • эффективный
  • способ передачи

Протокол управления передачей TCP

  • Первый формат

    • серийный номер
    • Номер подтверждения
    • смещение данных
    • Подтвердить подтверждение
    • Синхронизировать СИН
    • Прекратить FIN
    • окно

  • Государственный аппарат

    • Установить связь трехстороннего рукопожатия
    • Разорви связь и помаши четыре раза

  • протокол ARQ

    • хватит ждать ARQ
    • Последовательный ARQ
    • Накопленное подтверждение

  • раздвижное окно

    • Нулевое окно

  • обработка перегрузок

    • алгоритм медленного старта
    • Алгоритм предотвращения перегрузок
    • быстрая ретрансляция
    • быстрое восстановление

Разница между UDP и TCP

HTTP

  • Общие коды состояния

    • 2xx
    • 3xx
    • 4xx
    • 5xx

  • Поля заголовка HTTP

  • Разница между POST и GET

HTTPS

  • TLS
  • Отличие от hTTP

HTTP2.0

  • бинарная передача
  • мультиплексирование
  • Сжатие заголовка
  • Сервер Push
  • QUIC
  • Отличия от HTTP1.0 и HTTP1.1

DNS

  • Можно ли отправить DNS с помощью TCP?

    • Условие выполнено: возвращенный ответ превышает 512 байт.
    • Условие: Зональная телепортация

  • передача зоны

    • полная передача зоны
    • Инкрементальная передача зоны

  • Процесс разрешения DNS

    • На локальном хосте есть сопоставление, и парсинг заканчивается

    • Нет сопоставления для локального хоста

      • Запрос локального DNS-сервера

        • На локальном DNS-сервере есть кеш, и разрешение закончилось

        • Локальный DNS-сервер не имеет кеша

          • итеративный запрос
          • рекурсивный запрос

  • Принцип преобразователя DNS

    • Парсер библиотеки сокетов

  • DDNS, технология NAT, проникновение во внутреннюю сеть

  • CDN

  • Балансировка нагрузки DNS

  • DNS угона, как это предотвратить

От входного URL до загрузки страницы

  • Информация о хосте конфигурации DHCP
  • ARP разрешает MAC-адреса
  • DNS разрешает доменные имена
  • HTTP-запрос, трехстороннее рукопожатие TCP и четыре волны
  • Получите HTML-документ и введите процесс принципа рендеринга браузера

разработка программного обеспечения

Git

  • remote
  • тяни-Толкай
  • тайник, перебазировать
  • сливаться, вишня
  • рефлог, сброс

xshell

Команды Linux

Конфигурация Nginx

хост изменить конфигурацию

структура библиотеки классов

Vue

  • Принцип маршрутизации

  • государственное управление

    • Принцип Vuex и основная идея исходного кода

  • ядро фреймворка

    • VDOM

      • Зачем нужен виртуальный DOM
      • Краткое введение и практика алгоритма виртуального DOM

    • MVVM

      • обнаружение грязных данных
      • захват данных
      • Прокси против Object.defineProperty

    • Жизненный цикл

      • новый экземпляр Vue()

      • Инициализация функции init ()

      • наблюдение за данными beforeCreatecreated

      • создал и передмонтировал, скомпилировал

        • parse

          • Регулярно анализируйте инструкции в шаблоне шаблона для создания абстрактного дерева синтаксиса AST.

        • optimise

          • Отметьте статические статические узлы, процесс пути, пропустите статические узлы различий, оптимизируйте производительность исправления

        • generate

          • Процесс преобразования абстрактного дерева синтаксиса AST в строку render function().

      • Между beforeMount и Mounted добавьте элемент $el в объект экземпляра vue и замените смонтированный элемент DOM.

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

      • Функция ловушки beforeDestory вызывается перед уничтожением экземпляра.

    • принцип nextTick

      • macrotasks

        • setImmediate
        • MessageChannel
        • setTimeout

      • microtasks

        • Promise

    • Принцип алгоритма сравнения

    • принцип часов

    • Разница между вычисляемым и методами

React

  • государственное управление

    • Redux

      • Интерпретация исходного кода и искусство программирования
      • Зачем возвращать новый магазин

    • Хокс (расширенное понимание)

      • Интерпретация исходного кода и дизайнерские идеи
      • С хуками следующее поколение управления состоянием реагирования

    • react-redux

      • Принцип провайдера
      • Принцип соединения

  • Связанное понимание

    • что такое промежуточное ПО
    • redux-thunk
    • redux-saga
    • redux-logger

  • Жизненный цикл

    • первый рендер
    • фаза обновления
    • этап удаления

  • setState

  • синтетическое событие

  • Хуки часть принципа API

    • useEffect
    • useState, useMemo
    • useCallback, useRef

  • Разница между компонентами класса и компонентами без состояния

  • Внутренний принцип shouldComponentUpdate

Аспекты безопасности

XSS

  • как атаковать
  • как защитить
  • CSP

CSRF

  • как атаковать

  • как защитить

    • SameSite
    • Token
    • Проверить реферера

защита паролем

  • С солью

структура данных

  • Куча

  • очередь

  • связанный список

  • Дерево

  • куча

алгоритм

  • временная сложность

  • битовая операция

    • сдвиг влево
    • Арифметический сдвиг вправо >>
    • побитовая операция

Сортировать

  • Пузырьковая сортировка
  • быстрая сортировка
  • сортировка выбором
  • Сортировка слиянием
  • сортировка кучей

связанный список

  • Обратный односвязный список

Дерево

  • Предварительный порядок, обратный порядок и обратный порядок двоичного дерева

  • Предыдущий и последующий узлы в порядке обхода

  • глубокий обход дерева

    • DFS
    • BFS

динамическое программирование

  • Фейболаки количество столбцов
  • 0-1 Проблема с рюкзаком
  • самая длинная возрастающая подпоследовательность

Общие шаблоны проектирования интерфейса

  • одноэлементный шаблон

  • модель публикации-подписки

  • прокси-режим

  • Режим политики

  • Шаблон декоратора

  • режим адаптера

  • Модель цепочки ответственности

оптимизация производительности

Связанные с сетью

  • Предварительное разрешение DNS

  • тайник

    • Сильный кеш
    • Согласовать кеш
    • Выберите подходящую стратегию кэширования

  • HTTP2.0

  • Предварительная загрузка

  • предварительный рендеринг

Оптимизация процесса рендеринга

  • ленивая загрузка
  • ленивое выполнение

оптимизация файлов

  • Оптимизация изображения

    • Рассчитать размер изображения (сжатие)
    • Оптимизация загрузки изображений

  • Другие оптимизации файлов

  • CDN

разное

  • Проект оптимизации Webpack
  • монитор

Webpack

  • В отличие от хрюканья и глотка

  • нагрузка по требованию

  • Принцип горячего обновления

  • Как настроить одностраничный, многостраничный

  • Common Loader, какую проблему решить

  • Распространенные плагины, какие проблемы они решают

  • Создание процесса, как улучшить скорость сборки

  • Как использовать webpack для оптимизации производительности

  • В чем разница между webpack-dev-сервером и nginx

Мягкие навыки

  • Узнайте больше об основах и расширьте свои знания

  • Выучите немного английский, читайте документы на английском

  • Прежде чем что-то делать, рисуйте идеи и проекты

    • Научитесь рисовать блок-схемы, прототипы диаграмм и т. Д.
    • Модульность, общие компоненты и т. д., прежде чем это делать, хорошо подумайте, сделайте обзор и дизайн-документ

  • Список ежедневных задач, придерживайтесь ежедневных и ежемесячных отчетов

  • Отразить и организовать

  • вклад сообщества

    • Настаивайте на качественном выпуске статей каждый месяц
    • Многие посетители, Github и т. Д., Активно упоминают проблемы, слияние запроса

  • Здоровый

    • фитнес два раза в неделю
    • баскетбол раз в неделю

будущее расширение

  • микро интерфейс

  • TS

  • WebGL

  • WebAssembly

  • Мультитерминал (umi-app/taro/weex)

Категории