Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Помогите с оптимизацией анализатора логов (https://javascript.ru/forum/misc/55321-pomogite-s-optimizaciejj-analizatora-logov.html)

jscripter 25.04.2015 11:35

switch001,
А жеквери убрать не пробовали?

js_js 25.04.2015 14:21

switch001,
<html>
<head>
<style>
span{display: block}
</style>

</head>
<body>

<button id="rgDate">date</button>
<button id="rgError">error</button>
<button id="rgWarning">warning</button>
<button id="rgNotice">notice</button>
<button id="rgDebug">debug</button>

<br>

<div id="wrapper">

<span class="rgDate">date</span>
<span class="rgError">error</span>
<span class="rgWarning">warning</span>
<span class="rgNotice">notice</span>
<span class="rgDebug">debug</span>
<span class="rgDate">date</span>
<span class="rgError">error</span>
<span class="rgWarning">warning</span>
<span class="rgNotice">notice</span>
<span class="rgDebug">debug</span>
<span class="rgDate">date</span>
<span class="rgError">error</span>
<span class="rgWarning">warning</span>
<span class="rgNotice">notice</span>
<span class="rgDebug">debug</span>

</div>



<script>

s=wrapper.innerHTML

fltr=function(){
 var re=new RegExp('<span class="'+this.id+'">[^>]+>', 'g')
 wrapper.innerHTML=s.match(re).join("")
}

;[].forEach.call(document.querySelectorAll("button"), function(b){b.onclick=fltr})


</script>
</body>
</html>

На файле 540кб на слабой машине, скорость менее секунды

switch001 25.04.2015 20:36

js-js: подход конечно интересный. И, сцуко, элегантный!!! Не сразу понял как работает. (да-да, я принадлежу "поколению Jquery")
Сейчас попробую на своих данных.

jscripter: вот и пытаюсь это сделать

switch001 25.04.2015 21:05

js-js: действительно работает быстро. В моем наборе данных отрабатывает за секунду, в то время как мой подход работает около трех секунд. Но есть минус: данные уничтожаются. Нужно стиль чтоли менять на невидимый.

fuckjava 25.04.2015 21:07

Цитата:

Сообщение от switch001
данные уничтожаются

С чего бы это?

switch001 25.04.2015 22:16

Цитата:

Сообщение от fuckjava (Сообщение 368261)
С чего бы это?

ну как бы из исходника это понятно. Кстати он не работал у меня, сделал так:
<button onclick="fltr('rgDialplan');">Dialplan</button>

<script type="text/javascript" charset="utf-8"> 


function fltr(fld)
{
	
	var s=document.getElementById('helper').innerHTML;
	var re=new RegExp('<span class="'+fld+'">[^>]+>', 'g');
	document.getElementById('helper').innerHTML=s.replace(re, "");
}

fuckjava 25.04.2015 22:27

Цитата:

Сообщение от switch001
var s=document.getElementById('helper').innerHTML;

Вынесите эту строку за ф-цию.

Странная у Вас "позиция". В переводе на русский: "у меня уничтожаются данные, потому что я их уничтожаю, как бы так сделать, чтобы я их перестал уничтожать?"

fuckjava 25.04.2015 22:29

Цитата:

Сообщение от switch001
Кстати он не работал у меня

Почему же тут работает?:) Чудеса, да и только.

switch001 26.04.2015 07:44

Цитата:

Сообщение от fuckjava (Сообщение 368275)
Почему же тут работает?:) Чудеса, да и только.

Вот такие чудеса. Это работает
document.getElementById('helper').innerHTML

а это не работает
helper.innerHTML


Цитата:

Сообщение от fuckjava (Сообщение 368274)
Странная у Вас "позиция".

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

Erolast 26.04.2015 11:04

Цитата:

Сделал так: сохраняю все строки в массив, перед выводом хелпер очищаю, потом прохожу регэкспами массив и выдаю в DOM уже готовый HTML. так работает в сто раз быстрее. На фильтрацию уходит примерно от одной до трех секунд пот 2500 строк. Но хочется еще больше скорости
Храни массив объектов вида {label, text}, где label - одно из debug/verbose/error/чотамеще, а text - уже распаршенный в html текст, при изменении условий фильтруй по метке и вставляй через innerHTML.
var logItems = [{
    label: "debug",
    text: "<span>10:05:00</span><span>some debug message</span>"
}, {
    label: "error",
    text: "<span>10:05:00</span><span>some error message</span>"
}]
//..

document.getElementById("wrapper").innerHTML = logItems.filter(function(item) {
    return checkedLabels.indexOf(item.label) != -1;
}.map(function(item) {
    return "<div class='log-item'>" + item + "</div>";
}).join();


А вообще, такие вещи делаются не вручную, а с помощью движков биндинга вроде реакта.


Часовой пояс GMT +3, время: 06:45.