написать впереди

зачем писать эту статью

Технический персонал, занимающийся исследованиями и разработками, называется «закулисными работниками». Характерной чертой их работы является тихая работа в области исследований и разработок, а не общение и самовыражение. Интервью — это процесс выражения и слежки за возможностями НИОКР. способность может быть отлично проявлена, а также она определяет окончательный результат собеседования. Эта статья направлена ​​на улучшение способности анализировать проблемы, выражать и расширять соответствующие знания при столкновении с проблемами.

Описание контента

В этой статье нет старых вопросов для интервью, но будут обобщены вопросы для интервью с новой точки зрения.Начиная с обзора вопросов, я научу вас подводить итоги, обобщать, продвигаться и расширяться, чтобы сформировать свою собственную систему знаний; в кроме того, эта статья будет продолжать обновляться, подходить для сбора, и когда вы откроете ее снова, содержание этой статьи выросло из весенних саженцев в высокие деревья.

Чему вы можете научиться

Создайте передовую сеть знаний и сформируйте свою собственную переднюю систему знаний.

Структура статьи

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

HTML статьи

1. Расскажите, какие способы верстки вы знаете? Каковы их плюсы и минусы?

От ранней разработки интерфейса до настоящего времени мы испытали процесс разработки:макет таблицы, макет позиции, плавающий макет, макет сетки, макет гибкого блока.

раскладка стола:
  Преимущества: макет основной темы может быть построен без какой-либо координации CSS, сильная совместимость, все браузеры поддерживают этот элемент;
  Недостатки: изменение свойств макета любой ячейки приведет к перекомпоновке всей таблицы, что снижает производительность; каждый браузер реализует основные свойства таблицы по-разному, и стили различаются; сложно адаптироваться к сложным бизнес-потребностям;

схема расположения:
  Преимущества: используйте пять атрибутов положения (статическое, относительное, абсолютное, фиксированное, липкое) для изменения положения элемента в потоке документов и гибкого его использования;
Недостатки: при установке позиционирования для элемента часто подразумевается установка позиционирования для родительского элемента, что добавляет дополнительную сложность; после отделения элемента от потока документа родительский элемент может свернуться по высоте, и родительский элемент должен быть обработанным, для sticky в некоторых версиях Браузер не поддерживает На момент публикации атрибут sticky не поддерживается в апплете Alipay.

Плавающая планировка:
  Преимущества: Вы можете свободно менять порядок расположения элементов между родственными элементами;
   Недостатки: требуется последующая работа, такая как очистка и плавание, иначе это приведет к разрушению высоты родительского элемента и повлияет на макет других элементов;
Различные стили, трудно адаптироваться к сложным потребностям бизнеса;

Макет сетки:
  Преимущества: Лично я считаю, что это улучшенная версия макета таблицы.Как и макет таблицы, он вводит концепцию двухмерных пространственных строк и столбцов. В макете сетки в качестве единицы измерения используются проценты, базового стиля нет, что позволяет избежать недостатков таблицы;
   Недостатки: собственный браузер макета сетки не поддерживает его должным образом, но платформа bootStrap, которая интегрирует макет сетки, имеет лучшую совместимость, поэтому большинство из них используют bootStrap в качестве инструмента макета.

гибкий макет:
  Преимущества: артефакт мобильной верстки, позволяющий быстро формировать верстку без использования какого-либо UI-фреймворка, полный набор атрибутов позволяет решить большинство проблем верстки;
Недостатки: относится к свойствам введенным CSS3, что применимо только к IE9 и выше, и более низкая версия должна быть совместима, в то же время необходимо освоить громоздкие настройки свойства, свойство flex занимает дисплей свойство CSS. В некоторых сценариях, когда необходимо установить конкретное свойство отображения, можно найти только другой способ.

JS-статьи

1. Расскажите о том, что такое цепочка прототипов

Прототип — это свойство, зависящее от функции, называемое прототипом. Свойство прототипа — это объект, целью которого является хранение свойств и методов, которые необходимо использовать совместно, чтобы их можно было передавать экземплярам функций, когда они используются в качестве конструкторов. Объект-прототип имеет встроенный конструктор свойств, который представляет собой указатель на функцию, указывающий на конструктор экземпляра объекта. У функции также есть атрибут: конструктор, который является указателем на конструктор функции. Экземпляр функции по-прежнему можно использовать в качестве конструктора для создания нового экземпляра функции.Отношение прототипа между конструктором и экземпляром функции называется цепочкой прототипов. Роль цепочки прототипов заключается в обеспечении повторного использования методов и атрибутов, уменьшении дублирования кода и экономии места для хранения, что является так называемым наследованием реализации. Недостаток прототипного наследования заключается в том, что если общее свойство является ссылочным типом, это приведет к тому, что все экземпляры изменят свойство конструктора.Другой недостаток заключается в том, что при создании экземпляра функции нет возможности передать параметры в конструктор, и настройка не может быть сделано стоимость свойства. Поэтому ввиду этих двух недостатков прототипы и конструкторы часто используются вместе для формирования составного наследования, которое также является наиболее часто используемым шаблоном наследования в JS.

2 Разговор о закрытии

Закрытие по сути является функцией, которая характеризуется: другая функция для доступа к переменной области.
Замыкания выполняют следующие функции: 1) предотвращать загрязнение глобала переменными;
       2) Моделирование области действия на уровне блоков, инкапсуляция частных методов и раскрытие свойств общедоступных методов;
       3) Имитация кеша, локальное хранение данных;
Опасности закрытия:  В основном проблемы со сборкой мусора и утечками памяти.
       1) Функция замыкания не может быть уничтожена после выполнения и всегда существует в среде;
       2) Переменные, используемые в замыканиях, не могут быть удалены сборщиком мусора, что приводит к утечкам памяти.

3 Что такое утечка памяти? Какие вы знаете?

Утечка памяти относится к ситуации, когда память, которая больше не используется, не может быть восстановлена ​​из-за дефектов или ошибок, что приводит к потере памяти.
Общие:
    1) Неожиданная глобальная переменная;
    2) консоль.* способ печати;
    3)  закрытие;
    4) утечка РОМ;
    5) Неочищенный таймер;

4 Какие есть способы реализовать анимацию во внешнем интерфейсе? Почему рекомендуется requestAnimationFrame

HTMLПри условии: холст, SVG
CSSПредусмотрено: переход, анимация
JSПредоставлено: метод requestAnimationFrame() и setTimeout
requestAnimationFrame — это API, предложенный HTML5, который имеет следующие преимущества:
    Энергосбережение процессора:setTimeout использует асинхронную очередь задач для достижения анимации. Его недостаток в том, что кадр серьезно теряется. Еще одна большая проблема в том, что даже если текущая страница свернута или приостановлена, анимация все равно будет выполняться. В настоящее время из-за пользователь не может его видеть, это совершенно бессмысленно, и производительность процессора сильно тратится впустую; requestAnimationFrame вызывается системой, то есть его интервал обновления изображения может соответствовать частоте светового пятна интерфейса обновления экрана, когда страница свернуто Анимация страницы также будет приостановлена, когда она будет активирована или приостановлена, а когда она снова окажется в активном состоянии, она возобновит выполнение с последней позиции паузы, что снизит нагрузку на ЦП.
    Автоматическое дросселирование: requestAnimationFrame может гарантировать, что функция обновления будет выполняться только один раз в течение интервала обновления, что не приведет к хорошей производительности из-за повторного выполнения, но также гарантирует, что кадры не будут потеряны и будет поддерживаться плавность.
    недостаток:
requestAnimationFrame – это API, предоставляемое HTML5. В некоторых браузерах возникают проблемы с совместимостью. Он должен иметь префикс или не поддерживаться. Поэтому необходимо использовать этот метод для достижения плавной деградации в случае несовместимости, пока анимация не будет окончательно реализовано с помощью setTimeout.

5 Объясните принципы и методы реализации глубокого и поверхностного копирования.

Глубокое и поверхностное копирование нацелено на ссылочные типы.В JS ссылочные типы хранятся в куче памяти.При доступе к ним обращаются через указатели в памяти стека.Для базовых типов нет проблемы глубоко-поверхностного копирования.
мелкая копия: генерировать новый указатель в памяти стека, указывающий на эталонные данные в памяти;
Неглубокая реализация копирования:
     1)  присвоение;
     2)  для массивов: var newArr = arr.concat();
     3)  для массивов: var newArr = arr.slice();
     4) var newObj = Objcet.create(obj);
     5) var newObj = Objcet.assign({},obj);
глубокая копия: применить отдельное пространство в куче для хранения новых данных и сгенерировать новый указатель в памяти стека, чтобы указать на данные в куче.
реализация глубокого копирования:
     1) var newObj = JSON.parse(JSON.stringify(obj)); когда значение свойства не определено или является функцией, оно будет проигнорировано, поэтому используйте его с осторожностью.
     2)  рекурсивная копия, которая может быть инкапсулирована в инструментальную функцию для глобального использования;

практические вопросы:

6 Поговорим об анти-тряске и троттлинге

Anti-shake и throttling нацелены на проблему, заключающуюся в том, что пользователи часто запускают или вызывают определенную функцию, в результате чего клиентская страница зависает или потребляет слишком много производительности и ресурсов сервера. Оба метода по сути являются отложенной обработкой частых срабатываний, но методы обработки разные.Про антишейк и троттлинг я подробно написал здесь, а функцию инкапсуляции дал, перенесите пожалуйста сюда:
nuggets.capable/post/684490…

7 Пожалуйста, используйте ES5 для реализации const

анализировать:Отличие const от других способов определения переменных заключается в том, что значение базового типа, определяемого const, не может быть изменено, а ссылочный тип, определяемый const, не может быть изменен.Данные, хранящиеся в области памяти, на которую указывает адрес памяти, остаются без изменений)

Идеи:Чтобы понять, что значение переменной не перезаписывается, если мы можем контролировать операцию присвоения переменной, мы можем предотвратить присвоение переменной, а затем мы можем реализовать перехват присваивания. Проблема трансформируется в контроль операций присваивания Первое, что приходит на ум, это метод Object.defineProperty(), который может определять базовые свойства свойств объекта, в том числе присваивать значения. Но вот проблема: этот метод для объектов, а глобальные переменные? Здесь следует отметить, что глобальные переменные на самом деле являются свойствами окна глобального объекта.

Вооружившись этими знаниями, пришло время написать логику:Одно замечание: в ES5 нет концепции блочной области видимости, а const может воздействовать на блочную область видимости, поэтому, даже если мы имитируем реализацию функции const, мы не имитируем эффект реализации область видимости на уровне блока.const по-прежнему отличается.

8 Расскажите об отношениях между прототипами, неявными прототипами, экземплярами и конструкторами.

Я полагаю, что читатели, читающие это, должны были понять эти понятия, но есть чувство, иногда ясное, иногда смутное, и есть одно: я понимаю, но не могу объяснить вам это чувство.

Если вы чувствуете то же самое, поздравляю, вы пришли в нужное место. Сегодня я передам вам Бесподобную Тайную Книгу, сначала нажмите внимание и лайк, чтобы потом вдруг не забыть.

Вы закончили? Вот-вот начнется~

1. Прежде всего, почему мы читаем так много статей о прототипах и до сих пор не можем внятно их объяснить? Есть три причины:

а) Потому что каждый раз, когда вы смотрите на нее, вы запоминаете отношения и различия между отдельными или разрозненными семьями.Неясно, как связаны отношения между этими большими семьями.
б) Когда-то, долго разбираясь, стало окончательно ясно, потом опять стало неясно, почему? потому что память не глубокая
в) Каждый раз, когда речь идет о понимании текста и текстовой памяти, слишком много повторений, чтобы пересматривать снова, это нелегко пересматривать, и со временем это забудется.
Сегодня высший Дафа здесь~ Давайте сначала поговорим о методе: посмотрите на следующую картинку 5 раз, подумайте о ней 5 раз, нарисуйте ее сами 3 раза, вспоминайте ее дважды в день, и в течение недели у вас будет очистить память. Над:

Описание диаграммы отношений:

, Конструктор указывает на прототип конструктора Person.prototype через свойство прототипа.

, Прототип конструктора (Person.prototype) указывает обратно на конструктор Person через свойство конструктора

, Конструктор Person генерирует экземпляр person с помощью ключевого слова new.

, Человек-экземпляр указывает на объект-прототип конструктора через __proto__ (произносится: двойное подчеркивание proto или dunder proto).

Обратите внимание: в стандарте ECMA указано, что необходимо предоставить свойство, через которое прототип может получить доступ к объекту-прототипу конструктора.

Примечание. Чтобы понять память и повторять несколько раз, вы можете достичь мастерства.

Незакончено, будет обновлено... Не забудьте подписаться и поставить лайк~

конец статьи

Пишите только понятные, читабельные и ценные технические статьи, если вы почувствуете себя вознагражденным после прочтения, поставьте лайк + подписаться, платформа порекомендует вам более качественные тематические статьи;

Готовитесь к интервью? Давайте поговорим и улучшайте себя каждый день, когда вы подходите к вопросам интервью; вы готовы перейти к расширенному полному стеку? Давайте поговорим о продвинутом способе и избегайте обходных путей; Устали набирать код? Приходите и пообщайтесь в группе, чтобы сделать работу более эффективной.

Из-за ограничений в настоящее время их более 200, и присоединиться к ним можно только по приглашению, поэтому, Итак, пожалуйста, выполните поиск в общедоступной учетной записи [Front-end Advanced Interview Internal Push], и я приглашаю вас присоединиться к группе. Приходи сюда, чтобы найти больше единомышленников для фронтенд-партнеров~