«Эта статья участвовала в мероприятии Haowen Convocation Order, щелкните, чтобы просмотреть:Двойные заявки на внутреннюю и внешнюю стороны, призовой фонд в 20 000 юаней ждет вас, чтобы бросить вызов!"
Обобщите некоторые знания о интерфейсе js, систематизируйте заметки и поделитесь с вами, некоторые знания часто будут спрашивать во время интервью по интерфейсу, поэтому сделайте запись, я надеюсь, что это будет полезно для всех, если возникнут какие-либо проблемы, вы можете указать на это, и это будет активно исправляться.
Если вам это нравится, вы можете поставить лайк или оставить сообщение, и я продолжу обновлять вопросы интервью~~~~, спасибо~~~
1, до++, после++, разница?
var i=2 ;
a = i++ //将i的值赋给a ， 即a = i,之后再执行i = i + 1; 2
a = ++i //将i+1 的值赋给a，即a = i + 1 ,之后再执行i = i + 1; 3
console.log(a)
【Суммировать】:
Первый ++ - это первое самодобавление, а затем вычисление, последний ++ - это последнее самодобавление и первое вычисление.
1: Префикс ++ заключается в том, чтобы присвоить переменной значение после себя + 1, и при этом добавить 1 к себе самой;
2: Post++ заключается в том, чтобы присвоить переменной свое значение, а затем прибавить к себе 1;
2. Какие типы данных есть в JS?
Основные типы данных Js undefined null boolean number string bigint
Тип ссылки Js object Array function
Примитивные типы данных ES6еще символ
3. js судить о типе?
1. тип
Не удается обнаружить нуль и массив, результатом является объект, поэтому typeof часто используется для определения базовых типов.
2. экземпляр
Невозможно обнаружить числовой, логический, строковый, неопределенный, нулевой, символьный типы, поэтому instancof часто используется для обнаружения сложных типов и иерархических отношений.
3. Конструктор
Не существует метода конструктора для значений null и undefined, поэтому конструктор не может оценить значения undefined и null. Но указатель конструктора можно изменить, так что это небезопасно
4. Object.prototype.toString.call
Все типы можно судить
4. Как определить тип данных?
1、typeof
例：console.log(typeof true) // boolean
2、instanceof
例：console.log([1,2] instanceof Array) // true
3、constructor
例： console.log([1, 2].constructor === Array) // ture
4、Object.prototype.toString.call
例：Object.prototype.toString.call([1, 2]) // [object Array]
5. Метод массива Js
join() преобразует массив в строку
добавить в конце push()
pop() хвост удалить
shift() удаление головы
добавлен заголовок unshift()
сортировать() сортировать
реверс () переворачивает
concat() объединяет два или более массивов
slice()
var arr=[1,2,3,4,5]
console.log(arr.slice(1)) //[2,3,4,5] выбирает новый массив, состоящий из всех элементов с порядковыми номерами от 1 до конца
console.log(arr.slice(1,3)) //[2,3] не содержит серийный номер, элемент с серийным номером 3
splice()
splice(index,howmany,item1,...itemx)
параметр индекса: обязательный, целочисленный, укажите позицию для добавления или удаления, используйте отрицательное число, укажите позицию с конца массива
параметр howmany: обязательный, число для удаления, если 0, то не удалять элемент
Параметры item1,...itemx: необязательные, новые элементы для добавления в массив
var arr=[1,2,3,4,5]
console.log(arr.splice(2,1,"hello"));//Новый массив, возвращенный [3]
console.log(arr);//[1,2,"hello",4,5]
indexOf() и lastIndexOf() (новое в ES5)
forEach() (новое в ES5)
map() (новое в ES5)
filter() (новое в ES5)
каждый () (новый в ES5)
некоторые() (новое в ES5)
уменьшить() и уменьшитьRight() (новое в ES5)
6. В чем разница между методами Array.splice() и Array.slice() в JS?
Без лишних слов, давайте посмотрим на первый пример:
var arr=[0,1,2,3,4,5,6,7,8,9];//设置一个数组
console.log(arr.slice(2,7));//2,3,4,5,6
console.log(arr.splice(2,7));//2,3,4,5,6,7,8
//由此我们简单推测数量两个函数参数的意义,
slice(start,end)第一个参数表示开始位置,第二个表示截取到的位置(不包含该位置)
splice(start,length)第一个参数开始位置,第二个参数截取长度
Тогда посмотрите на второй:
var x=y=[0,1,2,3,4,5,6,7,8,9]
console.log(x.slice(2,5));//2,3,4
console.log(x);[0,1,2,3,4,5,6,7,8,9]原数组并未改变
//接下来用同样方式测试splice
console.log(y.splice(2,5));//2,3,4,5,6
console.log(y);//[0,1,7,8,9]显示原数组中的数值被剔除掉了
Хотя slice и splice являются перехватывающими объектами массива, между ними все еще есть очевидные различия.Первый параметр slice и splice в параметрах функции — это начальная позиция перехвата, а второй параметр slice — включено) и второй параметр splice (представляющий длину перехвата от начальной позиции), slice не изменит исходный массив, а splice удалит перехваченные данные напрямую из исходного массива!
slice не изменит исходный массив, splice изменит исходный массив
7. Числовое преобразование
JSON.parse() для объекта json
JSON.stringify() в строку json
String(), toString() для строкового типа
Номер PARSEINT () Строконные значения Value Revolutions
разделить строку на массив
присоединить массив к строке
8. Что такое междоменный, общий междоменный
Поскольку браузеры следуют политике одного и того же источника для получения данных, при доступе к ресурсам из разных источников требуется междоменный доступ.Обычные междоменные методы включают jsonp, img src cors
Политика того же происхождения: политика безопасности с тем же протоколом, портом и доменным именем.
принцип jsonp
Динамически создайте тег Script, используйте функцию обратного вызова CallPack, чтобы получить значение
function callbackFunction(){
alert("回滚");
}
var script=document.createElement("script");
script.src="http://frergeoip.net.json/?callback=callbackFunction";
Принципы КОРС:
Когда объем передаваемых данных относительно велик и форма get не может быть обработана, можно использовать cors cross-domain Принцип cors заключается в определении механизма междоменного доступа, который позволяет ajax достичь междоменного доступа. Cors позволяет веб-приложениям в одном домене отправлять междоменные запросы ajax в другой домен. Реализация этой функции так же проста, как отправка заголовка ответа сервером.
Jsonp находится в форме get, а объем передаваемой информации ограничен, поэтому cors — лучший выбор, когда объем информации велик.
9. HTTP-протокол:
Протокол http — это метод связи, определяющий передачу файлов между сервером и клиентом.
Запросить ресурсы на сервере, запросить файлы изображений html css js и т. д.
Существует несколько методов запроса (все методы пишутся с заглавной буквы), и каждый метод объясняется следующим образом:
GET (получить) Запрос на получение ресурса, указанного Request-URI -- получить ресурс
POST (post) добавляет новые данные к ресурсу, указанному Request-URI --- передает ресурс
HEAD (head) Запрос на получение заголовка ответного сообщения ресурса, идентифицированного Request-URI --- Получить заголовок сообщения
PUT (put) запрашивает у сервера сохранение ресурса и использует Request-URI в качестве его идентификатора --- обновляет ресурс
DELETE (удалить) запрашивает сервер удалить ресурс, указанный Request-URI --- удалить ресурс
TRACE (трассировка) запрашивает у сервера отправку полученной информации запроса, в основном для тестирования или диагностики.
CONNECT (подключение) зарезервировано для использования в будущем
OPTIONS (параметры) запрос на запрос производительности сервера или запрос параметров и требований, связанных с ресурсом
Общие коды состояния:
200 Запрос выполнен успешно
301 ресурс (веб-страница и т. д.) навсегда перемещен на другой URL-адрес
404 Запрошенный ресурс не существует
внутренняя ошибка сервера 500
10. Код состояния HTTP
100 Продолжить Продолжить, как правило, при отправке почтового запроса сервер возвращает эту информацию после отправки заголовка http, указывающего на подтверждение, а затем отправляет информацию о конкретном параметре.
200 OK Нормальная информация о возврате
201 Created Запрос выполнен успешно, и сервер создал новый ресурс
202 Accepted Сервер принял запрос, но еще не обработал его.
301 Перемещено навсегда Запрошенная страница была окончательно перемещена в новое место.
302 Найдено временное перенаправление.
303 См. Другое Временное перенаправление и всегда используйте GET для запроса нового URI.
304 Not Modified Запрошенная страница не была изменена с момента последнего запроса.
400 Bad Request Сервер не понимает формат запроса, и клиент НЕ ДОЛЖЕН пытаться снова сделать запрос с тем же содержимым.
401 Unauthorized Запрос не авторизован.
403 Запрещено Запрещено.
404 Not Found Ресурс не найден, как сопоставить URI.
500 Internal Server Error Самая распространенная ошибка на стороне сервера.
503 Служба недоступна Сервер временно не может обработать запрос (возможно, из-за перегрузки или технического обслуживания).
11. Расскажите мне о своем понимании замыканий?
Замыкания в основном используются для разработки частных методов и переменных. Преимущество замыкания в том, что оно позволяет избежать загрязнения глобальных переменных. Недостаток в том, что замыкание будет находиться в памяти, что увеличит объем используемой памяти. Неправильное использование может легко привести к утечке памяти.
Замыкания обладают тремя свойствами:
1. Вложенная функция функции
2. Функции могут ссылаться на внешние параметры и переменные
3. Параметры и переменные не будут перерабатываться механизмом сборки мусора
Использование закрытия
1 кеш
Предположим, у нас есть объект функции, который долго обрабатывается, и каждый вызов будет длиться долго, тогда нам нужно сохранить вычисленное значение.При вызове этой функции сначала посмотрите его в кеше, если вы не можете найдите его Если он найден, выполните расчет, затем обновите кеш и верните значение Если найдено, просто верните найденное значение напрямую. Замыкания делают именно это, потому что они не освобождают внешние ссылки, поэтому значение внутри функции может быть сохранено.
2 Реализация инкапсуляции
Давайте сначала рассмотрим пример инкапсуляции.Внутренние переменные не могут быть доступны вне человека, но доступны через замыкание:
var person = function(){
//变量作用域为函数内部，外部无法访问
var name = "default";
return {
getName : function(){
return name;
},
setName : function(newName){
name = newName;
}
}
}();
print(person.name);//直接访问，结果为undefined
print(person.getName());
person.setName("abruzzi");
print(person.getName());
12. Как остановить всплытие событий?
т.е.: прекратить всплытие ev.cancelBubble = true;
ev.stopPropagation();
13. Как предотвратить события по умолчанию?
(1) вернуть ложь (2) ev.preventDefault();
14. Агент событий
Прокси-сервер события означает, что событие привязано к родительскому блоку, а затем дочерний блок запускает событие. Из-за всплытия события также запускается событие родительского блока. В это время в функции обработки времени родительского блока вы может передать атрибут srcElement или target, чтобы получить целевое время и обработать его соответствующим образом.
15. Как добавить, удалить, заменить и вставить в узел?
1）创建新节点
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
16. В чем разница между загрузкой документа и готовностью документа?
document.onload выполняет js после загрузки структуры и стиля, внешних js и изображений
document.ready — это метод, который выполняется при создании дерева dom.В нативных видах этот метод отсутствует.В jquery есть $().ready(function).
17. Что представляет собой модель потока событий Javascript?
«Захват события»: сверху вниз, окно, документ, документ.documentelment (полученный html) документ, тело, ...... целевой элемент
"Всплывание событий": да снизу вверх: наоборот
«Поток событий DOM»: три этапа: захват событий, целевой этап, всплывающее окно событий.
Класс события Дом:
Dom0 element.onclick=function(){}
DOM2 element.addEventlistener(‘click’,function(){},flase)
DOM3 element.addEventlistener(‘keyup’,function(){},flase)
Event.preventdefault() 阻止默认事件
Event.stoppropagation() 阻止冒泡
Event.currenTtarget()事件代理
Event.target 当前被点击元素
18. В чем разница между null и undefined?
null — это объект, представляющий «ничего», который равен 0 при преобразовании в числовое значение; undefined — это примитивное значение, представляющее «ничего», которое равно NaN при преобразовании в числовое значение.
Когда объявленная переменная не была инициализирована, значение переменной по умолчанию не определено. null используется для представления объекта, который еще не существует, и часто используется для обозначения того, что функция пытается вернуть несуществующий объект.
19. В чем разница и функция call() и .apply()?
Тот же самый момент: эффект двух методов точно такой же, оба меняют точку этого
Отличие: параметры, передаваемые методом, отличаются
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
Apply() принимает два параметра: один — это область, в которой работает функция (это), а другой — массив параметров.
Первый параметр метода Call() такой же, как у apply(), но передаваемые параметры должны быть пронумерованы.
20. Принципы режимов mvc и mvvm:
21. Почему JS различает микрозадачи и макрозадачи?
(1) js однопоточный, но синхронный и асинхронный
(2) И микрозадачи, и макрозадачи являются асинхронными задачами, и все они принадлежат очереди
(3) Задачи макроса обычно: script, setTimeout, setInterval, setImmediate
(4) Микрозадачи: родное обещание
(5) При обнаружении микрозадачи сначала выполните микрозадачу.Если микрозадачи нет после выполнения, выполните следующую макрозадачу.Если есть микрозадача, выполните микрозадачи одну за другой в последовательности.
22. setTimeout и setInterval
//setTimeout是3秒后执行
setTimeout(function(){
alert(123)
},3000)
//setInterval是每隔三秒执行一次，不断的重复执行
setInterval(function(){
alert(1121222)
},3000)
//两个执行都是异步进行的
23, глубокая копия мелкая копия
Самое фундаментальное различие между глубокой копией и поверхностной копией заключается в том, действительно ли нужно получить копию объекта, а не ссылку.
Предполагая, что B скопировал A, при изменении A посмотрите, изменился ли B:
Если B также изменяется, это означает, что это мелкая копия, и она сокращена! (изменить то же значение в памяти кучи)
Если B не изменится, указывая на глубокую копию, самостоятельный вид! (Разные значения изменяют память кучи)
Неглубокая реализация копирования:
var a = [1, 2, 3, 4, 5];
var b = a;
a[0] = 2
console.log(a);//[2,2,3,4,5]
console.log(b);//[2,2,3,4,5] ////b会随着a的变化而变化
Реализация глубокого копирования:
var a = [{"name":"weifeng"},{"name":"boy"}];
var a_copy =[].concat(JSON.parse(JSON.stringify(a)));//深拷贝
a_copy[1].name = "girl"
console.log(a);//[{"name":"weifeng"},{"name":"boy"}]
console.log(a_copy );//[{"name":"weifeng"},{"name":"girl"}]
24. Переставить и перерисовать
Перекомпоновка (перестановка):
Когда часть (или все) дерева рендеринга необходимо перестроить из-за изменения размера, компоновки, скрытия и т. д. элементов. Это называется оплавлением. Каждой странице нужен как минимум один рефлоу, то есть при первой загрузке страницы в это время обязательно произойдет рефлоу, потому что нужно строить дерево рендеринга. Во время перекомпоновки браузер делает недействительной затронутую часть дерева рендеринга и перестраивает эту часть дерева рендеринга.После завершения перекомпоновки браузер перерисовывает затронутую часть на экран, и этот процесс называется перерисовкой.
Перерисовать:
Когда некоторые элементы в дереве рендеринга нуждаются в обновлении свойств, и эти свойства влияют только на внешний вид и стиль элемента, но не на макет, например цвет фона. Это называется перекраска.
разница:
Оплавление неизбежно вызовет перерисовку, а перерисовка не обязательно приведет к оплавлению. Например: только при изменении цвета будет происходить только перерисовка, не вызывая оплавления
Перекомпоновка требуется при изменении макета страницы и свойств геометрии.
Например: добавление или удаление видимых элементов DOM, изменение положения элемента, изменение размера элемента — поля, отступы, границы, ширина и высота, изменение содержимого.
25. Защита от сотрясения и дросселирования?
В процессе фронтенд-разработки нам часто приходится привязывать какие-то постоянно срабатывающие события, такие как изменение размера, прокрутка, движение мыши и т. д., но иногда мы не хотим выполнять функции так часто во время непрерывного срабатывания событий.
Как мы обычно решаем эту ситуацию? Вообще говоря, анти-дрожание и дросселирование являются лучшими решениями.
1. Защита от сотрясений:
Это означает, что функция выполняется через n секунд после срабатывания события, при повторном срабатывании события в течение n секунд время выполнения функции будет пересчитано. Сценарий приложения (подходит для ответа на несколько событий только один раз): добавить функцию защиты от сотрясений на кнопку, чтобы предотвратить многократную отправку формы; определить, скользит ли прокрутка вниз; при выполнении проверки AJAX для непрерывного ввода в поле ввода , использование функции анти-встряски может эффективно уменьшить количество запросов.
Теперь создайте сцену: теперь прослушайте поле ввода и вызовите событие изменения после изменения текста. Если событие keyup используется напрямую, событие изменения будет запускаться часто. После добавления защиты от сотрясений событие изменения будет запускаться только тогда, когда ввод пользователя заканчивается или приостанавливается.
Так называемый anti-shake означает, что функция может быть выполнена только один раз в течение n секунд после срабатывания события, если событие сработает снова в течение n секунд, время выполнения функции будет пересчитано.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="input1">
</body>
<script>
const input1 = document.getElementById('input1')
//1、不加防抖 ，会一直触发change事件
input1.addEventListener('keyup', function(){
console.log(input1.value)
})
//2、简单实现防抖
let timer = null
input1.addEventListener('keyup', function(){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(() => {
//模拟触发change事件
console.log(input1.value)
//清空定时器
timer = null
}, 1000)
})
//3、将防抖函数这个工具进行封装
function debounce(fn, delay = 50){
//timer是闭包中的,不能被别人修改
let timer = null
return function(){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
}, delay)
}
}
input1.addEventListener('keyup', debounce(function(){
console.log(input1.value)
}, 600))
</script>
</html>
Тогда инкапсулированная функция защиты от сотрясений:
function debounce(fn, delay = 50){
let timer = null //timer是闭包中的,不能被别人修改
return function(){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
}, delay)
}
}
2. Дросселирование:
События, которые отправляются непрерывно, выполняют функцию только один раз в n секунд. Сценарий приложения (подходит для большого количества событий, которые должны быть равномерно распределены и инициированы по времени): перетаскивание элемента DOM; функция кисти Canvas.
Теперь создайте сцену: перетащите элемент и получите положение, в которое элемент перетаскивается в любое время. Если событие перетаскивания используется напрямую, оно будет срабатывать часто, что может легко привести к задержке. После добавления дросселирования, независимо от того, насколько высока скорость перетаскивания, оно будет срабатывать в фиксированное время.
Так называемое регулирование относится к постоянному запуску события, но выполнению функции только один раз в n секунд. Регулирование снижает частоту выполнения функции.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{
border: 1px solid #ccc;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div id = "div1" draggable="true">可拖拽</div>
<script>
const div1 = document.getElementById('div1')
//1、简单实现节流
let timer = null
div1.addEventListener('drag', function(e){
if(timer){
return
}
timer = setTimeout(() => {
console.log(e.offsetX, e.offsetY)
timer = null //定时器执行了，才让timer为空
}, 1000)
})
//2、将节流函数这个工具进行封装
function throttle(fn, delay = 100){
let timer = null
return function(){
if(timer){
return
}
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
},delay)
}
}
div1.addEventListener('drag', throttle(function(e){ //形参e会传给throttle函数运行后返回的函数
console.log(e.offsetX, e.offsetY)
},200))
</script>
</body>
</html>
Тогда инкапсулированная функция дросселирования:
function throttle(fn, delay = 100){
let timer = null
return function(){
if(timer){
return
}
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
},delay)
}
}
26. Что происходило в процессе страницы от ввода URL до загрузки и отображения страницы?
Делится на 4 шага:
(1) Когда отправляется запрос URL-адреса, независимо от того, является ли URL-адрес URL-адресом веб-страницы или URL-адресом каждого ресурса на веб-странице, браузер запускает поток для обработки запроса и запускает DNS-запрос на удаленный DNS-сервер. Это позволяет браузеру получить IP-адрес, соответствующий запросу.
(2) браузер и удаленный веб-сервер устанавливают TCP/IP-соединение посредством трехэтапного рукопожатия TCP. Рукопожатие состоит из сообщения синхронизации, сообщения ответа на синхронизацию и ответного сообщения, которые передаются между браузером и сервером. Сначала клиент пытается установить связь, затем сервер отвечает и принимает запрос клиента, и, наконец, клиент отправляет сообщение о том, что запрос принят.
(3) Как только соединение TCP/IP будет установлено, браузер отправит HTTP-запрос GET на удаленный сервер через соединение. Удаленный сервер находит ресурс и возвращает этот ресурс с ответом HTTP, состояние ответа HTTP 200 указывает на правильный ответ.
(4) В этот момент веб-сервер предоставляет службы ресурсов, и клиент начинает загружать ресурсы.
После того, как запрос возвращается, он входит в интерфейсный модуль, о котором мы беспокоимся.
Проще говоря, браузер будет анализировать HTML для создания дерева DOM, а затем генерировать дерево правил CSS на основе CSS, а javascript может управлять DOM на основе DOM API.
Подробности: Что произошло от ввода URL-адреса до его получения в браузере?
27. Расскажите о стратегии трехэтапного рукопожатия при передаче TCP.
Для точной доставки данных в пункт назначения протокол TCP использует стратегию трехэтапного рукопожатия. После того, как пакет данных отправлен по протоколу TCP, TCP не будет игнорировать ситуацию после передачи и обязательно подтвердит другой стороне, успешно ли он доставлен. Флаги TCP: SYN и ACK используются в процессе рукопожатия. Отправитель сначала отправляет пакет данных с флагом SYN другой стороне. После того, как принимающая сторона получит его, она возвращает пакет данных с флагом SYN/ACK для передачи подтверждающей информации. Наконец, отправитель отправляет обратно пакет данных с флагом ACK, что означает окончание «рукопожатия». Если на каком-то этапе процесса рукопожатия произойдет необъяснимое прерывание, протокол TCP снова отправит те же пакеты в том же порядке.
28. Расскажите о своем понимании семантики?
1. Когда стиль удаляется или теряется, страница может иметь четкую структуру
2. Это полезно для SEO: наладьте хорошую связь с поисковыми системами, что поможет сканерам более эффективно сканировать информацию: сканеры полагаются на теги для определения контекста и веса каждого ключевого слова;
3. Другим устройствам удобно анализировать (таким как программы чтения с экрана, слепые программы чтения, мобильные устройства) для осмысленного отображения веб-страниц;
4. Команде легко разрабатывать и поддерживать, а семантика более удобочитаема. Это важная тенденция следующей страницы. Команды, которые следуют стандарту W3C, следуют этому стандарту, что может уменьшить дифференциацию.
29. Как вы оптимизируете файлы и ресурсы сайта?
Среди ожидаемых решений:
слияние файлов
Минимизация файлов/сжатие файлов
Хостинг с CDN
Использование кэширования (несколько доменов для обеспечения кэширования)
разное
30. Назовите, пожалуйста, три способа сократить время загрузки страницы?
1. Сжать файлы css и js
2. Объедините файлы js и css, чтобы уменьшить количество HTTP-запросов.
3. Внешние файлы js и css размещаются внизу
4. Сократите dom-операции и максимально замените ненужные dom-операции переменными.
31. Какие есть способы ленивой загрузки js?
задержка и асинхронность, динамическое создание метода DOM (создание скрипта, вставка в DOM, обратный вызов после загрузки), асинхронная загрузка js по запросу
32. Какие методы оптимизации производительности у вас есть?
(Подробности см. в 14 принципах оптимизации производительности Yahoo).
(1) Уменьшите количество http-запросов: спрайты CSS, JS, сжатие исходного кода CSS, соответствующий контроль размера изображения; веб-страница Gzip, хостинг CDN, кеш данных, сервер изображений.
(2) Внешний шаблон JS + данные, сокращение потерь полосы пропускания, вызванных HTML-тегами, внешний интерфейс использует переменные для сохранения результатов запроса AJAX, каждая операция с локальными переменными, отсутствие запросов, уменьшение количества запросов
(3) Используйте innerHTML для замены операций DOM, уменьшения количества операций DOM и оптимизации производительности JavaScript.
(4) Если необходимо установить много стилей, установите className вместо непосредственного управления стилем.
(5) Используйте меньше глобальных переменных и кешируйте результаты поиска узлов DOM. Уменьшите количество операций чтения ввода-вывода.
(6) Избегайте использования выражения CSS (выражения CSS), также известного как динамические свойства (динамические свойства).
(7) Изображения предварительно загружаются, таблицы стилей размещаются вверху, а сценарии размещаются внизу с отметками времени.
33. Асинхронная загрузка и ленивая загрузка
1. Схема асинхронной загрузки: динамически вставлять теги сценария
2. Получите код js через ajax, а затем выполните его через eval
3. Добавьте атрибут defer или async в тег скрипта.
4. Создайте и вставьте iframe, пусть он выполняет js асинхронно
5. Ленивая загрузка: некоторый код js не нужен сразу при инициализации страницы, а нужен только в некоторых случаях позже.
34. Разница между GET и POST, когда использовать POST?
GET: обычно используется для получения информации с использованием URL-адреса для передачи параметров, также существует ограничение на количество отправляемой информации, обычно 2000 символов.
POST: обычно используется для изменения ресурсов на сервере, количество отправляемой информации не ограничено.
Метод GET должен использовать Request.QueryString для получения значения переменной, а метод POST использует Request.Form для получения значения переменной, то есть Get передает значение через адресную строку, а Post передает значение, отправив форму.
Однако используйте запрос POST в следующих случаях:
Невозможно использовать файл кеша (обновить файл или базу данных на сервере)
Отправка больших объемов данных на сервер (POST не имеет ограничения на объем данных)
POST более стабилен и надежен, чем GET, при отправке пользовательского ввода, содержащего неизвестные символы.
35. Как вы обычно управляете своими проектами?
Первая команда должна определить глобальный стиль (globe.css), режим кодирования (utf-8) и т. д.;
Навыки письма должны быть последовательными (например, все они написаны в стиле наследования, а отдельные стили написаны в одну строку);
Писатель стиля аннотации, каждый модуль размечается по времени (маркировка места вызова ключевого стиля);
Страницы аннотируются (например, начало и конец модуля страницы);
CSS и HTML хранятся в параллельных папках, и имена должны быть унифицированы (например, style.css);
Хранилище подпапок JS Название основано на английском переводе функции JS.
36. Как вы оптимизируете свой код?
повторное использование кода
Избегайте глобальных переменных (пространств имен, объемлющих пространств, модульных mvc...)
Разделение функций, чтобы избежать раздутых функций
Примечания
37. Что такое FOUC (мерцание без содержания стиля)? Как избежать FOUC?
FOUC - Flash Of Unstyled Content 文档样式闪烁
<style type="text/css" media="all">@import "../fouc.css";</style>
И @import, ссылающийся на файлы CSS, является виновником этой проблемы. IE сначала загрузит DOM всего документа HTML, а затем импортирует внешний файл CSS. Таким образом, между завершением загрузки DOM страницы и завершением импорта CSS будет определенный период времени. Содержимое страницы без стиля.Скорость интернета и скорость компьютера.
解决方法简单的出奇，只要在<head>之间加入一个<link>或者<script>元素就可以了。
38. Понимание рефакторинга сайта?
Рефакторинг веб-сайта: упростите структуру и улучшите читаемость без изменения внешнего поведения, сохраняя при этом согласованное поведение в интерфейсе веб-сайта. То есть оптимизация веб-сайта без изменения пользовательского интерфейса и поддержание согласованного пользовательского интерфейса при расширении.
Для традиционных веб-сайтов рефакторинг обычно заключается в следующем:
Макет таблицы изменен на DIV+CSS.
Сделать внешний интерфейс веб-сайта совместимым с современными браузерами (для нестандартного CSS, например, допустимого для IE6)
Оптимизирован для мобильных платформ
Оптимизирован для SEO
Аспекты, которые следует учитывать при глубоком рефакторинге веб-сайта
Уменьшите связь между кодом
Сделайте свой код гибким
Пишите код строго по спецификации
Разработка расширяемых API
Замените старый фреймворк, язык (например, VB)
Улучшить пользовательский опыт
Обычно в рефакторинг включаются и оптимизации по скорости
Сжатие внешних ресурсов, таких как JS, CSS и изображения (обычно решается сервером).
Оптимизация производительности программы (например, чтение и запись данных)
Используйте CDN для ускорения загрузки ресурсов
Оптимизация для JS DOM
Кэширование файлов для HTTP-серверов
39. Что такое изящная деградация и прогрессивное улучшение?
изящная деградация: веб-сайты нормально работают во всех современных браузерах, если пользователь использует более старый браузер, код проверяет, работают ли они. Из-за уникальной проблемы компоновки блочной модели IE практика взлома для разных версий IE была изящно деградирована, добавлены решения-кандидаты для тех браузеров, которые не могут поддерживать эту функцию, так что это может в той или иной форме ухудшить работу в старых браузерах. .
прогрессивное улучшение: Начните с базовых функций, которые поддерживаются всеми браузерами, и постепенно добавляйте функции, которые поддерживаются только современными браузерами, добавляя на страницу дополнительные функции, безвредные для базового браузера.
40. В чем разница между стеком и очередью?
Операции вставки и удаления стека выполняются на одном конце, а операции с очередью выполняются на обоих концах.
Очередь - первый пришел, первый ушел, а стек - первый пришел, последний ушел.
Стек позволяет вставлять и удалять только в конце списка, а очередь позволяет вставлять только в конец списка и удалять в начале списка.
41. В чем разница между стеком и кучей?
Область стека (stack) — автоматически выделяется и освобождается компилятором, и хранит значения параметров функций, значения локальных переменных и т.д.
Область кучи (куча) - обычно выделяется и освобождается программистом. Если программист ее не освобождает, она может быть освобождена ОС при завершении программы.
Куча (структура данных): Куча может рассматриваться как дерево, например: сортировка кучи;
Стек (структура данных): структура данных по принципу «первым поступил — последним вышел».
42. Как вы понимаете должность интерфейсного инженера? Как будет выглядеть его будущее?
Front-end — это программист, который ближе всего к пользователю, ближе, чем back-end, база данных, менеджер по продукту, эксплуатация и безопасность.
1. Реализовать взаимодействие интерфейса
2. Улучшить пользовательский опыт
3. С Node.js внешний интерфейс может реализовать некоторые вещи на стороне сервера.
Фронтенд — это тот программист, который находится ближе всего к пользователю, его способность — сделать так, чтобы продукт развивался с 90 баллов до 100 баллов или даже лучше.
Участвуйте в проекте, выполняйте визуализацию быстро и качественно, с точностью до 1px;
Коммуникация с членами команды, дизайн пользовательского интерфейса, продакт-менеджеры;
Хорошо сделанная структура страницы, рефакторинг страницы и пользовательский опыт;
Обрабатывайте взломы, будьте совместимы и пишите красивые форматы кода;
Оптимизировано для серверов и включает в себя новейшие интерфейсные технологии.
кодовый алгоритм и т.д.
43. Дедупликация массива indexOf
var arr=[1,1,2,2,3,4,5,7,8,9,6,4,6,2,]
var arr2=[]
for(var i=0;i<arr.length;i++){
if(arr2.indexOf(arr[i])<0){
arr2.push(arr[i])
}
}
console.log(arr2)
44, дедупликация массива методов es6
let a = [1,5,6,3,8,0,5,7,0,4,2,7,5,4,5,9,22]
let b=new Set([...a])
console.log(b);
b=[...b];
console.log(b)
45. Пузырьковая сортировка
var arr=[1,3,4,6,8,0,2,5,7,4,9,2];
var temp=0;
for (var i=0;i<arr.length;i++) {
for(var j=0;j<arr.length-i;j++){
if(arr[j]<arr[j+1]){
temp=arr[j+1];
arr[j+1]=arr[j];
arr[j]=temp;
}
}
}
console.log(arr)
46. Получить параметры в URL
//测试地址：http://www.runobb.com/jqur/dfev.html?name=xiaohong&age=22
function showWindowHref(){
var sHref=window.location.href;
var args=sHref.split('?');
if(args[1]==sHref){
return '';
}
var aa=args[1].split('&');
var obj={}
for (var i=0;i<aa.length;i++) {
var bb=aa[i].split('=')
obj[bb[0]]=bb[1]
}
return obj;
}
47, массив уменьшения размерности
//利用[].concat.apply实现降维
var arr=[[1,2],[3,4]];
function Jw(obj){
console.log(Array.prototype.concat.apply([],obj))
return Array.prototype.concat.apply([],obj);
}
Jw(arr);
//如果concat方法的参数是一个元素，该元素会直接插入新数组中；如果参数是一个数组，该数组的各个元素将被插入到新数组中
function reduceDimension(arr){
let ret = [];
for(let i=0;i<arr.length;i++){
ret=ret.concat(arr[i])
}
console.log(ret)
return ret;
}
reduceDimension(arr)
//递归
function reduceDimension(arr){
let ret = [];
let toArr = function(arr){
arr.forEach(function(item){
item instanceof Array ? toArr(item) : ret.push(item);
});
}
toArr(arr);
console.log(ret)
return ret;
}
reduceDimension([1, 2, [3, 4, [5, 6]]])
//flat
let list = [1, 2, 3, [4, [5]]];
let res = list.flat(Infinity)
console.log(res) // [1, 2, 3, 4, 5]
48. js определяет символ с наибольшим количеством вхождений в строке и подсчитывает количество раз
var str = 'asdfssaaasasasasaa';
var json = {};
for (var i = 0; i < str.length; i++) {
if(!json[str.charAt(i)]){
json[str.charAt(i)] = 1;
}else{
json[str.charAt(i)]++;
}
};
var iMax = 0;
var iIndex = '';
for(var i in json){
if(json[i]>iMax){
iMax = json[i];
iIndex = i;
}
}
console.log('出现次数最多的是:'+iIndex+'出现'+iMax+'次'); //出现次数最多的是:a出现 9次
let string = 'kapilalipak';
const table={};
for(let char of string) {
table[char]=table[char]+1 || 1;
}
// 输出
console.log(table)// {k: 2, a: 3, p: 2, i: 2, l: 2}
49. Напишите функцию для очистки пробелов до и после строки. (Совместим со всеми браузерами)
function trim(str) {
if (str & typeof str === "string") {
return str.replace(/(^s*)|(s*)$/g,""); //去除前后空白符
}
}
50. Как отключить кнопки «вперед» и «назад» в браузере с помощью jquery?
<script type="text/javascript" language="javascript">
$(document).ready(function() {
window.history.forward(1);
//OR
window.history.forward(-1);
});
</script>
Как получить все галочки на странице? (без использования сторонних фреймворков)
var inputs = document.getElementsByTagName("input");//获取所有的input标签对象
var checkboxArray = [];//初始化空数组，用来存放checkbox对象。
for(var i=0;i<inputs.length;i++){
var obj = inputs[i];
if(obj.type=='checkbox'){
checkboxArray.push(obj);
}
}
51. Как отлавливать исключения в программе?
try{
}catch(e){
}finally{
}
52. js-сортировка
Функция сортировки по возрастанию и убыванию sortNumber
const arr1 = [6,1,2,3,4];
function sortNumber(a,b){
return b-a;
}
arr1.sort(sortNumber);
console.log(arr1)
// [6, 4, 3, 2, 1]
Сортировать по флагу, верные отображаются впереди
const arr2 = [
{ id: 10, flag: true },
{ id: 5, flag: false },
{ id: 6, flag: true },
{ id: 9, flag: false }
];
const r = arr2.sort((a, b) => b.flag - a.flag);
console.log(r);
// [
// { id: 10, flag: true },
// { id: 6, flag: true },
// { id: 5, flag: false },
// { id: 9, flag: false }
// ]
Если вам это нравится, пожалуйста, поставьте лайк. Если вы считаете, что это полезно для окружающих, пожалуйста, переместите палец и поделитесь им. Спасибо, что нашли время прочитать, а также за ваши лайки и публикации.
Другие популярные статьи
- резюме, связанное с es6
- Метод уменьшения массива JS ()
- js метод сортировки массива ()
- Установить токен для заголовка запроса
- es6 оператор распространения три точки (...)
Последующие обновления продолжатся
- Резюме HTML-интервью
- краткое изложение интервью css
- краткое изложение интервью
- Резюме мини-программы интервью
Это будет собрано в конце~