предисловие
Для меня было большой честью участвовать в большой фабрике Tencent.Хотя результаты не были идеальными, я проверил себя и нашел свои недостатки, чтобы побудить себя усовершенствовать свои исследования. Интервью делится на один час для письменных вопросов и один час для интервью.
1. Вопросы по программированию (пожалуйста, используйте es6 для реализации кодирования):
1. Бинарный поиск
Учитывая отсортированный (по возрастанию) целочисленный массив nums из n элементов и целевое значение target , напишите функцию для двоичного поиска target в nums , возвращающую нижний индекс, если целевое значение существует, и -1 в противном случае.
let arr = [1, 3, 5, 7, 9];
function search(nums, target) {
let left = 0;
let right = nums.length - 1;
while(left <= right) {
let mid = (right + left) / 2;
if (nums[mid] == target) {
return mid;
} else if (nums[mid] < target) {
left = mid + 1;
} else {
right = mid -1;
}
}
return -1;
}
console.log(search(arr, 7));
2. Напишите компонент опроса, который асинхронно запрашивает и ожидает результатов.
Конкретный ввод компонента выглядит следующим образом:
- метод выполнения запроса
- интервал опроса
- тайм-аут
- Максимальное количество опросов Выход компонента:
- возвращает обещанный объект
- Если метод запроса выполняется без исключения, опрос завершается и возвращается результат запроса. отвечать:
// vue代码
data() {
return {
data: {}, // 请求结果
remainTime: 0, // 剩余限制时长
start: 0, // 开始时间
end: 0, // 请求得到数据的时间
}
}
mounted () {
// 请求之前计时 start
this.start = Math.floor(new Date().getTime()/1000);
this.query(50, 2, 10);
},
methods: {
// 只要轮询次数和最大限制时长任何一个达到阈值 就 停止轮询
query(num, interval, limitTime=60) { // 参数num：轮询次数 interval：定时器时间(s) l imitTime：最大限制时长(s)
let timer;
if (num > 1) {
return new Promise((resolve, reject) => {
let postParams = {
id: this.$route.params.id
}
Api.getArticleOne(postParams).then(res => {
this.data = res.data.data.content; // 这个只是接口返回的数据结构
this.end = Math.floor(new Date().getTime()/1000);
}, err => {
reject(err);
}).catch(err => {
console.log(err)
});
if (this.end !== 0) {
// 如果拿到数据了，就用当前的 剩余限制时长 - （结束时间 - 开始时间）
this.remainTime = limitTime - (this.end - this.start);
} else {
// 如果还没拿到接口数据 这个时候 end就为0 需要继续 轮询 这个时候的剩余时间还是 传过来的 限制时长
this.remainTime = limitTime;
}
if (this.remainTime <= 0) { // 如果剩余时间小于等于 0 或者 循环次数 为 1 就结束定时器
clearTimeout(timer);
return;
} else {
// 轮询一次 num就减少一次
num--;
this.remainTime = this.remainTime - interval; // 当前剩余时长 = 当前剩余时长 - 定时器
timer = setTimeout(() => { this.query(num, interval, this.remainTime)}, interval * 1000);
}
}).catch(err => {
console.log(err)
})
} else {
clearTimeout(timer);
return;
}
},
}
3. Логические вопросы
Всего кубиков 60, ходов 60 человек, 5 мужчин, 3 девочек и 1 кубик на двоих детей.После одного хода сколько детей, мужчин и женщин нужно, и сколько комбинаций?отвечать:
function solution() {
let x, y, z;
for(x =1; x < 12; x++) {
for(y = 1; y < 20; y++) {
z = 60 - x - y;
if (z%2 == 0) {
if (5*x + y*3 + z/2 == 60) {
console.log(x, y, z, '搬砖组合'); // 5 3 52
}
}
}
}
}
solution();
Отвечать: Только один план: Мужчины: 5; Женщины: 3; Дети: 52.
2. Вопросы и ответы
Вопросы 1-5
1. Пожалуйста, напишите следующий результат вывода кода и причину
var myname = "小明";
function showName(){
console.log(myname); // undefined
if(0){ var myname = "小红" }
console.log(myname); // undefined
}
showName();
2. Пожалуйста, напишите следующий результат вывода кода и причину
function letTest() {
let x = 1;
if (true) {
let x = 2;
console.log(x); // 2
}
console.log(x); // 1
}
letTest();
3. Пожалуйста, напишите следующий результат и причину вывода кода? и реализовать его с помощью стрелочных функций
function bar() {
console.log(myName)
}
function foo() {
var myName = "腾讯1"
bar()
}
var myName = "腾讯2"
foo()；// 腾讯2
Стрелочные функции: var foo = () => () => { console.log(моеИмя); }
4. Пожалуйста, напишите следующий результат вывода кода и причину
var myObj = {
name : "腾讯1",
showThis: function(){
console.log(this);
var self = this;
function bar(){
self.name = "腾讯2";
}
bar()
}
}
myObj.showThis(); // myObject对象
console.log(myObj.name); // 腾讯2
console.log(window.name); // undefined
5. Пожалуйста, напишите следующее, это указывает на ситуацию:
// 情况1
function foo() {
console.log(this.a) //1
}
var a = 1
foo();
this指向window全局
// 情况2
function fn(){
console.log(this);
}
var obj = {fn: fn};
obj.fn(); // this => obj this指向obj对象
// 情况3
function CreateJsPerson(name,age){
// this是当前类的一个实例p1
this.name=name; // => p1.name = name
this.age=age; // => p1.age = age
}
var p1=new CreateJsPerson("尹华芝",48);
// 情况4
function add(c, d){
return this.a + this.b + c + d;
}
var o = {a: 1, b: 3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 this指向o对象
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 this指向o对象
// 情况5
<button id="btn1">箭头函数this</button>
<script type="text/javascript">
let btn1 = document.getElementById('btn1');
let obj = {
name: 'kobe',
age: 39,
getName: function () {
btn1.onclick = () => {
console.log(this);//obj
};
}
};
obj.getName();
this指向obj，因为箭头函数的this是在外层函数定义的时候就指定了
6. Расскажите мне о технологиях, о которых вы недавно узнали и которые вы считаете относительно новыми во внешнем интерфейсе, и запишите свои идеи.
(открытый вопрос)
узел узла V8, асинхронный ввод-вывод, механизм событий
Спецификация типов переменных в Typescript снимает критику javascript в отношении слабых типов.
Рендеринг на стороне сервера (vue-ssr, nuxt, next): хорош для поисковой оптимизации, более быстрое получение, требует поддержки сервера и увеличивает нагрузку на сервер.
7. связанные с веб-пакетом
Файл входа по умолчанию для webpac — index.js.
Выходной каталог по умолчанию dist
Как изменить выходной каталог webpack по умолчанию. Команда веб-пакета, которую необходимо использовать, — это веб-пакет.
Объяснение общих терминов в Webpack, пожалуйста, объясните следующие термины:entryВход в проект
moduleМодули, для webpack все ресурсы (.js, .css, .png) являются модулями
chunkФайл модуля, который обрабатывается в процессе упаковки, называется чанком.
bundleОкончательный упакованный файл, окончательный выходной блок называется пакетом на стороне пользователя; обычно блок соответствует пакету, и только когда исходная карта настроена, может возникнуть ситуация, когда блок соответствует нескольким пакетам;
loaderЭто конвертер, загрузчик, который позволяет webpack обрабатывать разные файлы. Загрузчики могут преобразовывать все типы файлов в действительные модули, которые может обрабатывать веб-пакет, а затем использовать возможности упаковки веб-пакета для их обработки.
pluginsЭто расширитель, который обогащает сам веб-пакет.Для всего процесса упаковки веб-пакета после завершения загрузчика он не манипулирует файлами напрямую, а работает на основе механизма событий.Он будет отслеживать определенные узлы в процессе упаковки веб-пакета и выполнять широкий спектр задач.
8. Как Node кеширует
Принудительное кэширование и согласованное кэширование аналогичны кэшированию браузера.
9. В чем разница между механизмом цикла браузера js и механизмом цикла nodejs?
Задачи макросов: setTimeout, setInterval,
Микрозадачи: обратные вызовы к промисам
Механизм цикла событий js относительно прост
Основной поток для выполнения кода, после завершения выполнения очищается очередь микрозадач, макрозадача затем удаляет и очищает очередь микрозадач и т. д.
Цикл событий узла более сложный
Цикл событий Node разделен на шесть фаз.
(1) таймер таймера выполняет функцию обратного вызова setTimeout и setInterval
(2) обратные вызовы ввода-вывода. Выполнение обратного вызова ввода-вывода откладывается до следующего этапа выполнения;
(3) бездействует, подготавливает движение очереди, используется только для внутренних целей
(4) фаза опроса Эта фаза используется для выполнения обратных вызовов, связанных с операциями ввода-вывода.Узел запрашивает операционную систему, было ли инициировано новое событие ввода-вывода, а затем выполняет соответствующий обратный вызов события. На этом этапе выполняются почти все операции, кроме событий таймера, setImmediate() и закрытых обратных вызовов.
(5) проверить На этом этапе будут выполняться задачи, установленные setImmediate()
(6)close Выполнение обратного вызова события закрытия, такого как socket.on("close",func) Если сокет или дескриптор (дескриптор) внезапно закрывается, например, через socket.destroy() Closed, событие закрытия будет быть выпущенным на этом этапе.
10. Объяснение принципа отзывчивости VUE
监听器 Observer: Используется для захвата и мониторинга всех свойств через Object.defineProperty (преобразованный в форму установки/получения) и уведомления подписчиков об изменении свойства.
订阅器 Dep: используется для сбора подписчиков, да监听器 Observerа также订阅者 WatcherЕдиное управление.
订阅者 Watcher:监听器Observerа также解析器CompileМост для связи между ними; если получено уведомление об изменении свойства, выполняется соответствующий метод для обновления представления.
解析器 Compile: он может анализировать соответствующие инструкции каждого узла и инициализировать данные шаблона и подписчиков.
Главное, что нужно сделать:
- Атрибут при создании самого себя
订阅器(dep)Добавьте себя внутрь. - У него есть сам метод update().
- Когда свойство изменяет уведомление dep.notice(), оно может вызвать свой собственный метод update() и вызвать
解析器(Compile)Обратный вызов связан в .
Суммировать: vue.js использует метод захвата данных в сочетании с режимом издатель-подписчик, перехватывает установщик и получатель каждого свойства через Object.defineProperty(), публикует сообщения подписчикам при изменении данных и запускает соответствующий обратный вызов мониторинга.
Преимущества прокси-сервера Vue3.0 по сравнению с defineProperty
Есть три основные проблемы с Object.defineProperty():
- Не могу отслеживать изменения массива
- Каждое свойство объекта должно быть пройдено
- Вложенные объекты должны быть глубоко пройдены
Прокси был официально добавлен в спецификацию ES2015 и имеет следующие особенности:
Для объектов:Для всего объекта, а не свойства объекта, поэтому нет необходимости проходить ключи. Это решает вторую проблему с Object.defineProperty() выше.
Поддерживаются массивы:Прокси не нужно перегружать методы массива, избавляет от многих хаков, уменьшает количество кода и снижает стоимость обслуживания, а стандарт лучше.
11. Каковы новые возможности HTTP/2 и https?
HTTP/2:
HTTP/2 проще, эффективнее и мощнее. Он решает на транспортном уровне проблемы, с которыми мы сталкивались в HTTP 1.x раньше. Используйте его для оптимизации нашего приложения. Основная цель HTTP/2 — уменьшить размер заголовка за счет полного мультиплексирования запросов и ответов, сжатых полей заголовка в заголовке, повышенного приоритета запроса и отправки сервером. Для поддержки этих функций требуется большое количество протоколов для добавления полей заголовков для поддержки, таких как новое управление потоком, обработка ошибок, механизмы обновления — это то, что каждый веб-разработчик должен использовать в своих приложениях.
HTTP/2 не меняет семантику HTTP в приложении, а через формат данных (фрейм) и передачу между клиентом и сервером, контролирует весь процесс и скрывает сложность через новый бинарный слой фрейма, который может быть достигнуто без изменения того, что уже есть.
https:
1. Протокол HTTPS должен обращаться к центру сертификации CA для подачи заявки на сертификат, а HTTP не требуется подавать заявку на сертификат;
2. HTTP — это протокол передачи гипертекста, относящийся к передаче информации прикладного уровня, а HTTPS — это протокол передачи с безопасностью передачи с шифрованием SSL, который шифрует передачу данных, что эквивалентно обновленной версии HTTP;
3. HTTP и HTTPS используют совершенно разные способы подключения и разные порты: первый — 80, а второй — 443.
В-четвертых, соединение HTTP очень простое и не имеет состояния; протокол HTTPS — это сетевой протокол, созданный на основе протокола SSL+HTTP, который может выполнять зашифрованную передачу и аутентификацию личности, что безопаснее, чем протокол HTTP.
12. Модель уровня TCP/ip5 и объяснение роли каждого уровня.
«Пятиуровневая модель» TCP/IP делится на: физический уровень, уровень Интернета, сетевой уровень (уровень IP), транспортный уровень (уровень TCP/UDP) и прикладной уровень.
Уровни сетевых протоколов
应用层(Application)： 应用程序网关（application gateway）
Telnet: 远程登录 （在应用层连接两部分应用程序）
FTP（File Transfer Protocol）：文件传输协议
HTTP（Hyper Text Transfer Protocol）：超文本传输协议
SMTP（Simple Mail Transter Protocol）：简单邮件传输协议
POP3（Post Office Ptotocol）：邮局协议
SNMP（Simple Network Mangement Protocol）：简单网络管理协议
DNS（Domain Name System）：域名系统
传输层（Transport）： 传输网关（transport gateway）
TCP（Transmission Control Potocol)：传输控制协议 （在传输层连接两个网络）
UDP（User Data Potocol）：用户数据协议
网络层（Internet）： 多协议路由器（multiprotocol router）
IP（Internet Protocol）：网络协议 （在异构网络间转发分组）
ARP（Address Resolution Protocol）：地址解析协议
RARP（Reverse Address Resolution Protocol) ：逆地址解析协议
ICMP（Internet Control Message Protocol）：因特网控制消息协议
IGMP（Internet Group Manage Protocol）：因特网组管理协议
BOOTP （Bootstrap）：可选安全启动协议
互联网层 即 数据链路层（Data Link）： 网桥（bridge）交换机（switcher）
  HDLC（High Data Link Control）：高级数据链路控制 （在LAN之间存储-转发数据链路针）
SLIP（Serial Line IP）：串行线路IP
PPP（Point-to-Point Protocol）：点到点协议
802.2等
物理层（Physical）： 中继器（repeater） 集线器（hub）
无 （放大或再生弱的信号，在两个电缆段之间复制每一个比特）
应用层: Уровень для связи между приложениями, такими как простая передача электронной почты (SMTP), протокол передачи файлов (FTP), протокол сетевого удаленного доступа (Telnet) и т. д.
传输层: На этом уровне он предоставляет услуги передачи данных между узлами, такие как протокол управления передачей (TCP), протокол пользовательских дейтаграмм (UDP) и т. д. TCP и UDP добавляют данные передачи к пакетам и передают их на следующий уровень, этот уровень ответственный за передачу данных и обеспечение того, чтобы данные были доставлены и получены.
数据链路层: второй уровень модели OSI, который управляет связью между сетевым уровнем и физическим уровнем. Его основная функция заключается в надежной передаче данных по ненадежным физическим линиям. Чтобы гарантировать передачу, данные, полученные с сетевого уровня, делятся на определенные кадры, которые могут быть переданы физическим уровнем. Фрейм — это структурированный пакет, используемый для перемещения данных, и он включает в себя не только исходные данные, но и сетевые адреса отправителя и получателя, а также информацию для исправления ошибок и управления. Адрес в нем определяет, куда будет отправлен кадр, а исправление ошибок и контрольная информация гарантируют, что кадр будет доставлен без ошибок.
Функция уровня канала передачи данных не зависит от сети и ее узлов, а также от типа используемого физического уровня, а также от того, используется ли Word, Excel или Интернет. Некоторые подключенные устройства, такие как коммутаторы, работают на канальном уровне, поскольку они декодируют кадр и используют информацию кадра для отправки данных правильному получателю.
网络层: третий уровень модели OSI, его основная функция заключается в преобразовании сетевого адреса в соответствующий физический адрес и принятии решения о маршрутизации данных от отправителя к получателю.
Сетевой уровень определяет наилучший путь от узла A в одной сети к узлу B в другой сети, всесторонне учитывая приоритет отправки, уровень перегрузки сети, качество обслуживания и стоимость альтернативной маршрутизации. Поскольку сетевой уровень занимается маршрутизацией, маршрутизаторы принадлежат к сетевому уровню, поскольку они соединяют сегменты сети и разумно управляют передачей данных. В сети «маршрутизация» направляет отправку данных на основе схем адресации, шаблонов использования и доступности.
物理层: самый нижний или первый уровень модели OSI, который включает в себя физическую сетевую среду, например кабельный разъем. Протоколы на физическом уровне генерируют и обнаруживают напряжения для отправки и приема сигналов, несущих данные. Подключите сетевую карту к настольному ПК, и вы заложили основы компьютерной сети. Другими словами, вы предоставляете физический уровень. Хотя физический уровень не предоставляет услуги по исправлению ошибок, он может устанавливать скорость передачи данных и отслеживать частоту появления ошибок в данных. Киберфизические проблемы, такие как отсоединенные провода, будут влиять на физический уровень.
13. С точки зрения внешнего интерфейса, как систематически улучшать удобство использования крупномасштабных веб-приложений? Его можно уточнить с точки зрения того, что вы считаете аспектами удобства использования, методов мониторинга и мер по улучшению.
1. Значение и статус-кво внешнего пользователя
Что такое доступность интерфейса?
Доступность внешнего интерфейса позволяет определить доступность всей системы с точки зрения пользователя. Отсутствие какой-либо связи в системе повлияет на работу.
Статус юзабилити внешнего интерфейса
- Повышенная функциональность страницы и сложность взаимодействия
- Ограничения внешнего функционального тестирования
- Внедрение различных интерфейсных фреймворков рендеринга
- Отзыв о проблеме в режиме онлайн
Значение построения юзабилити интерфейса
Метрики оценки юзабилити интерфейса
- ключевой индикаторВремя белого экрана 6 с
Внешний дизайн системы гарантии доступности
Требования к системе доступности: в режиме реального времени, комплексная
1. Сбор данных: исключения запросов, исключения ресурсов, исключения рендеринга и исключения взаимодействия.
Является ли статус запроса ненормальным, время запроса истекло, а формат возвращаемых данных неверен. (AJAX-мониторинг)
Загрузка ресурсов не удалась (CDN-мониторинг)
Исключение рендеринга (проверка ДОМ)
Исключение взаимодействия (Мониторинг JS-ошибок)
2. Мониторинг и раннее предупреждение: мониторинг в реальном времени, пороговая сигнализация.
Чтение массового хранилища данных, визуализированное отображение данных, многомерный запрос данных.
Установите разумные пороговые значения, оповещения по электронной почте и SMS
3. Аварийное восстановление на дне: отказоустойчивый механизм, быстрый даунгрейд.
Ошибка механизма асинхронного рендеринга, переход на синхронную страницу, удобная подсказка пользователя об ошибке.
Важный механизм добавляет переключатель перехода на более раннюю версию и быстро завершает переход на более раннюю версию (в течение 3 минут).
Идеи оптимизации юзабилити интерфейса
Внешний вид юзабилити
Резюме интервью
Главное расспросить подробно по порядку в резюме.Поскольку в резюме написано, то будет спрашивать о принципе, а потом спрашивать за какую часть проекта вы отвечаете, front-end планирование и скоро.
Потом я обсудил подготовку повторяющихся страниц фронтенда, и интервьюер дал мне ответ: у них в бэкграунде своя библиотека компонентов, чистые компоненты, и фронтенду нужно их использовать, чтобы они могли напрямую цитировать и загрузите их.Посмотрите, это, вероятно, пакет, который отправляет npm.
Вышеупомянутые письменные тестовые вопросы, которые я взял на этот раз. Я тогда плохо ответил, а потом потерял его. Потом я спустился и нашел некоторую информацию, чтобы обобщить ее. Надеюсь, это будет полезно для всех! Добро пожаловать на вопрос с другими ответами, добро пожаловать на обмен или комментарий ниже!
Адрес статьи личного блогаоооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо из