Все, что достаточно глубоко, — это нож (версия интервью)

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

предисловие

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

введение

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

История, которую я хочу рассказать, состоит из четырех слов:оптимизация производительности.

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

Вопросы для интервью, с которыми я столкнулся в прошлом году

Интервьюер:Что вы сделали для оптимизации производительности?

отвечать:懒加载,缓存,离线包,并行化

Интервьюер:Как устроен офлайн-пакет?

Ответ: Это сделать снимок домашней страницы и передать его на локальный путь родной детской обуви, когда приложение упаковано.

Интервьюер:Итак, есть ли у вас какая-либо конкретная реализация для ленивой загрузки или кэширования?

Ответ: Да.骨架屏、SSR。

Интервьюер:Каковы преимущества и недостатки каркасного экрана и SSR?

отвечать:骨架屏适合在页面加载延迟毕竟高的情况下使用，但是骨架屏的灰色豆腐块需求视觉切图，这个图是需要缓存在客户端的。如果大范围使用骨架屏，可能会导致客户端缓存过多的图片，反而得不偿失吧。SSR实施成本会高一些，如果不是特别重要的页面不建议使用。 当网络环境很差劲的情况下，依然还是要做降级处理的，也就是客户端渲染。

Интервьюер: У вас есть конкретное решение проблемы с белым экраном над сгибом?

Моя внутренняя ОС: Я начал MMP в своем сердце, и соавторство в том, что я сказал ранее, не является решением?

отвечать:方法有不少，但具体还是要看公司的环境了。毕竟不是所有手段都能用上。 但首屏很重要的一个点是做好缓存。例如利用好http缓存。。。

Резюме

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

История интервью, которая произошла вчера

Интервьюер:Как построена платформа мониторинга производительности?

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

(прервано, потому что интервьюер добрался до интересующей его темы)

Интервьюер: вашFPSКак это рассчитывается?

отвечать:FPS(Frames Per Second, отображение кадров в секунду). в целомFPSсуществует60Вверху страница ровная и не застревает. Но это не так, например, вы играете в игры (типа едите курицу, King of Glory), хотя фпс ниже, чем60, но мы чувствовали, что он был гладким и не заикался.

FPS ниже 60 не означает заикания, а FPS выше 60 не обязательно означает отсутствие заиканий. Например, первые 60 кадров рендерятся очень быстро (1 кадр за 10 мс), а следующие 3 кадра рендерятся очень медленно (1 кадр за 20 мс), поэтому средний FPS равен 95, что выше стандартного 60. Это застрянет? Очевидно, Катон.

Таким образом, ключевым моментом в том, застрял он или нет, является то, занимает ли рендеринг одного кадра слишком много времени.

但难点在于，在浏览器上，我们没办法拿到单帧渲染耗时的接口。所以我们只能拿 FPS 来计算，只要 FPS 保持稳定，且值比较低，就没问题。我们给它定的标准是连续 3 帧不低于 20 FPS，且保持稳定。

(Глаза интервьюера начинают светиться.)

Интервьюер:Тогда вы можете написать это.

// **开始在线写代码。**
// 以h5 为例

/*
利用 requestAnimationFrame 在一秒内执行 60 次（在不卡顿的情况下）这一点，
假设页面加载用时 X ms，这期间 requestAnimationFrame 执行了 N 次，
则帧率为1000* N/X，也就是FPS。
*/

/*但不同户客户端差异很大，需要考虑兼容性。
在这里我们定义 fpsCompatibility 表示兼容性方面的处理，在浏览器不支持
requestAnimationFrame 时，利用 setTimeout 来模拟实现。
在 fpsLoop 里面完成 FPS 的计算。
最后通过遍历 fpsList 来判断是否连续三次 fps 小于20。
*/
const fpsCompatibility = function () {

  return (

    window.requestAnimationFrame ||

    window.webkitRequestAnimationFrame ||

    function (callback) {

      window.setTimeout(callback, 1000 / 60);

    }

  );

}();

const fpsConfig = {

  lastTime: performance.now(), // performance 是一个浏览器提供的API

  lastFameTime: performance.now(),

  frame: 0

}

const fpsList = [];

const fpsLoop = function () {

  const first = performance.now();
  
  const diff = (first - fpsConfig.lastFameTime);

  fpsConfig.lastFameTime = first;

  const fps = Math.round(1000 / diff);

  fpsConfig.frame = fpsConfig.frame + 1;

  if (first > 1000 + fpsConfig.lastTime) {

    const fps = Math.round((fpsConfig.frame * 1000) / (first - fpsConfig.lastTime));

    fpsList.push(fps);
    
    console.log(`time: ${new Date()} fps is：`, fps);

    fpsConfig.frame = 0;

    fpsConfig.lastTime = first;

  };

  fpsCompatibility(fpsLoop);

}

fpsLoop();

function checkFPS(fpsList, below = 20, last = 3) {
  let count = 0;

  for (let i = 0; i < fpsList.length; i++) {
    if (fpsList[i] && fpsList[i] < below) {
      count++;
    } else {
      count = 0
    }

    if (count >= last) {
      return true
    }
  }

  return false

}

checkFPS(fpsList);



// 如果连续判断 3次 FPS 都小于20，就认为是卡顿。

Интервьюер:Ну да. Как вы представляете описания этих показателей эффективности?

отвечать:手动埋点,自动化采集,可视化埋点

Интервьюер:Как разработать производительный SDK, есть идеи?

Ответ: производительностьSDKдизайн, один接入дизайн, другойSDK运行设计.

  • Дизайн доступа к SDK
    • Вы можете инкапсулировать скрипты, собранные с первого экрана, белого экрана и заморозить до этого. и пусть скрипт запускается автоматически.
    • Хорошо поработайте с документацией по использованию/справке SDK, чтобы упростить использование.
    • Помощник по анализу производительности может быстро найти некоторые простые основные проблемы.
  • Работающий дизайн SDK
    • Проблемы совместимости, используйте собственный JavaScript для написания коллекции индикаторов производительности для достижения кросс-конечной коллекции
    • Отказоустойчивые механизмы, такие как попытка захвата захвата, а затем отчет об исключении
    • Проверьте производительность SDK и подтвердите распределение модели в соответствии с фактическим использованием пользователя.

Интервьюер:Что касается ненормальной отчетности, которую вы только что упомянули, как разработана ваша стратегия отчетности?

О: После сбора показателей производительности лучше сначала отфильтровать аномалии данных. Однако дизайн стратегии отчетности можно разделить на несколько частей.

  • Фильтрация данных журнала
    • Сначала отфильтруйте исключения данных
    • Аномальные данные включают ошибки вычислений, допустимые выбросы, максимальные значения, минимальные значения и т. д.
  • Стратегия выборки данных
    • Полные или выборочные данные зависят от ежедневной активности.
    • Как правило, ежедневная активность составляет менее 10 Вт, и вы можете выбрать полную сумму. Для APP с ежедневной активностью 1000 Вт необходимо выполнить выборку.
  • Выбор модели отчета
    • О ситуации в сильной сети сообщается напрямую, а о ситуации в слабой сети сначала сохраняется локально, а затем сообщается в случае сильной сети.
    • Другие включают отчеты при запуске приложения, отчеты о пакетных данных и т. Д.

резюме

Какого черта насчет десяти оптимизаций производительности? Другое назначение, чтобы продолжить оптимизацию производительности, что, черт возьми?В последующие дни я сталкивался с интервьюерами, и вопросы, которые не беспокоили меня в течение длительного времени, были окончательно решены.«Интервьюеры»Это получил ответ.

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

Я заменил «она» на «интервьюер» и сказал новый абзац.

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

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

Наконец,Все, что достаточно глубоко, — это нож.Оптимизация производительности не является исключением.

(Всего наилучшего.)

Категории