Квалифицированный (отличный) фронтенд должен прочитать эти статьи

предисловие

Оригинальный адрес:Nealyang/PersonalBlog

Действительно, есть некоторые заголовки вечеринок. Причина в том, что в группе WeChat приятель спросил меня, как ты изучил интерфейс? Можете ли вы поделиться своим методом обучения? Еще меня тронуло одно предложение: я не очень большой парень, не могу сказать, что освоил какие-то короткие пути для изучения фронтенда. Конечно, статья о моем личном методе обучения уже пишется, и ожидается, что она выйдет в моем личном кабинете в эти выходные. Перед этим я хотел бы показать (xiang) статьи, которые я записал, просматривая различные технические веб-сайты. Если вы сможете переваривать по одной статье в день, возможно, вы сможете получить предложения от разных крупных производителей всего за год!

Не могу отделаться от ощущения, слишком много хороших статей! Как мы можем тратить его впустую и обвинять других весь день.

личная коллекция

Крайний срок сбора: 2019-07-24 11:50:49

typescript

• TypeScript, первая встреча, посоветуйте
• Может быть, вам нужны спецификации и опыт реакции + машинописного текста 50
  • некоторые рекомендации по использованию

CSS

• Будет ли загрузка css вызывать блокировку?
• Невероятный эффект полосы прогресса прокрутки на чистом CSS
• 1010 способов добиться горизонтального и вертикального центрирования в CSS (самый полный в истории)
• анализ компоновки рем
• Следующая революция в верстке
• Тщательно понимать разрыв слов, перенос слов, пробелы
• Тщательно понимать контекст стека CSS, уровень стека, порядок стека, z-индекс
• Будет ли загрузка css вызывать блокировку?
• От бронзы до короля, 10 навыков использования псевдоклассов CSS3 и приложений, узнайте об этом
• 8 советов по оптимизации производительности CSS
• Личное резюме (новые функции css3)
• Резюме схемы центрирования настроек CSS - очень полная
• CSS-трюки, которые нужно знать веб-разработчикам
• Общие приемы CSS

Фронтенд-инжиниринг (архитектура, мягкая сила)

• Лучшие практики внешнего кэширования
• Статья об архитектуре, написанная для внешнего интерфейса (1): MVC VS Flux
• Проверка данных переднего плана начинается с моделирования
• Безопасность JSONP, о которой также необходимо знать внешним интерфейсам
• Оптимизация производительности сайта на практике — история с 12,67 до 1,06 с
• Инструмент мониторинга производительности передней работы через 5 минут
• Процесс загрузки ресурсов страницы браузера и оптимизация
• Современный способ ленивой загрузки
• Предварительно загружать ресурсы страницы с предварительной загрузкой
• Галантерея Реализация различных типовых макетов + анализ примеров известных сайтов
• Интерфейсные структуры данных и алгоритмы
• Зачем фронтенд-инженерам изучать принципы компиляции?
• Принцип и реализация jsonp
• Ленивая загрузка и предварительная загрузка
• MVVM в 50 строках кода, почувствуйте искусство замыкания
• Прошу прощения! Отложите свои десять минут и позвольте принципу MVVM вернуться к вам
• Контрольный список оптимизации производительности внешнего интерфейса на 2018 г.
• Схема оптимизации загрузки изображений веб-страницы
• Максимальный внешний мониторинг
• Как изящно обрабатывать исключения во внешнем интерфейсе
• Классические вопросы для интервью: что происходит от ввода URL до представления страницы
• Мышление и практика внешнего изоморфного рендеринга
• Рецепты сборки интерфейса
• Об интерфейсной архитектуре масштабных проектов (оригинал на 8000 слов)
• Контрольный список для самопроверки для [квалифицированного] фронтенд-инженера

Стек технологий React

• Реагировать на анализ исходного кода
• Учебник по созданию фреймворка семейства React с нуля
• Не позволяйте виртуальному DOM и DOM-diff становиться для вас камнем преткновения
• Серия "Анализ исходного кода React" завершена!
• Как выучить Реакт? Конечно, это реализовать React самостоятельно.
• Из обсуждения обещания setState познакомьтесь с дизайнерским мышлением команды React.
• Путь дизайна приложений React — волшебное использование каррирования
• Как оценить новые функции React Time Slice и Suspense?
• Новый движок React — что такое React Fiber
• Анализ исходного кода React (3): подробная транзакция и очередь обновлений
• Транзакции в React
• Серия анализа исходного кода React - Play React Transition
• Как улучшить производительность вашего приложения React
• Оптимизируйте приложение React до 60 кадров в секунду
• Как написать лучший код React?
• Практика оптимизации для средних проектов в React
• Серия React Source Code Analysis — Искусство управления жизненным циклом
  • Жизненный цикл в основном управляется тремя состояниями: MOUNTING, RECEIVE_PROPS, UNMOUNTING.
• Подробный жизненный цикл React (часть 1): этап рождения (монтирование)
  • Простое создание компонента React не запускает вызов жизненного цикла
  • componentWillMount и родительские компоненты рендеринга вызываются первыми, в порядке, обратном компонентномуDidMount.
• Подробный жизненный цикл React (ниже): обновление (обновление)
  • Хотя изменение реквизита вызовет вызов componentWillReceiveProps, но вызов componentWillReceiveProps не означает, что реквизит фактически изменился.
• Вы действительно понимаете React (Часть 1) Как проектировать компоненты и важные жизненные циклы
• Анализ и план обновления новых функций жизненного цикла версии React v16.3
• Прошлое и настоящее React исх.
• Разговор о ключах в реакции
• Прошлое и настоящее React Mixin
• Вы действительно понимаете React? (Средний) Связь между компонентами и оптимизация React
• Подробная серия о происхождении фреймворка — Virtual Dom
• Исследуйте прошлое и настоящее Virtual DOM
• Подробная серия о происхождении фреймворка — Virtual Dom
• Серия анализа исходного кода React - невероятная реакция diff
  • Сравнение двух списков является относительно подробным, и вы можете сосредоточиться на исследованиях.
• Простая и простая схема domDIff
• Глубокий анализ: как реализовать алгоритм виртуального DOM
  • Реализация кода может быть использована в качестве эталона
• Серия анализа исходного кода React — расшифровка setState
  • setState является синхронным, транзакции должны понимать
• Секрет setState
• Что происходит после SetState — краткий рассказ о транзакциях в React
• Вы действительно понимаете setState?
• Компоненты высшего порядка в React и сценарии их применения
• Лучшие практики реагирования
• Полностью понять React Fiber
• Архитектура React Fibre
• Резюме введения в архитектуру React Fiber
• Серия Virtual DOM, которую вы не знаете
• Освоение функциональных компонентов React с помощью библиотеки Recompose
• Анализ исходного кода React-Redux
• Исходный код для просмотра выступления React setState (1)
• Исходный код для просмотра выступления React setState (2)
• Интенсивное чтение «Использование 160 строк кода js для реализации React»
• Все еще используете Redux, хотите попробовать GraphQL и Apollo?
• Практика изоморфизма React и мышление
• Думая о таблице реализации React
• React Practice — Генератор компонентов
• Заметки ReactEurope 2016 — Часть 1
• Заметки ReactEurope 2016 — Часть 2
• Принцип реализации идеи Mobx и сравнение с Redux
• Практика проектирования библиотеки компонентов - проектирование сложных компонентов
• Подробное объяснение промежуточного программного обеспечения redux
• Глубокое понимание системы маршрутизации react-router
• Подробное объяснение Immutable и практика в React
• Анализ исходного кода React-Redux

webpack/babel

• Исходный код Webpack (1) — Tapable и поток событий
• Научите вас, как свернуть загрузчик Webpack
• Интервьюер: Вы знаете Бабеля? Вы когда-нибудь писали плагин для Babel? Ответ: Нет. умер
• Write Better JavaScript With Webpack
• Научить вас простому веб-пакету
• Погрузитесь в мир веб-пакетов и станьте игроком номер один в веб-пакетах.
  • Есть много объяснений методов оптимизации веб-пакетов, файлов конфигурации prod/dev, простых описаний загрузчика/плагина.
• Решение для большого файла после упаковки webpack
• Подробное объяснение веб-пакета
• webpack4-experiment в начале, стучите одиннадцать раз подряд
  • С нулевой конфигурации, базовой конфигурации, префикса c3, горячего обновления, извлечения общедоступного кода и т. д.
• Создайте среду разработки React на основе Webpack
  • Простое заимствование из webpack-merge
• Начало работы с babel — реализация конвертера классов es6
• 5 самых запутанных знаний в webpack
• 14 пунктов знаний о webpack4

Test

• Меня научили правила в ESLint, без правил, без программирования

JavaScript

• Модель публикации-подписки, ее возможности в работе превосходят ваше воображение.
• Кто сказал, что интерфейсу не нужно понимать — обратный прокси Nginx и балансировка нагрузки
• Знание хладнокровия в мире CSS
• WebSocket — время показать себя с лучшей стороны
• socket.io позволяет каждому разработать собственный мессенджер
• Каков принцип WebSocket? Почему может быть достигнуто постоянное соединение
• Как работает JavaScript: обзор движка, среды выполнения, стека вызовов
  • Понимание стека вызовов JavaScript
• Понимание контекста выполнения и стека выполнения в JavaScript
  • Контекст выполнения, переменная среда, лексическая среда Посмотреть еще раз
• На этот раз досконально изучите механизм выполнения JavaScript.
• 33 понятия, которые должны знать разработчики JavaScript
• Внешний интерфейс js реализует загрузку файла строки/изображения/excel
• Более элегантный способ написания сложных суждений в JavaScript
• Сексуальное обещание, обними ее и раздень
• Дополнение к знанию грамматики ES6 почти на 10 000 слов
• Окончательный поиск глубокого копирования (90% людей не знают)
• Основной принцип перехода к интерфейсной маршрутизации
• Девять принципов междоменной реализации
• Откройте для себя силу замыканий в JavaScript
• Краткое изложение JS, с которым вы, возможно, не знакомы
• Очарование функций высшего порядка в JavaScript
• Сяо Шао учит вас играть с объектно-ориентированным JS
• Абстрактное синтаксическое дерево AST — самое базовое ключевое знание javascript, 99% людей вообще не понимают
• В ES6, ES7, ES8 есть одно тушеное мясо
• Как лучше использовать массивы в JavaScript
• Разберитесь в сценариях дросселирования, защиты от встряхивания и использования JS за 7 минут.
• Экзамен ECMAScript 6 уровня 6
• javascript: Спецификация кода JavaScript Airbnb
• Принцип реализации обещания (с исходным кодом)
• Вероятно, лучший учебник по регулярным выражениям...
• Несколько советов по кодированию в JavaScript
• Краткое руководство по полному стеку JavaScript
• Понимание красоты асинхронности --- promise и async await (3)
• ES9 пришел Готовы?
• Создание системы управления состоянием с помощью собственного JavaScript
• Обещание должен знать должен знать (десять вопросов)
• Полное руководство по регулярным выражениям JS (немного длиннее)
• Анализ принципов защиты от сотрясений и дросселирования
• Практические советы по JavaScript и предложения по написанию
• Напишите свою собственную кодовую базу (реализация и инкапсуляция общих экземпляров JavaScript)
• Подробное объяснение смешанного использования import, require, export и module.exports.
• WebSocket: от новичка до мастера за 5 минут
• Анализ принципа работы JavaScript
• Простое понимание механизма сборки мусора JavaScript
• 6 обычных способов запомнить js за раз
• Несколько вопросов по написанию кода JS и некоторая реализация кода
• Принцип JSBridge
• Интервьюер: Вы разбираетесь во внешней маршрутизации?
• Глубокое погружение в JavaScriptCore
• Базовый операционный механизм замыканий JavaScript
• Многопоточность в JavaScript -- Web Workers
• Разблокируйте несколько поз дедупликации массива JavaScript
• Обещаний нет? ? Смотри сюда! ! ! Самый доступный Promise! ! !
• Как внешний интерфейс преобразует данные в эффект заграждения
• Говоря о принципе реализации instanceof и typeof
• Научитесь строить колеса вместе (1): с нуля напишите обещание, соответствующее спецификации Promises/A+.
• Связанные с производительностью внешнего интерфейса: защита от сотрясений, дросселирование
• 7 способов добиться дедупликации массива
• Как реализовать библиотеку HTTP-запросов — чтение и анализ исходного кода axios
• Интервьюер: Поскольку React/Vue может использовать шину событий для связи между компонентами, можете ли вы это реализовать?
• Функции высшего порядка, как можно быть такой красивой!
• Интервьюер: Пожалуйста, сделайте глубокий клон
• Модульность интерфейса: CommonJS, AMD, CMD, ES6.
• Сяо Шао учит вас играть с исходным кодом обещания
• Объяснение принципа промиса && реализация объекта промиса
• Говоря о HTTP/2 Server Push
• Разрабатывайте лучшие модули JavaScript
• Более элегантный способ написания сложных суждений в JavaScript
• Я никогда не понимал закрытие JavaScript, пока кто-то не объяснил мне это вот так
• Возвращаясь к конструкторам, прототипам и цепочкам прототипов
• Как отправить запрос Ajax, когда сеть закрывает страницу
• Отслеживание классов JavaScript с помощью прокси
• «Intermediate and Advanced Front-End Interview» JavaScript Рукописный код Invincible Cheats
• Модель среды JavaScript
• Интервьюер (6): Вы когда-нибудь писали «Общие компоненты внешнего интерфейса»?
• Извините, изучение прокси действительно может делать все, что вы хотите
• 28 навыков JavaScript, которыми должен овладеть каждый фронтенд-инженер среднего уровня
• Анализ и реализация принципа фронтальной маршрутизации
• Не запоминайте регулярные выражения
• Front-end должен знать и должен знать — черную технологию работы с URL
• Отправьте вам 43 вопроса для собеседования по JavaScript

Node

• Статья для создания вашей базы знаний NodeJS
• Более 200 строк кода для реализации протокола Websocket
• В чем разница между браузером и циклом событий Node (Event Loop)
• NodeJS и система модулей

Flutter

• Боевое видео Flutter - мобильная электронная коммерция
• Принцип реализации Event_bus во флаттере
• Сбор очков знаний Flutter Interview

Http

• Проектирование неуязвимого решения для кэширования браузера: идеи, детали, ServiceWorker и HTTP/2
• Интерфейсы, которые вы должны знать — кэширование
• Механизм кэширования HTTP 123
• Прошло 9102 года, и я тоже спросил разницу между GET и POST
• Выполнение различных операций через HTTP HEADER
• Девять вопросов от начала до знакомства с HTTPS
• Разговор о HTTPS
• Если вы посмеете усложнить мне задачу на посту и получить, не обвиняйте меня в том, что я притворяюсь
• Графическое трехстороннее рукопожатие TCP и четыре разрыва
• Интервью уносит вас в полет: это исчерпывающее изложение основ компьютерных сетей.
• Младший брат, сестричка, у меня есть tcp, http руководство по собеседованию, хочешь?
• Посмотрите на графику HTTPS
• Позвольте вам понять HTTPS за считанные минуты
• Младший брат, сестричка, у меня есть tcp, http руководство по собеседованию, хочешь?
• Заметки об изучении базовой концепции HTTP2
• Это 2019 год, и я также спросил разницу между GET и POST
• HTTP-протокол основ интерфейса
• Что интервьюер хотел проверить нас о трех рукопожатиях и четырех волнах
• Веб-безопасность, которую вы должны знать о поиске работы зимой
• HTTP-протокол основ интерфейса- [ ] Вы действительно понимаете файлы cookie и сеансы?
• Возможно, вы все еще не понимаете концепции require, import и export.

браузер

• Механизм кеширования браузера, который должен понимать внешний интерфейс
• Браузерная перекомпоновка и перерисовка
• Объясните принципы рендеринга в браузере простыми словами
• Откажитесь от console.log() и используйте отладчик браузера

опрос

• 3 вопроса, которые часто задают на собеседованиях по Javascript!
• Прохождение предварительного собеседования (80% кандидатов терпят неудачу): начиная с DOM
• Уверенность интервью происходит от прочной основы
• Вопрос интервью BAT Front End Classic: самый подробный учебник по обещаниям, написанный от руки в истории.
• Удачные предварительные собеседования (80% соискателей терпят неудачу в серии): начиная с закрытия
• Вопросы на фронтенд-интервью
• Коды интервью для производителей интерфейсов среднего и продвинутого уровня
• Сводка вопросов интервью по расширенному интерфейсу Big Factory 2018 г.
• Резюме интервью 2018 года, читайте и разбирайтесь, платите меньше и добавляйте 3K
• Интервью с весенним набором персонала 2018 года: прорыв
• Много ли сайтов с фронтенд-интервью? Просто прочитайте эти статьи
• JS Вопросы на собеседовании, на которые не отвечают 80% кандидатов
• Понимание цикла событий за раз (тщательно решайте такие вопросы интервью)
• Коды интервью для производителей интерфейсов среднего и продвинутого уровня
• [Раз в две недели] Резюме вопросов и ответов на высокочастотных собеседованиях перед началом работы
• Основной вопрос, который игнорируется внешним интерфейсом, если вы мне не верите, посмотрите, сколько вопросов вы знаете
• Школа Tencent набирает трех сторон, после того как злоупотребления продолжаются
• Резюме интервью с консультантом Alibaba 2018 года
• Анализ нескольких продвинутых вопросов фронтенд-интервью
• 26 тщательно отобранных вопросов для интервью по JavaScript
• Сводка вопросов и ответов на высокочастотные интервью перед началом собеседования

Структуры данных и алгоритмы

• Предварительный письменный тест и серия интервью по восхождению на яму --- алгоритм
• Комикс: Что такое красно-черное дерево

разное

• Апрельский сборник знаний по интерфейсу
• Как выполнять совместную разработку веб-проектов несколькими людьми с помощью git
• Написание плагина для Chrome
• Создайте свой собственный проект строительных лесов с йоменом
• Руководство по входу в Weex: скомпилируйте игровую площадку вручную
• Что такое ПВА
• Создайте свою собственную установку cnpm/npm и создайте собственную архитектуру проекта.
• Создайте свои собственные леса, такие как vue-cli
• Научить вас создавать интерфейсный инструмент для строительных лесов с нуля
• Опыт разработки инструментов скаффолдинга на базе node.js
• Строим строительные леса с нуля
• Шаги компонентов реакции от создания каркаса до публикации в npm

заключительные замечания

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

Добро пожаловать, чтобы обратить внимание на мой личный публичный аккаунт WeChat: выбор внешнего интерфейса с полным стеком

Я буду рекомендовать различные избранные хорошие статьи каждый день и каждый день объяснять вопрос интервью. (Эта программа началась сегодня)