Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
What I have: An android application with a web user interface running in a webview. The view is build like this: For each screen there is a html file (screen1.html, ..., screen8.html). Each file also contains some javascript needed for that screen. And there is a css file containing styles. Views are called by changing the url of the webview.

What I want: Improve the performance of the app with little effort (I do not have much time left). Any ideas?

Here is a code example of one of the 8 html files. The other files are similar:

- There is header with some kind of navigation (one of the four pictures is highlighted, depending on the page).
- There is some content with some images and buttons
- A couple of javascript libraries includes
- A couple of custom javascript functions necessary for this page

For some specific questions see below.

HTML
<!DOCTYPE html>

<html>

<head>
    <title>Vorher-Nachher</title>
    <meta charset="UTF-8" />
    <meta name="description" content="vorher-nachher-app" />
    <link href="jquery-ui.css" type="text/css" rel="stylesheet" />
    <link href="styles.css" type="text/css" rel="stylesheet" />
</head>

<body>
<header>
    <div id="headldiv"><div id="headl"><h1>Zuschnitt</h1></div></div>
    <div id="steps">
            <div id="line"></div>
            <div id="circle1"><img src="yellow_circle_1a.png" /></div>
            <div id="circle2"><img class="circle_big" src="yellow_circle_2a.png" /></div>
            <div id="circle3"><img src="yellow_circle_3a.png" /></div>
            <div id="circle4"><img src="yellow_circle_4a.png" /></div>
    </div>
</header>

<content class="wofooter">
    <div id="s2a_col_left">
        <div id="s2a_img_full_container">
            <img id="s2a_img" class="s2a_img_full" src="file:///storage/sdcard0/test-dir/before_thumb_75.png" />
            <div id="s2a_shape_img"class="ui-widget-content">
                <img id="s2a_img2" class="s2a_img_shape" src="file:///storage/sdcard0/test-dir/after_thumb_75.png" />
                <div id="s2a_shape_img_handle" class="ui-resizable-handle ui-resizable-se">
                </div>
                <div id="s2a_shape_img_text_container" class="label">
                    <div id="s2a_shape_img_text">
                        <p class="label">
                            Nachher-Bild
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="s2a_col_right">
        <div id="s2a_description">
            <div id="s2a_text1_container">
                <div id="s2a_text1" class="equalize_desc_text_size">
                    <p class="label">
                        Das Seitenverhältnis des Vorher-Bildes stimmt nicht mit dem des Nachher-Bildes überein.
                    </p>
                    <p class="label newpar2">Um das Vorher-Bild zuzuschneiden, ziehen Sie das Nachher-Bild an die entsprechende Stelle. Ziehen Sie die schwarze Box um die Größe zu ändern.</p>
                </div>
            </div>

            <div id="s2a_btndiv1" class="btndiv" >
                <div id="s2a_btn1" class="equalize_btn_size">
                    <p class="btnlabel">Anderes Vorher-Bild</p>
                </div>
            </div>
            <div id="s2a_btndiv2" class="btndiv" >
                <div id="s2a_btn2" class="equalize_btn_size">
                    <p class="btnlabel">Anderes Nachher-Bild</p>
                </div>
            </div>
            <div id="s2a_btndiv3" class="btndiv" >
                <div id="s2a_btn3">
                    <p class="btnlabel">Gut so, weiter</p>
                </div>
            </div>
        </div>
    </div>


</content>

<script src="textfit.js"></script>
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery-ui.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script src="jquery.panzoom.min.js"></script>

<script src="general.js"></script>
<script type="text/javascript">
    $(function() {
        textFit(document.getElementById('s2a_text1'), {alignHoriz: false, alignVert: true, multiLine: true});
        textFit(document.getElementById('s2a_shape_img_text'), {alignHoriz: false, alignVert: true, multiLine: true});

        textFit(document.getElementById('s2a_btn1'), {alignHoriz: true, alignVert: true, minFontSize: 6});
        textFit(document.getElementById('s2a_btn2'), {alignHoriz: true, alignVert: true, multiLine: true, minFontSize: 6});
        textFit(document.getElementById('s2a_btn3'), {alignHoriz: true, alignVert: true, minFontSize: 6});

        equalizeTextSize('equalize_btn_size');

        var queryStr = self.location.search;
        var arr = queryStr.split(';');
        window.initImgShape(arr[0], arr[1], arr[2], arr[3]);
    });

    // c_w and c_h: width of camera shape in % of picture width and height
    function initImgShape(s_t, s_l, s_w, s_h) {
        $i = $('#s2a_img');
        $s = $('#s2a_shape_img');

        // calculate start position of shape
        $s.offset({
            top: $i.offset().top + s_t/100 * $i.height(), 
            left: $i.offset().left + s_l/100 * $i.width()
        });

        // set width and height of shape
        $s.width($i.width() * s_w / 100);
        $s.height($i.height() * s_h / 100);

        $('#s2a_shape_img').resizable({
        containment:"#s2a_img",
        aspectRatio: true,
        handles: {'se': '#s2a_shape_img_handle'}
        });

        $('#s2a_shape_img').draggable({containment:"#s2a_img"});
    }

    function prepareAndCall_s2a_btn3() {
        $i = $('#s2a_img');
        $s = $('#s2a_shape_img');

        var t = ($s.offset().top - $i.offset().top) / $i.height() * 100;
        var l = ($s.offset().left - $i.offset().left) / $i.width() * 100;
        var w = $s.width() / $i.width() * 100;
        var h = $s.height() / $i.height() * 100;

        JavaControl.s2a_btn3(t, l, w, h

);  
    }

</script>

</body>
</html>



Specific Questions: How much do you think would it really increase performance devided by the time effort needed ...

- if I turned this into a single page application using a template engine? (handlebars, backbone etc. - consider that I do not know any of these frameworks very well yet)
- if I would replace all click events by touch events (click event highlight buttons when they are clicked, touch events not, I had to implement this myself, but ok)
- if I would split my global styles.css into different files for the different pages
- if I would use require.js to load only necessary modules
- if I would try to flatten the structure of the dom (I need lots of nesting for textfit.js though)
- if I would eliminate the use of jquery

Do you know a way to make text fit into div boxes without using javascript like textfit.js and without using vw, vh (my android webview does not support this)?

What are the most important improvements in your optinion considering performance? Do you see any other important improvements which not listed above?
Posted

1 solution

Before doing anything, measure your apps performance first, then compare that to your users expectations.

Optimizing performance depends on many factors from hardware to environment which cannot be determined without measuring first.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900