Внешний интерфейс [базовые знания] ⑥Оптимизация производительности, веб-безопасность, общие команды Linux

предисловие

В соответствии с темами, организованными курсом «Быстро получить передовые технологии и соответствовать требованиям к собеседованию в Big Factory» на MOOC.com, мы будем обновлять его одну за другой. Если вы считаете, что усвоили соответствующие моменты этой статьи, вы можете проверить мои предыдущие статьи по теме.

Часто задаваемые вопросы

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

1.1 Принципы

• ①Используйте больше памяти, кэша или другие методы
• ②Уменьшите количество вычислений ЦП и сократите время загрузки сети.
• ③Оптимизация производительности, подходящая для любого программирования - экономия времени

1.2 Ускорить загрузку

• ①Уменьшить объем ресурсов: сжать код
• ②Сократите количество посещений: код слияния, рендеринг SSR на стороне сервера, кэширование
• ③ Используйте более быструю сеть: CDN

1.3 Сделайте рендеринг быстрее

• ①CSS размещается в голове, JS размещается внизу тела
• ② Как можно скорее начните выполнение JS и активируйте его с помощью DOMContentLoaded.
• ③Отложенная загрузка (отложенная загрузка изображения, загрузка большего слайда вниз, пейджер)
• ④Кэшировать запрос DOM
• ⑤ Частые операции DOM, объединенные вместе и вставленные в структуру DOM.
• ⑥ Распространенные методы оптимизации производительности, такие как дросселирование и защита от сотрясений.

1.4 Кэш

• ① Добавьте суффикс хеша к статическим ресурсам и рассчитайте хэш в соответствии с содержимым файла.
• ②Содержимое файла не меняется, хеш не меняется, URL не меняется
• ③Если URL-адрес и файл остаются неизменными, автоматически активируется механизм HTTP-кеширования и возвращается ошибка 304.

1.5 SSR

• ① Рендеринг на стороне сервера: загружайте веб-страницу и данные вместе и визуализируйте их вместе.
• ② Non-SSR (разделение внешнего и внутреннего интерфейса): сначала загрузите веб-страницу, затем загрузите данные, а затем отобразите данные.

1.6 Ленивая загрузка

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

1.7 Стабилизатор и его упаковка

"Стабилизатор"

• Anti-shake, как следует из названия, предотвращает дрожание, чтобы не перепутать одно событие с несколькими событиями, набор текста на клавиатуре — это операция анти-дрожания, с которой вы будете сталкиваться каждый день.
• "[Защита от сотрясения фокусируется на очистке]"(После прочтения дроссельной заслонки против сотрясений, а затем осознайте этот момент)

"Сценарии применения"(чтобы помочь вам лучше понять анти-тряску)

• ① Войдите в систему, отправьте текстовые сообщения и другие кнопки, чтобы пользователи не нажимали слишком быстро, чтобы отправлялись несколько запросов, и требуется защита от сотрясений.
• ②При изменении размера окна браузера количество изменений слишком частое, что приводит к слишком большому количеству вычислений.
• ③Текстовый редактор сохраняет в режиме реального времени и сохраняет через 1 секунду без каких-либо изменений.
• ④Событие изменения будет запущено только тогда, когда ввод данных пользователем завершится или приостановится.Подобно вводу информации в поле поиска, содержимое, которое может быть найдено, появится через 1 секунду после остановки.

"Пакет защиты от дрожания почерка"

function debounce ( fn , delay = 500 ) {
 
    let timer = null // timer在闭包中，不对外暴露，以免不小心获取进行修改造成错误

    return function () {
        if( timer ){
            clearTimeout( timer )
        } // 清空定时器

        timer = setTimeout( () => {

            fn.apply( this , arguments )

            timer = null

        } , delay )
    }

}

1.8 Дросселирование и его упаковка

"дросселирование"

• Как следует из названия, он управляет потоком воды. Контролируйте частоту событий, например, раз в секунду или даже раз в минуту. Аналогично текущему ограничению, контролируемому сервером и шлюзом
• "[Дросселирование — ключ к блокировке]"

"Сценарии применения"(чтобы помочь вам лучше понять анти-тряску)

• ①событие прокрутки, которое контролирует расчет информации о местоположении каждую секунду
• ②Браузер воспроизводит событие и каждую секунду контролирует расчет информации о ходе выполнения.
• ③ При перетаскивании элемента вам необходимо в любой момент получить положение перетаскивания элемента и напрямую использовать событие перетаскивания, которое будет часто срабатывать, что может легко привести к зависанию. В настоящее время используется дросселирование, независимо от того, насколько высока скорость перетаскивания, оно управляется так, чтобы срабатывать каждые 100 мс.

"Рукописный дроссельный пакет"

function throttle ( fn , delay = 100 ) {

    let timer = null

    return function (){

        if( timer ){
            return
        }

        timer = setTimeout( () => {

            fn.apply( this , arguments ) // 这里不能用fn（），会报错，无法获得事件源对象event

            timer = null

        } , delay ) // delay设置的时间内重复执行的定时任务会被清空
    }
}

1.9 Почему для защиты от сотрясений используется clearTimeout(timer), а троттлинг возвращается?

• Anti-shake срабатывает, когда интервал срабатывания больше времени, поэтому каждый раз, когда интервал меньше времени, последний таймер должен быть очищен, а дросселирование независимо от того, сколько раз оно срабатывает по времени, оно будет срабатывать только один раз каждый раз, поэтому используйте return
• Предполагая, что время = 100 мс, человек вводит символ каждые 50 мс 10 раз подряд, то есть после 500 мс анти-тряска сработает только один раз, а дросселирование сработает 5 раз. Зачем? Поскольку защита от сотрясений означает, что событие запускается после остановки ввода на 100 мс, а регулирование должно контролировать 100 мс для запуска события, поэтому защита от сотрясений срабатывает один раз, а регулирование срабатывает пять раз. (комбинированный"Поймите, что ключом к предотвращению сотрясений является очистка, а ключом к дросселированию — блокировка."эти две фразы)

2. Веб-безопасность

2.1 XSS-атака

"XSS-атака с межсайтовым запросом"
Ниже приведены возможные атаки с внедрением XSS.

• Вредоносный контент внедряется в виде тегов сценария в текст, встроенный в HTML.
• Во встроенном JavaScript объединенные данные преодолевают первоначальные ограничения (строки, переменные, имена методов и т. д.).
• В атрибутах тегов вредоносный контент содержит кавычки, чтобы обойти ограничения значений атрибутов и внедрить другие атрибуты или теги.
• В теге href, src и других атрибутах включите исполняемый код, такой как javascript:
• Внедрять неконтролируемый код в такие события, как onload, onerror, onclick и т. д.
• В атрибуте и теге стиля включите такой код, как background-image:url("javascript:..."); (новые версии браузеров уже могут это предотвратить)
• В атрибуте и теге стиля включите код выражения CSS, такой как выражение (...) (новые версии браузеров смогли предотвратить)

  "Сценарии XSS-атак"

• Сайт блога, на котором я публикую блог, который встраивает<script>Скрипт, содержимое скрипта: получить куки, отправить на мой сервер (сервер взаимодействует с междоменными), куки человека, который их читает, будут украдены

"Предотвращение XSS"

• ①Замените специальные символы, такие как<стали<,>стали>
• ②Тогда<script>станет<script>, отображается напрямую, а не выполняется как скрипт
• ③Передняя часть должна быть заменена, а задняя часть также должна быть заменена, двойная страховка.
• ④Основной интерфейсный фреймворк принял меры предосторожности

2.2 CSRF-атака

"Маскарад межсайтовых запросов CSRF"

"Сценарии CSRF-атак"

• Вы делаете покупки и видите определенный товар, идентификатор продукта равен 100. Платный интерфейсxxx.com/pay?id=100Но верификации нет (сейчас платеж будет верифицирован, тут поясняется, значит не верифицируется). Я злоумышленник, вижу товар, ID 200. Я хочу, чтобы вы отправили электронное письмо, заголовок электронного письма очень привлекателен. Но на самом деле тело спрятано<img src='xxx.com/pay?id=200'>(И есть другие платные скрипты для выполнения) Вы нажали, чтобы просмотреть это письмо, и вы помогли мне купить предмет с идентификатором 200.

"Предотвращение CSRF"

• Используйте почтовый интерфейс
• Добавьте подтверждение, такое как пароль, код подтверждения SMS, отпечаток пальца и т. д.

3. Описание URL из процесса ввода, чтобы сделать всю страницу

"процесс загрузки"

• ①Разрешение DNS: доменное имя -> IP-адрес
• ②Браузер инициирует HTTP-запрос к серверу в соответствии с IP-адресом.
• ③ Сервер обрабатывает HTTP-запрос и возвращает его браузеру.

"процесс рендеринга"

• ①Создать DOM-дерево в соответствии с HTML-кодом.
• ② Создание CSSOM на основе кода CSS.
• ③Интегрируйте дерево DOM и CSSOM для формирования дерева рендеринга.
• ④ Рендеринг страницы в соответствии с деревом рендеринга
• ⑤ встреча<script>Затем приостановите рендеринг, сначала загрузите и выполните код JS (код JS может изменить структуру DOM и выполнить повторный рендеринг) и продолжить после завершения.
• ⑥ Пока не завершится рендеринг дерева рендеринга.

4. Общие команды Linux

"Операции с файлами и папками"

• ls xxxПросмотр папок (плитка)
• ls -a(все средства, включая скрытые файлы, начинающиеся с .)
• llПросмотр папок (список)
• ll xxx(Просмотреть файлы в папке xxx)
• mkdir xxx(создать папку ххх)
• rm -rf xxx(удалить xxx и все его подфайлы)
• cd xxx(Введите каталог xxx)
• mv abc xxx(переименовать файл abc в файл xxx)
• mv xxx sss路径(XXX переместите файл в каталог Path SSS)
• cp a.js a1.js(Копировать, копировать a.js в a1.js)
• rm a1.js(удалить один файл напрямую)
• touch d.js(Новый файл d.js)
• vi d.js(Создать или ввести файл d.js и ввести редактирование)
• cat xxx(Просмотреть все содержимое файла xxx, но не входить)
• head xxx(Проверьте первые несколько строк файла xxx и не вводите)
• grep "babel" xxx(Ищите содержимое babel в файле xxx)

"Работа с редактором Vim"

• Нажмите i, чтобы начать редактирование
• Esc для выхода из режима редактирования
• :wсохранить написать
• :qпокидать
• :wq(выйти после сохранения)
• :q!(принудительно выйти без сохранения)

напиши в конце

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

Другие статьи

• Базовые знания о внешнем интерфейсе ⑤—— Http, Ajax, междоменные
• Базовые знания о внешнем интерфейсе ④—— События и DOM
• Лицевая сторона основ ③-- асинхронная (название сцены интервью)
• Базовые знания о внешнем интерфейсе ②—— Объем и закрытие (вопросы сцены интервью)
• Базовые знания о внешнем интерфейсе ①——CSS-вопросы на собеседовании
• Серия глютена ① - односторонние вопросы интервью DiDi SP
• Серия глютена ②—— Стажеры DiDi

В этой статье используетсяmdniceнабор текста