对单个页面HTML5应用程序使用Mustache或任何模板引擎

Question

I program using PhoneGap and learned that cross-platform apps really produces slow applications compared to native apps. I learned from http://floatlearning.com/2011/05/how-well-does-phonegap-scale/ that javascript templating will significantly increase the speed of my mobile app.

I develop single page apps. Magazine apps in particular. Contains an overflow:hidden container for pages and page transition is held by left and right swipes (CSS3 Translates). I would just like to ask how I can implement javascript templating (Mustache) to solve my performance problems with my magazine app.

Thank you and God Bless!

Answer 1

Here's a breakdown of performance when adding HTML to a page with Mustache vs a few other alternatives http://jsperf.com/adasdadsaddddddddddd

From your last comment though, your biggest performance boost could come from image optimization. You could use any of the developer tools mentioned to see how many HTTP requests you're making for images, the size of them, and where your bottlenecks are.

Use tools like Smush.it to compress your current images. Look to combine images to sprites where it makes sense. Explore CSS Data URIs .

After you've optimized your HTTP requests and images, then look to speed up rendering time of the DOM. You may find that you could use something like Mustache to dynamically render "magazine pages" on swipe so you only have to layout the initial view.

Answer 2

Analyze your app on page spped service and see Critical path report to check whats going on behind your website. you can also use console of chrome using performance.timing , it will show exact time loading statics of page.