Когда я впервые пришел на Alibaba, я на самом деле даже не знал, что такое оттенки серого, но концепция оттенков серого очень распространена на крупных фабриках.Пока есть определенное количество пользователей, приложение будет включать публикацию в оттенках серого, поэтому студенты, которые планируете выйти на крупную фабрику, необходимо понимать концепцию публикации в оттенках серого.
1. Что такое публикация в оттенках серого?
Выпуск в градациях серого, также известный как канареечный выпуск, относится к плавному переходу между новой функцией выпуска и старой функцией, которая может быть представлена пользователям в плавном переходе, подобно перьям канарейки, с несколькими плавными цветами.
Например, система, которая была запущена и работает, нуждается в новой итерации функции, но поскольку функция сильно меняется, в выпуске необходимо учитывать отзывы пользователей и некоторые неизвестные исключения в коде. обновлены. Функции постепенно передаются пользователям в пакетном режиме.
В этом процессе постепенного увеличения объема мы можем решить, продолжать ли выпускать и продвигать новые функции в соответствии с принятием пользователем (от пользователей не так много жалоб) и есть ли какие-либо отклонения, которые не были обнаружены до запуска этого Если обратная связь о новой функции плохая или если есть функциональная проблема с аномалией, остановите большой объем или откатитесь к предыдущей стабильной версии, чтобы вовремя исправить проблему.
Таким образом, в случае одного нажатия, если есть проблема, онлайн-проблема внезапно возникнет, и пользователь будет заблокирован.
2. Преимущества публикации в оттенках серого
1. Заранее собирать мнения пользователей и своевременно улучшать функции продукта
2. Контролируйте неизвестные исключения, которые появляются только в небольшом диапазоне и не влияют на большинство пользователей.
3. Если у продукта есть внешние проблемы (например, соответствие требованиям), его можно вовремя откатить на старую версию.
3. Элементы интерфейсной публикации в градациях серого
1. Правила большого объема
Если новые функции добавляются постепенно, должно быть правило, которое делит пользователей на разные группы по определенным признакам, это может быть возраст, город или id пользователя при регистрации. Например, когда пользователь регистрируется, появляется бит серийного номера, который увеличивается с 0. Когда шкала серого увеличивается, серийный номер можно использовать в качестве размера, а шкалу можно увеличивать от меньшего к большему, пока не будет 100. % полный.
Полная система должна учитывать схему оттенков серого в начале проектирования.Если вы внимательно наблюдаете, что uid пользователя должен иметь серийный номер при его регистрации, например, пятнадцатая цифра в идентификационном номере - это серийный номер от 0 до 9. , общий пользовательский UID оставит два бита в качестве бита самоувеличивающегося числа, и эти два бита обычно используются в качестве функции оттенков серого в оттенках серого.
2. Старые и новые версии ресурсов
Он может четко идентифицировать две формы страниц, которые должны отображаться для пользователей, которые могут быть представлены в виде статического номера версии внешнего интерфейса. Например, после выпуска каждого ресурса ссылка на номер версии статического ресурса изменяется. время, оттенки серого на самом деле два разных запроса ресурсов. Связывание запросов представляет собой пошаговый процесс от старого к новому.
4. Принцип реализации оттенков серого
Ниже приведен основной принцип реализации градаций серого.Самое главное - судить о работе пользователей градаций серого.Вы можете судить до отправки запроса,а затем непосредственно запрашивать соответствующие ресурсы.Вы также можете запросить сервер,и сервер сначала определяет, принадлежит ли пользователь к списку оттенков серого, а затем возвращает соответствующий ресурсный контент, зависит от того, как развернуто внешнее приложение, будь то рендеринг на стороне сервера или рендеринг на стороне клиента.
5. Несколько методов внешнего выпуска оттенков серого
1. Приложение для рендеринга на стороне сервера
Приложение рендеринга на стороне сервера будет отображать статический шаблон перед возвратом к клиенту.Это очень важно знать, это означает, что интерфейсный процесс в градациях серого должен быть завершен до того, как запрос пользователя будет возвращен, а клиент не обрабатывает любой контент, связанный с оттенками серого. Как показано ниже:
Кратко опишите, что после того, как пользователь впервые инициирует запрос, сервер не будет напрямую собирать статические ресурсы, а сначала перейдет к правилам оттенков серого, чтобы получить список, а затем получит список оттенков серого для обработки суждения, чтобы решить, какой набор ресурсов шаблона использовать. визуализировать в. На стороне клиента новая версия страницы, наконец, отображается для пользователей в списке оттенков серого, а пользователи, которых нет в списке, продолжают использовать старую версию содержимого страницы. объем, вы можете напрямую изменить его в правилах оттенков серого.
Взгляните на пример кода ниже
// 服务端代码
// 静态模板
const model1 = () => {
return `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div id="mydiv">我是A界面</div>
</body>
</html>
`
}
const model2 = () => {
return `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div id="mydiv">我是B界面</div>
</body>
</html>
`
}
const isPass = getRule(req.uid) // 查询规则
if (isPass) { // 在白名单
res.render(model2)
} else {
res.render(model1)
}
...В приведенном выше коде есть две версии интерфейса, A и B. Перед возвратом ресурса, запрошенного пользователем, правило оттенков серого получается через getRule, чтобы определить, находится ли он в белом списке, а затем решить, какой набор содержимого шаблона возвращаться.
2. Применение полуразделенных переднего и заднего концов
Здесь внешние и внутренние приложения частично разделены, что означает, что некоторые html-файлы внешних приложений все еще находятся на стороне сервера, но на самом деле они отображаются на стороне клиента.Я думаю, вы видели больше , например следующий код.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div id="react-content"></div>
</body>
<script src="http://cdn.com/1.0.1/my.js"></script>
</html>Когда мы используем реакцию или vue, мы, наконец, упаковываем код в файл JavaScript, загружаем и используем его в файле html, и этот файл html будет помещен в систему на стороне сервера.Когда пользователь запрашивает ресурсы, этот html возвращается клиенту, а клиент получает контент и загружает сетевые ресурсы по адресу http://cdn.com/1.0.1/my.js, а затем обрабатывает его локально.
Обратите внимание, что каждый ресурс, который мы упаковываем, будет иметь номер версии. Например, указанная выше версия — 1.0.1, а путь хранения на cdn — также 1.0.1/my.js. Уникальность пути используется для различения это из Если другие версии несовместимы, конечно, вы можете добавить номер версии к имени файла, например /my_1.0.1.js, если можно определить уникальность ресурса.
Давайте возьмем псевдокод, чтобы увидеть, как здесь сделать оттенки серого.
// 服务端代码
const isPass = getRule(req.uid) // 查询规则
let version = 1.0.1; // 旧版本号
if (isPass) { // 在白名单
version = 2.0.0
}
// 静态模板
const model = version => {
return `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div id="react-content"></div>
</body>
<script src="http://cdn.com/{version}/my.js"></script>
</html>
`
}
res.render(model(version)) // 返回带版本号的模板В этом коде, из-за двух итерационных требований, интерфейсный разработчик упаковал интерфейсные ресурсы в два пакета ресурсов, загрузил их в разные места CDN и использовал номер версии в качестве идентификатора для определения старого и нового. содержание.
Когда запрос пользователя получен, он сначала получает правило оттенков серого через getRule, чтобы определить, какую версию ресурса отображать для текущего пользователя, а затем возвращает содержимое шаблона с версией ресурса.После того, как клиент получает шаблон, он загружает соответствующий ресурс Ресурс с номером версии, чтобы соответствовать требованиям к оттенкам серого.
3. Рендеринг интерфейсных приложений на стороне клиента
В настоящее время наиболее распространенным типом развертывания является то, что после завершения разработки внешнего интерфейса он упаковывается непосредственно в CDN, а затем для запроса статических ресурсов используется nginx.В это время сервер CDN не будет оценивать оттенки серого. -связанные операции, то есть в настоящее время вы не можете позволить серверной части контролировать версию с помощью части логики оттенков серого, и в настоящее время все запросы данных внешнего интерфейса являются асинхронными ajax, так что же должна делать шкала серого?
Первая идея:
Мы можем написать два набора содержимого во внешнем коде, инициировать асинхронный запрос для получения правил оттенков серого перед рендерингом страницы, а затем решить, какой набор страниц отображать на стороне клиента после получения результатов, чтобы соответствовать требованиям оттенков серого. требования.
Взгляните на псевдокод ниже:
// 客户端端代码
// 组件
const component1 = () => {
return (<div>我是A组件</div>)
}
const component2 = () => {
return (<div>我是B组件</div>)
}
const isPass = $.ajax('/getRule?uid') // 查询规则
...
render() {
if (isPass) { // 在白名单
return model2()
} else {
return model1()
}
}
...Вышеупомянутый клиентский код может выполнить пользовательскую градацию серого, но есть проблема: когда более поздний спрос увеличивается, интерфейсный код будет очень большим, и каждый раз, когда выпускается новое требование, необходимо проверить, соответствует ли возвращается старая версия.Если она будет изменена, будут поддерживаться два набора контента, и обслуживание станет очень утомительным по мере увеличения размера приложения.
Второй способ мышления:
Если мы продолжим хранить номер версии, чтобы отличать каждую итерацию, и просто получим правильный ресурс версии для рендеринга перед рендерингом, будет ли решена вышеуказанная проблема?
Взгляните на псевдокод ниже:
// 客户端端代码
const syncLoadJs = function (version, fn) {
const oScript = document.createElement('script');
oScript.setAttribute('src',`https://cdn.com/{version}/my.js`);
oScript.setAttribute('type','text/javascript');
oScript.onload = fn;
oScript.onerror = function() { window.location.href = '/error.htm' };
document.body.appendChild(oScript);
},
...
const isPass = $.ajax('/getRule?uid') // 查询规则
let version = 1.0.1; // 旧版本号
if (isPass) { // 在白名单
version = 2.0.0
}
syncLoadJs(version, function(){
ReactDOM.render()); // 客户端获取完资源后进行渲染
})
...Этот метод предназначен для асинхронного получения списка для определения версии ресурса перед отрисовкой клиента, а затем работа по отрисовке страницы будет выполняться после получения версии ресурса.
Но здесь есть проблема, каждая страница должна получить правила оттенков серого, а затем определить, является ли она оттенками серого, этот запрос в градациях серого заблокирует страницу, что может вызвать плохое взаимодействие с пользователем, поэтому мы можем рассмотреть возможность использования клиента localStage для хранения является ли пользователь пользователем в градациях серого, вместо отправки запроса каждый раз, когда запрашивается ресурс, чтобы определить, является ли он пользователем в градациях серого, а затем регулярно обновлять значение, хранящееся в localStage, чтобы заменить проблемы с опытом, вызванные большим количеством запросов.
Вышеупомянутое содержание является моим собственным резюме, это неизбежно, что будут ошибки или недоразумения.Если у вас есть какие-либо вопросы, я надеюсь, что вы оставите сообщение, чтобы исправить меня, чтобы не понять неправильно.Если у вас есть какие-либо вопросы, пожалуйста, оставьте сообщение, и я постараюсь ответить на него. !
Замечательный отзыв о прошлом