Why did I give up jquery mobile in mobile development?

Why did I give up jquery mobile in mobile development?
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 not been much analysis between these problems 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. But in actual batch templates, no more JS effects are written, and jquery mobile's default style is not used. On the contrary, some styles need to be written to remove the original style. (In fact, this can be avoided. If you don't mind, you can still use JQM. However, our partner has fixed tasks, so we can use JQM for efficiency, two templates may be completed in one day, and the corresponding time will be invested in CSS and template labels ). Original blog address: http://www.cnblogs.com/unofficial address: www.pushself.com we are so doing mobile development JS: ① jquery-1.9.1.min.js ② jquery. mobile-1.3.1.min.js ③ banner. js ④ paragraph JSCSS: ① jquery.mobile-1.3.1.min.css ② style.css now I am doing so between JQM and zepto I am still tangled, after all, there are already many projects based on JQM, finally, I decided to use zepto to re-regulate the following template. Maybe I am just a personal idea. Maybe this is just an idea of playing, after all, this is neither the first nor the last time. It's far away. Pull it back. JS: ① require. js ② zepto. min. js ③ touch. min. js ④ policyun. mobile. min. jsCSS: 1 style.css this article original blog address: http://www.cnblogs.com/unofficial official website address: www.pushself.com Before and After comparative analysis> comparison 1: Page figure 1, the original version, in this version is JQM, the default UI of JQM is not used at all. 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, homepage navigation. This will naturally add more requests. Figure 2: the current version uses zepto in this version, just for convenience in 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. We will not go into details here. >>> Comparison 2: first loading figure 3, original version figure 4, current version> comparison 3: Second loading figure 5, original version figure 6, current version comparison 2 and comparison 3 cannot be used as absolute data, however, we can also see that some problems have just been learned and sold out because of the thorny problem detected by Samsung. We still need to learn a lot about website optimization, we hope to communicate with our friends who are working on the job. 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. Original blog address: http://www.cnblogs.com/unofficial official website address: www. pushself. compolicyun. mobile. min. A simple Banner special effect for javascript: The image quality is not very high, or the same image is used. Can you check it? You can see it first if you cannot. It is a simple slideshow of several images. Here are some differences. After reading the code, you should be able to find out the problems. HTML code: copy the Code <div class = "mbSlider"> <ul> <li style = "background: url (http://www.pushself.com/noImage.jpg) 50% 50% no-repeat; "> <a href =" http://www.pushself.com "> </a> </li> <li style =" background: url (http://www.pushself.com/noImage.jpg) 50% 50% no-repeat; "> <a href =" http://www.pushself.com "> </a> </li> <li style =" background: url (http://www.pushself.com/noImage.jpg) 50% 50% no-repeat; "> <a href =" http: // w Ww.pushself.com "> </a> </li> </ul> </div> copy the code CSS code: copy the code. mbSlider ul {position: relative; z-index: 0; height: 120px; overflow: hidden ;}. mbSlider ul li {position: absolute; top: 0; left: 0; z-index: 0; visibility: hidden ;}. mbSlider ul li ,. mbSlider ul a {display: block; width: 100%; height: 100% ;}. mbSlider ul li: nth-child (1) {visibility: visible;} copy the code JS Code: (the code is not well written. Remember to leave some tips when the experts pass) copy code (function (I ){ Var empty wwidth = $ (window ). width (), fig = $ (window ). height (), name = option. name, AutoMain = function () {this. mbSlider = function () {var mbSliderThis = this, directionArr = ["left", "right"]; liLength = $ (". "+ name +" ul li "). length, duration = I. duration in directionArr? I. duration: "left", initVal = I. initVal & I. initVal <liLength? ParseInt (I. initVal): 0, mbSliderHeight = $ (". "+ name +" ul "). height (), mbSliderHeight = mbSliderHeight> 120 & mbSliderHeight <windowHeight/3? MbSliderHeight: 120; $ (". "+ name +" ul "). height (mbSliderHeight); // banner cannot be too large if (liLength <2) {return;} else if (liLength = 2) {// easy to switch smoothly $ (". "+ name +" ul "). append ($ (". "+ name +" ul ").html (); liLength = $ (". "+ name +" ul li "). length;} var direction = I. direction, t; mbSliderThis. run = function (direction) {Action. apply (this, {0: direction, 1: initVal, 2: liLength, "length": 3}) initVal = InitVal = liLength-1? 0: ++ initVal; t = setTimeout (function () {mbSliderThis. run (direction) ;}, 3000) ;}$ (". "+ name +" ul li ").css ({"-webkit-transition-duration ": I. duration + "s"}); mbSliderThis. run (direction); $ (". "+ name +" ul li "). swipeLeft (function () {var direction = "right"; clearInterval (t); mbSliderThis. run (direction) ;}); $ (". "+ name +" ul li "). swipeRight (function () {var direction = "left"; clearInterva L (t); mbSliderThis. run (direction) ;};}, Action = function (direction, initVal, liLength) {var liLength = liLength; if (direction = "right ") {var currLiNum = initVal, prevLiNum = currLiNum = 0? LiLength-1: currLiNum-1, nextLiNum = currLiNum = liLength-1? 0: currLiNum + 1; directionVal = 1;} else {var currLiNum = initVal = 0? 0:-initVal, prevLiNum = currLiNum = 0? -LiLength + 1: currLiNum + 1, nextLiNum = currLiNum =-liLength + 1? 0: currLiNum-1; directionVal =-1;} var prevLiWidth =-required wwidth * directionVal, currLiWidth = 0, nextLiWidth = required wwidth * direval val; $ (". "+ name +" ul li ").eq(prevLiNum).css ({"-webkit-transform ":" translate3d ("+ prevLiWidth +" px, 0, 0) "," visibility ": "hidden"}); $ (". "+ name +" ul li ").eq(currLiNum).css ({" visibility ":" visible ","-webkit-transform ":" translate3d ("+ currLiWidth +" p X, 0, 0) "}); $ (". "+ name +" ul li ").eq(nextLiNum).css ({"-webkit-transform ":" translate3d ("+ nextLiWidth +" px, 0, 0) "," visibility ": "hidden"}) ;}, autoMain = new AutoMain (). mbSlider () ;}) (option) var option = {"name": "mbSlider", "direction": "right", "duration ":". 8 "," initVal ": 0}; there is actually a problem in the middle of copying the code, because it exists in the PC to show the customer roughly, the use of background is just to Some browsers to Avoid dragging when the picture is pulled out, but found a problem, background code: background: url (http://www.pushself.c Om/noImage.jpg) 50% 50%/100% 100% no-repeat; it can be directly parsed and used in chrome, and will be broken down at the mobile end. background-size: 100%; not background: 100% 100%; the first time you enter the page, or after refreshing, an unwanted special effect will appear.