- API для реєстрації та відображення в браузері даних про продуктивність
- об'єкт Performance
- Малюнок 1. Об'єкт Performance
- об'єкт PerformanceTiming
- Таблиця 1. Властивості об'єкта PerformanceTiming
- Малюнок 2. Візуалізація черговості властивостей PerformanceTiming
- Малюнок 3. Об'єкт PerformanceNavigation
- Лістинг 1. Звернення до властивості redirectCount
- Зведемо все сказане воєдино
- Лістинг 2. Видимість локальних змінних для глобальних геттер-функцій
- Лістинг 3. Звернення до властивостей з простору імен
- Лістинг 4. Функція logToServer
- Лістинг 5. Повний вихідний код бібліотеки perfLogger.js
- Лістинг 6. Вихідний код savePerfData.php
- Лістинг 7. Дані запиту POST, що відправляються сценарієм perfLogger.js
- Лістинг 8. R-сценарій runtimePerformance.R
- Малюнок 4. Вихідні дані функції printLoadTimebyBrowser
- Малюнок 5. Вихідні дані функції avgTimeBreakdownInRequest
- Лістинг 9. Отримані показники зберігаються в таблиці даних Perflogs
- Лістинг 10. Час завантаження для користувача бази
- Малюнок 6. Гістограма розподілу часу завантаження для користувача бази
- Ресурси для скачування
API для реєстрації та відображення в браузері даних про продуктивність
Наша взаимовыгодная связь https://banwar.org/
В кінці 2010 року консорціум World Wide Web (W3C) створив нову робочу групу Web Performance Working Group для розробки методів вимірювання аспектів продуктивності функцій і інтерфейсів (API) агента користувача. Ця група розробила API, який дозволяє за допомогою JavaScript відображати в браузерах ключові показники Web-продуктивності.
У цьому API робоча група створила ряд нових об'єктів і подій для вимірювання показників і виконання оптимізації продуктивності. Перерахуємо об'єкти і інтерфейси на верхньому рівні:
- Об'єкт Performance надає об'єкти PerformanceNavigation, PerformanceTiming і MemoryInfo, а також можливість запису часу з точністю до мілісекунди.
- Інтерфейс Page Visibility дозволяє визначати видимість конкретної сторінки, щоб оптимізувати використання пам'яті для анімації або мережеві ресурси для polling-операцій.
Використовуйте ці об'єкти і інтерфейси, щоб реєструвати і візуалізувати в браузері показники продуктивності.
об'єкт Performance
Якщо в консолі JavaScript ввести window.performance, повернеться об'єкт типу Performance з декількома об'єктами і методами, які він надає. В даний час в стандартний набір об'єктів входять:
- window.performance.timing для типу PerformanceTiming.
- window.performance.navigation для типу PerformanceNavigation.
- window.performance.memory для типу MemoryInfo (тільки для браузера Chrome).
На малюнку 1 показаний знімок екрана об'єкта Performance з розгорнутими властивостями об'єкта PerformanceTiming.
Малюнок 1. Об'єкт Performance
Об'єкт Performance з розгорнутим об'єктом PerformanceTiming показаний в консолі.
об'єкт PerformanceTiming
Об'єкт PerformanceTiming надає загальнодоступні властивості - ключові показники для дій, які виконуються браузером при отриманні і відображенні контенту. У таблиці 1 наведені властивості об'єкта PerformanceTiming і їх призначення.
Таблиця 1. Властивості об'єкта PerformanceTiming
Властивість об'єкта Опис navigationStart Фіксує або початок навігації, або початок вивантаження браузером попередньої сторінки (якщо така є), або початок отримання браузером контенту. Містить дані unloadEventStart або fetchStart. Почніть з цього значення, щоб відстежити повний час. unloadEventStart / unloadEventEnd Фіксує початок і закінчення вивантаження попередньої сторінки, якщо попередня сторінка знаходиться в тому ж домені. domainLookupStart / domainLookupEnd Фіксує початок і закінчення DNS-запиту браузера для запитаного контенту. redirectStart / redirectEnd Фіксує початок і закінчення будь-якого виконуваного браузером HTTP-перенаправлення. connectStart / connectEnd Фіксує початок і закінчення встановлення браузером TCP-з'єднання з віддаленим сервером для поточної сторінки. fetchStart Фіксує початок перевірки браузером кеша для запитаного ресурсу. requestStart Фіксує відправку браузером HTTP-запиту для запитаного ресурсу. responseStart / responseEnd Фіксує початок і закінчення отримання браузером відповіді сервера. domLoading / domComplete Фіксує початок і закінчення завантаження документа. domContentLoadedEventEnd / domContentLoadedEventStart Фіксує початок і закінчення завантаження DOMContentLoaded документа, що відповідає завантаженню браузером всього контенту і виконання всіх сценаріїв на сторінці. domInteractive Фіксує зміна властивості Document.readyState сторінки на значення interactive, яке запускає подія readystatechange. loadEventStart / loadEventEnd Фіксує початок і закінчення події завантаження.Щоб краще уявити собі властивості і їх черговість, подивіться на малюнок 2.
Малюнок 2. Візуалізація черговості властивостей PerformanceTiming
об'єкт PerformanceNavigation
На малюнку 3 показаний об'єкт Performance з розгорнутим об'єктом PerformanceNavigation.
Малюнок 3. Об'єкт PerformanceNavigation
Зверніть увагу, що об'єкт навігації має два атрибути тільки для читання: redirectCount і type. Атрибут redirectCount, повністю відповідний своїй назві, являє собою число HTTP-перенаправлень, виконуваних браузером для отримання поточної сторінки.
HTTP-перенаправлення істотно впливають на Web-продуктивності, оскільки для кожного перенаправлення виконується повний цикл запиту-відповіді HTTP. Вихідний запит повертається з Web-сервера у вигляді перенаправлення 301 або 302 з адресою нового місця розташування. Після цього браузер повинен ініціалізувати нове TCP-з'єднання і відправити новий запит для нового місця розташування. Цей додатковий крок збільшує затримку вихідного запиту ресурсів.
Властивість redirectCount показано в лістингу 1.
Лістинг 1. Звернення до властивості redirectCount
>>> performance.navigation.redirectCount 0Іншим атрибутом об'єкта навігації є type. Значення атрибута navigation.type відповідає одній з чотирьох констант:
- TYPE_NAVIGATE зі значенням 0 вказує, що перехід на поточну сторінку було здійснено шляхом натискання на посилання, відправки форми або введення URL-адреси безпосередньо в адресний рядок.
- TYPE_RELOAD зі значенням 1 вказує, що перехід на поточну сторінку було здійснено шляхом перезавантаження.
- TYPE_BACK_FORWARD зі значенням 2 вказує, що перехід на поточну сторінку було здійснено за допомогою історії браузера, кнопок back або forward або програмного використання об'єкта history браузера.
- TYPE_RESERVED зі значенням 255 є узагальненою ознакою будь-якого іншого типу навігації.
Зведемо все сказане воєдино
Щоб використовувати описані вище об'єкти для фіксації та візуалізації показників продуктивності на стороні клієнта, створіть бібліотеку JavaScript, яка збирає дані PerformanceTiming і посилає їх в оконечную точку для накопичення та аналізу. Спробуйте цю JavaScript-бібліотеки , Яка вирішує саме ці завдання.
Сценарій perfLogger.js використовує об'єкт Performance. Створіть простір імен з ім'ям Perflogger і оголосіть локальні змінні для зберігання значень, екстраполювати з властивостей PerformanceTiming.
Час можна обчислити за допомогою наступних прикладів і шаблонів:
- Щоб обчислити час очікування, відніміть даний час з timing.navigationStart.
- Щоб обчислити час усіх перенаправлень для переходу на сторінку, відніміть timing.redirectEnd з timing.redirectStart.
- Щоб обчислити час виконання DNS-запиту, відніміть timing.domainLookupEnd з timing.domainLookupStart; щоб обчислити час відображення сторінки, відніміть даний час з xs.
Після оголошення і ініціалізації локальних змінних зробіть їх видимими з простору імен для глобальних геттер-функцій (див. Лістинг 2).
Лістинг 2. Видимість локальних змінних для глобальних геттер-функцій
var perfLogger = function () {var serverLogURL = "/lib/savePerfData.php", loggerPool = [], _pTime = Date.now () - performance.timing .navigationStart || 0, _redirTime = performance.timing.redirectEnd - performance.timing.redirectStart || 0, _cacheTime = performance.timing.domainLookupStart - performance.timing.fetchStart || 0, _dnsTime = performance.timing.domainLookupEnd - performance.timing.domainLookupStart || 0, _tcpTime = performance.timing.connectEnd - performance.timing.connectStart || 0, _roundtripTime = performance.timing.responseEnd - performance.timing.connectStart || 0, _renderTime = Date.now () - performance.timing .domLoading || 0; // зробити видимими отримані дані про продуктивність perceivedTime: function () {return _pTime; }, RedirectTime: function () {_redirTime; }, CacheTime: function () {return _cacheTime; }, DnsLookupTime: function () {return _dnsTime; }, TcpConnectionTime: function () {return _tcpTime; }, RoundTripTime: function () {return _roundtripTime; }, PageRenderTime: function () {return _renderTime; },}З простору імен можна звертатися до властивостей (див. Лістинг 3).
Лістинг 3. Звернення до властивостей з простору імен
perfLogger.pageRenderTime perfLogger. roundTripTime perfLogger. tcpConnectionTime perfLogger. dnsLookupTime perfLogger. cacheTime perfLogger. redirectTime perfLogger. perceivedTimeУ межах простору імен функція logToServer записує показники назад в оконечную точку, визначену в змінної serverLogURL (див. Лістинг 4).
Лістинг 4. Функція logToServer
function logToServer (id) {var params = "data =" + JSON.stringify (jsonConcat (loggerPool [id], TestResults.prototype)); console.log (params) var xhr = new XMLHttpRequest (); xhr.open ( "POST", serverLogURL, true); xhr.setRequestHeader ( "Content-type", "application / x-www-form-urlencoded"); xhr.setRequestHeader ( "Content-length", params.length); xhr.setRequestHeader ( "Connection", "close"); xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {console.log ( 'log written'); }}; xhr.send (params); }Бібліотека perfLogger.js також дозволяє встановити контрольні точки, в яких можна протестувати спеціалізовані JavaScript-блоки, і навіть виконати набір тестів N раз для порівняння.
Повний вихідний код бібліотеки perfLogger.js приведений в лістингу 5.
Лістинг 5. Повний вихідний код бібліотеки perfLogger.js
var perfLogger = function () {var serverLogURL = "/lib/savePerfData.php", loggerPool = [], _pTime = Date.now () - performance.timing.navigationStart || 0, _redirTime = performance.timing.redirectEnd - performance.timing.redirectStart || 0, _cacheTime = performance.timing.domainLookupStart - performance.timing.fetchStart || 0, _dnsTime = performance.timing.domainLookupEnd - performance.timing.domainLookupStart || 0, _tcpTime = performance.timing.connectEnd - performance.timing.connectStart || 0, _roundtripTime = performance.timing.responseEnd - performance.timing.connectStart || 0, _renderTime = Date.now () - performance.timing.domLoading || 0; function TestResults () {}; TestResults.prototype.perceivedTime = _pTime; TestResults.prototype.redirectTime = _redirTime; TestResults.prototype.cacheTime = _cacheTime; TestResults.prototype.dnsLookupTime = _dnsTime; TestResults.prototype.tcpConnectionTime = _tcpTime; TestResults.prototype.roundTripTime = _roundtripTime; TestResults.prototype.pageRenderTime = _renderTime; function jsonConcat (object1, object2) {for (var key in object2) {object1 [key] = object2 [key]; } Return object1; } Function calculateResults (id) {loggerPool [id] .runtime = loggerPool [id] .stopTime - loggerPool [id] .startTime; } Function setResultsMetaData (id) {loggerPool [id] .url = window.location.href; loggerPool [id] .useragent = navigator.userAgent; } Function drawToDebugScreen (id) {var debug = document.getElementById ( "debug") var output = formatDebugInfo (id) if (! Debug) {var divTag = document.createElement ( "div"); divTag.id = "debug"; divTag.innerHTML = output document.body.appendChild (divTag); } Else {debug.innerHTML + = output}} function logToServer (id) {var params = "data =" + JSON.stringify (jsonConcat (loggerPool [id], TestResults.prototype)); console.log (params) var xhr = new XMLHttpRequest (); xhr.open ( "POST", serverLogURL, true); xhr.setRequestHeader ( "Content-type", "application / x-www-form-urlencoded"); xhr.setRequestHeader ( "Content-length", params.length); xhr.setRequestHeader ( "Connection", "close"); xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {//console.log(xhr.responseText); }}; xhr.send (params); } Function formatDebugInfo (id) {var debuginfo = "<p> <strong>" + loggerPool [id] .description + "</ strong> <br/>"; if (loggerPool [id] .avgRunTime) {debuginfo + = "average run time:" + loggerPool [id] .avgRunTime + "ms <br/>"; } Else {debuginfo + = "run time:" + loggerPool [id] .runtime + "ms <br/>"; } Debuginfo + = "path:" + loggerPool [id] .url + "<br/>"; debuginfo + = "useragent:" + loggerPool [id] .useragent + "<br/>"; debuginfo + = "Perceived Time:" + loggerPool [id] .perceivedTime + "<br/>"; debuginfo + = "Redirect Time:" + loggerPool [id] .redirectTime + "<br/>"; debuginfo + = "Cache Time:" + loggerPool [id] .cacheTime + "<br/>"; debuginfo + = "DNS Lookup Time:" + loggerPool [id] .dnsLookupTime + "<br/>"; debuginfo + = "tcp Connection Time:" + loggerPool [id] .tcpConnectionTime + "<br/>"; debuginfo + = "roundTripTime:" + loggerPool [id] .roundTripTime + "<br/>"; debuginfo + = "pageRenderTime:" + loggerPool [id] .pageRenderTime + "<br/>"; debuginfo + = "</ p>"; return debuginfo} return {startTimeLogging: function (id, descr, drawToPage, logToServer) {loggerPool [id] = new TestResults (); loggerPool [id] .id = id; loggerPool [id] .startTime = performance.now (); loggerPool [id] .description = descr; loggerPool [id] .drawtopage = drawToPage; loggerPool [id] .logtoserver = logToServer}, stopTimeLogging: function (id) {loggerPool [id] .stopTime = performance.now (); calculateResults (id); setResultsMetaData (id); if (loggerPool [id] .drawtopage) {drawToDebugScreen (id); } If (loggerPool [id] .logtoserver) {logToServer (id); }}, LogBenchmark: function (id, timestoIterate, func, debug, log) {var timeSum = 0; for (var x = 0; x <timestoIterate; x ++) {perfLogger.startTimeLogging (id, "benchmarking" + func, false, false); func (); perfLogger.stopTimeLogging (id) timeSum + = loggerPool [id] .runtime} loggerPool [id] .avgRunTime = timeSum / timestoIterate if (debug) {drawToDebugScreen (id)} if (log) {logToServer (id)}}, // зробити видимими отримані дані про продуктивність perceivedTime: function () {return _pTime; }, RedirectTime: function () {_redirTime; }, CacheTime: function () {return _cacheTime; }, DnsLookupTime: function () {return _dnsTime; }, TcpConnectionTime: function () {return _tcpTime; }, RoundTripTime: function () {return _roundtripTime; }, PageRenderTime: function () {return _renderTime; }, ShowPerformanceMetrics: function () {this.startTimeLogging ( "no_id", "draw perf data to page", true, true); this.stopTimeLogging ( "no_id"); }}} (); performance.now = (function () {return performance.now || performance.mozNow || performance.msNow || performance.oNow || performance.webkitNow || function () {return new Date (). getTime ();} ;}) ();Реалізація та візуалізація
Щоб використовувати сценарій perfLogger.js для візуалізації показників продуктивності в браузері, можна помістити його на сторінку та за подією onload відправляти дані про продуктивність назад в оконечную точку для збереження їх в неструктурованому файлі. Проект perfLogger на GitHub містить PHP-сценарій savePerfData.php, який реалізує цю функціональність. Вихідний код цього файлу наведено в лістингу 6.
Лістинг 6. Вихідний код savePerfData.php
<? Php require ( "util / fileio.php"); $ Logfile = "log / runtimeperf_results.txt"; $ BenchmarkResults = formatResults ($ _ POST [ "data"]); saveLog ($ benchmarkResults, $ logfile); function formatResults ($ r) {print_r ($ r); $ R = stripcslashes ($ r); $ R = json_decode ($ r); if (json_last_error ()> 0) {die ( "invalid json"); } Return ($ r); } Function formatNewLog ($ file) {$ headerline = "IP, TestID, StartTime, StopTime, RunTime, URL, UserAgent, PerceivedLoadTime, PageRenderTime, RoundTripTime, TCPConnectionTime, DNSLookupTime, CacheTime, RedirectTime"; appendToFile ($ headerline, $ file); } Function saveLog ($ obj, $ file) {if (! File_exists ($ file)) {formatNewLog ($ file); } $ Obj-> useragent = cleanCommas ($ obj-> useragent); $ NewLine = $ _SERVER [ "REMOTE_ADDR"]. ",". $ Obj-> id. ",". $ Obj-> startTime. ",". $ Obj-> stopTime. ",". $ Obj-> runtime. ",". $ Obj-> url. ",". $ Obj-> useragent. $ Obj-> perceivedTime. ",". $ Obj-> pageRenderTime. ",". $ Obj-> roundTripTime. ",". $ Obj-> tcpConnectionTime. ",". $ Obj-> dnsLookupTime. ",". $ Obj-> cacheTime. ",". $ Obj-> redirectTime; appendToFile ($ newLine, $ file); } Function cleanCommas ($ data) {return implode ( "", explode ( ",", $ data)); }?>Цей PHP-код істотно скорочує дані запиту POST, що відправляються сценарієм perfLogger.js в неструктурований файл, відформатований відповідно до лістингу 7.
Лістинг 7. Дані запиту POST, що відправляються сценарієм perfLogger.js
IP, TestID, StartTime, StopTime, RunTime, URL, UserAgent, PerceivedLoadTime, PageRenderTime, RoundTripTime, TCPConnectionTime, DNSLookupTime, CacheTime, RedirectTime 75.149.106.130, page_render, 1341243219599,1341243220218,619, http: //www.tom-barker.com /blog/?p=x,Mozilla/5.0 (Macintosh; Intel Mac OS X 10.5; rv: 13.0) Gecko / 20100101 Firefox / 13.0.1790,261, -2,36,0, -4,0У цих даних є кілька важливих речей, на які слід звернути увагу:
- Середній час завантаження браузером.
- Інформація про те, на яку частину процесу обробки http- транзакції, на яку в середньому витрачається найбільше часу.
- Розподіл загального часу завантаження.
У репозиторії GitHub є також R-сценарій runtimePerformance.R, який приймає згенерований log-файл і виконує візуалізацію його даних (див. Лістинг 8).
Лістинг 8. R-сценарій runtimePerformance.R
dataDirectory <- "/ Applications / MAMP / htdocs / lab / log /" chartDirectory <- "/ Applications / MAMP / htdocs / lab / charts /" testname = "page_render" perflogs <- read.table (paste (dataDirectory, "runtimeperf _results.csv ", sep =" "), header = TRUE, sep =", ") perfchart <- paste (chartDirectory," runtime _ ", testname,". pdf ", sep =" ") loadTimeDistrchart <- paste (chartDirectory , "loadtime_distribution.pdf", sep = "") requestBreakdown <- paste (chartDirectory, "avgtime_inrequest.pdf", sep = "") loadtime_bybrowser <- paste (chartDirectory, "loadtime_bybrowser.pdf", sep = "") pagerender < - perflogs [perflogs $ TestID == "page_render",] df <- data.frame (pagerender $ UserAgent, pagerender $ RunTime) df <- by (df $ pagerender.RunTime, df $ pagerender.UserAgent, mean) df <- df [order (df)] pdf (perfchart, width = 10, height = 10) opar <- par (no.readonly = TRUE) par (las = 1, mar = c (10,10,10,10)) barplot (df, horiz = TRUE) par (opar) dev.off () getDFByBrowser <-function (data, browsername) {return (data [grep (browsername, data $ UserAgent),])} printLoadTimebyB rowser <- function () {chrome <- getDFByBrowser (perflogs, "Chrome") firefox <- getDFByBrowser (perflogs, "Firefox") ie <- getDFByBrowser (perflogs, "MSIE") meanTimes <- data.frame (mean (chrome $ PerceivedLoadTime), mean (firefox $ PerceivedLoadTime), mean (ie $ PerceivedLoadTime)) colnames (meanTimes) <- c ( "Chrome", "Firefox", "Internet Explorer") pdf (loadtime_bybrowser, width = 10, height = 10 ) barplot (as.matrix (meanTimes), main = "Average Perceived Load Time \ nBy Browser", ylim = c (0, 600), ylab = "milliseconds") dev.off ()} pdf (loadTimeDistrchart, width = 10 , height = 10) hist (perflogs $ PerceivedLoadTime, main = "Distribution of Perceived Load Time", xlab = "Perceived Load Time in Milliseconds", col = c ( "# CCCCCC")) dev.off () avgTimeBreakdownInRequest <- function () {# розгорнути експоненціальне уявлення options (scipen = 100, digits = 3) # встановити будь-яке негативне значення в 0 perflogs $ PageRenderTime [perflogs $ PageRenderTime <0] <- 0 perf logs $ RoundTripTime [perflogs $ RoundTripTime <0] <- 0 perflogs $ TCPConnectionTime [perflogs $ TCPConnectionTime <0] <- 0 perflogs $ DNSLookupTime [perflogs $ DNSLookupTime <0] <- 0 # зафіксувати середній час avgTimes <- data.frame ( mean (perflogs $ PageRenderTime), mean (perflogs $ RoundTripTime), mean (perflogs $ TCPConnectionTime), mean (perflogs $ DNSLookupTime)) colnames (avgTimes) <- c ( "PageRenderTime", "RoundTripTime", "TCPConnectionTime", "DNSLookupTime ") pdf (requestBreakdown, width = 10, height = 10) opar <- par (no.readonly = TRUE) par (las = 1, mar = c (10,10,10,10)) barplot (as.matrix ( avgTimes), horiz = TRUE, main = "Average Time Spent \ nDuring HTTP Request", xlab = "Milliseconds") par (opar) dev.off ()} printLoadTimebyBrowser () avgTimeBreakdownInRequest ()Цей R-сценарій поставляється з декількома вбудованими функціями, такими як printLoadTimebyBrowser і avgTimeBreakdownInRequest. На малюнку 4 показаний знімок екрана з вихідними даними функції printLoadTimebyBrowser.
Малюнок 4. Вихідні дані функції printLoadTimebyBrowser
На малюнку 5 показаний знімок екрана з вихідними даними функції avgTimeBreakdownInRequest.
Малюнок 5. Вихідні дані функції avgTimeBreakdownInRequest
Після завантаження даних про продуктивність в сеанс R всі отримані показники зберігаються в таблиці даних Perflogs, і ви можете звертатися до окремих стовпців (див. Лістинг 9).
Лістинг 9. Отримані показники зберігаються в таблиці даних Perflogs
perflogs $ PerceivedLoadTime perflogs $ PageRenderTime perflogs $ RoundTripTime perflogs $ TCPConnectionTime perflogs $ DNSLookupTime perflogs $ UserAgentНаведений нижче код дозволяє почати аналіз даних, наприклад, створення гістограм розподілу часу завантаження для вашої користувальницької бази (див. Лістинг 10).
Лістинг 10. Час завантаження для користувача бази
hist (perflogs $ PerceivedLoadTime, main = "Distribution of Perceived Load Time", xlab = "Perceived Load Time in Milliseconds", col = c ( "# CCCCCC")) dev.off ()На малюнку 6 показана гістограма розподілу часу завантаження для вашої користувальницької бази.
Малюнок 6. Гістограма розподілу часу завантаження для користувача бази
висновок
Ця стаття допомагає краще зрозуміти деякі особливості об'єкта Performance і описує модель використання в браузері отриманих показників. Використовуючи розглянуту модель, можна зібрати реальні показники для вашої користувальницької бази, - найцінніший вид показників продуктивності.
При бажанні ви можете використовувати сценарій perfLogger.js і все його допоміжні файли. Пропонуйте ідеї і вносите зміни в цей проект.
Ресурси для скачування
Схожі теми
Підпишіть мене на повідомлення до коментарів
Obj-> redirectTime; appendToFile ($ newLine, $ file); } Function cleanCommas ($ data) {return implode ( "", explode ( ",", $ data)); }?Com /blog/?
Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.
