Собираем песок в башню, каждый день добиваемся небольшого прогресса.
⭐ Введение в колонку
Путешествие по фронтенду: исследуйте чудесный мир веб-разработки. Не забудьте нажать на ссылку выше или справа, чтобы подписаться на эту колонку. Geometry отправит вас в путешествие по фронтенду.
Добро пожаловать в путешествие по фронтенду! Эта колонка создана специально для тех, кто интересуется веб-разработкой и только начинает работать в области фронтенда. Независимо от того, являетесь ли вы новичком или разработчиком с некоторыми базовыми знаниями, здесь вам будет предоставлена систематическая и удобная платформа для обучения. В этой колонке мы будем обновлять ее каждый день в виде вопросов и ответов, предоставляя вам избранные знания по интерфейсу и ответы на часто задаваемые вопросы. С помощью формата вопросов и ответов мы надеемся более непосредственно ответить на вопросы читателей о интерфейсных технологиях и помочь каждому постепенно заложить прочную основу. Будь то HTML, CSS, JavaScript или различные распространенные платформы и инструменты, мы объясним концепции простым и понятным способом, а также предоставим практические примеры и упражнения для закрепления изученного. В то же время мы также поделимся некоторыми практическими советами и лучшими практиками, которые помогут вам лучше понять и применить различные технологии во фронтенд-разработке.
Мало того, мы также будем регулярно запускать практические руководства по проектам, чтобы вы могли применить полученные знания в реальной разработке. Благодаря практике реальных проектов вы сможете лучше понять рабочий процесс и методологию фронтенд-разработки, а также развить свои собственные способности решать проблемы и развиваться самостоятельно. Мы считаем, что только путем постоянного накопления и практики мы можем по-настоящему овладеть технологией фронтенд-разработки. Итак, будьте готовы к испытаниям и смело отправляйтесь в это увлекательное путешествие! Если вы ищете смену карьеры, повышение квалификации или реализацию личных интересов, мы стремимся предоставить вам лучшие учебные ресурсы и поддержку. Давайте вместе исследовать удивительный мир веб-разработки! Присоединяйтесь к началу пути к началу работы с интерфейсом и станьте выдающимся интерфейсным разработчиком! Давайте начнем путешествие по интерфейсу . На рисунке ниже показаны другие столбцы, которые блоггер выводит в дополнение к этому столбцу; (Пропустите изображение ниже и приступим к сегодняшнему тексту!!!)
⭐ Цикл событий браузера
Цикл событий браузера — это часть среды выполнения JavaScript, которая управляет асинхронными операциями и обработкой событий. Цикл событий браузера является однопоточным, что означает, что он может выполнять только одну задачу за раз, но с помощью модели асинхронного программирования он может обрабатывать несколько задач, не блокируя основной поток.
Основная задача цикла событий браузера — прослушивать очередь событий и выполнять в ней задачи в соответствии с приоритетом. Ниже приведен основной поток цикла событий браузера:
⭐ Выполнение задач по синхронизации
Цикл событий браузера сначала выполняет задачи синхронизации в основном потоке, включая глобальный код, вызовы функций и т. д. Задачи синхронизации выполняются в том порядке, в котором они указаны в коде.
⭐ Обработка очереди микрозадач (Microtask Queue)
После выполнения задачи синхронизации браузер обрабатывает задачи в очереди микрозадач. Микрозадачи обычно включают в себя следующие источники:
thenФункция обратного вызова, зарегистрированная методом Promise .async/awaitawaitКод, следующий за выражением в функции .- Функция обратного вызова наблюдателя изменений DOM (MutationObserver).
Микрозадачи имеют более высокий приоритет выполнения, чем макрозадачи, поэтому задачи в очереди микрозадач будут выполнены до следующего цикла цикла событий.
⭐ Обработка очереди макрозадач (Macrotask Queue)
После выполнения задач в очереди микрозадач браузер обрабатывает задачи в очереди макрозадач. Задачи в очереди макрозадач включают в себя следующие источники:
- Функция обратного вызова таймера (
setTimeoutиsetIntervalт. д.). - Функция обработки событий взаимодействия с пользователем (щелчок мыши, событие клавиатуры и т. д.).
- Функция обратного вызова для завершения сетевого запроса (
fetchиXMLHttpRequestт. д.). requestAnimationFrameФункция обратного вызова активно вызывается .- Задерживает выполнение
<script defer>кода в тегах скрипта ( ).
Задачи в очереди макрозадач добавляются в разные очереди в соответствии с их источниками, например очередь задач таймера, очередь задач взаимодействия с пользователем и т. д. Цикл событий браузера выбирает задачи в очереди с наивысшим приоритетом и выполняет их. Это обеспечивает оперативность реагирования на события взаимодействия с пользователем, поскольку задачи взаимодействия с пользователем имеют более высокий приоритет.
⭐ Повторить цикл
Цикл событий браузера будет неоднократно выполнять вышеуказанные шаги, и каждый цикл называется циклом цикла событий. В цикле событий браузер обрабатывает задачи в очереди микрозадач и очереди макрозадач, пока обе не станут пустыми.
Механизм цикла событий браузера обеспечивает однопоточную природу JavaScript, а также поддерживает асинхронное программирование, позволяя обрабатывать асинхронные операции, такие как сетевые запросы, таймеры и взаимодействия с пользователем. Это позволяет веб-приложениям оставаться отзывчивыми и гибкими, не блокируя основной поток.
⭐Напишите в конце
Данная рубрика предназначена для широкого круга читателей, и подойдет новичкам фронтенда, или тем, кто не изучал фронтенд и интересуется фронтендом, или студентам бэкенда, которые хотят лучше проявить себя и расшириться. некоторые знания о интерфейсе во время процесса собеседования, поэтому, если у вас есть основы интерфейса и вы следите за этой колонкой, это также может помочь вам найти и в значительной степени заполнить пробелы. Поскольку блоггер сам создает контент вывод, если в статье есть какие-либо недостатки, вы можете связаться со мной через левую часть главной страницы. Давайте вместе добиваться прогресса, и в то же время я также рекомендую всем несколько рубрик. Заинтересованные партнеры могут подписаться: Кроме того к столбцам ниже, вы также можете перейти на мою домашнюю страницу, чтобы увидеть другие столбцы;
Интерфейсные игры (бесплатно) Эта рубрика перенесет вас в мир, полный творчества и веселья. Используя базовые знания HTML, CSS и JavaScript, мы вместе создадим различные интересные страничные игры. Независимо от того, являетесь ли вы новичком или имеете опыт фронтенд-разработки, эта колонка для вас. Мы начнем с основ и познакомим вас с навыками, необходимыми для создания страничной игры. С помощью практических примеров и упражнений вы научитесь использовать HTML для построения структуры страницы, использовать CSS для украшения интерфейса игры и использовать JavaScript для добавления в игру интерактивных и динамических эффектов. В этой статье мы рассмотрим различные типы мини-игр, в том числе игры-лабиринты, разрушение кирпичей, змею, тральщик, калькуляторы, сражения на самолетах, крестики-нолики, головоломки, лабиринты и многое другое. Каждый проект проведет вас через процесс сборки в кратких и ясных шагах с подробными объяснениями и примерами кода. В то же время мы также поделимся некоторыми советами и рекомендациями по оптимизации, которые помогут вам улучшить производительность страницы и удобство для пользователей. Если вы ищете интересный проект для тренировки своих навыков интерфейса или интересуетесь разработкой страничных игр, рубрика «Внешние игры» станет вашим лучшим выбором. Нажмите, чтобы подписаться на рубрику фронтенд-игр
Прозрачное руководство по Vue3 [От нуля до единицы] (Платное) Добро пожаловать в прозрачное руководство по Vue3! Цель этой статьи — предоставить каждому исчерпывающие технические знания, связанные с Vue3. Если у вас есть некоторый опыт работы с Vue2, эта статья поможет вам освоить основные концепции и использование Vue3. Мы начнем с нуля и шаг за шагом проведем вас по созданию полноценного приложения Vue. С помощью практических примеров и упражнений вы научитесь использовать синтаксис шаблонов Vue3, разработку компонентов, управление состоянием, маршрутизацию и другие функции. Мы также представим некоторые расширенные функции, такие как Composition API и Teleport, которые помогут вам лучше понять и применить новые функции Vue3. В этой колонке мы кратко и ясно покажем вам каждый проект с подробными пояснениями и примером кода. В то же время мы также поделимся некоторыми общими проблемами и решениями при разработке Vue3, чтобы помочь вам преодолеть трудности и повысить эффективность разработки. Если вы хотите углубленно изучить Vue3 или вам нужно подробное руководство по созданию внешнего проекта, подробная колонка с учебными пособиями по Vue3 станет для вас незаменимым ресурсом. Нажмите, чтобы подписаться на колонку Vue3 Transparent Tutorial [От нуля к единице]
Руководство по началу работы с TypeScript (бесплатно) — это статья, призванная помочь вам быстро начать работу и освоить технологии, связанные с TypeScript. С помощью краткого и ясного языка и богатого примера кода мы подробно объясним основные концепции, синтаксис и особенности TypeScript. Независимо от того, являетесь ли вы новичком или опытным разработчиком, здесь вы можете найти подходящий вам путь обучения. Мы подробно рассмотрим все аспекты: от основных функций, таких как аннотации типов, интерфейсы и классы, до модульной разработки, настройки инструментов и интеграции с общими интерфейсными платформами. Прочитав эту колонку, вы сможете повысить надежность и удобство сопровождения кода JavaScript, а также обеспечить лучшее качество кода и эффективность разработки ваших проектов. Давайте вместе отправимся в это захватывающее и сложное путешествие по TypeScript! Нажмите, чтобы подписаться на колонку «Руководство по началу работы с TypeScript»
