106 основных вопросов для собеседования для младшего и среднего начального уровня.

JavaScript

1. Что такое гомологичная стратегия?

Политика того же источника запрещает JavaScript делать запросы из разных источников. Источник определяется как комбинация протокола, имени хоста и номера порта. Эта политика предотвращает доступ вредоносных сценариев на странице к конфиденциальным данным на другой веб-странице через объектную модель документа страницы.

В таблице ниже приведеныstore.company.com/enemy/fear one.contract…Пример исходника для сравнения:

URL	результат	причина
Store.company.com/enemy2/other. ...	гомология	только путь разный
store.company.com/enemy/inner/ ах…	гомология	только путь разный
store.company.com/secure.html	потерпеть неудачу	разные протоколы
Store.company.com:81/ Враг /etc.htm...	потерпеть неудачу	разные порты (http:// порт по умолчанию 80)
news.company.com/enemy/other Также…	потерпеть неудачу	разные хосты

Использованная литература:

Политика одинакового происхождения браузера

2. Что такое междоменный домен?

причина

Политика браузера в отношении одного и того же происхождения приводит к перекрестному происхождению.

эффект

Важный механизм безопасности для помещения в карантин потенциально вредоносных файлов

решить

jsonp, который позволяет скриптам загружать сторонние ресурсы
Обратный прокси (Access-Control-Allow-Origin* настраивается внутри службы nginx)
Сотрудничество внешнего и внутреннего интерфейса Cors устанавливает заголовок запроса, Access-Control-Allow-Origin и другую информацию заголовка.
вложенная связь iframe, почтовое сообщение

Использованная литература:

Свежие вопросы об августовском предварительном интервью
Междоменное совместное использование ресурсов CORS Руан Ифэн

3. Что такое JSONP?

Это статья, которую, я думаю, относительно легко понять.Подробное объяснение принципа jsonp - наконец-то выясните, что такое jsonp.

4. Способ привязки событий

встроенный дом

<button onclick="func()">按钮</button>

прямое связывание

btn.onclick = function(){}

прослушиватель событий

btn.addEventListener('click',function(){})

5. Делегация мероприятия

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

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>凤梨</li>
</ul>

// good
document.querySelector('ul').onclick = (event) => {
  let target = event.target
  if (target.nodeName === 'LI') {
    console.log(target.innerHTML)
  }
}

// bad
document.querySelectorAll('li').forEach((e) => {
  e.onclick = function() {
    console.log(this.innerHTML)
  }
})

6. Цикл событий

Цикл событий — это однопоточный цикл, который отслеживает стек вызовов и проверяет, не завершается ли какая-либо работа в очереди задач. Если стек вызовов пуст и в очереди задач есть функция обратного вызова, функция обратного вызова удаляется из очереди и помещается в стек вызовов для выполнения.

7. Как настроить события

Новый режим

const div = document.createElement('div') // 不创建元素，直接用 window 对象也可以
const event = new Event('build')

div.addEventListener('build', function(e) {
    console.log(111)
})

div.dispatchEvent(event)

Устаревший режим

Изначально предоставляет 3 метода для реализации пользовательских событий.
document.createEvent('Event')Создать событие
initEventсобытие инициализации
dispatchEventтриггерное событие

const events = {}

function registerEvent(name) {
    const event = document.createEvent('Event')
    event.initEvent(name, true, true) // 事件名称，是否允许冒泡，该事件的默认动作是否可以被取消
    events[name] = event
}

function triggerEvent(name) {
    window.dispatchEvent(events[name])
}

registerEvent('resize') // 注册 resize 事件
triggerEvent('resize') // 触发 resize 事件

MDN

8. Разница между target и currentTarget

event.target возвращает элемент, вызвавший событие
event.currentTarget возвращает элемент, к которому привязано событие

9. прототип иprotoкаковы отношения

prototypeОбъект-прототип, используемый для доступа к функциям.
__proto__Объект-прототип, используемый для доступа к экземпляру объекта (или использованияObject.getPrototypeOf()).

function Test() {}
const test = new Test()
test.__proto__ == Test.prototype // true

То есть функция имеетprototypeсвойства, экземпляры объекта имеют__proto__свойства, все они используются для доступа к объекту-прототипу.

Функция немного особенная, это не просто функция, это объект. Так и у него есть__proto__Атрибуты.

Почему это так? Поскольку функции являются встроенными конструкторамиFunctionПример:

const test = new Function('function Test(){}')
test.__proto__ == Function.prototype // true

Таким образом, функция может пройти__proto__получить доступ к своему объекту-прототипу.

из-заprototypeявляется объектом, поэтому его также можно передать__proto__получить доступ к своему объекту-прототипу. объект-прототип объекта, который, естественно,Object.prototype.

function Test() {}
Test.prototype.__proto__ == Object.prototype // true

Это может показаться немного сложным, и мы можем посмотреть на это под другим углом.ObjectПо сути, это тоже встроенный конструктор:

const obj = new Object()
obj.__proto__ == Object.prototype // true

С этой точки зрения, лучше понять.

Чтобы предотвратить бесконечный цикл, поэтомуObject.prototype.__proto__указывает наnullиз,nullявляется концом всех вещей.

Object.prototype.__proto__ == null // true

теперь, когдаnullэто конец всех вещей, которые используютObject.create(null)Созданный объект не__proto__атрибут, ниprototypeАтрибуты.

10. Прототипное наследование

Все объекты JS (функции JS являются прототипами) имеют__proto__свойство, указывающее на его объект-прототип. При попытке доступа к свойству объекта, если оно не найдено на объекте, он также ищет прототип объекта и прототип прототипа объекта, и ищет по очереди вверх, пока не найдет свойство с совпадающее имя или достигает конца цепи прототипа.

11. Наследование

Паразитическая композиционная наследственность

function SuperType(name) {
    this.name = name
    this.colors = ['red']
}

SuperType.prototype.sayName = function() {
    console.log(this.name)
}
// 继承实例属性
function SubType(name, age) {
    SuperType.call(this, name)
    this.age = age
}

function inheritPrototype(subType, superType) {
    let prototype = Object.create(superType.prototype)
    prototype.constructor = subType
    subType.prototype = prototype
}
// 继承原型方法
inheritPrototype(SubType, SuperType)

// 定义自己的原型方法
SubType.prototype.sayAge = function() {
    console.log(this.age)
}

12. Закрытие

Замыкание — это функция, которая имеет доступ к переменным в области видимости другой функции.

function sayHi(name) {
    return () => {
       console.log(`Hi! ${name}`)
    }
}
const test = sayHi('xiaoming')
test() // Hi! xiaoming

Несмотря на то, что функция sayHi была выполнена, ее активный объект не будет уничтожен, поскольку тестовая функция по-прежнему ссылается на имя переменной в функции sayHi, которая является замыканием.

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

Реализация частных свойств с замыканиями

const test = (function () {
    let value = 0
    return {
        getVal() { return value },
        setVal(val) { value = val }
    } 
})()

Приведенный выше код реализует частное свойствоvalue, его можно использовать толькоgetVal()принять значение поsetVal(val)чтобы установить значение.

13. Восстановление памяти

В JS есть два алгоритма освобождения памяти. Первый — это сборка мусора с подсчетом ссылок, а второй — алгоритм маркировки и очистки (все современные браузеры используют сборку мусора с маркировкой и очисткой с 2012 года).

сборка мусора с подсчетом ссылок

Если на объект не ссылаются другие объекты, он будет собран механизмом сборки мусора.

let o = { a: 1 }

Объект создается и на него ссылается о.

o = null

Объект, на который только что ссылался o, теперь является нулевой ссылкой и будет собран.

циклическая ссылка

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

function f(){
  var o = {};
  var o2 = {};
  o.a = o2; // o 引用 o2
  o2.a = o; // o2 引用 o

  return "azerty";
}

f();

После выполнения f() локальные переменные функции бесполезны, и в общем случае эти локальные переменные будут переработаны. Но в приведенном выше примере o и o2 образуют циклическую ссылку, которую нельзя использовать повторно.

алгоритм маркировки-развертки

Этот алгоритм предполагает настройку объекта, называемого корнем (в Javascript корнем является глобальный объект). Сборщик мусора будет периодически запускаться в корне, находить все объекты, на которые ссылается корень, а затем находить объекты, на которые ссылаются эти объекты... Начиная с корня, сборщик мусора находит все объекты, которые он может получить, и собирает все объекты, которые он не может получить.

Для более раннего примера, в f () после выполнения, потому что O и O2 из глобального объекта не может добраться до, поэтому они будут переработаны.

Эффективное использование памяти

В JS в es6 есть функции, глобальная область видимости with и область видимости блока. Локальные переменные освобождаются, когда область функции уничтожается, глобальная область требует, чтобы процесс вышел, чтобы быть освобожденным, или использовать удаление и присвоить значение nullnull undefined.

Удаление объектов с помощью delete в V8 может помешать оптимизации V8, поэтому лучше выполнять разыменование путем присваивания.

Использованная литература:

управление памятью

14. Есть функция, параметр — это функция, возвращаемое значение — тоже функция, функция возвращаемой функции аналогична функции входного параметра, но эту функцию можно выполнить только 3 раза, и она недействительно для повторного выполнения, как реализовать

Эта тема предназначена для изучения использования замыканий.

function sayHi() {
    console.log('hi')
}

function threeTimes(fn) {
    let times = 0
    return () => {
        if (times++ < 3) {
            fn()
        }
    }
}

const newFn = threeTimes(sayHi)
newFn()
newFn()
newFn()
newFn()
newFn() // 后面两次执行都无任何反应

через переменные закрытияtimesконтролировать выполнение функции

15. Реализуйте функцию добавления так, чтобы результаты двух вызовов add(a)(b) и add(a,b) были одинаковыми.

Реализовать 1

function add(a, b) {
    if (b === undefined) {
        return function(x) {
            return a + x
        }
    }

    return a + b
}

Реализация 2 — Каррирование

function curry(fn, ...args1) {
    // length 是函数对象的一个属性值，指该函数有多少个必须要传入的参数，即形参的个数。
    if (fn.length == args1.length) {
        return fn(...args1)
    }

    return function(...args2) {
        return curry(fn, ...args1, ...args2)
    }
}

function add(a, b) {
    return a + b
}

console.log(curry(add, 1)(2)) // 3
console.log(curry(add, 1, 2)) // 3

16. Каковы преимущества и недостатки использования AJAX

преимущество

Интерактив лучше. Новый контент с сервера может динамически изменяться без перезагрузки всей страницы.
Меньше подключений к серверу, так как сценарии и стили нужно запрашивать только один раз.
Состояние может поддерживаться на странице. Переменные JavaScript и состояние DOM будут сохранены, поскольку основная страница контейнера не перезагружается.
В основном включая большинство преимуществ СПА.

недостаток

Динамические веб-страницы трудно добавить в закладки.
Не работает, если в браузере отключен JavaScript.
Некоторые поисковые роботы не выполняют JavaScript и не видят контент, загруженный JavaScript.
В основном включая большинство недостатков СПА.

Использованная литература:

Каковы преимущества и недостатки использования Ajax?

17. Разница между Ajax и Fetch

Ajax инициируется с помощью объекта XMLHttpRequest, но его очень хлопотно использовать, поэтому в новой спецификации ES6 есть fetch, а fetch отправляет запрос без написания большого количества кода, такого как ajax.
Запрос нельзя отменить с помощью fetch, потому что fetch основан на промисах, а промисы не могут этого сделать.
По умолчанию fetch не принимает и не отправляет файлы cookie.
Fetch не имеет встроенной возможности отслеживать ход выполнения запроса, в то время как XMLHttpRequest может
Fetch сообщает только об ошибках сетевых запросов, 400 и 500 считаются успешными запросами, которые необходимо инкапсулировать для обработки.
Поскольку выборка является спецификацией ES6, ее совместимость не так хороша, как у XMLHttpRequest.

18. Переменный подъем

Переменная VAR увеличится, что означает, что переменные могут быть использованы до того, как он будет объявлен. И пусть не переменный подъем для Const, продвиньте использование ошибки.

Поднятие переменных — это термин, используемый для объяснения поведения объявлений переменных в коде. Переменная, объявленная или инициализированная с помощью ключевого слова var, «поднимет» оператор объявления наверх текущей области. Однако только объявление вызовет продвижение, а оператор присваивания (если он есть) останется как есть.

19. В чем разница между созданием переменных с помощью let, var и const

Областью действия переменной, объявленной с помощью var, является ее текущий контекст выполнения, это может быть вложенная функция или переменная, объявленная вне какой-либо функции. let и const имеют блочную область видимости, то есть к ним можно получить доступ только в пределах ближайшего набора фигурных скобок (функция, блок кода if-else или цикл for).

Глобальные переменные и функции, объявленные var, становятся свойствами и методами объекта окна. Объявления верхнего уровня с использованием let и const не определены в глобальном контексте, но имеют такое же влияние на разрешение цепочки областей видимости.

function foo() {
  // 所有变量在函数中都可访问
  var bar = 'bar';
  let baz = 'baz';
  const qux = 'qux';

  console.log(bar); // bar
  console.log(baz); // baz
  console.log(qux); // qux
}

console.log(bar); // ReferenceError: bar is not defined
console.log(baz); // ReferenceError: baz is not defined
console.log(qux); // ReferenceError: qux is not defined

if (true) {
  var bar = 'bar';
  let baz = 'baz';
  const qux = 'qux';
}

// 用 var 声明的变量在函数作用域上都可访问
console.log(bar); // bar
// let 和 const 定义的变量在它们被定义的语句块之外不可访问
console.log(baz); // ReferenceError: baz is not defined
console.log(qux); // ReferenceError: qux is not defined

var поднимает переменную, что означает, что переменную можно использовать до ее объявления. let и const не продвигают переменные, и раннее их использование приведет к ошибке.

console.log(foo); // undefined

var foo = 'foo';

console.log(baz); // ReferenceError: can't access lexical declaration 'baz' before initialization

let baz = 'baz';

console.log(bar); // ReferenceError: can't access lexical declaration 'bar' before initialization

const bar = 'bar';

Повторение объявлений с var не приведет к ошибке, но let и const будут.

var foo = 'foo';
var foo = 'bar';
console.log(foo); // "bar"

let baz = 'baz';
let baz = 'qux'; // Uncaught SyntaxError: Identifier 'baz' has already been declared

Разница между let и const заключается в том, что let допускает несколько присваиваний, а const допускает только одно присваивание.

// 这样不会报错。
let foo = 'foo';
foo = 'bar';

// 这样会报错。
const baz = 'baz';
baz = 'qux';

20. Чем отличается поверхностная копия от глубокой копии объекта

существуетJSВ дополнение к базовым типам данных существуют также ссылочные типы, такие как объекты и массивы. Для базовых типов данных копирование означает прямое копирование значения переменной, в то время как копирование ссылочного типа фактически является адресом переменной.

let o1 = {a: 1}
let o2 = o1

В этом случае, если изменитьo1илиo2Если у одного есть значение, другое тоже изменится, потому что они оба указывают на один и тот же адрес.

o2.a = 3
console.log(o1.a) // 3

Поверхностная копия и глубокая копия - это различие, сделанное на этом основании.Если при копировании объекта копируется только базовый тип данных, а ссылочный тип данных передается только по ссылке, без повторного создания нового объекта считается поверхностным копировать. Наоборот, при копировании эталонного типа данных создается новый объект и копируются в него переменные-члены, что считается глубокой копией.

21. Как реализовать глубокое копирование объектов

Этот метод несовершенен, подробнее см.О ямах, на которые стоит обратить внимание при реализации deep copy JSON.parse(JSON.stringify(obj))

let o1 = {a:{
    b:1
  }
}
let o2 = JSON.parse(JSON.stringify(o1))

Базовая версия

function deepCopy(target) {
    if (typeof target == 'object') {
        const result = Array.isArray(target)? [] : {}
        for (const key in target) {
            if (typeof target[key] == 'object') {
                result[key] = deepCopy(target[key])
            } else {
                result[key] = target[key]
            }
        }

        return result
    } else if (typeof target == 'function') {
        return eval('(' + test.toString() + ')')
    } else {
        return target
    }
}

полная версия

const mapTag = '[object Map]'
const setTag = '[object Set]'
const arrayTag = '[object Array]'
const objectTag = '[object Object]'
const symbolTag = '[object Symbol]'

function deepCopy(origin, map = new WeakMap()) {
    if (!origin || !isObject(origin)) return origin
    if (typeof origin == 'function') {
        return eval('(' + origin.toString() + ')')
    }

    const objType = getObjType(origin)
    const result = createObj(origin, objType)

    // 防止循环引用，不会遍历已经在 map 中的对象，因为在上一层正在遍历
    if (map.get(origin)) {
        return map.get(origin)
    }
    
    map.set(origin, result)
    
    // set
    if (objType == setTag) {
        for (const value of origin) {
            result.add(deepCopy(value, map))
        }

        return result
    }

    // map
    if (objType == mapTag) {
        for (const [key, value] of origin) {
            result.set(key, deepCopy(value, map))
        }

        return result
    }

    // 对象或数组
    if (objType == objectTag || objType == arrayTag) {
        for (const key in origin) {
            result[key] = deepCopy(origin[key], map)
        }

        return result
    }

    return result
}

function getObjType(obj) {
    return Object.prototype.toString.call(obj)
}

function createObj(obj, type) {
    if (type == objectTag) return {}
    if (type == arrayTag) return []
    if (type == symbolTag) return Object(Symbol.prototype.valueOf.call(obj))
    
    return new obj.constructor(obj)
}

function isObject(origin) {
    return typeof origin == 'object' || typeof origin == 'function'
}

Как написать глубокий текст, который удивит интервьюера?

22. Дедупликация массива

ES5

function unique(arry) {
    const temp = []
    arry.forEach(function(item) {
        if (temp.indexOf(item) == -1) {
            temp.push(item)
        }
    })
    
    return temp
}

ES6

function unique(arry) {
   return Array.from(new Set(arry))
}

23. Тип данных

Undefined
Null
Boolean
Number
String
Object
символ (новое в ES6)

24. Встроенные функции (нативные функции)

String
Number
Boolean
Object
Function
Array
Date
RegExp
Error
Symbol

Примитивное значение «Я строка» не является объектом, это просто литерал и неизменяемое значение.

Если вы хотите выполнить некоторые операции над этим литералом, например получить длину, получить доступ к одному из символов и т. д., вам необходимо преобразовать его в объект String.

К счастью, язык при необходимости автоматически преобразует строковый литерал в объект String, что означает, что вам не нужно явно создавать объект.

25. Как отличить массив от объекта

Array.isArray([]) // true
Array.isArray({}) // false

typeof [] // "object"
typeof {} // "object"

Object.prototype == [].__proto__ // false
Object.prototype == {}.__proto__ // true
Array.prototype == [].__proto__ // true
Array.prototype == {}.__proto__ // false

26. Автоматическая точка с запятой

Иногда JavaScript автоматически заполняет отсутствующие точки с запятой в строках кода, что называется автоматической вставкой точки с запятой (ASI).

Потому что при отсутствии необходимого ; код не запустится и отказоустойчивость языка снизится. ASI позволяет нам игнорировать ненужные;.

Обратите внимание, что ASI работает только с новыми строками и не вставляет точки с запятой в середине строк кода.

Если синтаксический анализатор JavaScript находит строку кода, которая может вызвать ошибку из-за отсутствия точки с запятой, он автоматически заполняет точку с запятой. И это произойдет только в том случае, если между концом строки кода и новой строкой нет ничего, кроме пробелов и комментариев.

27. Точность с плавающей запятой

Уууу. CSS88.com/archives/73…

28. Разница между cookie, localStorage и sessionStorage

характеристика	cookie	localStorage	sessionStorage
кто инициализируется	клиент или сервер, сервер может использовать`Set-Cookie`заголовок запроса.	клиент	клиент
жизненный цикл данных	Обычно генерируется сервером, время истечения срока действия может быть установлено, если генерируется в браузере, по умолчанию срок действия истекает после закрытия браузера.	Постоянно сохраняется, можно очистить	Действует только для текущего сеанса, очищается после закрытия страницы
размер данных хранилища	4KB	5MB	5MB
общаться с сервером	Он будет каждый раз передаваться в заголовке HTTP. Если вы используете файлы cookie для сохранения слишком большого объема данных, это вызовет проблемы с производительностью.	сохранять только на стороне клиента	сохранять только на стороне клиента
использовать	Обычно генерируется сервером, идентификатор пользователя для идентификации	Используется для данных кеша браузера	Используется для данных кеша браузера
разрешение на доступ	любое окно	любое окно	текущее окно страницы

29. Самовыполняющаяся функция, для какого сценария используется? выгода?

Самовыполняющаяся функция:

объявить анонимную функцию
Немедленно вызовите эту анонимную функцию.

Действие: Создайте независимую область.

выгода

Предотвратите распространение переменных в глобальную, чтобы не конфликтовать с различными библиотеками js.
Изолируйте область действия, чтобы избежать загрязнения, или укоротите цепочку областей действия, чтобы предотвратить освобождение ссылочной переменной из-за закрытия.
Используйте функцию немедленного выполнения, чтобы вернуть требуемую бизнес-функцию или объект, избегая каждый раз обработки посредством условного суждения.

Сцены

Обычно используется в фреймворках, плагинах и других сценариях.

30. Как общаться между несколькими страницами

Есть несколько способов:

cookie
web worker
localeStorage и sessionStorage

31. Разница между анимацией css и анимацией js

Сложность кода, код анимации js относительно сложен
Когда анимация запущена, степень контроля над анимацией, js может делать анимацию, приостанавливать, отменять, завершать, css анимация не может добавлять события
Что касается производительности анимации, js-анимация имеет дополнительный процесс анализа js, и производительность не так хороша, как у css-анимации.

zhuanlan.zhihu.com/p/41479807

32. Что сделал новый опыт объекта?

function Test(){}
const test = new Test()

Создайте новый объект:

const obj = {}

Установите свойство конструктора нового объекта на имя конструктора и установите свойство __proto__ нового объекта так, чтобы оно указывало на объект-прототип конструктора.

obj.constructor = Test
obj.__proto__ = Test.prototype

Функция вызывается с новым объектом, и this в функции указывает на новый объект экземпляра.

Test.call(obj)

Сохраните адрес инициализированного нового объекта в переменную слева от знака равенства

33. Разница между связыванием, вызовом и применением

call и apply на самом деле одно и то же, разница в том, что при передаче параметров параметры передаются по одному или массивом.
И вызов, и применение вступают в силу во время вызова, изменяя указатель this вызывающего объекта.

let name = 'Jack'
const obj = {name: 'Tom'}
function sayHi() {console.log('Hi! ' + this.name)}

sayHi() // Hi! Jack
sayHi.call(obj) // Hi! Tom

bind также изменяет эту точку, но не вступает в силу при вызове, а возвращает новую функцию.

const newFunc = sayHi.bind(obj)
newFunc() // Hi! Tom

34. Реализуйте функцию применения вызова привязки

bind

Function.prototype.bind = function(context, ...extra) {
    const self = this
    // 这里不能用箭头函数，防止绑定函数为构造函数
    return function(...arg) {
        return self.call(context, ...extra.concat(arg))
    }
}

call

Function.prototype.call = function(context, ...args) {
    if (context === null || context === undefined) {
        context = window
    } else if (!context || context.toString() != '[object Object]') {
        context = {}
    }

    let key = Math.random()
    while (context[key]) {
        key = Math.random()
    }

    context[key] = this
    const result = context[key](...args)
    delete context[key]
    return result
}

apply

Function.prototype.apply = function(context, args) {
    if (args !== undefined && !Array.isArray(args)) throw '参数必须为数组'
    if (context === null || context === undefined) {
        context = window
    } else if (!context || context.toString() != '[object Object]') {
        context = {}
    }

    let key = Math.random()
    while (context[key]) {
        key = Math.random()
    }

    context[key] = this
    let result
    if (args === undefined) {
        const result = context[key]()
    } else {
        const result = context[key](...args)
    }

    delete context[key]
    return result
}

35. Пожалуйста, кратко опишите`JavaScript`середина`this`.

в JSthisЭто относительно сложная концепция, которую невозможно четко объяснить несколькими простыми предложениями. Грубо говоря, способ вызова функции определяетthisценность . Я много читал в Интернете оthisстатья,Arnav Aggrawalнаписано понятнее.thisЗначение соответствует следующим правилам:

использовать при вызове функцииnewключевое слово внутри функцииthisэто совершенно новый объект.
еслиapply,callилиbindМетоды используются для вызова и создания функции, а this внутри функции — это объект, передаваемый в эти методы в качестве параметра.
Когда функция вызывается как метод объекта,thisэто объект, для которого вызывается функция. например, когдаobj.method()При вызове this внутри функции будет привязано кobjобъект.
Если вызывающая функция не удовлетворяет вышеуказанным правилам, тоthisЗначение указывает на глобальный объект (global object). В среде браузераthisзначение указывает наwindowобъект, но в строгом режиме ('use strict'),thisценностьundefined.
Если соблюдается более одного из вышеперечисленных правил, решение принимает более высокое правило (№ 1 — самое высокое, № 4 — самое низкое).thisценность .
Если функция является стрелочной функцией в ES2015, все вышеперечисленные правила будут проигнорированы,thisустанавливается в контексте, в котором он был создан.

Для более подробного объяснения см.эта статья.

36. Как определить, на что это указывает

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

Позвонил новый? Привязать к вновь созданному объекту.
Вызывается вызовом или применением (или привязкой)? Привязать к указанному объекту.
Вызывается объектом контекста? Привязать к этому объекту контекста.
По умолчанию: привязка к undefined в строгом режиме, в противном случае привязка к глобальному объекту.

Важно отметить, что некоторые вызовы могут непреднамеренно использовать правила привязки по умолчанию. Если вы хотите «безопасно» игнорировать эту привязку, вы можете использовать объект DMZ, например ø = Object.create(null) , для защиты глобального объекта.
Стрелочные функции в ES6 не используют четыре стандартных правила привязки, но определяют это в соответствии с текущей лексической областью видимости, в частности, стрелочные функции наследуют привязку this вызова внешней функции (независимо от того, связано ли this с чем). На самом деле это то же самое, что и механизм self = this в коде до ES6.

Использованная литература:

JavaScript, которого вы не знаете

37. В чем разница между == и ===

==является абстрактным оператором равенства, а===является оператором строгого равенства.==Операторы сравниваются после выполнения необходимых преобразований типов.===Оператор не выполняет преобразование типов, поэтому, если два значения не одного типа, он вернет напрямуюfalse. использовать==, может произойти что-то особенное, например:

1 == '1'; // true
1 == [1]; // true
1 == true; // true
0 == ''; // true
0 == '0'; // true
0 == false; // true

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

38. Чем стрелочная функция отличается от обычной?

внутри функцииthisОбъект — это объект, в котором он определен, а не объект, в котором он используется.call apply bindне могу изменитьthisнаправление
нельзя использовать в качестве конструктора, то есть нельзя использоватьnewкоманду, иначе будет выдана ошибка.
недоступноargumentsобъект, который не существует в теле функции. Если вы хотите использовать его, вы можете использоватьrestвместо этого параметр.
недоступноyieldкоманду, поэтому функции стрелок нельзя использовать в качествеGeneratorфункция.
Стрелочные функции не имеют объекта-прототипаprototype

39. Время белого экрана

Время белого экрана — это время с момента, когда браузер вводит URL-адрес, до момента, когда браузер начинает отображать содержимое.

Интерфейс производительности может получать информацию о производительности на текущей странице.Объекты этого типа можно получить, вызвав свойства, доступные только для чтения.Window.performanceчтобы получить.

performance.timing.navigationStart— это свойство, доступное только для чтения, которое возвращает unsigned long long, представляющий момент времени, отметку времени Unix в миллисекундах конца документа, непосредственно предшествующего выгрузке в той же среде просмотра. Если предыдущего документа нет, его значение эквивалентно PerformanceTiming.fetchStart.

Итак, поместите следующий скрипт в</head>Время белого экрана можно получить спереди.

<script>
	new Date() - performance.timing.navigationStart
</script>

Использованная литература:

PerformanceTiming.navigationStart

40. Что происходит, когда вы вводите адрес в браузере

Что случилось, когда...?

41. На странице много картинок, как оптимизировать загрузку и оптимизировать пользовательский опыт

Изображения лениво загружаются. Добавьте событие прокрутки в невидимую область страницы, чтобы определить расстояние между положением изображения и верхней частью браузера и расстоянием до страницы.Если первое меньше второго, оно будет загружено первым.
Если это слайд-шоу, фотоальбом и т. д., вы можете использовать технологию предварительной загрузки изображений, чтобы сначала загрузить предыдущее и следующее изображения отображаемого в данный момент изображения.
Если изображение представляет собой изображение css, вы можете использовать CSSsprite, SVGsprite и другие технологии.
Если изображение слишком велико, вы можете использовать специально закодированное изображение, и сначала будет загружено сжатое миниатюрное изображение, чтобы улучшить взаимодействие с пользователем.
Если область отображения изображения меньше фактического размера изображения, изображение должно быть сжато на стороне сервера в соответствии с потребностями бизнеса, а размер сжатого изображения должен соответствовать отображению.

42. Anti-shake и дросселирование оптимизации производительности сетевых запросов js

Отказаться

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

дроссель

Функция запланирована для выполнения только тогда, когда она больше или равна циклу выполнения, и вызов не выполняется в течение цикла. Это похоже на то, как когда вы покупаете товар с ограниченной продажей на Taobao, вы продолжаете нажимать точки обновления, чтобы купить, но всегда будет период времени, когда вы нажимаете на него, и это не будет иметь никакого эффекта.Здесь используется дросселирование, просто из-за боязни щелкать слишком быстро и вызывать ошибки в системе.

разница

Когда происходит непрерывное триггерное событие, защита от сотрясений устанавливает задержку события и запускает событие во время простоя, а троттлинг срабатывает через определенный интервал времени.

Простой пример защиты от сотрясений

let timer
input.on('input', () => {
    clearTimeout(timer)
    // 停止输入 500 毫秒后开始搜索
    timer = setTimeout(() => {
	// 搜索
    }, 500)
})

Простой пример дросселирования

let isClick = false
button.on('click', () => {
    if (isClick) return
    isClick = true
    // 其他代码。。。
    // 每 10 秒只允许点击一次
    setTimeout(() => {
	isClick = false
    }, 10000)
})

Использованная литература:

Защита от сотрясения и дросселирование оптимизации производительности сетевых запросов js

43. Как изменить страницу параметров URL без обновления

Представлен HTML5history.pushState()а такжеhistory.replaceState()методы, которые могут добавлять и изменять записи истории соответственно.

let stateObj = {
    foo: "bar",
};

history.pushState(stateObj, "page 2", "bar.html");

Предположим, что текущая страницаfoo.html, после выполнения приведенного выше кода он станетbar.html, щелкните браузер назад, он изменится наfoo.html, но браузер не обновляется.pushState()Требуются три параметра: объект состояния, заголовок (в настоящее время игнорируется) и (необязательно) URL-адрес. Давайте объясним детали этих трех параметров:

объект состояния — объект состоянияstateявляется объектом JavaScript, черезpushState ()Создайте новую запись в истории. Всякий раз, когда пользователь переходит в новое состояние,popstateсобытие запущено, и событиеstateСвойство содержит копию объекта состояния для этой записи истории.

Объектом состояния может быть что угодно, что может быть сериализовано. Причина в том, что Firefox сохраняет объект состояния на диске пользователя для использования, когда пользователь перезапускает браузер, и мы устанавливаем ограничение размера 640 КБ для объекта состояния после сериализованного представления. если вы дадитеpushState()Методу передается сериализованный объект состояния размером более 640 КБ, метод выдает исключение. Если вам нужно больше места, рекомендуется использоватьsessionStorageтак же какlocalStorage.

title — этот параметр в настоящее время игнорируется Firefox, но может использоваться в будущем. Передача пустой строки безопасна здесь, но не в будущем. Если вы выберете один из двух, вы можетеstateПройти короткий заголовок.
URL-адрес — этот параметр определяет новую историческую запись URL-адреса. Обратите внимание, что вызовpushState()Браузер не загружает URL-адрес сразу, но может загрузить URL-адрес позже при определенных обстоятельствах, например, когда пользователь повторно открывает браузер. Новый URL-адрес не обязательно должен быть абсолютным путем. Если новый URL-адрес является относительным, он будет рассматриваться как относительный к текущему URL-адресу. Новый URL-адрес должен иметь то же происхождение, что и текущий URL-адрес, в противном случаеpushState()вызовет исключение. Этот параметр является необязательным и по умолчанию соответствует текущему URL-адресу.

Использованная литература:

History API

44. Пожалуйста, используйте js для удаления строковых пробелов

удалить все пробелы

str.replace(/\s/g, '')

убрать пробелы с обеих сторон

str.replace(/^\s+|\s+$/g, '')
// 原生方法
str.trim()

45. Есть несколько способов создания объектов

буквальный

const obj = {a: 1}

Конструктор

function Obj(val) {
    this.a = val
}

const obj = new Obj(1)

Object.create

const obj = Object.create({a: 1})

46. Разница между null и undefined

nullУказывает, что объект является значением «без значения», то есть значением является «нулевое».

undefinedУказывает, что переменная объявлена без инициализации (присваивания)

undefinedа такжеnullВ операторе if он будет автоматически преобразован в false

undefinedне является допустимым JSON, аnullда

undefinedТип (typeof)undefined

nullТип (typeof)object

Javascript устанавливает для неназначенной переменной значение по умолчаниюundefined

Javascript никогда не устанавливает переменную вnull. Он используется для того, чтобы программисты указывали на отсутствие значения, когда переменная объявлена с помощью объявления Var.

47. Асинхронное суммирование

Требовать

Предположим, что есть локальная машина, которая не может выполнять операции сложения, вычитания, умножения и деления, поэтому она не может выполнять код JS, такой как a + b, a+ = 1, и тогда мы предоставляем серверный HTTP API, который может передавать два числовых параметра , и результат ответа таков. Сумма двух параметров, JS SDK для этого HTTP API (работающего на локальном компьютере) используется следующим образом:

asyncAdd(3, 5, (err, result) => {
  console.log(result); // 8
});

Макетная реализация:

function asyncAdd(a, b, cb) {
  setTimeout(() => {
    cb(null, a + b);
  }, Math.floor(Math.random()*100))
}

Теперь необходимо реализовать на локальном компьютере функцию суммирования, которая поддерживает следующие варианты использования:

(async () => {
  const result1 = await sum(1, 4, 6, 9, 1, 4);
  const result2 = await sum(3, 4, 9, 2, 5, 3, 2, 1, 7);
  const result3 = await sum(1, 6, 0, 5);
  console.log([result1, result2, result3]); // [25, 36, 12]
})();

Требовать сумму, чтобы вернуть вышеуказанные результаты в кратчайшие сроки

выполнить

function asyncAdd(a, b, cb) {
    setTimeout(() => {
        cb(null, a + b);
    }, Math.floor(Math.random()*100))
}

function sum(...args) {
    const result = []
    function _sum(resolve, reject) {
        new Promise((r, j) => {
            let a = args.pop()
            let b = args.pop()
            a = a !== undefined? a : 0
            b = b !== undefined? b : 0 // 如果访问的元素超出了数组范围，则转为 0
            asyncAdd(a, b, (err, res) => {
                if (err) j(err)
                r(res)
            })

            if (args.length) {
                _sum(resolve, reject)
            }
        })
        .then(val => {
            result.push(val)
            setTimeout(() => {
                if (args.length <= 0) {
                    resolve(sum(...result))
                }
            }, 100)
        })
    }

    return new Promise((resolve, reject) => {
        if (!args || !args.length) resolve(0)
        if (args.length == 1) resolve(args[0])
        _sum(resolve, reject)
    })
}

(async () => {
    const result1 = await sum(1, 4, 6, 9, 1, 4)
    const result2 = await sum(3, 4, 9, 2, 5, 3, 2, 1, 7)
    const result3 = await sum(1, 6, 0, 5)
    console.log([result1, result2, result3]) // [25, 36, 12]
})()

48. CommonJS, что такое модуль ES и в чем разница?

Оба они являются спецификацией модуля, например, Node использует спецификацию CommonJS. Модуль ES — это спецификация модуля стандарта языка.

разница:

Использование модулей CommonJSrequire()а такжеmodule.exports, модули ES6 используютimportа такжеexport.
Модули CommonJS выводят поверхностную копию значения, модули ES6 выводят ссылку на значение.
Модули CommonJS загружаются во время выполнения, а модули ES6 представляют собой скомпилированные интерфейсы.
Модули CommonJSrequire()модуль синхронной загрузки, модуль ES6importКоманды загружаются асинхронно, с отдельной фазой разрешения зависимостей модулей.
В модулях ES6 верхний уровень this указывает на undefined; верхний уровень this в модулях CommonJS указывает на текущий модуль,
Различные методы обработки при циклической загрузке

Третье отличие состоит в том, что CommonJS загружает объект (т.module.exportsсвойство), объект не будет создан, пока скрипт не завершит работу.

Модуль ES6 не является объектом, его внешний интерфейс — это просто статическое определение, которое будет сгенерировано на этапе статического анализа кода.

Использованная литература:

Загрузка реализации модуля

49. предварительная загрузка и предварительная выборка

preload

preloadда<link>ЭтикеткаrelЗначение атрибута атрибута, и необходимо сотрудничать сasиспользование имущества.

asОпределяет тип содержимого для предварительной загрузки, позволяя браузеру:

Более точно оптимизируйте приоритеты загрузки ресурсов.
Соответствуйте будущим потребностям в загрузке и, при необходимости, повторно используйте один и тот же ресурс.
Примените правильную политику безопасности контента к ресурсу.
Установите правильный заголовок запроса Accept для ресурса.

Взгляните на этот пример:

<link rel="preload" href="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" as="script">

Этот подход будет<link>Табы запихиваются в прелоадер.

Этот предварительный загрузчик загружает ресурсы, не блокируя событие загрузки страницы.

Мы можем провести сравнение со следующими двумя примерами:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.time('load')
    </script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/2.1.10/chart/bar.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<script>
window.onload = () => {
    console.timeEnd('load') // load: 1449.759033203125ms
}
</script>
</body>
</html>

В приведенном выше примере от загрузки до запуска события onload проходит около 1400 мс. Взгляните еще раз на время предварительной загрузки с предварительной загрузкой:

<link rel="preload" href="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" as="script">
<link rel="preload" href="https://cdn.bootcdn.net/ajax/libs/echarts/2.1.10/chart/bar.js" as="script">
<link rel="preload" href="https://unpkg.com/element-ui/lib/index.js" as="script">
<link rel="preload" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" as="style">

window.onload = () => {
    console.timeEnd('load') // load: 10.8818359375ms
}

Используя предварительную загрузку для загрузки ресурса, для запуска события загрузки требуется всего 10 мс.

В описании также указана загрузка файлов, и использование предварительной загрузки не блокирует событие загрузки.

prefetch

prefetchа такжеpreloadразные, используйтеprefetchРесурс, указанный атрибутом, будет загружаться во время простоя браузера.

Если в заголовке запроса ресурса обнаружен следующий атрибут, это означает, что он передается черезprefetchзагружено:

purpose: prefetch

Кроме того, нет соответствующего API для определения и получения времени простоя.

50. Разница между предварительной загрузкой и отсрочкой

Та же самая точка между предварительной загрузкой и отложенной загрузкой — это асинхронная загрузка. Так в чем же между ними разница?

Ресурс, загруженный с помощью предварительной загрузки, будет выполнять соответствующий скрипт только в том случае, если он встретит тот же тег скрипта. Например, следующие предварительно загруженныеvue.js:

<link rel="preload" as="script" href="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">

Загрузка будет выполняться только в том случае, если встретится следующий тегvue.js:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

defer загружает ресурс асинхронно, после того как все элементы проанализированы, вызывая выполнение предыдущего события DOMContentLoaded.

51. Разница между window.onload и DOMContentLoaded

Событие загрузки запускается, когда вся страница и все зависимые ресурсы, такие как таблицы стилей и изображения, завершили загрузку.

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

load
DOMContentLoaded событие

52. Разница между объектом и картой

Object может выбирать только символы, значения и символы в качестве ключей, в то время как Map может использовать данные любого типа в качестве ключей.
Экземпляр Map поддерживает порядок вставки пар ключ-значение, поэтому итерационные операции могут выполняться на основе порядка вставки. При использовании операторов for-in в Chrome Opera для обхода свойств объекта они следуют правилу: сначала извлекаются все свойства, значение ключа parseFloat которых является неотрицательным целым числом, а затем сортируются свойства в соответствии с числовым порядком. характеристики. Другие браузеры просматривают свойства точно в порядке, определенном объектом.

Выберите объект или карту

Для большинства задач веб-разработки выбор Объекта или Карты является лишь вопросом личных предпочтений и не имеет большого значения. Однако для разработчиков, заботящихся о памяти и производительности, между объектами и картами есть существенные различия.

1. Использование памяти

Реализации Object и Map на инженерном уровне значительно различаются в разных браузерах, но объем памяти, необходимый для хранения одной пары ключ/значение, увеличивается линейно с количеством ключей. Пакетное добавление или удаление пар ключ/значение зависит от инженерной реализации каждого браузера этого типа распределения памяти.

Это зависит от браузера, но при фиксированном размере памяти Map может хранить примерно на 50% больше пар ключ/значение, чем Object .

2. Производительность вставки

Вставка новых пар ключ/значение в Object и Map стоит примерно одинаково, хотя вставка в Map обычно немного быстрее во всех браузерах. Для обоих типов скорость вставки не увеличивается линейно с количеством пар ключ/значение.

Если в коде много операций вставки, то Map явно лучше.

3. Найдите скорость

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

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

4. Убрать производительность

Производительность использования удаления для удаления свойств объекта долгое время подвергалась критике и до сих пор имеет место во многих браузерах. С этой целью существуют некоторые операции, псевдоудаляющие свойства объекта, в том числе установка значения свойства в undefined или null . Но зачастую это Раздражающий или неуместный компромисс.

И для большинства браузерных движков операция удаления() карты выполняется быстрее, чем вставка и поиск. Если в вашем коде много операций удаления, вам обязательно стоит выбрать Map.

Использованная литература:

Расширенное программирование с помощью JavaScript (4-е издание)
Может ли js гарантировать порядок вывода свойств объекта?

53. Почему ключи WeakMap и WeakSet могут использовать только объекты?

Это делается для того, чтобы значение можно было получить только по ссылке на ключевой объект.

const m = new WeakMap()
m.set({}, 100) // 由于 {} 没有在其他地方引用，所以在垃圾回收时，这个值也会被回收。

const a = {}
m.set(a, 100) // 如果使用这种方式，则不会被回收。因为 {} 有 a 变量在引用它。

a = null // 将 a 置为空后，m 里的值 100 在垃圾回收时将会被回收。

Если примитивные значения были разрешены, не было бы способов различать строку литерала, используемой во время инициализации, и эквивалентную строку, используемую после инициализации.

Итак, смысл этой фразы предельно ясен:

const a = {} // 在创建对象时，分配了一块内存，并把这块内存的地址传给 a 
m.set(a, 100) // 执行 set 操作时，实际上是将 a 指向的内存地址和 100 关联起来

const a = 'abc' // 由于基本数据类型在传递时，传递的是值，而不是引用。
m.set(a, 100) // 所以执行 set 操作时，实际上是将新的 'abc' 和 100 关联起来，而不是原来 a 变量指向的那个。
	      // 那这样就会有问题，m 里存储的永远是没有被引用的键，随时都会被回收。

Использованная литература:

Продвинутое программирование с помощью JavaScript (4-е издание)

HTML

54. Семантика HTML5

Что такое семантика? Он предназначен для отображения контента с разумными и правильными тегами, такими как h1~h6 для определения заголовка.

выгода

Пользователям легко читать и придать странице четкую структуру, когда стили потеряны.
Хорошо для SEO, поисковые системы используют теги для определения контекста и веса отдельных ключевых слов.
Другим устройствам удобно анализировать, например слепым читателям, отображать веб-страницы в соответствии с семантикой.
Это полезно для разработки и обслуживания, семантика более читабельна, код лучше поддерживается, а отношения с CSS3 более гармоничны.

55. Почему CSS лучше`<link>`этикетка на`<head></head>`между? Почему лучше поставить JS`<script>`Этикетка оказывается помещенной`</body>`Раньше были исключения?

Пучок<link>помещать<head>середина

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

Пучок<script>Этикетка оказывается помещенной</body>До

Скрипты блокируют синтаксический анализ HTML во время загрузки и выполнения. Пучок<script>Тег помещается внизу, чтобы гарантировать, что HTML будет проанализирован первым, и страница будет представлена пользователю как можно скорее.

Если вы должны положить<head>, можно пустить<script>использование ярлыкаdeferАтрибуты.

56. Что такое прогрессивный рендеринг?

Прогрессивный рендеринг — это метод, используемый для улучшения производительности веб-страницы (особенно скорости загрузки, воспринимаемой пользователем) для максимально быстрого рендеринга страниц.

Этот метод был более распространен в прежние времена, когда пропускная способность интернета была низкой. Сегодня, с преобладанием мобильных терминалов и часто нестабильных мобильных сетей, прогрессивный рендеринг все еще имеет место в современной разработке интерфейса.

Некоторые примеры:

Отложенная загрузка изображений — изображения на странице не загружаются все сразу. Когда пользователь прокручивает до раздела изображения, JavaScript загружает и отображает изображение.
Приоритизировать отображаемый контент (иерархический рендеринг) — чтобы как можно быстрее отобразить страницу для пользователя, страница содержит только базовый минимум CSS, скриптов и контента, затем можно использовать скрипты отложенной загрузки или прослушивание.DOMContentLoaded/loadСобытия загружают другие ресурсы и контент.
Асинхронно загружать фрагменты HTML — когда страница отображается в фоновом режиме, HTML разделяется и отправляется в браузер фрагментами посредством асинхронных запросов. Более подробную информацию можно найти наздесьоказаться.

57. viewport

Viewport: буквально означает окно просмотра, используемое в мобильной веб-разработке. Указывает, что ширина браузера устройства виртуализирована в определенное значение (или вычислено), так что эффект отображения мобильных веб-сайтов в основном одинаков на всех устройствах. Мобильная версия браузера Safari недавно представила метатег области просмотра, позволяющий веб-разработчикам контролировать размер и масштаб окна просмотра, и другие мобильные браузеры также в основном его поддерживают.

В мобильных браузерах есть два вида областей просмотра: одна — видимая область просмотра (то есть то, что мы называем размером устройства), а другая — область просмотра (ширина веб-страницы). Например: Если наш экран размером 320 пикселей * 480 пикселей (iPhone 4), при условии, что в браузере ширина экрана 320 пикселей может отображать контент шириной 980 пикселей. Тогда ширина 320 пикселей — это ширина видимого окна просмотра, а ширина 980 пикселей, которые могут быть отображены, — это ширина окна просмотра.

Чтобы отобразить больше контента, большинство браузеров расширяют область просмотра своих собственных окон.Легко понять, что исходная ширина экрана в 320 пикселей может вместить контент в 980 пикселей или даже больше (пропорционально уменьшить веб-страницу).

Значение свойства видового экрана

width задает ширину области просмотра макета, положительное целое число или строку «width-device».
Начальное значение масштаба страницы настроек начального масштаба, число, которое может быть десятичным.
Minimum-scale позволяет использовать минимальное значение масштабирования в виде числа с десятичными знаками.
максимальный масштаб позволяет максимальное значение масштабирования пользователя в виде числа с десятичными знаками
height задает высоту вьюпорта лейаута, это свойство нам не важно и редко используется
масштабируемый пользователем Разрешить ли пользователям масштабирование, значение «нет» или «да», нет означает, что не разрешено, да означает, что эти атрибуты можно использовать одновременно, или их можно использовать по отдельности или в комбинации, и несколько атрибутов используются одновременно с запятыми Просто открыть.

58. Перекомпоновка и перерисовка

Reflow

При изменении атрибута макета, относящегося к узлу DOM, атрибут будет пересчитан, и браузер перерисует соответствующий элемент.Этот процесс называется Reflow (перекомпоновка или перекомпоновка).

Repaint

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

Некоторые операции, вызывающие Repaint и Reflow

изменить размер окна
размер шрифта
изменения таблицы стилей
Изменения содержимого элемента, особенно элементов управления вводом
Активация псевдокласса CSS, которая происходит во время взаимодействия с пользователем
Манипуляции с DOM, добавление, удаление, модификация элементов DOM
Расчет ширины и высоты макета, таких как width, clientWidth, scrollTop и т. д.

Repaint и Reflow неизбежны, и можно только сказать, что влияние на производительность сведено к минимуму.Даются следующие предложения:

Избегайте смены стилей один за другим. Рекомендуется сосредоточиться на изменении стилей, например, на управлении className.
Избегайте частых манипуляций с DOM. Создайте documentFragment или div, примените к нему все операции DOM и, наконец, добавьте в документ. Установите display:none для работы с элементом и, наконец, отобразите его.
Избегайте частого чтения свойств геометрии элемента (например, scrollTop). Абсолютно позиционируйте элементы со сложной анимацией.
Абсолютное позиционирование удерживает его вне потока документов и позволяет избежать перекомпоновки родительского элемента и последующих элементов.

Использованная литература:

Уменьшите переформатирование страницы и перерисовку (Reflow & Repaint)
Перерисовка и перекомпоновка, на которые следует обратить внимание при рефакторинге страницы

59. Роль alt в img и атрибут title элемента

alt атрибут img

Если изображение не может быть отображено, браузер отобразит содержимое, указанное в alt

атрибут заголовка элемента

Отображать содержимое заголовка, когда мышь находится над элементом

60. Разница между href и src

href

href идентифицирует гипертекстовые ссылки и используется в таких элементах, как ссылка и a.href — это ссылка и ассоциация страницы, которая должна установить связь между текущим элементом и ресурсом, на который делается ссылка.
Если вы добавите href в документ, браузер распознает документ как файл CSS, параллельно загрузит ресурсы и не остановит обработку текущего документа. Вот почему рекомендуется использовать метод ссылки для загрузки CSS вместо метода @import.

src

src означает ссылку на ресурсы, замену текущего элемента, используется в img, script, iframe, src является неотъемлемой частью содержимого страницы.
Когда браузер выполняет синтаксический анализ на src, он приостанавливает загрузку и обработку других ресурсов (изображение не будет приостанавливать загрузку и обработку других ресурсов) до тех пор, пока ресурс не будет загружен, скомпилирован, выполнен, и то же самое верно для изображений и фреймов. , аналогично указанию Ресурс применяется к текущему содержимому. Вот почему рекомендуется размещать js-скрипты внизу, а не в голове.

Использованная литература:

Вопросы для фронтенд-интервью — url, href, src

61. Процесс рендеринга в браузере

Разобрать HTML для создания дерева DOM.
Разобрать CSS для создания дерева правил CSSOM.
Объедините дерево DOM с деревом правил CSSOM, чтобы создать дерево рендеринга.
Пройдите по дереву рендеринга, чтобы начать компоновку, и рассчитайте информацию о положении и размере каждого узла.
Вызовите графический процессор, чтобы нарисовать и скомпоновать слой.
Рисует каждый узел дерева рендеринга на экране.

62. Почему возникают проблемы с совместимостью браузера

Один и тот же продукт, чем старше версия, тем больше ошибок
Тот же продукт, чем новее версия, тем больше функций
Разные продукты, разные стандарты, разные реализации

Идеи для решения проблем совместимости

делать или нет

Перспектива продукта (аудитория продукта, доля браузеров аудитории, приоритет производительности или приоритет основных функций)
Стоимостная перспектива (нужно ли что-то делать)

2. В какой степени

Какие браузеры поддерживают какие эффекты

3.. Как это сделать

Выберите техническую структуру/библиотеку (jquery) на основе требований совместимости
Выберите совместимые инструменты в соответствии с требованиями совместимости (html5shiv.js, response.js, сброс css, normalize.css, Modernizr)
Условные комментарии, CSS Hack, обнаружение возможностей js делают некоторые изменения
Постепенное улучшение: создавайте страницы для браузеров с низкими версиями, чтобы обеспечить самые основные функции, а затем улучшайте эффекты, взаимодействие и дополнительные функции для продвинутых браузеров, чтобы улучшить взаимодействие с пользователем.
Изящная деградация: создайте полную функциональность с самого начала, а затем сделайте ее совместимой со старыми браузерами.

Использованная литература:

Почему возникают проблемы с совместимостью браузера? Как решить?

63. Какая польза от doctype

doctype — это стандартное объявление типа документа обобщенного языка разметки, цель которого — сообщить анализатору стандартного общего языка разметки, какое определение типа документа (DTD) следует использовать для анализа документа.

Объявления — это инструкции, используемые для указания веб-браузерам, какой версией HTML написана страница. Объявление должно быть первой строкой HTML-документа перед тегом html.

Сам браузер разделен на два режима: стандартный режим и странный режим.

Браузер различает эти два режима по doctype.Функция doctype в html состоит в том, чтобы активировать стандартный режим браузера.Если doctype опущен в html, браузер войдет в странное состояние режима Quirks.

В этом режиме некоторые стили будут отличаться от стандартного режима.

Стандартное значение html и стандартное значение dom определяют поведение в стандартном режиме, а странный режим не предусмотрен, поэтому разные браузеры по-разному обрабатывают странный режим, поэтому обязательно используйте тип документа в начале html.

64. Что такое встроенные элементы и элементы блочного уровня?

встроенный элемент

Одна строка элементов занимает только пространство, включенное в границу метки.
Как правило, встроенные элементы могут содержать только данные и другие встроенные элементы.

b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea

элемент блочного уровня

Занимает целую строку, может изменять высоту, высоту строки, отступы и поля, может вмещать теги блочного уровня и другие встроенные теги.

header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer

65. Разница между встроенными элементами и элементами блочного уровня

Встроенные элементы: на одной строке с другими элементами высота, высота строки, а также внешние и внутренние поля не могут быть изменены (нельзя изменить верхнее и нижнее направления полей, а также можно изменить левое и правое направления). текста и изображений нельзя изменить, можно разместить только текст или другой встроенный элемент, где img — элемент строки

Элементы уровня блока: всегда начинаются с новой строки, высоту, высоту строки, а также внешние и внутренние поля можно контролировать, и они могут вмещать ограниченные элементы и другие элементы; элементы строки преобразуются в элементы уровня блока: display: block;

66. Каковы преимущества и недостатки iframe framework

преимущество:

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

недостаток:

Программа-рептилия поисковой системы не может интерпретировать эту страницу
В структуре фрейма появляются различные полосы прокрутки.
При использовании структуры фреймов убедитесь, что установлены правильные навигационные ссылки.
Страница iframe увеличит http-запрос к серверу

67. Что делает ярлык label?

labelМетка обычно пишется в виде, она связана с элементом управления, использованияlabelВы можете нажать на текст, чтобы выбрать соответствующий элемент управления.

<input type="checkbox" id="test">
<label for="test" >test</label>

68. Как отключить функцию автозаполнения формы HTML5

не захочет автозаполненияformилиinputУстановить какautocomplete=off

69. В чем разница между DOM и BOM

DOM

Объектная модель документа

DOM — это API для управления документами, а документ — его объект.

Дом связан с документом. Документ здесь относится к веб-странице, то есть документ HTML. Дом не имеет ничего общего с браузером, оно фокусируется на содержании самой веб-страницы.

BOM

Объектная модель браузера, объектная модель браузера

Спецификация предназначена для работы с API, который появляется в браузере, а окно является его объектом.

Объект окна не только предоставляет API для javascript для доступа к браузеру, но также действует как глобальный объект в ECMAScript.

CSS

Часть CSS цитируется изfront-end-interview-handbook

70. Как рассчитывается приоритет селекторов CSS?

Браузеры используют правила приоритета, чтобы определить, какие стили отображать элементы. Приоритет определяется по 4-х мерным показателям, мы предполагаем, чтоa、b、c、dИмена представляют следующие значения:

aУказывает, использовать ли встроенный стиль. Если используется,a1, иначе 0.
bУказывает количество селекторов ID.
cПредставляет сумму селекторов классов, селекторов атрибутов и селекторов псевдоклассов.
dПредставляет собой сумму селектора тега (типа) и селектора псевдоэлемента.

Вместо того, чтобы генерировать единую оценку из четырех приведенных выше значений, результат приоритета сравнивается отдельно для каждого значения.a、b、c、dВеса уменьшаются слева направо. При оценке приоритета сравнивайте их один за другим слева направо, пока не будет сравнено максимальное значение, а затем остановитесь. Так что еслиbразные значения, тоcа такжеdКаким бы большим оно ни было, на результат это не повлияет. Например0，1，0，0приоритет выше, чем0，0，10，10.

В случае равного приоритета будет принято правило стиля, которое появляется последним. Если вы запишете то же правило в таблице стилей (либо внутри этого файла, либо в другом файле стилей), стиль, который появляется последним (в нижней части файла), имеет приоритет и, следовательно, будет принят.

При написании стилей я использую более низкий приоритет, чтобы их можно было легко переопределить. Это особенно важно при написании компонентов пользовательского интерфейса, чтобы пользователям не приходилось применять очень сложные правила приоритета или использовать!importantспособ переопределить стиль компонента.

Использованная литература:

woohoo.smashing magazine.com/2007/07/CSS…
woohoo.site point.com/Web-Найдено по адресу…

71. Пожалуйста, объясните`Float`Принцип работы позиционирования.

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

CSSclearсвойства с помощьюleft,right,both, чтобы переместить элемент вниз (очистить поплавок) под плавающим элементом.

Если родительский элемент содержит только плавающие элементы, высота родительского элемента свернется до 0. Мы можем исправить это, очистив поплавок от элемента после плавающего элемента до закрытия родительского элемента.

Существует метод взлома, который заключается в настройке.clearfixКласс, используя селекторы псевдоэлементов::afterОчистить поплавок.Существуют также некоторые методы, например, добавление пустого<div></div>и установка родителя плавающего элементаoverflowАтрибуты. В отличие от этих методов,clearfixСпособ, просто добавьте класс на родительский элемент, определяемый следующим образом:

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

Стоит отметить, что установка свойства родительского элемента вoverflow: autoилиoverflow: hidden, сделает свои внутренние дочерние элементы контекстом форматирования блока, а родительский элемент расширится, чтобы окружить своих дочерних элементов.

Использованная литература:

CSS-tricks.com/all-about-fa…

72. Пожалуйста, объясните`z-index`Атрибут и объясните, как сформировать контекст стека.

в CSSz-indexСвойство управляет вертикальным порядком расположения перекрывающихся элементов.z-indexможет повлиять толькоpositionзначение неstaticЭлементы.

Не определеноz-indexзначение, элементы располагаются в порядке их появления в DOM. Нестатически расположенные элементы (и их дочерние элементы) всегда будут переопределять статически расположенные (статические) элементы, независимо от иерархии HTML.

Контекст стека — это элемент, содержащий набор слоев. В наборе контекстов наложенияz-indexЗначение устанавливается относительно родительского элемента, а не корня документа. Каждый контекст наложения полностью независим от своих родственных элементов. Если элемент B выше элемента A, то даже дочерний элемент C элемента A имеет более высокийz-indexзначение, элемент C никогда не будет выше элемента B.

Каждый контекст наложения является самодостаточным: когда содержимое элемента накладывается на стек, весь элемент накладывается по порядку в родительском контексте наложения. Несколько свойств CSS запускают новый контекст стека, например.opacityменьше 1,filterнетnone,transformнетnone.

Использованная литература:

CSS-tricks.com/almanac/pro…
Philip Walton.com/articles/ Я тоже…
developer.Mozilla.org/en-US/docs/…

73. Пожалуйста, опишите контекст форматирования блока и как он работает.

Контекст блочного форматирования (BFC) — это визуальная часть веб-страницы, визуализированная с помощью CSS, область, в которой происходит макет блока на уровне блока и где плавающие элементы взаимодействуют с другими элементами.

Блок HTML, удовлетворяющий любому из следующих условий, создает контекст форматирования блока:

floatЗначение неnone.
positionЗначение неstaticилиrelative.
overflowЗначение неvisible.

В BFC внешний левый край каждого блока совпадает с левым краем содержащегося в нем блока.

Вертикальные поля двух соседних блоков блочного уровня схлопываются. Для получения дополнительной информации см.крах рушится.

Использованная литература:

developer.Mozilla.org/en-US/docs/…
woohoo.site point.com/понимаю…

74. Каковы методы очистки поплавков и какие ситуации применимы?

нулевойdivметод:<div style="clear:both;"></div>.
Метод Clearfix: используется выше.clearfixкласс уже упоминался.
overflow: autoилиoverflow: hiddenМетод: указан выше.

В более крупных проектах я бы использовал метод Clearfix, где это необходимо..clearfix. настраиватьoverflow: hiddenметод может сделать его дочерние элементы незавершенными, если высота дочернего элемента больше высоты родительского элемента.

75. Как решить проблему совместимости стилей разных браузеров?

После определения причины проблемы и рассматриваемого браузера используйте отдельную таблицу стилей, которая загружается только рассматриваемым браузером. Этот подход требует использования рендеринга на стороне сервера.
Используйте библиотеку, которая уже справляется с этим, например Bootstrap.
использоватьautoprefixerАвтоматически создавать префиксы свойств CSS.
Используйте Reset CSS или Normalize.css.

76. Как обслуживать страницы для браузеров с ограниченным функционалом? Какие технологии и процессы используются?

Изящная деградация: создавайте свое приложение для современных браузеров, убедившись, что оно хорошо работает в старых браузерах.
Progressive enhancement - The practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it.
Прогрессивное улучшение: создавайте приложения на основе взаимодействия с пользователем, но добавляйте новые функции по мере их поддержки браузерами.
использоватьcaniuse.comПроверьте поддержку функций.
использоватьautoprefixerАвтоматически создавать префиксы свойств CSS.
использоватьModernizrВыполните обнаружение признаков.

77. Какие существуют способы скрыть контент (сделать его только для программ чтения с экрана)?

Эти методы связаны с доступностью.

visibility: hidden: элемент все еще находится в потоке страницы и занимает место.
width: 0; height: 0: Делает элемент не занимающим место на экране, в результате чего он не отображается.
position: absolute; left: -99999px: Убери это с экрана.
text-indent: -9999px: это работает только дляblockтекст в элементе.
Метаданные: например, с помощью Schema.org, RDF и JSON-LD.
WAI-ARIA: техническая спецификация W3C о том, как повысить доступность веб-страниц.

Несмотря на то, что WAI-ARIA является идеальным решением, я бы выбрал метод абсолютного позиционирования, потому что он имеет наименьшее количество предостережений, работает для большинства элементов и очень прост в использовании.

Использованная литература:

Уууу. Я 3.org/tr/out-aria…
developer.Mozilla.org/en-US/docs/…
a11yproject.com/

78. На что следует обратить внимание при написании эффективного CSS?

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

BEM (Block Element Modifier) methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override. BEM (Block Element Modifier)В принципе, рекомендуется давать имена отдельным классам CSS, а когда требуются иерархические отношения, также отражать отношения в именовании, что, естественно, делает селекторы эффективными и легко переопределяемыми.

Выясните, какие свойства CSS запускают перекомпоновку, перерисовку и композитинг. При написании стилей избегайте возможности запуска повторного макета.

Использованная литература:

Developers.Google.com/Web/Женщины большие…
csstriggers.com/

79. Каковы преимущества и недостатки использования предварительной обработки CSS?

преимущество:

Улучшить ремонтопригодность CSS.
Легко писать вложенные селекторы.
Введите переменные и добавьте функции темы. Файлы темы можно использовать в разных проектах.
Создавайте повторяющиеся CSS с помощью Mixins.
Splitting your code into multiple files. CSS files can be split up too but doing so will require a HTTP request to download each CSS file.
Разделите код на несколько файлов. CSS без предварительной обработки также можно разделить на несколько файлов, но для загрузки этих файлов необходимо установить несколько HTTP-запросов.

недостаток:

Необходимы инструменты предварительной обработки.
Время перекомпиляции может быть медленным.

80. Что вам нравится и что не нравится в предварительной обработке CSS, которую вы использовали?

подобно:

Большинство преимуществ упомянуто выше и упомянуто.
Меньше реализован с JavaScript и в сочетании с Nodejs.

Dislikes:

Я пропускаюnode-sassИспользуйте Sass, который использует привязки LibSass, написанные на C++. Мне приходится часто перекомпилировать, когда меняется версия Node.
В Less имена переменных начинаются с@В качестве префикса его легко спутать с ключевыми словами CSS, такими как@media,@importа также@font-face.

81. Как реализовать веб-дизайн с использованием нестандартных шрифтов?

использовать@font-faceи для разныхfont-weightопределениеfont-family.

82. Объясните, как браузер определяет, какие элементы соответствуют селекторам CSS.

Этот раздел связан с предыдущим о написании эффективного CSS. Из крайнего правого селектора (ключевого селектора) браузер отфильтровывает элементы из DOM в соответствии с ключевым селектором, а затем проходит вверх по родительскому элементу выбранного элемента, чтобы определить, соответствует ли он. Чем короче цепочка операторов сопоставления селекторов, тем быстрее будет соответствовать браузер.

Например, формаp spanселектор, браузер сначала находит все<span>элемент и просматривайте его родительский элемент до тех пор, пока корневой элемент не будет найден.<p>элемент. для конкретного<span>, просто найди<p>, тебе известно'` совпало и перестало совпадать.

Использованная литература:

stackoverflow.com/questions/5…

83. Опишите псевдоэлементы и их использование.

Псевдоэлементы CSS — это ключевые слова, добавляемые к селекторам для выбора определенных частей элемента. Их можно использовать для украшения (:first-line,:first-letter) или добавить элемент в разметку (в сочетании с content:... ) без необходимости изменять разметку (:before,:after).

:first-lineа также:first-letterМожет использоваться для изменения текста.
упомянутый выше.clearfixметод, использованиеclear: bothчтобы добавить элементы, которые не занимают места.
использовать:beforeа такжеafterПокажите треугольную стрелку в подсказке. Разделение проблем приветствуется, поскольку треугольники считаются частью стиля, а не настоящей DOM. Невозможно рисовать треугольники только с помощью стилей CSS без использования дополнительных элементов HTML.

Использованная литература:

CSS-tricks.com/almanac/Сатир…

84. Расскажите о своем понимании блочной модели и о том, как указать браузеру использовать другую блочную модель для отображения макета.

Блочная модель CSS описывает прямоугольную рамку, сгенерированную из элементов дерева документа и размещенную в соответствии с типографским шаблоном. Каждое поле имеет область содержимого (например, текст, изображение и т. д.) и необязательное окружение.padding,borderа такжеmarginплощадь.

Блочная модель CSS отвечает за вычисления:

Сколько места занимает блочный элемент.
Перекрываются ли границы и сливаются ли поля.
размер коробки.

Коробочная модель имеет следующие правила:

Размер элемента блочного уровня определяется выражениемwidth,height,padding,borderа такжеmarginПринимать решение.
Если не указаноheight, высота блочного элемента равна высоте содержимого содержащих его дочерних элементов плюсpadding(если нет плавающих элементов, см. ниже).
Если не указаноwidth, ширина неплавающего блочного элемента равна ширине его родителя минус ширина родительского элемента.padding.
элементальheightпо содержаниюheightвычислять.
элементальwidthпо содержаниюwidthвычислять.
по умолчанию,paddingа такжеborderне элементwidthа такжеheightЧасть.

Использованная литература:

woohoo.smashing magazine.com/2010/06/Он и…

85. `* { box-sizing: border-box; }`Каков будет эффект?

Элементы применяются по умолчаниюbox-sizing: content-box, ширина и высота элемента определяют только размер содержимого.
box-sizing: border-boxизменить элемент расчетаwidthа такжеheightПуть,borderа такжеpaddingРазмер также будет учитываться.
элементальheight= высота контента (контента) + вертикальное направлениеpadding+ вертикальная ориентацияborderширина
элементальwidth= ширина контента + горизонтальpadding+ горизонтальная ориентацияborderширина

86. `display`Каковы значения атрибутов ?

none, block, inline, inline-block, table, table-row, table-cell, list-item.

87. `inline`а также`inline-block`Какая разница?

я кладуblockДобавил и это, для лучшего сравнения.

	`block`	`inline-block`	`inline`
размер	Заполняет ширину своего родительского контейнера.	Зависит от содержания.	Зависит от содержания.
позиция	Начинается с новой строки и не позволяет размещать элементы HTML рядом с ней (если это не`float`)	Сливается с другим содержимым и позволяет размещать другие элементы рядом с ним.	Сливается с другим содержимым и позволяет размещать другие элементы рядом с ним.
Можно ли установить`width`а также`height`	могу	могу	не можем. Настройки игнорируются.
можно использовать`vertical-align`выровнять	Не можем	Могу	Могу
Поля и отступы	существует во всех направлениях	существует во всех направлениях	只有水平方向存在。垂直方向会被忽略。 несмотря на то что`border`а также`padding`существует`content`вокруг, но вертикальное пространство зависит от «высоты строки»
плавать (плавать)	-	-	как`block`элемент, вы можете установить вертикальные поля и отступы.

88. `relative`,`fixed`,`absolute`а также`static`В чем разница между четырьмя позициями?

Позиционируемый элемент,positionЗначение свойства должно бытьrelative,absolute,fixedилиsticky.

static: Значение атрибута позиционирования по умолчанию. Это ключевое слово указывает, что элемент использует обычное поведение макета, то есть текущую позицию макета элемента в обычном потоке документа. В этот момент свойства top, right, bottom, left и z-index не действуют.
relative: Под этим ключевым словом элемент сначала помещается в позицию, когда позиционирование не добавляется, а затем позиция элемента корректируется без изменения макета страницы (поэтому в позиции этого элемента будет пробел, если позиционирование не добавляется) .
absolute: не резервирует место для элемента, определяет положение элемента, указывая смещение элемента относительно ближайшего нестатически расположенного элемента-предка. Абсолютно позиционированные элементы могут иметь поля, не объединенные с другими полями.
fixed: вместо резервирования места для элемента укажите положение элемента, указав его положение относительно окна просмотра экрана. Положение элемента не меняется при прокрутке экрана. При печати элементы отображаются в фиксированных позициях на каждой странице. Фиксированное свойство создает новый контекст стека. Когда свойство преобразования предка элемента не равно none , контейнер изменяется с области просмотра на этого предка.
sticky: Позиция блока вычисляется из нормального потока (это называется позицией в нормальном потоке), а затем позиционируется относительно корня потока элемента (BFC) и содержащего блока (ближайший элемент-предок уровня блока) в потоке. Во всех случаях (даже если позиционируемый элементtable), расположение этого элемента не повлияет на последующие элементы. Когда элемент B закреплен, положение последующих элементов по-прежнему определяется в соответствии с положением, когда элемент B не был позиционирован.position: stickyправильноtableЭффект элементаposition: relativeтакой же.

Использованная литература:

developer.Mozilla.org/en/docs/Web…

89. Знаете ли вы CSS Flex и Grid?

Flex в основном используется для одномерного макета, а Grid — для двумерного макета.

Flex

Во гибком контейнере есть две оси: горизонтальная ось и вертикальная ось, и каждая единица в контейнере называется гибким элементом.

Для контейнера можно задать 6 свойств:

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

Примечание. После настройки гибкого макета свойства float, clear и vertical-align дочерних элементов станут недействительными.

Свойства элемента Flex

К элементу элемента можно применить шесть свойств:

order
flex-basis
flex-grow
flex-shrink
flex
align-self

Grid

Макет сетки CSS используется для разделения страницы на несколько основных областей или для определения взаимосвязи между размером, положением и слоями элементов внутри компонента.

Как и таблицы, макеты сетки позволяют нам выравнивать элементы по строкам или столбцам. Тем не менее, использование сеток CSS может быть проще для компоновки, чем таблицы CSS. Например, дочерние элементы контейнера сетки могут располагаться так, что они действительно перекрываются и накладываются друг на друга, как позиционированные элементы CSS.

90. Чем адаптивный дизайн отличается от адаптивного?

Отзывчивый дизайн и адаптивный дизайн направлены на улучшение взаимодействия с пользователем между различными устройствами, а также на оптимизацию и настройку в соответствии с такими параметрами, как размер окна, разрешение, среда использования и методы управления.

Принцип адаптивности адаптивного дизайна: веб-сайт должен хорошо отображаться и использоваться на различных устройствах с кодом. Адаптивные веб-сайты создают отличный пользовательский интерфейс, используя медиа-запросы, адаптивные сетки и адаптивные изображения для изменения в зависимости от множества факторов. Так же, как мяч расширяется и сжимается, чтобы вместить кольца разного размера.

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

Использованная литература:

developer.Mozilla.org/en-US/docs/…
средний well.com/responsive-…
CSS-tricks.com/ он и -differ E ...

91. Вы когда-нибудь использовали графику с разрешением сетчатки? Какая технология в нем используется?

Я склонен использовать графику с более высоким разрешением (в два раза больше размера дисплея) для дисплеев Retina. Лучшим подходом является использование медиа-запросов, таких как@media only screen and (min-device-pixel-ratio: 2) { ... }, затем изменитеbackground-image.

Для графики, похожей на значки, я стараюсь максимально использовать шрифты svg и значков, потому что они отображаются четко при любом разрешении.

Другой способ - проверитьwindow.devicePixelRatioзначение, используйте JavaScript для<img>изsrcМодификации атрибутов заменены версиями с более высоким разрешением.

Использованная литература:

woohoo.site point.com/CSS-Features You Go…

92. При каких обстоятельствах использовать`translate()`без абсолютного позиционирования? Когда все наоборот.

translate()даtransformзначение . ИзменятьtransformилиopacityНе запускает переформатирование или перерисовку браузера, только композиции. А изменение абсолютного позиционирования вызывает перераскладку, которая, в свою очередь, вызывает перерисовку и композицию.transformЗаставляет браузер создать слой графического процессора для элемента, но изменение абсолютного позиционирования использует ЦП. следовательноtranslate()Более эффективен и может сократить время прорисовки плавной анимации.

когда используешьtranslate(), элемент по-прежнему занимает исходное пространство (вродеposition：relative), что не равносильно изменению абсолютного позиционирования.

Использованная литература:

Woohoo Пол Irish.com/2012/why-mo…

93. Адаптивная ширина при фиксированной ширине

Вы можете использовать гибкий макет, чтобы скопировать следующий код HTML и CSS и открыть его в браузере, чтобы увидеть эффект.

<div class="wrap">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

.wrap {
  display: flex;
  justify-content: space-between;
}
.div1 {
  min-width: 200px;
}
.div2 {
  width: 100%;
  background: #e6e6e6;
}
html,
body,
div {
  height: 100%;
  margin: 0;
}

94. Способ центрирования по горизонтали и вертикали

flex

// 父容器
display: flex;
justify-content: center;
align-items: center;

position

// 父容器
position: relative;

// 子容器
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;

position+transform

// 父容器
position: relative;

// 子容器
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

table-cell

<div class="box">
    <div class="content">
        <div class="inner"></div>
    </div>
</div>

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
.box {
    display: table;
    height: 100%;
    width: 100%;
}
.content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.inner {
    background-color: #000;
    display: inline-block;
    width: 200px;
    height: 200px;
}

95. Разница между display:none, visibile:hidden, opacity:0

	скрывать ли	Занимает ли место в документе	Это будет вызвать событие
display: none	да	нет	нет
visibile: hidden	да	да	нет
opacity: 0	да	да	да

96. Разница между ссылкой и @import в CSS

link — это HTML-тег, а @import предоставляется CSS.
Когда страница загружается, ссылка будет загружена одновременно, а CSS, на который ссылается @import, будет ждать загрузки страницы перед загрузкой.
импорт может быть распознан только в IE5 или более поздних версиях, а ссылка является HTML-тегом, проблем с совместимостью нет.
Вес стиля ссылки выше, чем вес @import

97. Отображать многоточие, когда текст превышает

одна линия

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

Многострочный

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 最多显示几行
overflow: hidden;

98. Используйте псевдоэлементы для рисования треугольников

.info-tab {
    position: relative;
}
.info-tab::after {
    content: '';
    border: 4px solid transparent;
    border-top-color: #2c8ac2;
    position: absolute;
    top: 0;
}

99. Ширина и высота родительского бокса известны, а ширина и высота дочернего имг неизвестна.Я хочу чтобы имг закрывал родительский бокс и картинка не могла деформироваться.

нужно использоватьcssизobject-fitАтрибуты

div {
    width: 200px;
    height: 200px;
}
img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

MDN

Роль 100. iframe

Iframes используются для вставки сторонних страниц в веб-страницы.Ранние страницы использовали iframe в основном для панелей навигации, которые являются одной и той же частью многих страниц, чтобы избежать повторных загрузок при переключении страниц.

преимущество

Его легко изменить и имитировать разделение, как это будет использовать некоторые системы управления информацией.
Но в принципе не рекомендуется использовать сейчас. Как правило, не рекомендуется использовать, если нет особых потребностей.

недостаток

создание iframe на 1-2 порядка медленнее, чем обычные элементы DOM
Тег iframe блокирует загрузку страницы. Если событие загрузки страницы не может быть вызвано вовремя, пользователь почувствует, что страница загружается медленно, а взаимодействие с пользователем неудовлетворительно. В Safari и Chrome атрибут src iframe может быть динамически установлен через js, чтобы избежать блокировки.
iframe не дружит с SEO, а схема замены, как правило, представляет собой механизм Incude динамического языка и динамического заполнения контента ajax.

101. В чем разница между переходом и анимацией

transition

Он может реализовать переход состояния элемента в конечное состояние в течение определенного периода времени, который используется для имитации эффекта анимации перехода, но функция ограничена и может использоваться только для создания простых анимационных эффектов и свойств анимации. .

animation

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

102. Что такое слияние маржи

Объединение полей означает, что при встрече двух вертикальных полей они образуют одно поле.

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

103. Как убрать расстояние между элементами встроенного блока

удалить пробелы
Используйте отрицательные значения маржи
использовать размер шрифта: 0
letter-spacing
word-spacing

Для более подробного ознакомления см.:N способов убрать расстояние между элементами встроенного блока

104. Зачем инициализировать стили CSS

Из-за проблем совместимости браузеров разные браузеры имеют разные значения по умолчанию для некоторых тегов.Если CSS не инициализирован, часто будут различия в отображении страниц между браузерами.
Удалите стиль метки по умолчанию, такой как поля, отступы, другие браузеры анализируют размер шрифта и настройки шрифта по умолчанию.

105. Контекст встроенного форматирования IFC

Контекст встроенного форматирования является частью отображаемого результата веб-страницы. Среди них встроенные блоки расположены друг за другом, и порядок их расположения определяется в соответствии с настройкой режима записи:

Для режима горизонтального письма поля располагаются горизонтально слева
Для режима вертикального письма поля располагаются горизонтально сверху.

106. Крах маржи

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

Обходной путь — запустить BFC

Функция BFC срабатывает всякий раз, когда элемент удовлетворяет любому из следующих условий:

корневой элемент тела
Элемент float: значение float, отличное от none
Абсолютно позиционированные элементы: позиция (абсолютная, фиксированная)
отображение inline-block, table-cells, flex
значение переполнения, отличное от видимого (скрытое, автоматическое, прокрутка)

Использованная литература:

Проблемы слияния и сворачивания полей
10 минут, чтобы понять принципы BFC

JavaScript

1. Что такое гомологичная стратегия?

2. Что такое междоменный домен?

3. Что такое JSONP?

4. Способ привязки событий

5. Делегация мероприятия

6. Цикл событий

7. Как настроить события

Новый режим

Устаревший режим

8. Разница между target и currentTarget

9. прототип иprotoкаковы отношения

10. Прототипное наследование

11. Наследование

12. Закрытие

Реализация частных свойств с замыканиями

13. Восстановление памяти

сборка мусора с подсчетом ссылок

циклическая ссылка

алгоритм маркировки-развертки

Эффективное использование памяти

15. Реализуйте функцию добавления так, чтобы результаты двух вызовов add(a)(b) и add(a,b) были одинаковыми.

Реализовать 1

Реализация 2 — Каррирование

16. Каковы преимущества и недостатки использования AJAX

преимущество

недостаток

17. Разница между Ajax и Fetch

18. Переменный подъем

19. В чем разница между созданием переменных с помощью let, var и const

20. Чем отличается поверхностная копия от глубокой копии объекта

21. Как реализовать глубокое копирование объектов

22. Дедупликация массива

23. Тип данных

24. Встроенные функции (нативные функции)

25. Как отличить массив от объекта

26. Автоматическая точка с запятой

27. Точность с плавающей запятой

28. Разница между cookie, localStorage и sessionStorage

29. Самовыполняющаяся функция, для какого сценария используется? выгода?

Самовыполняющаяся функция:

выгода

Сцены

30. Как общаться между несколькими страницами

31. Разница между анимацией css и анимацией js

32. Что сделал новый опыт объекта?

33. Разница между связыванием, вызовом и применением

34. Реализуйте функцию применения вызова привязки

bind

call

apply

35. Пожалуйста, кратко опишитеJavaScriptсерединаthis.

36. Как определить, на что это указывает

37. В чем разница между == и ===

38. Чем стрелочная функция отличается от обычной?

39. Время белого экрана

40. Что происходит, когда вы вводите адрес в браузере

41. На странице много картинок, как оптимизировать загрузку и оптимизировать пользовательский опыт

42. Anti-shake и дросселирование оптимизации производительности сетевых запросов js

Отказаться

дроссель

разница

43. Как изменить страницу параметров URL без обновления

44. Пожалуйста, используйте js для удаления строковых пробелов

удалить все пробелы

убрать пробелы с обеих сторон

45. Есть несколько способов создания объектов

46. ​​Разница между null и undefined

47. Асинхронное суммирование

Требовать

выполнить

48. CommonJS, что такое модуль ES и в чем разница?

49. предварительная загрузка и предварительная выборка

preload

prefetch

50. Разница между предварительной загрузкой и отсрочкой

51. Разница между window.onload и DOMContentLoaded

52. Разница между объектом и картой

Выберите объект или карту

1. Использование памяти

35. Пожалуйста, кратко опишите`JavaScript`середина`this`.

46. Разница между null и undefined

55. Почему CSS лучше`<link>`этикетка на`<head></head>`между? Почему лучше поставить JS`<script>`Этикетка оказывается помещенной`</body>`Раньше были исключения?

71. Пожалуйста, объясните`Float`Принцип работы позиционирования.

72. Пожалуйста, объясните`z-index`Атрибут и объясните, как сформировать контекст стека.

85. `* { box-sizing: border-box; }`Каков будет эффект?

86. `display`Каковы значения атрибутов ?

87. `inline`а также`inline-block`Какая разница?

88. `relative`,`fixed`,`absolute`а также`static`В чем разница между четырьмя позициями?

92. При каких обстоятельствах использовать`translate()`без абсолютного позиционирования? Когда все наоборот.