QtWebView (QtWebKit) Javascript dom and array operations VERY SLOW issue

**vakhobiz** · 14th September 2012, 15:22

Right now I am having a problem regarding JavaScript text rendering in QtWebView in Windows Application. The below provided script does the following thing: It counts the free space available, than it counts how many words could be put on the screen and when the certain place is not enough it takes the rest of the text to the next page. When the text is already drawn on the screen first JavaScript clears it and after that runs the above mentioned operations.

And when I'm going from one page to the another it needs about 2-4 seconds to load the text, while the web version of the application runs those operations far faster. e.g. Chrome or Firefox need 0.5 sec max . . .

Could you please tell if you had the problems with JavaScript time issues in QtWebKit and how did you solve them. Do you know if there is any way to optimize Qt configuration to make these JavaScript operations faster? And finally is there any other way to solve this problem?

Thank you in advance!

P.S. Script is long but for interested parties I'll post it anyway . . .

Qt Code:

Switch view

<!-- language: lang-js -->
//var reader = window.parent;
var trace = function(msg){reader.printConsole("JavaScriptLog: " + msg);};
var page = 2;
var line_height = 20;
var page_width = 0;
var page_height = 0;
var TIME;
var SECTIONS = [];
var SelectionStartLeft = true;
var SelectionEndLeft = true;
var spanId;
 
var P1, P2;
var S1, S2;
var _Spans1 = [];
var _Spans2 = [];
var _FromId = null;
var _ToId = null;
var _LastSpan = null;
var _Interval;
var _Chapter;
var _PageInfo = {
    StartId: null,
    EndId: null
};
var _BOOKENDID = 0;
var DivIds = [];
function SetBookEndId(id){
    _BOOKENDID = parseInt(id);
}
function Loading(bool) {
    bool ? $('div#Loader').css('display', 'block') : $('div#Loader').css('display', 'none');
};
 
 
function GetPageInfo_StartId() {
    return _PageInfo.StartId;
}
function GetPageInfo_EndId() {
    return _PageInfo.EndId;
}
 
function GetPage1FirstWordId() {
    var first = P1.find('span:first');
    return first.length == 0 ? 0 : parseInt(first.attr('id'));
};
function GetPage2FirstWordId() {
    var first = P2.find('span:first');
    return first.length == 0 ? 0 : parseInt(first.attr('id'));
};
 
 
function _InitSpans() {
    _ClearAllDiv();
    _Spans1 = [];
    _Spans2 = [];
    DivIds = [];
 
 
    var selectP1Spans = P1.find('span');
    var selectP2Spans = P2.find('span');
 
    $.each(selectP1Spans, function () {
        _Spans1.push(
            $(this).on('mousedown', _SpanMouseDown).on('mouseenter', _SpanMouseEnter)
        );
 
    });
 
    $.each(selectP2Spans, function () {
        _Spans2.push(
            $(this).on('mousedown', _SpanMouseDown).on('mouseenter', _SpanMouseEnter)
        );
 
    });
 
 
    try { 
        reader.SetPlace(parseInt(selectP1Spans.first()[0].id));
    } catch (err) {
        reader.SetPlace(parseInt(selectP2Spans.first()[0].id));
    }
 
    Loading(false);
 
};
 
function ShowHtmlElement(ElementId) {
    if (!$.isNumeric(ElementId))
        return true;
    for (var i = 0; i < DivIds.length; i++) {
        if (ElementId == DivIds[i])
            return false;
    }
    return true;
};
var _InsertMarkers_LIST = [];
 
 
 
 
function SetChapter(chapterId,startId,endId){
    _Chapter = {
        Id : chapterId,
        StartId : startId,
        EndId:endId,
        Sections : []
    };
}
function SetSection(sectionId,startId,endId) {
    _Chapter.Sections.push({
        Id : sectionId,
        StartId:startId,
        EndId:endId
    });
}
function LoadChapter(wordId,StartFromEnd) {
 
    P1.html('');
    P2.html('');
 
    if (StartFromEnd) {
        _AddHtmlSectionReverse(_Chapter.EndId, true, true);
    } else {
        if (wordId == 0) {
            _AddHtmlSection(_Chapter.Sections[0].Id, 0, true, true);
        } else {
            _GoToWord(wordId);
        }
    }
    Loading(false);
};
 
function _CanLoadSection(sectionId) {
    return true;
};
 
function _CanGoToWord(spanId) {
    spanId = parseInt(spanId);
    if (1 <= spanId && spanId <= _BOOKENDID)
        return true;
    return false;
};
 
function _GoToWord(spanId) {
    P1.html('');
    P2.html('');
    S1.html('');
    S2.html('');
 
    return _AddHtmlSection(0, spanId, true, true);
};
// =======================================================================================================================
function _AddHtmlSection(sectionId, startId, AddHtmlToFirstPage, addingFirst) {
 
    if (addingFirst) {
        P1.html('');
    }
 
    var html;
    var ENDID = null;
    var LASTID = null;
    var addingEndOnFirstPage = true;
    var spansToRemove = [];
 
 
    if (sectionId == 0) {
        var str = reader.GetSectionInfoFromSpanId(startId).split(':');
        var info = {
            ChapterId : str[0],
            SectionId : str[1]
        };
        if (info.SectionId != null && _CanLoadSection(info.SectionId))
            sectionId = info.SectionId;
    }
 
    if (sectionId == 0 /*|| !_CanLoadSection(sectionId)*/) {
        _InitSpans();
        return addingFirst ? false : true;
    }
 
    html = reader.GetSection(sectionId.toString());
 
    if (AddHtmlToFirstPage) {
        // adding for page 1
        P1.append(html);
 
        var children = P1.children();
        var spansToAppend = [];
        var StartAppending = false;
        for (var i = 0; i < children.length; i++) {
            $this = $(children[i]);
 
            if ($this[0].tagName == "DIV" && ShowHtmlElement($this[0].id)) {
                continue;
            }
 
            if (addingFirst && ($this[0].tagName == "BR" || $this[0].tagName == "DIV") && LASTID < startId) {
                $this.remove();
                continue;
            }
            LASTID = parseInt($this[0].id);
 
            if (addingFirst && LASTID < startId) {
                $this.remove();
                continue;
            }
 
            if (StartAppending || $this[0].offsetTop + $this[0].offsetHeight > page_height) {
                P2.append($this).append(' ');
                StartAppending = true;
                if (ENDID == null && $this[0].offsetTop + $this[0].offsetHeight > page_height) {
                    ENDID = LASTID - 1;
                    spansToRemove.push($this);
                } else {
                    if (ENDID != null)
                        spansToRemove.push($this);
                }
 
                addingEndOnFirstPage = false;
            }
        }
    } else {
        // adding for P2
        P2.append(html);
        var children = P2.children();
 
        addingEndOnFirstPage = false;
        for (var i = 0; i < children.length; i++) {
            $this = $(children[i]);
 
            LASTID = parseInt($this[0].id);
 
            if ($this[0].offsetTop + $this[0].offsetHeight > page_height) {
 
                if (ENDID == null) {
                    ENDID = LASTID - 1;
                    spansToRemove.push($this);
                } else {
                    spansToRemove.push($this);
                }
            }
        }
    }
 
    for (var i = 0; i < spansToRemove.length; i++) {
        spansToRemove[i].remove();
    }
 
 
    if (!$.isNumeric(LASTID))
        LASTID = addingEndOnFirstPage ? parseInt(P1.find('span:last')[0].id) : parseInt(P2.find('span:last')[0].id);
 
    _PageInfo = {
        StartId: parseInt($('#P1 span:first')[0].id),
        EndId: ENDID == null ? LASTID : ENDID
    };
 
    if (LASTID != ENDID && ENDID == null)
        return _AddHtmlSection(0, LASTID + 1, addingEndOnFirstPage, false);
    _InitSpans();
    return true;
};
 
 
 
function NextPage() {
    TIME = new Date().getTime();
    P1.html('');
    P2.html('');
    $('div#popWrapper').remove();
    var NPage = _AddHtmlSection(0, _PageInfo.EndId + 1, true, true);
 
    return NPage === false ? false : true;
};
 
$(function () {
    var str = reader.GetBookSizes().split(':');
 
    $('#Book2').width(parseInt(str[0])*2+100);
    $('#page1, #page2').width(parseInt(str[0])).height(parseInt(str[1]));
    $('body').removeClass('fc1').removeClass('fc2').removeClass('fc3').addClass('fc'+str[2]);
    page_width = $('div#page1').width();
    page_height = $('div#page1').height();
    line_height = parseInt($(document.body).css('line-height').replace('px',''));
 
    P1 = $('div#P1');
    P2 = $('div#P2');
 
    S1 = $('div#S1');
    S2 = $('div#S2');
 
    reader.InitBook();
});

<!-- language: lang-js -->
//var reader = window.parent;
var trace = function(msg){reader.printConsole("JavaScriptLog: " + msg);};
var page = 2;
var line_height = 20;
var page_width = 0;
var page_height = 0;
var TIME;
var SECTIONS = [];
var SelectionStartLeft = true;
var SelectionEndLeft = true;
var spanId;

var P1, P2;
var S1, S2;
var _Spans1 = [];
var _Spans2 = [];
var _FromId = null;
var _ToId = null;
var _LastSpan = null;
var _Interval;
var _Chapter;
var _PageInfo = {
    StartId: null,
    EndId: null
};
var _BOOKENDID = 0;
var DivIds = [];
function SetBookEndId(id){
    _BOOKENDID = parseInt(id);
}
function Loading(bool) {
    bool ? $('div#Loader').css('display', 'block') : $('div#Loader').css('display', 'none');
};


function GetPageInfo_StartId() {
    return _PageInfo.StartId;
}
function GetPageInfo_EndId() {
    return _PageInfo.EndId;
}

function GetPage1FirstWordId() {
    var first = P1.find('span:first');
    return first.length == 0 ? 0 : parseInt(first.attr('id'));
};
function GetPage2FirstWordId() {
    var first = P2.find('span:first');
    return first.length == 0 ? 0 : parseInt(first.attr('id'));
};


function _InitSpans() {
    _ClearAllDiv();
    _Spans1 = [];
    _Spans2 = [];
    DivIds = [];


    var selectP1Spans = P1.find('span');
    var selectP2Spans = P2.find('span');

    $.each(selectP1Spans, function () {
        _Spans1.push(
            $(this).on('mousedown', _SpanMouseDown).on('mouseenter', _SpanMouseEnter)
        );

    });

    $.each(selectP2Spans, function () {
        _Spans2.push(
            $(this).on('mousedown', _SpanMouseDown).on('mouseenter', _SpanMouseEnter)
        );

    });


    try { 
        reader.SetPlace(parseInt(selectP1Spans.first()[0].id));
    } catch (err) {
        reader.SetPlace(parseInt(selectP2Spans.first()[0].id));
    }

    Loading(false);

};

function ShowHtmlElement(ElementId) {
    if (!$.isNumeric(ElementId))
        return true;
    for (var i = 0; i < DivIds.length; i++) {
        if (ElementId == DivIds[i])
            return false;
    }
    return true;
};
var _InsertMarkers_LIST = [];




function SetChapter(chapterId,startId,endId){
    _Chapter = {
        Id : chapterId,
        StartId : startId,
        EndId:endId,
        Sections : []
    };
}
function SetSection(sectionId,startId,endId) {
    _Chapter.Sections.push({
        Id : sectionId,
        StartId:startId,
        EndId:endId
    });
}
function LoadChapter(wordId,StartFromEnd) {

    P1.html('');
    P2.html('');

    if (StartFromEnd) {
        _AddHtmlSectionReverse(_Chapter.EndId, true, true);
    } else {
        if (wordId == 0) {
            _AddHtmlSection(_Chapter.Sections[0].Id, 0, true, true);
        } else {
            _GoToWord(wordId);
        }
    }
    Loading(false);
};

function _CanLoadSection(sectionId) {
    return true;
};

function _CanGoToWord(spanId) {
    spanId = parseInt(spanId);
    if (1 <= spanId && spanId <= _BOOKENDID)
        return true;
    return false;
};

function _GoToWord(spanId) {
    P1.html('');
    P2.html('');
    S1.html('');
    S2.html('');

    return _AddHtmlSection(0, spanId, true, true);
};
// =======================================================================================================================
function _AddHtmlSection(sectionId, startId, AddHtmlToFirstPage, addingFirst) {

    if (addingFirst) {
        P1.html('');
    }

    var html;
    var ENDID = null;
    var LASTID = null;
    var addingEndOnFirstPage = true;
    var spansToRemove = [];


    if (sectionId == 0) {
        var str = reader.GetSectionInfoFromSpanId(startId).split(':');
        var info = {
            ChapterId : str[0],
            SectionId : str[1]
        };
        if (info.SectionId != null && _CanLoadSection(info.SectionId))
            sectionId = info.SectionId;
    }

    if (sectionId == 0 /*|| !_CanLoadSection(sectionId)*/) {
        _InitSpans();
        return addingFirst ? false : true;
    }

    html = reader.GetSection(sectionId.toString());

    if (AddHtmlToFirstPage) {
        // adding for page 1
        P1.append(html);

        var children = P1.children();
        var spansToAppend = [];
        var StartAppending = false;
        for (var i = 0; i < children.length; i++) {
            $this = $(children[i]);

            if ($this[0].tagName == "DIV" && ShowHtmlElement($this[0].id)) {
                continue;
            }

            if (addingFirst && ($this[0].tagName == "BR" || $this[0].tagName == "DIV") && LASTID < startId) {
                $this.remove();
                continue;
            }
            LASTID = parseInt($this[0].id);

            if (addingFirst && LASTID < startId) {
                $this.remove();
                continue;
            }

            if (StartAppending || $this[0].offsetTop + $this[0].offsetHeight > page_height) {
                P2.append($this).append(' ');
                StartAppending = true;
                if (ENDID == null && $this[0].offsetTop + $this[0].offsetHeight > page_height) {
                    ENDID = LASTID - 1;
                    spansToRemove.push($this);
                } else {
                    if (ENDID != null)
                        spansToRemove.push($this);
                }

                addingEndOnFirstPage = false;
            }
        }
    } else {
        // adding for P2
        P2.append(html);
        var children = P2.children();

        addingEndOnFirstPage = false;
        for (var i = 0; i < children.length; i++) {
            $this = $(children[i]);

            LASTID = parseInt($this[0].id);

            if ($this[0].offsetTop + $this[0].offsetHeight > page_height) {

                if (ENDID == null) {
                    ENDID = LASTID - 1;
                    spansToRemove.push($this);
                } else {
                    spansToRemove.push($this);
                }
            }
        }
    }

    for (var i = 0; i < spansToRemove.length; i++) {
        spansToRemove[i].remove();
    }


    if (!$.isNumeric(LASTID))
        LASTID = addingEndOnFirstPage ? parseInt(P1.find('span:last')[0].id) : parseInt(P2.find('span:last')[0].id);

    _PageInfo = {
        StartId: parseInt($('#P1 span:first')[0].id),
        EndId: ENDID == null ? LASTID : ENDID
    };

    if (LASTID != ENDID && ENDID == null)
        return _AddHtmlSection(0, LASTID + 1, addingEndOnFirstPage, false);
    _InitSpans();
    return true;
};



function NextPage() {
    TIME = new Date().getTime();
    P1.html('');
    P2.html('');
    $('div#popWrapper').remove();
    var NPage = _AddHtmlSection(0, _PageInfo.EndId + 1, true, true);

    return NPage === false ? false : true;
};

$(function () {
    var str = reader.GetBookSizes().split(':');

    $('#Book2').width(parseInt(str[0])*2+100);
    $('#page1, #page2').width(parseInt(str[0])).height(parseInt(str[1]));
    $('body').removeClass('fc1').removeClass('fc2').removeClass('fc3').addClass('fc'+str[2]);
    page_width = $('div#page1').width();
    page_height = $('div#page1').height();
    line_height = parseInt($(document.body).css('line-height').replace('px',''));

    P1 = $('div#P1');
    P2 = $('div#P2');

    S1 = $('div#S1');
    S2 = $('div#S2');

    reader.InitBook();
});

To copy to clipboard, switch view to plain text mode