Жизнь замечательных грибов
Здесь собраны статьи, наработки, исправление ошибок и решение проблем связанных с разработкой для WEB
В принципе алгоритм следующий и простой: при нажатии некой кнопки например, мы создаем ссылку с атрибутом download и программно её нажимаем. Код, что-то вроде:
|
1 2 3 4 |
var link = document.createElement('a'); link.setAttribute('href', 'https://цувцу.ru/u/'+POPUP_CODE_SMS.value); link.setAttribute('download', 'uvцувцувed.pdf'); link.click(); |
В жизни каждого программиста мужика начинается период, когда размер и количество js файлов в проекте начинает невероятно множиться. И если для разработки это не особо мешает, а даже наоборот помогает структурировать информацию, для для продакшена это зло. Когда браузер пытается выкачать при загрузке страницы 50+ файлов css и js, случается так, что ему становится плоховато. Да и скорость рендеринга падает значительно. Есть решение: grunt. Пакет для npm который позволяет отслеживать изменения файлов в некоторых папках, а при изменении формировать один (несколько) выходных сжатых файлов.
Установка:
|
1 2 3 |
npm install -g grunt-cli grunt-contrib-uglifyjs grunt-contrib-watch --save-dev |
Для настройки необходимо создать файл Gruntfile.js. У меня вышло примерно такое содержимое:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
module.exports = function(grunt) { grunt.initConfig({ // 1. эти файлы сжимаем uglify: { my_target: { files: { 'public/js/ууууу.min.js': ['assets/js/ууууу/*.js'], 'public/js/main.min.js': ['assets/js/main.js'] } } }, // 2. задача по отслеживанию изменений watch: { source: { files: ['sass/**/*.scss', 'views/**/*.jade','**/*.js'], tasks: ['uglify'], //сжимаем options: { livereload: true } } } }); // 3. Сообщаем, какие плагины мы собираемся использовать grunt.loadNpmTasks('grunt-contrib-uglify'); //сжатие // 4. Определяем задачу по умолчанию, которая будет выполняться при запуске команды grunt в терминале. grunt.registerTask('default', ['uglify']); grunt.loadNpmTasks('grunt-contrib-watch'); //задача отслеживания изменений }; |
Теперь если в консоли введёте:
|
1 2 |
grunt watch |
То запустится и будет висеть задача отслеживания изменений и минимификации файлов.
Обычно для этой цели используют конструкцию Map, однако лично мне не нравится его синтаксис, когда для доступа необходимо использовать get /set. Поэтому я обычно использую создание объекта. Т.е. получается что-то вроде:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// набор записей TBokings=new Object(); TBokings={ x:0, x1:0, starttime:"12:00", endtime:"13:00", status:"busy" }; // сам массив ArrBooking=new Array(); ///добавление в массив TBokings.x=startRectX; TBokings.x1=EndRectX; TBokings.starttime=item.DtFrom_UTC; TBokings.endtime=item.DtTo_UTC; TBokings.status="busy"; ArrBooking.push(Object.assign({}, TBokings)); // перебор массива ArrBooking.forEach(function(item){ console.log(item); }); |
Чтобы получилось нечто подобное:
HTML:
|
1 2 3 4 |
<div class="tile2"> <div class="icons_left"><img height="32px" src="/images/list.png"></div> <div class="icons_right" ><img height="32px" src="/images/heart.png"></div> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.tile2{ grid-template-columns: 50% 50%; display: flex; height: 100%; } .tile2>.icons_left { color: #003264; font-weight: bold; font-size: xx-large; text-align: end; margin: auto; cursor: pointer; } .tile2>.icons_right { color: #003264; font-weight: bold; font-size: xx-large; text-align: left; margin: auto; cursor: pointer; } |
Задача: провести нагрузочное тестирование сайта. Выяснить сколько пользователей в минуту, он может обслужить.
Дополнительно: тестирование сервера WEBSocket, так-же используемого на том-же сервере, где и расположен сайт.
Решение: используем инструмент Jmeter от фонда Apache.
1) Скачиваем, распаковываем, запускаем из папки bin или файл jmeter.bat (Windows) или jmeter.sh (Linux)
2) На сайте плагинов скачиваем плагины Plugins Manager и JMeterWebSocketSamplers. Ложим их в папку lib\ext, Jmeter перезапускаем. При помощи Plugins Manage, в дальнейшем (если захотите) сможете устанавливать дополнительные плагины.
3) Правой клавишей щелкаем по TestPlan, и создаем поток тестирования.
Далее в настройках выставляем количество потоков, время тестирования и количество циклов
4) Добавляем авторизацию на сайте (ну или просто открытие страницы — тогда POST запрос не заполняем)
К этому же узлу добавим и отчетность:
5) По тому-же принципу последовательно добавляем задачи WebSocketOpen,WebSocketSingleWrite и WebSocketClose. Т.е. после авторизации пользователя мы откроем соединение, пошлем что-то на сервер и закроем соединение.
Далее играем циферками количества поток, чтобы выяснить на скольких потоках сайт упадет отдохнуть..