Simple special effects: giving up jquery mobile in mobile development (1)

Simple special effects: giving up jquery mobile in mobile development (1)

I wanted to be a handsome man quietly, but my boss did not raise his salary. Instead, in January, it would be worse than in January.

Why did I give up the jquery mobile plug-in and choose to write special effects?

Everyone knows that efficiency is very important during development. A good tool can greatly improve efficiency in development. The more work you do, the more you get, on the contrary, it is myself.

Recently, on one thing, mobile online website testing must meet the requirements of 3 stars. After optimizing unqualified websites, we can ensure that 3 stars can be used for online promotion, and some problems will inevitably occur, I will write an essay summary later on the question, "How to optimize websites in mobile development ". One problem encountered was that the JS file was too large and the CSS file was too large. Previously, the jquery mobile development front-end template was used by the project, so that all the templates for batch development were based on jquery mobile, there has been no excessive Analysis in the middle until this assessment.

Jquery mobile is based on jquery. Before applying jquery mobile, you must first introduce jquery. For convenience, you naturally use the corresponding jquery mobile Style File. However, in actual batch templates, no more JS effects are written, and jquery mobile's default style is not used. On the contrary, you need to write some styles to cancel the original styles. (In fact, this can be avoided. If you don't mind, you can still use JQM, but our friends have fixed tasks. The development and usage are efficient, two templates may be completed in one day, and the corresponding time will be invested in CSS and template labels ).

We used to do this in mobile development.

JS:

① Jquery-1.9.1.min.js

② Jquery. mobile-1.3.1.min.js

③ Banner. js

④ JS Section

CSS:

① Jquery.mobile-1.3.1.min.css

② Style.css

This is what I do now.

I am still struggling between JQM and zepto. After all, many projects are already based on JQM. Finally, I decided to use zepto to re-standardize the next template, maybe it's just a personal idea, maybe it's just a play idea. After all, this is not the first or the last time. Let's talk about it. Pull it back.

JS:

① Require. js

② Zepto. min. js

③ Touch. min. js

④ Policyun. mobile. min. js

CSS:

① Style.css

Comparison and Analysis

>>> Comparison 1: Page

Figure 1: ORIGINAL VERSIONIn this version, JQM is used, and the default UI of JQM is not used. On the contrary, many independent IMG are used, which naturally adds many requests according to the current requirements, the page cannot be designed as the current banner. This will naturally add more requests.

Figure 2: current versionZepto is used in this version for convenience of selector. I think it is better to use native javascript, which is the benefit of mobile development, there is no need to consider the low version of IE, and the requirements for basic knowledge should be more reliable. Maybe I am used to using tools, and sometimes it is difficult to tell whether there is such a method in the native, with the update, it may be replaced by the next one when it is being used, but the slave node remains unchanged. We also used CSS Sprites as an old method. There are some other methods available, which will not be described here.

>>> Comparison 2: loading for the first time

Figure 3. Original Version

Figure 4: current version

>>> Comparison 3: secondary loading

Figure 5. Original Version

Figure 6: current version

Comparison 2 and comparison 3 cannot be used as absolute data, but we can also see some problems, because they have just been sold out due to the thorny problem detected by Samsung, there is still a lot of knowledge to learn about website optimization, and we hope we can communicate with our partners who are doing the relevant work. Let's not talk about other factors here, or else we will go far. The JQM and JQ files in Figure 3 are 73.9 KB (the original file is larger. For details, refer to the JQUERY official website ), it takes about 1 S. On the contrary, the require and zepto files and touch files are 17.6 K and take 52 ms. what can be seen from the data? Finally, I decided to replace JQM and use the current version. The plug-in can also directly use the JQM plug-in. I prefer to build my own wheels and hope to improve myself in this process, I can't drop my salary any more, so I have to send it to others. The news shows that you may not be able to handle the daily number of subway beggars. There are too many problems involved in this process, the simplest thing is that you do not have any experience in this area.