如何轻松提高这个混合应用程序的性能？ [英] how to improve the performance of this hybrid app with little effort?
问题描述
我拥有的：一个在webview中运行Web用户界面的Android应用程序。视图构建如下：每个屏幕都有一个html文件（screen1.html，...，screen8.html）。每个文件还包含该屏幕所需的一些JavaScript。并且有一个包含样式的css文件。通过更改网页浏览的网址来调用视图。
我想要的是：用很少的努力提高应用程序的性能（我没有太多时间）。有什么想法吗？
这是8个html文件之一的代码示例。其他文件类似：
- 有某种导航的标题（四张图片中的一张突出显示，具体取决于页面）。
- 有一些图片和按钮的内容
- 一些javascript库包括
- 这个页面需要的一些自定义javascript函数
对于某些具体问题，请参见下文。
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.
<!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?
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?
推荐答案
(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) {
(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');
这篇关于如何轻松提高这个混合应用程序的性能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
