Слияние кода завершено, страница обновится автоматически
Рациональное использование тегов title, description, keywords. Семантически корректный HTML-код, соответствующий стандартам W3C: семантический код облегчает понимание поисковыми системами. Важные элементы HTML-кода должны располагаться в начале страницы: поисковые системы извлекают информацию сверху вниз, некоторые системы ограничивают длину извлекаемого контента, поэтому важно, чтобы ключевые элементы были доступны. Важные элементы не следует выводить с помощью JavaScript: поисковые роботы не выполняют JavaScript для извлечения контента. Минимизация использования iframe: поисковые системы не извлекают контент внутри iframe. Необходимость добавления атрибута alt для всех изображений, кроме декоративных. Улучшение скорости загрузки сайта: скорость загрузки является важным фактором ранжирования поисковых систем. Дополнительная литература: [«Основы SEO»](./01. ОсновыSEO. md)
Атрибут title содержит дополнительную информацию о элементе, которая отображается при наведении курсора. Атрибут alt предназначен для тега img и содержит альтернативное описание изображения. Отображается при невозможности загрузки изображения. Поисковые системы уделяют этому атрибуту особое внимание. ### Какие виды CSS-селекторов существуют? ! CSS-селекторы Дополнительная литература: [«Классификация CSS-селекторов»](./02. КлассификацияCSS-селекторов.md)
Концепция: объединение нескольких маленьких изображений в одно. Использование свойств background-position и размеров элемента для отображения нужного фона.
display: none и visibility: hidden?display: none полностью исключает элемент из дерева отрисовки, не занимая места; visibility: hidden исключает элемент из дерева отрисовки, но элемент продолжает занимать место, просто контент становится невидимым. display: none является ненаследуемым свойством, поэтому элементы-потомки исчезают вместе с исключенным элементом; visibility: hidden является наследуемым свойством, поэтому элементы-потомки исчезают из-за наследования hidden, но могут быть восстановлены путем установки visibility: visible.
Изменение свойства display для элементов в потоке документа обычно приводит к перераспределению элементов. Изменение свойства visibility приводит только к перерисовке текущего элемента.
Скринридеры не читают содержимое элементов с display: none; они читают содержимое элементов с visibility: hidden.Стили самого близкого предка имеют более высокий приоритет, чем стили других предков. "Прямые стили" имеют более высокий приоритет, чем "предковые стили".
link — это HTML-способ, @import — CSS-способ. link поддерживает параллельную загрузку, @import при избыточном вложении приводит к последовательной загрузке и FOUC. link может указывать альтернативные стили через rel="alternate stylesheet". Браузеры поддерживают link раньше, чем @import, что позволяет скрывать стили от старых браузеров с помощью @import. @import должен располагаться перед правилами стилей и может использоваться для ссылки на другие файлы CSS. В целом link предпочтительнее @import.
! [Модель коробки CSS](. /assets/web-css-Модель коробки CSS. jpg) Свойства: содержимое (content), заполнение (padding), граница (border), отступ (margin). Дополнительная информация [«Модель коробки CSS»](. /04. CSS-Модель коробки. md)
Вызвать блочное форматирование контейнера (см. раздел блочное форматирование). Установить псевдоэлемент контейнера для очистки плавающих элементов.
/**
* Используется в современных браузерах
* 1 Содержимое пустое для исправления проблемы с Opera при использовании атрибута contenteditable
* для очистки плавающих элементов
* 2 Использование display с table вместо block: предотвращает складывание отступов контейнера и
* дочерних элементов, что позволяет эффективно очистить плавающие элементы.
```* zoom: 1;
**/```css
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
Для центрирования элемента, который является текстом, изображением или другими инлайн-элементами, используется установка свойства text-align: center для родительского элемента.
Для элементов с фиксированной шириной и блочными элементами центрирование можно выполнить, установив значения свойства margin-left и margin-right в auto.
Для блочных элементов с нефиксированной шириной центрирование можно выполнить, установив свойство float в left.
Дополнительная информация доступна в [«CSS Центрирование по горизонтали»](. /05. CSS_水平居中设置. md)
Для элемента с одной строкой текста и определенной высотой родительского элемента. Для элемента с несколькими строками текста и определенной высотой родительского элемента. Дополнительная информация доступна в [«CSS Центрирование по вертикали»](. /06. CSS_垂直居中设置. md)
Традиционное решение для размещения, основанное на модели коробки, использует свойство display + position + float. Это решение неудобно для некоторых специальных размещений, например, для центрирования по вертикали.
Flex размещение позволяет легко, полно и адаптивно выполнять различные размещения страниц.В настоящее время это решение поддерживается всеми браузерами, что позволяет безопасно использовать эту функцию.
Дополнительная информация доступна в [«Основные концепции Flex размещения»](. /07. flex布局的基本概念. md)
| Значение | Описание |
|---|---|
| absolute | Создает абсолютно позиционированный элемент относительно первого родительского элемента, который не имеет позиционирования static. Положение элемента определяется свойствами left, top, right и bottom. |
| fixed | Создает абсолютно позиционированный элемент относительно окна браузера. Положение элемента определяется свойствами left, top, right и bottom. |
| relative | Создает относительно позиционированный элемент относительно его обычного положения. Например, left:20 добавляет 20 пикселей к положению элемента слева. |
| static | Значение по умолчанию. Элемент не позиционирован и находится в обычном потоке (игнорируя свойства top, bottom, left, right или z-index). |
| inherit | Указывает, что значение свойства position должно наследоваться от родительского элемента. |
| Дополнительная информация доступна в [«Учебник CSS Position»](. /08. CSS-Position学习. md) |
<script> как можно ближе к концу тега <body>, чтобы минимизировать влияние на загрузку всего документа.
Дополнительная информация «Оптимизация производительности JavaScript: загрузка и выполнение»
Дополнительная информация «Типы данных и структуры данных в JavaScript»
Методы для получения узлов: getElementById, getElementsByClassName, getElementsByTagName, getElementsByName, querySelector, querySelectorAll. Методы для работы с атрибутами элементов: getAttribute, setAttribute, removeAttribute. Методы для добавления, удаления и изменения узлов: appendChild, insertBefore, replaceChild, removeChild, createElement.
Дополнительная информация «Часто используемые API для работы с DOM в JavaScript»
Методы для работы со строками можно разделить на несколько категорий: методы для получения символов (charAt, charCodeAt, fromCharCode), методы для поиска (indexOf, lastIndexOf, search, match), методы для извлечения подстрок (substring, slice, substr), методы для замены (replace), методы для разделения (split), методы для преобразования регистра (toLowerCase, toUpperCase).### Какие методы используются для извлечения подстрок в JavaScript? В чем их различия?
Методы для извлечения подстрок в JavaScript включают substring, slice и substr. Методы substring и slice требуют указания начального и конечного индексов. Разница между ними заключается в том, как они обрабатывают отрицательные значения. Метод substr требует указания начального индекса и количества символов для извлечения.
setTimeout и setInterval
Методы setTimeout и setInterval используются для выполнения функций с задержкой. Основное различие заключается в том, что setTimeout выполняет функцию один раз после заданного интервала времени, в то время как setInterval выполняет функцию повторно каждые n миллисекунд.Метод setTimeout выполняет функцию один раз после заданного интервала времени, в то время как метод setInterval выполняет функцию повторно каждые n миллисекунд до тех пор, пока не будет вызван метод clearInterval. В плане использования памяти, setTimeout добавляет только одну задачу в очередь, что предотвращает утечку памяти. В случае setInterval, если время выполнения кода не учитывается, могут возникнуть проблемы с утечкой памяти из-за одновременного выполнения нескольких задач.
this указывает на новый объект)Создание экземпляра объекта XMLHttpRequest, вызов метода open для настройки HTTP-метода, URL и асинхронности для этого AJAX-запроса. В большинстве случаев мы выбираем асинхронный режим. Затем вызывается метод send для отправки AJAX-запроса, который может задавать тело отправляемого сообщения. Слушание события readystatechange для определения состояния AJAX-запроса, которое может быть одним из четырех значений (0, 1, 2, 3, 4). Когда состояние равно 4, это означает, что данные были получены, и можно использовать свойство status для проверки успешности запроса.
var xhr = new XMLHttpRequest();
xhr.open('get', 'aabb.php', true);
xhr.send(null);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
console.log(xhr.responseText);
}
}
}
``` ```
### Что такое политика одного источника
Политика одного источника означает, что только страницы с одним и тем же источником могут обмениваться данными, такими как cookie. Один источник означает, что страница имеет одинаковый протокол, домен и порт. Если хотя бы одно из этих значений отличается, страницы не являются одним источником. Политика одного источника обеспечивает безопасность веб-страниц.
Дополнительная информация [«Политика одного источника в браузере»](. /12. Политика одного источника в браузере. md)
### Как решить проблему кросс-доменного доступа
- Использование JSONP для кросс-доменного доступа
- Использование document. domain и iframe для кросс-доменного доступа
- Использование location. hash и iframe
- Использование window. name и iframe для кросс-доменного доступа
- Использование postMessage для кросс-доменного доступа
- Использование кросс-доменного资源共享 (CORS)
- Использование прокси-сервера nginx для кросс-доменного доступа
- Использование прокси-сервера nodejs для кросс-доменного доступа
- Использование протокола WebSocket для кросс-доменного доступа
Дополнительная информация [«Общие решения для кросс-доменного доступа в фронтенде»](. /13. Общие решения для кросс-доменного доступа в фронтенде. md)
### Какие действия могут вызвать утечку памяти
- Утечка памяти из-за глобальных переменных
- Утечка памяти из-за замыканий
Замыкание — это комбинация функции и её лексического окружения. Применение
Мы знаем, что до ES6 JavaScript не имел понятия класса и наследования. JavaScript использует прототипы для реализации наследования. В JavaScript-конструкторе по умолчанию есть свойство prototype, значение которого является объектом. Этот объект prototype также имеет свойство constructor, которое указывает на сам конструктор. Каждый экземпляр имеет свойство proto, которое указывает на объект prototype. Это можно назвать неявным прототипом. При использовании метода экземпляра сначала проверяется наличие этого метода в экземпляре, и если его нет, то поиск продолжается в объекте prototype.### Понимание модульности в JavaScript До появления ES6 в JavaScript не было стандартного понятия модульности, что приводило к проблемам глобального загрязнения при многопользовательской разработке. Раньше мы использовали немедленно исполняемые функции и объекты для минимизации глобальных переменных. Позже сообщество предложило стандарты AMD и CMD для решения этой проблемы. Отличие от CommonJS в Node.js заключается в том, что все модули на сервере находятся на жестком диске, и их загрузка и чтение практически не требуют времени. В браузерах загрузка зависит от скорости интернета, поэтому используется асинхронная загрузка. В стандарте AMD используется define для определения модуля и require для его загрузки. В ES6 также представлен стандартный метод загрузки модулей с использованием export и import.
Используйте событие onload для успешной загрузки и событие onerror для неудачной загрузки.### Как реализовать ленивую загрузку Ленивая загрузка означает загрузку контента по мере необходимости пользователя. Это означает, что контент загружается, когда пользователь почти достиг конца текущего контента. Эта техника часто используется для загрузки изображений. Мы определяем, когда пользователь почти достиг нижней части страницы, и загружаем дополнительный контент. При загрузке большого объема контента можно использовать фрагменты для оптимизации, так как большинство загрузок происходит при прокрутке и использовании колеса мыши, что может вызвать повторное срабатывание. Это можно оптимизировать с помощью функции тайм-аута.### Принцип работы JSONP Создайте обратный вызов функции, затем вызовите эту функцию на удаленном сервере, передавая JSON-данные в качестве параметра, и завершите обратный вызов.
Дополнительное чтение «Принцип работы JSONP и его простая реализация»### Чтение и запись Cookie
document.cookie = "name=oeschger";
document.cookie = "favorite_food=tripe";
alert(document.cookie);
// Отображается: name=oeschger;favorite_food=tripe
document.cookie = "test1=Hello";
document.cookie = "test2=World";
var myCookie = document.cookie.replace(/(?:(?:(^|.*;\s*)test2\s*=\s*([^;]*).*$)|^.*$)/, "$2");
alert(myCookie);
// Отображается: World
Постепенное усиление (англ. Progressive enhancement) — это стратегия веб-дизайна, которая акцентирует внимание на доступности, семантических HTML-метках, внешних таблицах стилей и скриптовых технологиях. Постепенное усиление использует веб-технологии в слоях, чтобы позволить всем пользователям получить доступ к базовым содержимому и функциям веб-страницы с помощью любого браузера или интернет-соединения. В то же время, более продвинутым браузерам или большим пропускным способностям предоставляется улучшенная версия этих страниц.
Ограничения одновременной загрузки для одного домена, кэширование статических ресурсов с использованием 304 (принцип If-Modified-Since и Etag), объединение нескольких маленьких иконок с использованием техники позиционирования, чтобы снизить количество запросов, объединение статических ресурсов в один запрос и сжатие, CDN, отложенные загрузки статических ресурсов, предварительная загрузка, keep-alive, оптимизация CSS в верхней части страницы и JavaScript в нижней части (принципы).
ES6, модульность, сборка, инструменты сборки, Vue, React, Webpack, фронтенд MVVM.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )