Биография маленького головастика: приемы оптимизации фронтенд-новичков для ускорения интерфейса на 60%

Node.js JavaScript

FFCreatorЭто легкая и гибкая библиотека для обработки коротких видео, созданная нашей командой. Вам нужно всего лишь добавить несколько изображений или текста, чтобы быстро создать классное короткое видео, похожее на Douyin. адрес гитхаба:GitHub.com/TNF E/FFC Горячая ах…Добро пожаловать Звезда друзей.

задний план

Давно не писал статью, уже пол года молчит

постоянное недомогание, периодические судороги

Приходи к тете каждый день, каждый день проводи в смятении и тревоге

Должен признать, я на самом деле кусок дерьма

в должности младшего фронтенд-инженера

Недавно имел дело с родовым старым интерфейсом, которому более десяти лет.

Он наследует всю логику чрезвычайной сложности

Легендарный ежедневный сервис, который одним звонком может увеличить загрузку процессора на 90%.

Специализируется на всех видах неудовлетворенности и болезни Альцгеймера

Мы ценим то, что этот интерфейс отнимает много времени

Среднее время звонка более 3 секунд

Заставляет страницу иметь серьезную очередь хризантем

После разнообразного углубленного анализа и профессиональных вопросов и ответов

Окончательный вывод: отказаться от лечения

Лу Синь однажды сказал в «Дневнике сумасшедшего»:能打败我的，只有女人和酒精，而不是bug"

когда темно

Это предложение всегда заставляет меня видеть свет

Так что будьте жесткими на этот раз

Я решил сделать слой прокси узла

Для оптимизации используйте следующие три метода:

  • 按需加载 -> graphQL

  • 数据缓存 -> redis

  • 轮询更新 -> schedule

Кодовый адрес:github

Загрузка по запросу -> graphQL

Есть проблема со старым интерфейсом Tianxiu, каждый раз мы запрашиваем 1000 единиц данных, в возвращаемом массиве каждая часть данных имеет сотни полей, на самом деле мы используем только 10 полей во внешнем интерфейсе.

Как извлечь любые n полей из более чем 100 полей, использующих graphQL.

GraphQL загружает данные по требованию всего за три шага:

  • Определить корень пула данных
  • Описать схему структуры данных в пуле данных
  • Пользовательский запрос данных

Определить пул данных

Мы определяем пул данных для сценария, в котором Диаози преследует богиню, следующим образом:

// 数据池
var root = {
    girls: [{
        id: 1,
        name: '女神一',
        iphone: 12345678910,
        weixin: 'xixixixi',
        height: 175,
        school: '剑桥大学',
        wheel: [{ name: '备胎1号', money: '24万元' }, { name: '备胎2号', money: '26万元' }]
    },
    {
        id: 2,
        name: '女神二',
        iphone: 12345678910,
        weixin: 'hahahahah',
        height: 168,
        school: '哈佛大学',
        wheel: [{ name: '备胎3号', money: '80万元' }, { name: '备胎4号', money: '200万元' }]
    }]
}

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

Далее мы опишем эти структуры данных.

Описать структуру данных в пуле данных

const { buildSchema } = require('graphql');

// 描述数据结构 schema
var schema = buildSchema(`
    type Wheel {
        name: String,
        money: String
    }
    type Info {
        id: Int
        name: String
        iphone: Int
        weixin: String
        height: Int
        school: String
        wheel: [Wheel]
    }
    type Query {
        girls: [Info]
    }
`);

Выше Код - информация схемы богини.

Сначала мы используемtype QueryОпределяет запрос информации о богине, который содержит много информации о девушках.Info, информация представляет собой кучу массивов, поэтому она[Info]

мы вtype InfoОписывает размеры всей информации о девушке, включая имя (имя), мобильный телефон (iphone), WeChat (weixin), рост (рост), школу (school), коллекцию запаски (колесо)

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

Получив информационное описание (схему) богини, вы можете настроить различные информационные комбинации богини.

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

const { graphql } = require('graphql');

// 定义查询内容
const query = `
    { 
        girls {
            name
            weixin
        }
    }
`;

// 查询数据
const result = await graphql(schema, query, root)

Результаты фильтрации следующие:

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

const { graphql } = require('graphql');

// 定义查询内容
const query = `
    { 
        girls {
            name
            wheel {
            	money
            }
        }
    }
`;

// 查询数据
const result = await graphql(schema, query, root)

Результаты фильтрации следующие:

На примере Goddess покажем, как загружать данные по запросу через graphQL.

Сопоставленный с конкретным сценарием нашего бизнеса, каждый фрагмент данных, возвращаемый интерфейсом Tianxiu, содержит поля 100. Мы настраиваем схему для получения 10 из этих полей, что позволяет избежать передачи оставшихся 90 ненужных полей.

Есть еще одно преимущество graphql — гибкость: этот интерфейс требует 10 полей, а другой интерфейс — 5 полей, а n-й интерфейс требует еще одного поля X.

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

понимание

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

Отморозки, отморозки, берите то, что вам нужно

О ваших истинных чувствах не стоит упоминать перед знаменитостями

Мы должны научиться совпадать

Включите ключи от машины, когда подойдете, и покажите свои таланты без машины.

У меня есть наследственная хромосома, которой я хочу поделиться с вами сегодня вечером.

Все в порядке, если это не так, замените его другим

Прямо в точку, просто и грубо

кеш -> редис

Второй метод оптимизации с использованием кэша Redis

Старый интерфейс Tianxiu вызывает еще три старых интерфейса, причем вызовы являются последовательными, что чрезвычайно трудоемко и ресурсоемко, а ваш скальп немеет.

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

const redis = require("redis");
const { promisify } = require("util");

// 链接redis服务
const client = redis.createClient(6379, '127.0.0.1');

// promise化redis方法，以便用async/await
const getAsync = promisify(client.get).bind(client);
const setAsync = promisify(client.set).bind(client);

async function list() {
	// 先获取缓存中数据，没有缓存就去拉取天秀接口
	let result = await getAsync("缓存");
    if (!result) {
    	  // 拉接口
    	  const data = await 天秀接口();
          result = data;
          // 设置缓存数据
          await setAsync("缓存", data)
    }
   	return result;
}

list();

пройти первымgetAsyncЧтобы прочитать данные в кеше Redis, если есть данные, вернитесь напрямую, минуя вызов интерфейса, если данных нет, он вызовет интерфейс Tianxiu, а затемsetAsyncОбновите кеш для следующего вызова. Поскольку Redis хранит строки, при настройке кеша нужно добавитьJSON.stringify(data), для того, чтобы всем было проще понять, не буду добавлять, а конкретизирую детали в кодеgithubсередина.

Помещение данных в кеш Redis имеет несколько преимуществ.

Может реализовать многоинтерфейсное мультиплексирование, общий кеш для нескольких машин

Это легенда云备胎

Вероятность успеха преследования богини составляет 1%.

Преследуйте 100 богинь одновременно, тогда ваша вероятность получить богиню равна 100%

Лу Синь однажды сказал в «Дневнике сумасшедшего»:舔一个是舔狗，舔一百个你就是战狼"

Вы хотите быть лизающей собакой или волком-воином?

Давай, используй кеш, используй Redis

опрос для обновлений -> расписание

Последний способ оптимизации: опрос обновлений -> расписание

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

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

const schedule = require('node-schedule');

// 每个小时更新一次缓存
schedule.scheduleJob('* * 0 * * *', async () => {
    const data = await 天秀接口();
    // 设置redis缓存数据
    await setAsync("缓存", data)
});

天秀接口不是一个强实时性接口，数据源一周可能才会变一次

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

мы используемnode-scheduleЭта библиотека для опроса кеша на наличие обновлений,* * 0 * * *Это означает, что логика обновления кеша настроена на запуск в 0-ю минуту каждого часа, а полученные данные обновляются в кеше, чтобы другие интерфейсы и машины могли получать самые последние данные при вызове кеша, который совместно использует , Преимущества кэширования и опроса обновлений.

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

Отправляйте сообщения богиням из белого списка каждый день

Бесконечная петля云跪舔Комплект из трех предметов:

  • "Ах, детка, ты скучала по мне в последнее время?"
  • «Ах, детка, рано с миром».
  • — Спокойной ночи, детка, хорошо?

Хотя богиня все еще смотрит на меня свысока

Но все же всегда готов служить богине

конец

После оптимизации трех вышеуказанных методов

Время запроса интерфейса уменьшено с 3 с до 860 мс.

Все эти коды представляют собой упрощенную логику бизнеса.

Настоящий бизнес-сценарий гораздо более сложнее, чем это: сегментированное хранение данных, синхронизация мастера-раб-раб, разделение чтения, стратегия синхронизации высокой связности и т. Д.

Каждый модуль непонятен

Как будто каждая богиня недосягаема

Диаоси победила всех жуков, кроме своего сердца

Раненый, я могу только напиться один среди ночи

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

Пораженный чрезвычайно гладким опытом

Наслаждайтесь сублимацией души в духовном оргазме

этот момент

Я думаю, я могу сделать это снова

(над)

Кодовый адрес:github

Автор: the first tadpole, публичный номер: front-end Diaosi

Категории