Получение баллов знаний JavaScript

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

Так как я все еще новичок во фронтенде, очень возможно сделать ошибки, и исправления приветствуются!

JavaScript

Что за язык JavaScript? Каковы характеристики?

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

Назовите несколько основных спецификаций JavaScript?

• Не объявляйте несколько переменных в одной строке
• Замените == на ===
• Оператор switch должен иметь ветвь по умолчанию.
• Конструкторы пишутся с большой буквы, константы пишутся с большой буквы
• Используйте литералы объектов вместо новой функции(){}

принцип отрисовки страницы

• Браузер анализирует HTML для создания DOMTree.
• Затем синтаксический анализ CSS создаст CSSRuleTree
• После завершения синтаксического анализа механизм браузера создаст RenderingTree с помощью DOMTree и CSSRuleTree.
• вызов браузера

предварительно скомпилировано

• Сначала просканируйте ключевое слово var и поднимите наверх;
• Затем просмотрите определение функции, прежде чем упоминать var
• а затем выполнять последовательно

отложить и асинхронно

• существует<script>Установка атрибута defer в элементе эквивалентна указанию браузеру на немедленную загрузку и отсрочку выполнения. После того, как страница будет проанализирована, она будет выполнена в указанном порядке.
• Атрибут async сообщает браузеру о немедленной загрузке, как только загрузка начнется, и не может гарантировать их выполнение в указанном порядке.

тип данных

Что такое примитивные типы? Является ли null объектом?

Существует 6 примитивных типов: логический, строковый, числовой, нулевой, неопределенный и символьный.

null не является объектом, typeof null выводит объект, потому что предыдущая система 32 будет представлять объекты, начинающиеся с 000, но null представляет все нули, поэтому он ошибочно оценивается как объект

разница между примитивными типами и ссылочными типами

1. Примитивные типы хранят значения, а ссылочные типы хранят указатели. 2. Примитивные типы данных хранятся непосредственно в стеке, а ссылочные типы данных — в куче.

Какие типы можно получить с помощью typeof?

undefined,string,number,boolean,object,function

typeof может различать только примитивные типы, кроме null, а ссылочные типы могут различать только функции.

Что такое лифт? Что такое временная мертвая зона? Разница между var, let и const

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

примитивный тип

Почему 0,1+0,2!=0,3? Как решить эту проблему?

В компьютерах числа хранятся в двоичной форме. Числа в JavaScript хранятся с использованием стандарта двойной точности IEEE 754. Из-за ограниченного объема памяти при наличии неразделенного десятичного числа берется приблизительное значение.

В 0,1+0,2 аппроксимируются 0,1 и 0,2, поэтому при сложении двух приблизительных значений конечный результат равен 0,3000, 0000, 0000, 0004, что недостаточно близко к 0,3 для JS, поэтому появляется 0,1. +0,2!= 0,3

Решение:parseFloat((0.1+0.2).toFixed(10)) === 0.3 // правда

Разница между нулем и неопределенным

undefined: указывает, что переменная объявлена, но ей не присвоено значение.

null: переменная определена и назначена, но она пуста, без каких-либо методов свойств и значений

Сценарии использования символов

Использовать как имя свойства

var mySymbol=Symbol();
var a={};
a[mySymbol]='hello'

оператор

Когда использовать === и когда использовать ==

== выполнит преобразование типов и затем сравнит, === не будет, попробуйте использовать ===.

Вы можете использовать == в следующих двух случаях

• Проверить, существует ли свойство объекта

var obj={}
if(obj.a == null){
    // 相当于obj.a===null || obj.a===undefined
}

• Проверить, существует ли параметр функции

function fn(a, b){
    if(b == null){
        // 相当于b===null || b===undefined
    }
}

В чем разница между Object.is() и ===,==?

Можно сказать, что Object.is() является обновленной версией, Object.is(NaN, NaN) вернет true, Object.is(-0,+0) вернет false

тип ссылки

Тип массива

Как определить, является ли переменная массивом?

1. Определить, существуют ли какие-либо методы массива

if(arr.splice){}

2.instanceof (некоторые версии IE неверны)

arr instanceof Array

3.Array.isArray()

4.Object.prototype.toString.call(arr); // '[object Array]'

5. метод конструктора

arr.constructor === Array

преобразовать массив в массив

let arrayLike = {
    '0' : 'a',
    '1' : 'b',
    '2' : 'c',
    length : 3
};
let arr1 = Array.prototype.slice.call(arrayLike);
let arr2 = [].slice.call(arrayLike);
let arr3 = Array.from(arrayLike);

метод массива

// 会改变原数组
pop()       // 末尾删除
push()      // 末尾新增
shift()     // 开头删除
unshift()   // 开头新增
reverse()   // 数组反转
sort()      // 排序
splice()    // 修改数组（删除插入替换）
// 不会改变原数组
concat()    // 合并数组
slice()     // 选择数组的一部分
indexOf()   // 顺序查找指定元素下标
lastIndexOf()   // 倒序查找指定元素下标

// 迭代方法
// every()查询数组是否每一项都满足条件
// some()查询数组中是否有满足条件的项
// filter()过滤，返回true的项组成的数组
// map()对每一项运行给定函数，返回每次函数调用结果组成的数组
// forEach()对每一项运行给定函数，无返回值
var numbers = [1,2,3,4,5,4,3,2,1];
numbers.every(function(item,index,array){
    return item>2;
})  // false
numbers.some(function(item,index,array){
    return item>2;
})  // true
numbers.filter(function(item,index,array){
    return item>2;
})  // [3,4,5,4,3]
numbers.map(function(item,index,array){
    return item*2;
})  // [2,4,6,8,10,8,6,4,2]
numbers.forEach(function(item,index,array){
    // 执行某些操作
})  // 无返回值

// 归并方法
// reduce()从第一项开始逐个遍历到最后
// reduceRight()从最后一项开始向前遍历到第一项
var values = [1,2,3,4,5];
values.reduce(function(prev,cur,index,array){
    return prev+cur;
}) // 15
// reduceRight()结果一样，顺序相反

Какой алгоритм сортировки использует нативная сортировка?

Алгоритм сортировки, сочетающий сортировку вставками и быструю сортировку.

['1','2','3'].map(parseInt) является ответом?

[1,NaN,NaN]

Поскольку parentInt требует два параметра (val, radix), radix представляет систему синтаксического анализа, а map передает три (элемент, индекс, массив), что приводит к тому, что соответствующее основание системы счисления является недопустимым и вызывает ошибки синтаксического анализа.

Тип даты()

Получить дату в формате 2019-02-16

function formatDate(dt){
    if(!dt){
        dt=new Date()
    }
    var year = dt.getFullYear();
    var month = dt.getMonth()+1;
    var day = dt.getDate();
    if(month<10){
        month= '0'+month;
    }
    if(day<0){
        day = '0'+day;
    }
    var formatDt = year+'-'+month+'-'+day
    return formatDt;
}

некоторые другие методы

getHour()       // 返回时
getMinutes()    // 返回分
getSeconds()    // 返回秒
getDay()        // 返回星期天数
getTime()       // 返回毫秒数

Тип функции

Объявления функций и выражения функций

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

// 函数声明
function sum(a,b){
    return a+b;
}
// 函数表达式
var sum = function(a,b){
    return a+b;
}

Расскажите о понимании этого объекта

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

указатель на это

1. Привязка по умолчанию, окно в браузере, глобальное в узле

2. Пример неявной привязки: window.a()

3. Явная привязка

• Жесткий обязательный вызов, применение, привязка
• контекст вызова API

filter, forEach и т. д. имеют необязательный параметр, который используется для этого значения при выполнении обратного вызова.

4.новая привязка

5. Стрелочные функции

Здесь не очень подробно, рекомендуется прочитатьСамая полная подробная история JavaScript -- 5 видов этого всестороннего анализа привязки

В чем разница между связыванием, вызовом и применением?

Та же точка

• используются для изменения указателя this функции
• Первый параметр - это значение этого для выполнения
• может использовать последующие параметры для передачи параметров

разница

• call и apply — прямые вызовы функций, bind возвращает функцию, которую нужно вызвать с помощью()
• Параметр вызова передается один за другим, привязка аналогична вызову, а вторым параметром применения является массив

Роль вызываемого и вызывающего абонента?

callee является атрибутом объекта arguments, а функция, указывающая на объект arguments, является текущей функцией. Рекурсия может использовать arguments.callee(). Область this в стрелочной функции такая же, как и вне функции, и нет объекта аргументов, поэтому стрелочная функция не имеет вызываемого.

function factorial(num){
    if(num<=1){
        return 1;
    }else{
        return num*arguments.callee(num-1)
    }
}

caller — это атрибут объекта функции, указывающий на функцию, которая вызывает текущую функцию.Например, если A вызывает B, то B.caller указывает на A(). Текущая функция вызывается в глобальной области видимости, а значение caller равно null.

Основной тип упаковки

Number

toFixed() возвращает строковое представление значения с указанными десятичными знаками.

var num=10; num.toFixed(2); // '10.00'

String

// charAt()根据字符位置返回所在位置的字符串
// charCodeAt()根据字符位置返回所在位置字符串的字符编码
var str = 'hello world';
str.charAt(1);      // 'e'
str.charCodeAt(1);    // '101'

// fromCharCode() 接收字符编码转为字符串
String.fromCharCode(104,101,108,108,111) //'hello'

// concat()将字符拼接起来得到新字符串
var str="hello"
str.concat(' world'); // "hello world"

// indexOf()和lastIndexOf() 返回字符位置
// trim() 删除空格
// toLowerCase() 转小写,toUpperCase() 转大写
// localeCompare()  根据字母表比较排序

Разница между фрагментом, подстрокой и подстрокой

Срез и подстрока получают начальную и конечную позиции, а подстрока получает начальную позицию и длину возвращаемой строки.

Для отрицательных чисел slice добавит отрицательное число к длине строки, substr добавит отрицательный первый параметр к длине строки, превратит второй параметр в 0, а substring превратит все отрицательные числа в 0.

Разница между split() и join()

join() помещает элементы массива в строку, split разбивает строку на массивы

var arr=[1,2,3];
var str=arr.join('|'); // '1|2|3'
str.split('|'); // [1,2,3]

Монолитные встроенные объекты

Глобальный объект

Метод кодирования URI

encodeURI и encodeURICcomponent encodeURI и decodeURICcomponent

Роль eval?

Функция состоит в том, чтобы разобрать строку из кода JS и выполнить ее. Чтобы избежать использования eval, небезопасно и очень дорого

Математический объект

• мин() и макс()

var max=Math.max(3,54,32,16); // 54

• метод округления

Math.ceil() // округлить Math.floor() // округлить в меньшую сторону Math.round() // округлить в большую сторону

• random()

Прототипы и цепочки прототипов

прототип

• Все ссылочные типы (массивы, объекты, функции) имеют __proto__неявный прототипсвойство, значение свойства является обычным объектом.

Кроме того, Object.prototype.__proto__ указывает на null

• Все функции имеют прототипявный прототипсвойство, значение свойства является обычным объектом.

Function.prototype.bind() не имеет свойства прототипа

• __proto__ всех ссылочных типов (массивы, объекты, функции) выполняет свойство прототипа своего конструктора

Конструктор

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

var a={} // var a=new Object()的语法糖
var a=[] // var a=new Array()的语法糖
function Foo(){} // var Foo=new Function()的语法糖

instanceof

instanceof определяет, какому конструктору принадлежит ссылочный тип

Логика оценки f instanceof Foo: __proto__ f поднимается слой за слоем, можно ли найти Foo.prototype.

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

Чем именно занимается новый оператор?

• Создать пустой объект
• Укажите __proto объекта на прототип прототипа конструктора
• Выполнить код в конструкторе, передать параметры и указать this на этот объект
• возвращаемый объект

function _new(){
    let obj = {};
    let con=[].shift.call(arguments);
    obj.__proto__ = con.prototype;
    let res = con.apply(obj, arguments);
    return res instanceof Object ? res : obj;
}

Разница между созданием объекта по новому и созданием по литералу

Больше рекомендуется по тексту, созданию объектов, производительности и удобочитаемости. Разница между использованием var o = new object() и var o = {} заключается в том, что конструктор будет вызывать конструктор.

hasOwnProperty

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

Инструкции:object.hasOwnProperty(proName)

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

for(let item in f){
    if(f.hasOwnProperty(item)){
        console.log(item)
    }
}

Сеть прототипов

При обращении к свойствам объекта сначала ищите базовые свойства, если нет, то идите вверх по цепочке __proto__, это цепочка прототипов

объектно-ориентированный

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

• заводской узор

function createPerson(name, age){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.sayName = function(){
        console.log(this.name)
    }
    return o;
}
var person1 = createPerson('chen',21)

• Шаблон конструктора

Создание объекта не показано, метод свойства напрямую назначен ему, нет оператора возврата

function Person(name, age){
    this.name = name;
    this.age = age;
    this.sayName = function(){
        console.log(this.name)
    }
}
var person1 = new Person('chen',21)

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

• режим прототипа

function Person(){}
Person.prototype.name="chen"
Person.prototype.age=21
Person.prototype.sayName=function(){
    console.log(this.name)
}
var person1 = new Person()

Недостаток: все экземпляры получают одинаковое значение свойства.

• Режим прототипа смешанного конструктора

Шаблон конструктора используется для определения свойств экземпляра, а шаблон прототипа — для определения методов и общих свойств.

function Person(name,age){
    this.name=name;
    this.age=age;
}
Person.prototype = {
    constructor: Person,
    sayName: function(){
        console.log(this.name)
    }
}
var person1=new Person('chen',21)

реализовать наследование

JavaScript реализует наследование через цепочку прототипов

• Наследование цепочки прототипов

Ядро: используйте экземпляр родительского класса в качестве прототипа дочернего класса.

function Parent(){
    this.name = 'parent'
}
Parent.prototype.sayName = function(){
    return this.name
}
function Child(){
}
// 继承了Parent
Child.prototype = new Parent();
var child1=new Child();
child1.say();

Преимущества: наследование объектов шаблона и прототипа родительского класса.

Недостаток: множественное наследование невозможно, все свойства объекта-прототипа используются всеми экземплярами.

• Конструктор

Ядро: вызов родительского конструктора внутри дочернего конструктора

function Parent(){
    this.arr=[1,2,3]
}
function Child(){
    // 继承了Parent
    Parent.call(this)
}
var child1 = new Child();
child.arr.push(4); // [1,2,3,4]
var child2 = new Child();
child.arr;  // [1,2,3]

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

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

• наследование композиции

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

function Parent(name){
    this.name = name;
    this.arr = [1,2,3]
}
Parent.prototype.sayName = function(){
    console.log(this.name)
}
function Child(name,age){
    // 继承属性
    Parent.call(this, name)
    this.age=age
}
// 继承方法
Child.prototype = new Parent()
Child.prototype.constructor = Child;
Child.prototype.sayAge = function(){
    console.log(this.age)
}
var child1=new Child('chen',21);
child1.arr.push(4); //[1,2,3,4]
child1.sayName()    // 'chen'
child1.sayAge()     // 21

var child2=new Child('miao', 12)
child2.arr          // [1,2,3]
child2.sayName()    // "miao"
child2.sayAge()     // 12

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

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

• прототипное наследование

Ядро: выполнить неглубокую копию данного объекта

var person = {
    name: 'chen',
    arr: [1,2,3]
}
var person1 = Object.create(person);
person1.name = 'run'
person1.arr.push(4)
var person2 = Object.create(person);
person2.name = 'miao'
person2.arr.push(5)
person.arr; // [1,2,3,4,5]

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

• паразитарное наследование

Ядро: Создайте объект на основе объекта, затем улучшите объект и верните объект.

function create(original){
    // 通过调用函数创建一个新对象
    var clone = object(original); 
    // 以某种方式增强对象
    clone.sayHi = function(){
        console.log('hi')
    }
    return clone;
}
var person = {
    name: 'chen'
}
var person1 = create(person);
person1.sayHi();

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

function Parent(name){
    this.name = name;
    this.arr = [1,2,3]
}
// 将共享的属性/方法放到原型上
Parent.prototype.sayName = function(){
    console.log(this.name)
}
// 借用构造函数增强子类实例属性（支持传参和避免篡改）
function Child(name,age){
    // 继承属性
    Parent.call(this, name)
    this.age=age
}
function inheritPrototype(Child, Parent){
    var prototype=Object.create(Parent.prototype);
    prototype.constructor=Child;
    Child.prototype=prototype;
}
// 将父类原型指向子类
inheritPrototype(Child, Parent);
Child.prototype.sayAge=function(){
    console.log(this.age)
}

var child1=new Child('chen',21);
child1.arr.push(4); //[1,2,3,4] 继承自父类实例属性
child1.sayName()    // 'chen'   继承自父类原型方法
child1.sayAge()     // 21       继承自子类原型方法

var child2=new Child('miao', 12)
child2.arr          // [1,2,3]
child2.sayName()    // "miao" 
child2.sayAge()     // 12

Как класс реализует наследование и в чем суть класса?

класс - это просто синтаксический сахар, по сути, функция

class Parent{
    constructor(value){
        this.val=value
    }
    getValue(){
        console.log(this.val)
    }
}
class Child extends Parent{
    constructor(value){
        super(value)
        this.val = value
    }
}
let child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

Ядро: используйте extends, чтобы указать, от какого родительского класса наследуется, и super должен использоваться в конструкторе подкласса, который можно рассматривать как Parent.call(this, value)

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

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

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

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

Закрытие

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

Расскажите о своем понимании замыканий

Используйте замыкания для имитации области видимости на уровне блоков

преимущество: Он может избежать загрязнения глобальных переменных и реализовать инкапсуляцию и кэширование;

недостаток: закрытие резидентной памяти, увеличение использования памяти и неправильное использование утечек памяти.Решение: устанавливает для неприменимых локальных переменных значение null перед выходом из функции.

Два самых больших применения замыканий: 1. Вы можете читать переменные внутри функции 2. Постоянно хранить эти переменные в памяти 3. Инкапсулировать приватные свойства и приватные методы объекта

Расскажите о своем понимании цепочки областей видимости

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

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

Как создать область блока

• ES6 использует let и const
• Закрытие

BOM

Что такое объекты спецификации?

• объект верхнего уровня окна JS
• информация о текущем URL-адресе браузера местоположения
• навигатор сам браузер информация
• информация об экране экрана клиента
• История доступа к истории браузера

методы объекта окна

alert(),prompt(),confirm(),open(),close(),print(),focus(),blur(),moveBy(),moveTo(),resizeBy(),resizeTo(),scrollBy(),scrollTo(),setInterval(),setTimeout(),clearInterval(),clearTimeout()

объект истории

history.go(-1);     // 后退一页
history.go(1);      // 前进一页
history.back();     // 后退一页
history.forward();  // 前进一页

положение окна

• Получить положение левой и верхней части окна в браузерах

var leftPos=(typeof window.screenLeft == 'number') ? window.screenLeft : window.screenX;
var topPos=(typeof window.screenTop == 'number') ? window.screenTop : window.screenY;

• Переместить окно в указанное положение

moveTo (): получить значение координат x, y новой позиции

moveBy(): получает количество пикселей, перемещенных в горизонтальном и вертикальном направлениях.

размер окна

externalWidth и externalHeight возвращают размер самого окна браузера, innerWidth и innerHeight возвращают размер области просмотра контейнера

• изменить размер окна

resizeTo() и resizeBy()

Как определить тип браузера

Используйте навигатор.userAgent

var ua = navigator.userAgent;
var isChrome = ua.indexOf('Chrome')

Разобрать части URL

Используйте свойство местоположения

• href полный адрес
• протокол протокол
• хост имя хоста + номер порта
• имя хоста имя хоста
• порт номер порта
• относительный путь
• хеш #якорь
• поиск Строка запроса

history.go(1)

DOM

Почему манипулирование DOM происходит медленно?

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

Вставка десятков тысяч DOM, как добиться, чтобы страница не зависала?

• 1. Рендеринг DOM пакетами и вставка DOM через цикл requestAnimationFrame.
• 2. Виртуальная прокрутка, отображающая только содержимое в видимой области

Что мешает рендерингу

• 1. И HTML, и CSS блокируют рендеринг. Если вы хотите рендерить быстрее, вам следует уменьшить размер файла исходного рендеринга, сгладить иерархию и оптимизировать селектор.
• 2. Когда браузер анализирует тег скрипта, он делает паузу для построения DOM,

Решение:

• ① Поместите тег script в нижнюю часть тела.
• ②Добавьте атрибут defer к тегу script, файл JS будет загружаться параллельно, но будет выполняться последовательно после анализа HTML.
• ③ Добавлен тег сценария с атрибутом async, указывающим, что загрузка и анализ файлов JS не будет блокировать рендеринг.

Перерисовка Перерисовка и перерисовка

Перерисовка — это когда узел меняет стиль, не влияя на макет, перекомпоновка — это когда необходимо изменить макет или свойства геометрии.

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

проблемы с производительностью: 1. Изменить размер окна 2. Изменить шрифт 3. Добавить или удалить стили 4. Изменить текст 5. Позиция или плавание 6. Блочная модель

Уменьшите количество перерисовок и перекомпоновок

• 1. Используйте трансформацию вместо топа
• 2. Используйте видимость для замены display:none, первая вызывает только перерисовку, вторая вызывает перекомпоновку
• 3. Не помещайте значение атрибута узла в цикл в качестве переменной в цикле.
• 4. Не используйте макеты таблиц
• 5. Чем быстрее достигается анимация, тем больше время перекомпоновки, вы также можете использовать requestAnimationFrame
• 6. Селекторы CSS сопоставляются справа налево, чтобы избежать слишком большого количества уровней узлов.
• 7. Установите часто перерисовываемые или перекомпоновываемые узлы в качестве слоев

①изменит атрибут ②видео, тег iframe

создать узел

• createElement создает элемент
• createTextNode создает текстовый узел
• createDocumentFragment создает фрагмент документа
• cloneNode возвращает копию узла, на котором был вызван метод

Меры предосторожности:

• Приведенное выше просто создает изолированный узел, который необходимо добавить в документ через appendChild.
• cloneNode должен обращать внимание на то, содержит ли скопированный узел дочерние узлы, привязку событий и другие проблемы.
• Используйте createDocumentFragment для решения проблем с производительностью при добавлении большого количества узлов.

API модификации страницы

• appendChild() добавляет дочерние узлы
• insertBefore() добавляет узел перед ссылочным узлом

parentNode.insertBefore(newNode, refNode)parentNode представляет родительский узел, newNode представляет добавляемый узел, а refNode представляет ссылочный узел.

• removeChild() удаляет дочерние узлы
• replaceChild() заменить

parent.replaceChild(newChild,oldChild)

API запроса узла

• document.getElementById
• document.getElementsByTagName
• document.getElementsByName
• document.getElementsByClassName
• Document.Queryselector // возвращает первый подходящий элемент
• document.querySelectorAll

Реляционный API узла

• parentNode // родительский узел
• parentElement // родительский узел, должен быть элементом
• childNodes // список дочерних элементов, включая текст, узлы комментариев
• дочерние элементы // список дочерних элементов
• firstChild // первый дочерний узел
• lastChild // последний дочерний узел
• hasChildNodes // Определяем, есть ли у текущего узла дочерние узлы
• previousSibling // предыдущий одноуровневый узел
• предыдущаяElementSibling//узел предыдущего родственного элемента
• nextSibling // следующий родственный узел
• nextElementSibling // узел следующего родственного элемента

API атрибутов элемента

• setAttribute установить атрибут

element.setAttribute(name, value)

• getAttribute возвращает значение атрибута
• removeAttribute удалить атрибут

API стилей элементов

• window.getComputedStyle возвращает вычисленный стиль элемента
• getBoundingClientRect возвращает размер и положение элемента относительно видимого окна браузера.
• Измените стиль элемента напрямую

ele.style.color = 'red'
ele.style.setProperty('font-size', '16px')
ele.style.removeProperty('color')

• Динамически добавлять правила стиля

var style = document.createElement('style');
style.innerHTML='body{color:red;} #top{color:white;}';
document.head.appendChild(style);

В чем разница между атрибутом и свойством?

атрибут — это атрибут, который элемент dom имеет в документе в виде тега HTML.

Прототип — это свойство, которое элемент dom имеет как объект в JS.

Как JS задает ширину и высоту полученной блочной модели?

• Получить ширину и высоту встроенного элемента

dom.style.width/height

• Применимо только для получения ширины и высоты элемента в IEdom.currentStyle.width/height
• Получите ширину и высоту элемента, лучшая совместимостьwindow.getCompontedStyle(dom).width/height
• Получить ширину и высоту на основе абсолютного положения элемента в области просмотра

dom.getBoundingClientRect().width/height

• Наиболее часто используемый, лучшая совместимость

dom.offsetWidth/offsetHeight

Разница между offsetWidth/offsetHeight, clientWidth/clientHeight и srcollWidth/scrollHeight

• offsetWidth/offsetHeight возвращает content+padding+border, эффект такой же, как у e.getBoundingClientRect()
• clientWidth/clientHeight возвращает содержимое + отступы, если есть полоса прокрутки, она не включает полосу прокрутки
• scrollWidth/scrollHeight возвращает размер, содержащий содержимое + paddin + overflow

Разница между document.write и innerHTML

• document.write может перерисовывать только всю страницу
• innerHTML может перерисовывать часть страницы

DOM-события

уровень событий DOM

• DOM0 element.onclick=function(){}
• DOM2 element.addEventListener('click',function(){},false)
• DOM3 element.addEventListener('keyup',function(){},false)

Событие уровня DOM0Это назначение функции свойству обработки события. Недостаток заключается в том, что обработчик не может одновременно связать несколько функций обработки.

События уровня DOM2Добавьте в программу несколько функций обработки, определите два метода, addEventListener и removeEventListener, которые используются для привязки и отвязки событий соответственно.Метод содержит три параметра: имя свойства обработки связанного события, функцию обработки и захватывает, когда событие выполняется

IE8 и ниже реализованы с использованием attachEvent и detachEvent, и нет необходимости передавать третий параметр, потому что IE8 и ниже поддерживают только всплывающие события.

btn.attachEvent('onclick', showFn);
btn.detachEvent('onclick', showFn);

События уровня DOM3Он предназначен для добавления множества типов событий, таких как загрузка, прокрутка, размытие, фокус, dbclick, mouseup, mousewheel, textInput, keydown, keypress на основе событий уровня DOM2, а также позволяет пользователям настраивать некоторые события.

Как использовать события?

• Обработчик HTML-событий

<div onclick="clicked()"></div>

Плюсы и минусы: Простой, но тесно связанный с HTML-кодом, неудобно менять

• Обработчик уровня DOM0

document.onclick = function(){}; // 指定事件
docuemtn.onclick = null;         // 删除事件

Плюсы и минусы: простой и кроссбраузерный

• Обработчик уровня DOM2

addEventListener('click', function(){},布尔值) // 指定事件
removeListener('click', function(){}, 布尔值) // 移除事件

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

• Обработчик событий IE

attachEvent('onclick', function(){}) // 指定事件
detachEvent('click', function(){}) // 移除事件

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

Различия между IE и стандартной моделью событий DOM

• Различия в параметрах:

Первый параметр attachEvent() на одно больше on, чем имя события addEventListener(); третьего параметра нет, поскольку модель событий IE поддерживает только всплывающие потоки событий.

• Область действия функции обработчика событий:

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

• Разница между методами свойств объекта события event

перестань пузыриться

IE: CancelBubble=true

DOM: stopPropagation()

Предотвратить событие по умолчанию элемента

IE: returnValue=false

DOM: предотвратить по умолчанию ()

цель события

IE: srcElement DOM: target

Какова совместимость между IE и стандартом?

var ev = ev || window.event;
document.docuemntElement.clientWidth || document.body.clientWidth
var target = ev.srcElement || ev.target

Модель событий DOM (всплывание и захват)

• всплывающее окно событий

Третий параметр addEventListener равен false, событие выполняется, когда оно всплывает, а цель события всплывает уровень за уровнем.

Как предотвратить всплытие событий

child.addEventListener('click', function(e){
    console.log('目标事件')
    e.stopPropagation();
}, false)

• захват событий

Захват событий выполняется сверху вниз, а третий параметр addEventListener равен true

Поток событий DOM

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

Захват конкретного процесса захвата событий DOM

window->docuemnt->html->body->...

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

Общие приложения для объекта Event

• event.preventDefault(): предотвратить событие по умолчанию
• event.stopPropagation(): остановить всплытие
• event.stopImmediatePropagatio(): останавливает выполнение оставшихся обработчиков событий и предотвращает всплывание текущего события в DOM.
• event.currentTarget: текущий связанный элемент события, когда событие делегировано
• event.target: когда событие делегировано, различайте, какой элемент в данный момент нажат

пользовательское событие

var event = new Event('custome');
ev.addEventListener('custome', function(){
    console.log('custome');
});
ev.dispatchEvent(event);

Разница между mouseover и mouseenter

mouseover: когда мышь перемещается в элемент или его дочерние элементы, событие будет запущено, поэтому существует процесс повторного запуска и всплытия.对应的移除事件是mouseout

mouseenter: когда мышь перемещается в сам элемент (без подэлементов), событие будет запущено без всплытия.Соответствующее событие удаления — mouseleave

Пожалуйста, объясните, что такое брокер событий?

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

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

Разница между document.load и document.ready

document.onload выполняется после загрузки структуры стиля, а window.onload() запускается не только после загрузки структуры стиля, но и после загрузки всех файлов ресурсов изображения стиля.

В document.ready такого метода изначально нет.В jQuery есть $().ready().Событие ready не требует полной загрузки страницы.Достаточно только загрузить структуру DOM для срабатывания.

JSON

Как понять JSON?

JSON — это встроенный объект JS и облегченный формат обмена данными. Обычно используются два метода:

• разобрать // строку в объект
• stringify // объект в строку

Разница между XML и JSON?

• Объем данных: по сравнению с XML, JSON имеет меньший объем данных и более высокую скорость передачи.
• Взаимодействие с данными: взаимодействие между JSON и JavaScript более удобно, его легче анализировать и обрабатывать, а взаимодействие с данными лучше.
• Описание данных: JSON менее описателен для данных, чем XML.
• С точки зрения скорости передачи: JSON намного быстрее, чем XML.

Ajax

Как создать Аякс?

// 创建XMLHTTPRequest对象
var xhr = new XMLHttpRequest();
// 创建一个新的http请求
xhr.open("get", url, true)
// 设置响应HTTP请求状态变化的函数
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if(xhr.status == 200){
            // 获取异步调用返回的数据
            alert(xhr.responseText)
        }
    }
}
// 发送HTTP请求
xhr.send(null);

Код состояния readyState описание: 0: не инициализирован, send() не вызывается; 1: send() был вызван, запрос выполняется; 2: метод send() выполнен, все содержимое ответа получено; 3: содержимое ответа анализируется; 4: анализ завершен и может быть вызван на клиенте.

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

преимущество: 1. Улучшите взаимодействие с пользователем за счет асинхронного режима 2. Оптимизируйте передачу между браузером и сервером, уменьшите количество ненужных обменов данными и уменьшите использование полосы пропускания 3. Ajax работает на стороне клиента и берет на себя часть оригинальная работа сервера Проделанная работа снижает нагрузку на сервер при большом количестве пользователей 4. Ajax может добиться частичного обновления

недостаток: 1.Ajax раскрывает детали взаимодействия с сервером 2 поддержка поисковика слабая 3 непростая в отладке.

Разница между GET и POST, реализованными в браузерах

• GET, назад и обновление безвредны, можно добавить в закладки, можно кэшировать, параметры будут храниться в истории браузера, разрешены только символы ASCII, безопасность плохая, данные отображаются в URL
• POST назад и обновление повторно отправит данные, не может быть сохранено как тег, не может быть кэшировано, параметры не будут сохранены в истории браузера, нет ограничений на типы данных, повышенная безопасность, данные не будут отображаться в URL-адресе

Непонимание параметров запроса GET

Миф: Мы часто думаем, что существует ограничение на размер параметров GET-запроса, тогда как POST не имеет ограничений

На самом деле протокол HTTP не ограничивает длину запроса GET/POST.Максимальное ограничение длины GET связано с тем, что браузер и веб-сервер ограничивают длину URL-адреса.

Разница между GET и POST

Между методами GET и POST нет существенной разницы, но формат сообщения отличается.

перекрестный домен

Три тега, которые могут пересекать домены:<img><link><script>

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

Кросс-доменный относится к передаче данных или связи между разными доменами через JS. Протокол, доменное имя, порт имеют разницу это другой домен

Почему браузеры используют политику одного и того же происхождения?

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

Как решить кроссдоменную проблему?

• JSONP

Принцип заключается в использовании<script>Метки не имеют уязвимости междоменных ограничений

function jsonp(url, callback, success){
    let script = docuemnt.createElement('scipt');
    script.src = url;
    script.async = true;
    script.type = "text/javascript";
    window[callback] = function(data){
        success && success(data)
    }
    document.body.appendChild(script)
}
jsonp('http://xxx.com', 'callback', function(value){
    console.log(value);  
})

JSONP прост в использовании и имеет хорошую совместимость, но только для запросов GET.

• CORS

CORS должен поддерживаться как внешним, так и внутренним интерфейсом. Серверная сторона устанавливает Access-Control-Origin для включения CORS. Этот атрибут указывает, какие доменные имена могут получать доступ к ресурсам. Разделенные на простые запросы и сложные запросы, сложные запросы имеют еще один предварительный запрос

• document.domain применяется только к тому же доменному имени второго уровня, например.a.test.comа такжеb.test.com. добавить на страницуdocument.domain = 'test.com'Указывает, что доменное имя второго уровня такое же и может быть междоменным.
• postMessage

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

// 发送消息
window.parent.postMessage('message', 'http://www.test.com')
// 接收消息
let mc=new MessageChannel()
mc.addEventListener('message', event => {
    let origin = event.origin || event.originalEvent.origin;
    if(origin === 'http://www.test.com'){
        console.log('验证通过')
    }
})

• window.name

место хранения

Пожалуйста, опишите разницу между cookie, sessionStorage и localStorage

отвечать:

• Емкость: cookie составляет всего 4 КБ, localStorage и sessionStorage имеют максимальную емкость 5 МБ.
• Связь с сервером: файлы cookie используются для связи клиент-сервер.
• Действительное время: файл cookie существует до истечения установленного действительного времени, sessionStorage будет очищаться при закрытии текущей страницы, а localStorage будет существовать всегда, если только он не будет активно удален.
• Простота использования API: API файла cookie должен быть инкапсулирован для использования, localStorage.setItem(key, value);localStorage.getItem(key)

Есть несколько способов реализовать функцию хранения?

куки, сессионстораже, локалстораже, индексдб.

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

Что такое сервисный работник?

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

Работа серверного работника?

• Взаимодействовать с кешем, когда пользователь запрашивает что-то в кеше, сервис-воркер может сразу получить данные из кеша без вызова через внешний http
• Отправляйте push-уведомления
• Запуск фоновой синхронизации: отправьте файл с помощью браузера в автономном режиме, Service Worker может сохранить эту задачу и загрузить файл на внешний сервер после восстановления сетевого подключения.

ES6

стрелочная функция

Отличие стрелочных функций от обычных функций:

• Стрелочные функции не имеют аргументов (замените оператором остатка)
• Стрелочные функции не имеют прототипа и не могут использоваться в качестве конструкторов (не могут вызываться с ключевым словом new).
• Стрелочные функции не имеют собственного this, ссылаются на this внешнего контекста выполнения.

спред оператор

• Преобразует массивы, подобные массивам, в настоящие массивы.

let nodeList = document.querySelectorAll('div')
let arr=[...nodeList]

• Объединить несколько массивов

let arr1=[1,2,3]
let arr2=[4,5,6]
let arr3=[...arr1, ...arr2]

for... цикла

Разница между for-of и for-in

• Обход for-of получает значение ключа объекта, а for-in получает имя ключа
• for-in пройдёт всю цепочку прототипов объекта, что имеет низкую производительность for...of пройдёт только текущий объект и не пройдёт цепочку прототипов
• Для обхода массива for-in просматривает все перечисляемые свойства (включая цепочки прототипов), а for...of возвращает только значение свойства, соответствующее индексу массива.

Принцип для... из

Используя интерфейс итератора внутри объекта обхода, цикл for...of разбивается на самый примитивный цикл for.

Каковы преимущества и недостатки понимания обещаний? Что такое цепочка обещаний? В чем разница между выполнением конструктора Promise и выполнением функции?

• Обещание имеет три состояния: ожидание, решено, завершено, отклонено, отклонено.

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

• Когда Promise создается, код внутри конструктора выполняется немедленно.
• Промис реализует связанные вызовы, то есть новый промис возвращается после каждого вызова then.Если в then используется return, значение return будет обернуто Promise.resolve().

Что вы понимаете под генератором?

Генератор может контролировать выполнение функций

function *foo(x){
let y=2*(yield(x+1))
let z=yield(y/3)
return (x+y+z)
}
let it=foo(5)
it.next()		// {value:6,done:false}
it.next(12)
it.next(13)

Вызов функции Generator вернет итератор. В первый раз функция останавливается на yield(x+1), поэтому значение=5+1=6; во второй раз входящий параметр эквивалентен значению предыдущего yield, то есть пусть y=2*12=24; пусть z=24/3=8; третий следующий, входящий параметр эквивалентен значению предыдущего yield, то есть пусть z=13, y= 24, x=5, добавить и вернуть 42

Преимущества асинхронного ожидания по сравнению с обещанием

• Преимущество в том, что он обрабатывает цепочку вызовов then и может писать код более четко и точно.
• Недостатки: await трансформирует асинхронный код в синхронный, если нет зависимости между несколькими асинхронными кодами, но использование await приведет к падению производительности

Понимание async, await, внутренних принципов

Асинхронность заключается в переносе возвращаемого значения функции с помощью Promise.resolve(), что аналогично обработке возвращаемого значения, а асинхронность может использоваться только с ожиданием. await на самом деле является синтаксическим сахаром генератора плюс обещание, а генератор автоматического выполнения реализован внутри.

Каковы характеристики setTimeout, setInterval и requestAnimationFrame?

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

Реализуйте обещание самостоятельно

const PENDGIN='pending'
const RESOLVED='resolved'
const REJECTED='rejected'
function myPromise(fn){
	const that=this
	that.state=PENDING
	that.value=null
	that.resolvedCallbacks=[]
	that.rejectedCallbacks=[]
	function resolve(value){
		if(value instanceof myPromise){
			return value.then(resolve, reject)
		}
		setTimeout(()=>{
			if(that.state===PENDING){
				that.state=RESOLVED;
				that.value=value;
				that.resolvedCallbacks.map(cb => cb(that.value))
			}
		},0)
	}
	function reject(error){
		setTimeout(()=>{
			if(that.state===PENDING){
				that.state=REJECTED
				that.value=value
				that.rejectedCallbacks.map(cb => cb(that.value))
			}
		},0)
	}
	try{
		fn(resolve, reject)
	}catch(e){
		reject(e)
	}
}
myPromise.prototype.then=function(onFulfilled, onRejected){
	const that=this
	onFulfilled=typeof onFulfilled==='function'?onFulfilled: v=>v
	onRejected=typeof onRejected==='function'?onRejected: r=>{throw r}
	if(that.state===PENDING){
		that.resolvedCallbacks.push(onFulfilled)
		that.rejectedCallbacks.push(onRejected)
	}
	if(that.state===RESOLVED){
		onFulfilled(that.value)
	}
	if(that.state===REJECTED){
		onRejected(that.value)
	}
}
new myPromise((resolve, reject) => {
	setTimeout(()=>{
		resolve(1)
	},0)
}).then(value=>{
	console.log(value)
})

разница между потоком и процессом

Процесс описывает события, необходимые ЦП для выполнения инструкций и загрузки и сохранения контекстов.Потоки — это более мелкие единицы, которые ускоряют время, необходимое для выполнения инструкции в секундах.

Преимущества однопоточного JS

Поскольку js может изменять DOM, если поток пользовательского интерфейса все еще работает во время выполнения JS, пользовательский интерфейс не может быть безопасно отрисован. JS работает в одном потоке, что позволяет экономить память, экономить время переключения контекста и не иметь проблем с блокировкой.

что такое стек выполнения

Стек выполнения хранит структуру стека вызовов функций, следуя принципу «первым пришел — последним вышел». Поместите его в стек выполнения снизу, а затем вытащите его с вершины стека для выполнения.

Микрозадачи и макрозадачи

Разным очередям задач будут назначены разные источники задач.Источники задач можно разделить на микрозадачи и макрозадачи. Микрозадачи включают process.nextTick, promise, MutationObserver. Задачи макросов включают сценарии, setTimeout, setInterval, setImmediate, ввод-вывод, рендеринг пользовательского интерфейса.

Порядок выполнения EventLoop

1. Сначала выполните синхронный код, который представляет собой задачу макроса. 2. После выполнения всего синхронного кода стек выполнения пуст, проверьте, есть ли какой-либо асинхронный код для выполнения. 3. Выполнить все микрозадачи 4. Когда все микрозадачи будут выполнены, страница будет отрисовываться при необходимости 5. Затем запустить следующий раунд EventLoop, выполнить асинхронный код в задаче макроса, то есть функцию обратного вызова в setTimeout

Proxy

Одной из основных функций Vue3.0 является использование Proxy вместо Object.defineProperty. Прокси может установить перехватчик перед целевым объектом, обычно с Reflect, первый перехватывает объект, а второй возвращает результат перехвата

Недостатки Object.defineProperty

1. Не удалось обнаружить добавление и удаление корневых атрибутов объекта. 2. Невозможно обнаружить модификации массивов на основе индексов. 3. Не удалось обнаружить мониторинг модификации .length

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

Расширенное программирование с помощью JavaScript (3-е издание)

Буклет Nuggets yck - способ фронтенд-интервью

Дополнение к знанию грамматики ES6 почти на 10 000 слов