Я бесчисленное количество раз уговаривал других, давал другим пить куриный бульон и помогал другим засыпать яму, но сам провалился в яму
1. Введение
При фронтенд-обучении многие сосредотачиваются на изучении кода (html, css, js). Или какие-то фреймворки, библиотеки (jquery, vue, react) или разные инструменты (webpack, gulp). В предыдущих статьях или в беседах с другими я предлагал другим больше практиковаться, а не просто писать код, глубоко понимать принципы и изучать содержащиеся в нем идеи. Но кроме знания кода, что еще следует расширить, чтобы изучить интерфейс? Ниже приводится краткий список и расположение недавно изученных ресурсов. Если у вас есть другие предложения, пожалуйста, оставьте сообщение в области комментариев.
Следующие знания, возможно, не должны быть слишком глубокими и подробными, но их необходимо понимать, чтобы, если вы столкнетесь с проблемами в разработке и решили проблемы, это была вишенка на торте.
2. http, https
Что касается внешнего интерфейса, то неизбежно иметь дело с интерфейсом. Помимо взаимодействия с фоном, запроса данных и рендеринга страниц. Для HTTP-запросов также необходимо иметь представление, например, о HTTP-протоколе, методе запроса, процессе запроса, коде состояния результата и т. д. Зная их, вы можете примерно понять, как возникла проблема, и как решить и избежать проблем, которые могут возникнуть во время разработки.
2-1. Запрос
Сначала запрос, включая заголовки запроса, строки запроса и тело запроса. В частности, см. код ниже
axios({
method: 'post',
url: '/user/12345',
headers:{
'Content-Type':'application/x-www-form-urlencoded'
},
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
как указано выше
methodиurlЭто строка запроса этого запроса (вот некоторая информация о строке запроса, на самом деле строка запроса также включает такую информацию, как версия протокола http).headersАтрибут in — это заголовок запроса, и все его атрибуты включены в запрос.headerВнутри это способ для сервера получить версию клиента, кеш и другую информацию.dataСоответствующим является тело запроса, которое обычно называют параметром.
2-2. Ответ
Когда запрос отправлен и получен ответ, информация может быть разделена на строку ответа, заголовок ответа и тело ответа.
строка ответа
Ссылаясь на запрос Каньюна в качестве примера, следующий код представляет собой строку ответа на запрос, возвращающую протокол HTTP и версию запроса, код состояния, статус запроса и другую информацию описания.
Request URL:https://www.kancloud.cn/yunye/axios/comment?article_id=234845&page=1
Request Method:GET
Status Code:200 OK
Remote Address:117.23.61.221:443
заголовок ответа
Формат заголовка ответа такой же, как у заголовка запроса, и возвращается такая информация, как версия и кеш.
тело ответа
Наиболее распространенным контактом является тело ответа, которое представляет собой данные, необходимые для ежедневной разработки. После того, как разработчик получит данные, они будут соответствующим образом обработаны.
2-3. О https
О https. Давайте сначала разберемся с недостатками http, https — это обработка шифрования на основе http.
1. Общение не зашифровано в виде обычного текста, и содержимое может быть перехвачено. 2. Личность собеседника не проверяется и может быть замаскирована 3. Целостность сообщения не может быть проверена и может быть изменена
2-4 Сопутствующая информация
Что касается http и https, то он кратко упоминается здесь Подробные рекомендации см. в следующей информации.
HTTP-протокол [подробно] — классические вопросы на собеседовании
3. Код статуса ответа
Упомянутый выше код состояния ответа также просто написан здесь. На фронтенде интерфейс запроса может соприкасаться с различными ситуациями, наиболее распространенными из которых являются следующие, как их решить – это конкретная проблема и конкретный анализ.
| код состояния | значение |
|---|---|
| 200 | запрос выполнен |
| 400 | Ошибка параметра |
| 403 | Запретить или запретить доступ (несанкционированный доступ) |
| 404 | адрес не существует |
| 405 | Метод в клиентском запросе запрещен (обычно метод запроса неверный) |
| 500 | Ошибка сервера |
| 502 | Время ожидания запроса истекло, неверный шлюз |
| 503 | Сервер перегружен или находится на обслуживании и не может ответить |
3-1. Ссылки
Подробные коды состояния см. в следующем разделе.
4. Фронтальная безопасность
4-1.XSS
XSS (Cross Site Scripting) — это атака с использованием межсайтовых сценариев, для того чтобы отличить CSS, сокращенно XSS. Метод атаки XSS заключается во вставке вредоносного кода JavaScript на веб-страницу.Когда пользователь просматривает веб-страницу, вставленный код выполняется для достижения цели атаки.
Одно из дополнительных приложений находится в некоторых общих интерактивных областях на веб-страницах. Например, в текстовом поле поиска, помимо ввода некоторых ключевых слов, вы также можете ввести некоторый код JavaScript.После того, как код будет нажат для поиска, код будет выполнен для достижения цели атаки. Следующий пример
<script>alert(document.cookie);</script>
Введите приведенный выше код в текстовое поле, а затем нажмите «Отправить», появится всплывающий файл cookie пользователя.
Предотвращение XSS
1. Отметьте важные файлы cookie как ТОЛЬКО HTTP, чтобы нельзя было вызывать код JavaScript, можно было вызывать только HTTP. Или сохраните важную информацию в сеансе.
2. Разрешить пользователю вводить только те данные, которые мы ожидаем. Например, в поле суммы потребления можно вводить только числа и десятичные точки.
3. Зашифруйте данные.
4. Отфильтруйте или удалите специальные теги HTML, отфильтруйте код JavaScript и т. д.
4-2.CSRF
CSRF (подделка межсайтовых запросов) — это подделка межсайтовых запросов. Доверенные пользователи XSS при использовании сайта, с различными XSS, CSRF, притворяясь доверенным пользователем, запрашивают на доверенном сайте, крадут информацию. Фактически злоумышленник похитил личность жертвы, отправив вредоносные запросы от имени жертв на сайт.
Идея CSRF-атаки
ЦитироватьПринцип атаки CSRF и защитакартинка для пояснения.
Изображение из:Принцип атаки CSRF и защита
Согласно шагам, посмотрев на картинку, я думаю, нетрудно понять, то есть файл cookie хранится на веб-сайте, а затем посещаются некоторые опасные веб-сайты, а затем опасные веб-сайты крадут информацию о пользователе. .
Защита CSRF
1. Добавьте значение хэша в форму, чтобы убедиться, что это действительно запрос, отправленный пользователем, а затем выполните проверку значения хэша на стороне сервера.
2. Код подтверждения. Каждое представление пользователя требует, чтобы пользователь ввел случайную строку в изображение в форме.
3. Измените и добавьте важную информацию, такую как пароли, операции с личной информацией, попробуйте использовать почту. Избегайте использования get для предоставления информации о URL-адресе.
4-3.Антирептилия
В отличие от предыдущей защиты от XSS и CSRF-атак, цель антисканирования — предотвратить кражу важных данных веб-сайта другими лицами, таких как объем транзакций электронной коммерции, статистика кассовых сборов веб-сайтов фильмов, обзоры музыкальных веб-сайтов и т. д.
Насколько велика дыра в мозгу фронтенд-инженеров для борьбы с краулерами?
5. Процесс рендеринга, принцип
1. Браузер анализирует URL-адрес через DNS, чтобы найти соответствующий IP-адрес;
2. Инициировать сетевой запрос к IP-адресу и провести сессию по протоколу http: клиент отправляет заголовок (заголовок запроса), а сервер возвращает заголовок (заголовок ответа)
3. По запросу сервер отправляет его в фон для обработки.После завершения обработки возвращаются данные файла.Браузер получает данные файла(HTML,JS,CSS,изображения и т.д.)возвращает страница (повторно отправляет запрос по URL внешней ссылки на странице) Получить)
4. После того, как браузер получает файл, он анализирует загруженный ресурс и соответствующую внутреннюю структуру данных (рендеринг веб-страницы).
6. Перекрестный домен
Междоменные в этом отношении, как правило, не так много контактов, мы сталкиваемся здесь, чтобы позволить фону разрешить междоменный (междоменный обмен ресурсами), но этот междоменный, не открытый по теме, ограниченный пространством, были следующие простые объяснения.
6-1. Анализ ситуации
| URL | инструкция | Разрешить ли общение |
|---|---|---|
| http://woohoo.example.com/ ах да, http://woohoo.example.com/horn/no. | То же доменное имя, другой файл или путь | позволять |
| http://woohoohoo.example.com:8000/ ах.то есть, http://woohoohoo.example.com/ нет.то есть | То же доменное имя, другой порт | не допускается |
| HTTP://woohoo.example.com/ а, да, https://woohoo.example.com/ нет, да | То же доменное имя, другой протокол | не допускается |
| http://oooooo.example.com/ ах.то есть http://192.168.2 спасибо.2 мал/нет.то есть | Доменное имя и доменное имя соответствуют одному и тому же ip | не допускается |
| http://woohoo.example.com/ да, http://small.example.com/ нет, да, http://domain.com/ от, да | Основной домен тот же, поддомены разные | не допускается |
| http://woohoo.example.com/ да, http://woohoo.demo.com/ нет. | разные доменные имена | не допускается |
6-2 Решения
Решений для междоменных в интернете много, можете обратиться и посмотреть. Хотя их так много, я использовал только два.
1. jsonp
2. документ.домен + iframe
3. location.hash + iframe
4. имя_окна + iframe
5. сообщение
6. Совместное использование ресурсов между источниками (CORS)
7. nginx-прокси
8. Прокси промежуточного программного обеспечения Nodejs
9. Протокол веб-сокета
6-3. Ссылки
Стандартные междоменные решения для внешнего интерфейса (полное)
Сводка междоменных знаний о внешнем интерфейсе
7. Оптимизация производительности
Вот только общее введение, конкретная операция зависит от вас, чтобы спросить поисковую систему.
7-1 Оптимизация первого экрана
Загрузка по требованию, предварительная загрузка или отложенная загрузка для изображений ниже сгиба, DNS, сжатие кода, объединение изображений, сокращение запросов и т. д.
7-2 Оптимизация алгоритма
Сократите избыточный код, контролируйте количество циклов, избегайте громоздких функций и т. д.
8.SEO
Как фронтенд-разработчик, вы должны иметь большой опыт работы с SEO. Что касается внешнего интерфейса, есть много моментов, на которые следует обратить внимание при SEO. Ниже приводится краткое описание.Среди проектов, которые я разработал, есть также несколько проектов, которые нуждаются в SEO.Мои личные предложения заключаются в следующем:
8-1.метатег
Определяемые ключевые слова, описание веб-сайта
< meta name="keywords" content="关键词1，关键词2" />
< meta name="description" content="描述词1，描述词2" />
8-2.Семантические HTML-теги
С одной стороны, теги html используются для достижения семантических целей, таких как использование ul и ol для списков. Таблицы используют таблицы и т. д. Не рекомендуется использовать div для всех элементов.
С другой стороны, максимально используйте семантические теги, предоставляемые html5.
предыдущее написание
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
Предлагаемое написание
<header></header>
<main></main>
<footer></footer>
8-3.html Уровень вложенности не должен быть слишком большим
Это сделано для того, чтобы максимально сгладить html и избежать чрезмерной вложенности, но это относительно сложно.
8-4. Четыре атрибута тега img нельзя опускать
<img src="" alt="图片描述" width="" height=""/>
Атрибут alt используется для того, чтобы изображение по-прежнему отображало текст, когда оно не отображается успешно из-за низкой скорости сети, неправильной ссылки src, браузер отключает изображение, пользователь использует программу чтения с экрана и т. д., так что пользователь может примерно знать, что такое образ.
Ширина и высота предназначены для предотвращения повторного рендеринга страницы или нарушения макета из-за невозможности отображения изображения.
8-5 Использование тегов h1-h6
1. Рекомендуется, чтобы на странице отображался только один тег h1, и он обычно используется в журнале веб-страницы.
2. Тег h2 обычно используется для основного заголовка страницы сведений. На странице сведений нет логотипа, а в заголовке используется h1. Для субтитров используйте h3.
3. Тег h1-h6 имеет свой вес, если он только для установки размера шрифта или выделения стиля, то h1-h6 не подходит.
8-6. Другие аспекты
Что касается других методов SEO, я видел такие методы в Интернете, но я не пробовал делать это сам в разработке, поэтому я просто перечислю их здесь для вашего ознакомления.
Избегайте тегов iframe
Важный контент Используйте display:none; с осторожностью
Добавьте атрибут title в тег a как можно больше
Используйте макет, чтобы сначала поставить важный HTML-код
Используйте атрибут «rel=nofollow», чтобы централизовать веса сайта.
В последнее время популярны разделение лицевых и оборотных сторон, а также одностраничные приложения. Но непонятно, как сделать SEO по поводу разделения фронта и бэка и одностраничных приложений (на данный момент я так понимаю, что это сделать нельзя). Наш текущий подход заключается в выполнении SEO-проектов, интерфейс отвечает только за обрезку изображения, а затем размещение данных в фоновом режиме, рендеринг на стороне сервера, а не внешний рендеринг.
9. Куча, стопка?
Стек автоматически выделяет место в памяти и освобождает его автоматически. Куча (heap) динамически выделяемой памяти, размер которой не фиксирован и не будет автоматически освобождаться.
Основные типы: Undefined, Null, Boolean, Number и String. К этим 5 основным типам данных можно обращаться напрямую. Они распределяются в соответствии со значением и хранятся в простом сегменте данных в памяти стека. Размер данных определяется и память размер пространства может быть выделен.
Следующий пример
let a=1;
let b=a;
если изменено б
b=2;
Хотя b изначально назначается a, a и b хранятся в памяти стека независимо друг от друга, и изменение одного из них не повлияет на другой.
Тип ссылки: то есть объект хранится в куче (heap) памяти, переменная фактически сохраняет указатель, этот указатель указывает на другое место.
Следующий пример
let a={name:'守候'};
let b=a;
если изменено б
b.name='sh';
При присвоении значения a, a и b совместно используют память кучи.Если a или b изменяется, значение памяти кучи изменяется напрямую, что повлияет на другое.
10. Отзывчивый и адаптивный
Я мало слышал об этих двух концепциях. Это может быть связано с тем, что мейнстримом является то, что ПК и мобильные телефоны — это два отдельных проекта, или потому, что эти две концепции должны стать работой дизайнерских чертежей. Последний раз я говорил с кем-то об этом год назад, когда был еще Четузаем.
А вот о разнице между этими двумя понятиями хорошо бы знать каждому, подсчитано, что почти понять ее можно, взглянув на две картинки ниже.
Изображение из:В чем разница между отзывчивым и адаптивным?(Данная статья также оценивается как плагиат, но так как я не могу найти источник картинки, то заявлю об этом)
Проще говоря:
Отзывчивый: веб-страница, которая меняется в зависимости от ширины экрана. Есть только один набор кодов. На отдельных экранах верстка некрасивая, но затраты на дизайн и разработку низкие.
Отзывчивый: веб-страница отображает различные эффекты в зависимости от изменения ширины экрана, и в основном существует два или более набора кодов. Отображает хорошие результаты на всех экранах, но затраты на проектирование и разработку высоки.
Адаптивный пример:Cтрип
Отзывчивый пример:segmentfault
11. Резюме
Причина, по которой я хочу опубликовать такую статью, чтобы обобщить эти концепции, заключается в том, что, когда я разговариваю с другими, всегда возникает концепция правильного и неправильного, когда я сталкиваюсь с ними. Поэтому недавно я нашел время, чтобы прочитать эти концепции и поделиться этими знаниями с вами. Эти концептуальные знания можно только понять, это полезно знать, некоторые из них необходимо глубоко понять, что зависит от индивидуальных потребностей. Наконец, если у вас есть какие-либо другие концепции, которые вы хотите порекомендовать, которые являются более важными и требуют понимания, оставьте сообщение в области комментариев.
------------------------- Великолепная разделительная линия --------------------
Хотите узнать больше, обратите внимание на мой публичный аккаунт WeChat: В ожидании книжного магазина