问题
I want to make my site mobile friendly. I understand how responsive design can use CSS to help with this, but I find there is another problem. JQuery, Bootstrap, jQuery UI, and jqGrid are being used in my site and work fine for desktop, however they are very slow when viewing the site from a mobile device (even a fast mobile device).
According to Google Developers, the preferred method to make a site mobile friendly is to keep it on one URL and use media queries (responsive design). However this does not solve my problem with the javascript content. Do I need to create a separate URL (with an "m" in front such as m.website.com) and then build another version of each page on my site using something like jQuery Mobile? So far my tests show that jQuery Mobile seems to work adequately fast on my smartphone.
Another option I considered was to rebuild the site to where all pages are built in jQuery Mobile, but I don't think that is the correct solution (Building Desktop apps by JQuery Mobile).
So is splitting my site up and using jQuery Mobile when serving mobile browsers the correct approach in regards to fixing javascript speed problems?
UPDATE:
The solution for me was to drop jquery-UI and jqgrid. Those were the main culprits to slowdowns. Instead of jquery-UI, I just use individual jquery plugins or write my own as needed. As for jqgrid, I found a good bootstrap grid with basic features and I just add on what I need beyond that. I'm still using jquery and bootstrap, but things are now fast on mobile! I'm not creating a separate mobile site, but I just keep mobile in mind for each page/feature. Overall, I've been harnessing the power of bootstrap and media queries to give each page a nice feel on mobile as well as desktop. So far so good!
回答1:
First thing you need to understand is, 99,9% of available mobile frameworks are slow. This is due to:
- Smartphones are still to slow, if you take a look at any desktop/mobile JavaScript benchmark you will see that desktop browsers always overpower mobile browsers bye far.
- Mobile frameworks are usually slow
With this said we can go further, let me tell you few secrets of good jQuery Mobile app architecture.
First secret of a good jQuery Mobile architecture is the knowledge of how jQuery Mobile actually works. There are 2 possible ways how jQuery Mobile page skeleton can be created. As usual the truth lies somewhere in the middle. Both templates have good and bad sides and we can play around them, specially if we know their bad sides and how they affect overall application functionality.
Multipage template
First and classic one is a multi-page template where one HTML holds all available pages. This is also a first template shown to new jQuery Mobile developers. It is also an easiest template to implement, of two available.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
As you can see one HTML holds all available pages. While this may sound silly to a normal web developer it is quite an excellent solution. This kind of template solution don’t suffer from page transition problems like template solution using several HTML pages (we will discuss it soon). Because jQuery Mobile uses ajax for page loading delays should be expected, same delays that could cause problems with page transitions. As everything is already loaded into the DOM multipage template will no suffer this kind of problems.
On the other hand this solution also hold one severe problem. Mobile web application can take a sizable part of the DOM and while this is not a problem for desktop browsers it can cause problems on mobile devices and its accompanying browsers. Also don’t forget that we are talking about the framework made for a mobile web applications.
Several pages may not feel that much but think what would happen if web application has complex page structures (and I have seen jQuery Mobile pages holding several hundred form elements). What you see as a page HTML is not final HTML. As jQuery Mobile loads pages it enhances them with its own CSS.
Final HTML structure can be 2-8 times larger then initial HTML and everything is done dynamically. This leads us to this templates second problem. More content means more processing power is used/need to enhance page content and jQuery Mobile is one large hungry beast.
Multi HTML template
Second template solution is also called multi HTML template. Unlike multipage template this one uses several HTML pages for application skeleton. This solution should feel much closer to experienced web developers and it can be easily used with server side page generation.
This solution has a big advantage over multipage template. Only initial HTML is loaded into the DOM which makes it a memory friendly approach. Pages are loaded into the DOM only when directly accessed (or loaded through a cashing system) and unloaded as soon as page is not active any more. From practical side this is excellent, pages are easily accessible, not to mention shorter.
This may look like a best solution for a mobile web application but there’s one big problem. Page transitions can become problematic because every HTML file needs to be loaded first before transition can occur. This is more prominent when working with mobile devices, specially when using Android 2.X platform. Second problem comes from page unloading. Because pages are loaded/unloaded each time they are used pageinit event will trigger every single time page is active.
Best application creation approach
This part will talk only about pure vanilla jQuery Mobile approach.
Before creating an app think about it, what do you expect it to work and what would be the page flow. To create best behaving application we need to combine both templates.
- Frequently used pages MUST be part of a first HTML file, this will prevent most transition problems
- Everything else should be moved to other HTML pages
- Secondary HTML pages (every page that is not initialized first) can have ONLY 1 page, everything else is going to be discarded
- Secondary HTML pages javascript and CSS must be initialized inside a same page BODY or inside a first HTML, explanation can be found HERE
- Frequently used pages, for example pages used to show various content (like news articles) can also be created dynamically.
- Pages should not be complex, if possible split your content to several pages. If this is not possible don’t overuse jQuery Mobile widgets, they are the main reason for a slow application performance.
- Never use more then 20-30 listview elements per page. If this not possible then use some kind of pagination system and always remove previous elements.
- Don't use page transitions if you don’t need them
- Use delegated event binding and always prevent multiple event binding. Solution can be found HERE.
- Don't use CSS3 features for older Android and iOS platforms. CSS3 text shadow is a performance killer on Android 2.X platform, not to mention transition effects.
- Never use same site as desktop /mobile unless you know exactly what you're doing (this is probably biggest mistake you can make)
- If you still insist on same desktop/mobile site then make sure you are using appropriate click events. Classic click event will work just fine on desktop and will have a slight delay on mobile devices. To counter that you should use vclick or touchstart event.
来源：https://stackoverflow.com/questions/24144077/javascript-jquery-runs-fast-in-desktop-browsers-but-slow-in-mobile-smartphone-b