Как старший/экспертный интерфейс отвечает на вопросы интервью по JavaScript (1)

внешний интерфейс JavaScript
Как старший/экспертный интерфейс отвечает на вопросы интервью по JavaScript (1)

предисловие

Интервьюер спросил:如何快速排查内存泄露?

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

1. Достоверно объясните утечку памяти

Объяснение утечки памяти:程序中己动态分配的堆内存由于某种原因未释放或无法释放。

Интервьюер: Так по какой причине вас не выпустили?

  • 根据JS的垃圾回收机制，当内存中引用的次数为0的时候内存才会被回收
  • 全局执行上下文中的对象被标记为不再使用才会被释放

Несколько сценариев утечек памяти

  • Слишком много глобальных переменных.通常是变量未被定义或者胡乱引用了全局变量 
// main.js
// 场景1
function a(){
    b=10;
}
a();
b++;

// 场景2
setTimeout(()=>{
    console.log(b)
},1000)
  • Закрытие. Ссылки на память, оставленные пакетом, не должны разрешаться вручную.定义了闭包就要消除闭包带来的副作用。 

function closuer (){
    const b = 0;
    return (c)=> b + c
}

const render = closuer();

render();
render = null; // 手动设置为null，GC会自己去清除
  • Прослушиватель событий не удален

function addEvent (){
 const node =  document.getElementById('warp');
    node.addEventListener('touchmove',()=>{
        console.log('In Move');
    })
}

const onTouchEnd = (){
   const node =  document.getElementById('warp');
   node.
}

useEffect(()=>()=>{
     const node =  document.getElementById('warp');
     node.removeEventListener('touchmove');
}) // 类似react 生命周期函数： componentWillUnmount
render(<div id='warp' onTouchEnd={onTouchEnd}>
 // code...
</div>)
  • кеш. Независимо от того, какой кэш, вам нужно установить время истечения срока действия.

Интервьюер:Можете ли вы рассказать мне, как вы устраняете утечки памяти?

Анализ волны: Здесь ответ вполне удовлетворительный. Но действительно ли вопрос интервьюера здесь? Очевидно нет. Когда интервьюер спрашивает вас, как решить проблему, вы на самом деле снова спрашиваете, как вы обнаружили проблему.

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

Ну вот и вопрос.Утечки памяти могут вызвать застревание страниц или сбои.Вызвано ли застревание страниц утечками памяти?Итак, интервьюер действительно хочет спросить,你是如何发现某个页面有可能发生了内存泄露，并且你是如何诊断该问题是内存泄漏引起的。

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

Установление показателей эффективности, связанных с утечками памяти

  • Количество вновь добавленных атрибутов объекта Window
    • перед загрузкой страницыObject.kyes(window)
    • Перед уходом со страницы (переход маршрута, закрытие страницы, закрытие фонового приложения и т. д.)Object.kyes(window)
  • Некоторые специальные функции, например, переназначить ли функциональную переменную, которая генерирует замыкание, значение null.Иными словами, было ли очищено написанное вами замыкание? Или,

function closuer(){
    const a = 0;
    return (b)=> a + b
}
API.addClosuer(closuer);
const result = closuer();
API.addClosuer(result);
result = null;
closuer = null;

// 记录页面离开的时间，和被监听的闭包函数有没有被释放。
const list = API.getClosuer(); // 被监听的闭包函数集合，最好的结果就是 {closuer:null,result: null,...}
API.上报(API.getClosuer());

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

  • Количество запусков события и время, затраченное на его обработку.

    • Если основной поток js заблокирован, запуск события текущей сцены определенно будет отложен или будет ждать бесконечно. использовать здесьperformance.now
    • performance.now()метод возвращает текущую страницу изperformance.timing.navigationStartколичество микросекунд между текущим временем,Его точность может достигать100万分之一秒.
    • performance.now()примерно равноDate.now(), но первый возвращает миллисекунды, второй возвращает микросекунды, а последний в 1000 раз точнее первого.

  • Является ли количество элементов DOM страницы ненормальным.

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

    • FPS, есть явная длинноволновая нестабильность.

    • Количество перекрасок.

Дизайн Performance SDK

Пожалуйста, смотрите статьюДеньги — это самая твердая уверенность человека (идея дизайна Performance SDK)

Категории