http://blog.csdn.net/JspAndAsp/article/details/49339403
Spring Festival at home to help my sister's iphone installed on the market all kinds of apps, forget that she is using 4G traffic monthly, so after downloading 10 apps, not only exhausted the traffic, but also in accordance with 0.3 yuan/trillion price deducted seventy or eighty yuan traffic costs. I looked at the volume of these apps and found that every app volume was 40-50m, which surprised me because I remember the apps were 10-20m two years ago.
Another memorable thing is to go to the park attractions, at that time, there is an activity at the gate of the park "sweep QR code download app to reduce 10 yuan", but I found that download this 40M app to spend 12 yuan of traffic, this is actually to spend more than 2 yuan of money, so "sweep code to reduce" This thing is very ordinary citizen for me.
The result is a conclusion that the app installation package must be small in size, at least smaller than the competitor's app.
For Android, the major market stores in the country have found this problem, so for users to upgrade the app, each app will provide incremental download features, so the app version upgrade is no longer dozens of m of traffic, but just download the 1-2m Delta package can be upgraded to the latest version, This greatly saves traffic. [1]
For iOS, AppStore provides incremental update functionality from IOS6 onwards. For iOS 6.x and iOS7.0, as long as there are file changes, this file will go into the incremental update package, such as 1 10M files, only changed the 1KB content, this 10M file will go into the incremental update package, the package is still very large. By the iOS7.1 and later, this mechanism has been improved, it will put this 1KB changes in the incremental update package, which greatly reduces the size of the incremental update package, but the installation will be slow, because the 1KB changes to merge into the 10M file, this is a very cumbersome and time-consuming work. [2]
However, the above measures can only solve the traffic problem of upgrading users, it is not helpful for new users. We must reduce the size of the installation package to attract more new users.
What makes the app installation package so bulky?
We saw the internal structure of the iOS and Android installation packages in the previous chapters, and there was nothing we could do about the executables; FOR XML files, these files will greatly reduce the volume after the app is packaged and compressed, so you don't have to worry about them;
As you can see here, please stop your work and check the size of the pictures and audio files in your own app package. Pictures but generally greater than 1M, are required to thin body. For 500kb-1m within this range, there is also the possibility of slimming. I have studied a lot of well-known apps, many of which are in the 2-3m look, in fact, there is no need, the reason is so big, because the UI designer to provide the design is so large, the developer took over the file size is not directly to the project, over time, the volume of the app package is large.
Among the many apps, I have the deepest impression of a travel software, all of its pictures are not more than 100KB, even more than 50KB are numbered. This is the ultimate performance of the home.
Next to the audio file, for app-class apps, most of what I see is the voice of the app push, which is simple and should not exceed 10KB. But the audio I see in many apps is around 100KB. This is one direction of our optimization. There are many such software on the Internet that can compress the audio significantly.
The designer once asked me why the app doesn't use JPG images, because the same size, PNG format pictures are much larger than JPG images.
As we all know, PNG has a transparent channel, and JPG does not, in addition to PNG is lossless compression and JPG is lossy compression, so there is a lot of information stored in PNG, the volume is naturally large.
However, the mobile phone has a unique effect on PNG, it will be hardware acceleration, so we will find that the same background map, PNG although the volume is larger than JPG but loading speed is faster.
Finally, for the image in the app package, we use PNG format, and for the image to be loaded from the Web, taking into account the traffic and download speed, the use of JPG format, because it has a high compression rate, small size.
But for the background map, the guide page, this large-size picture, we still prefer to use the JPG format, although loading slower, but small size, reduce the volume of the package. The apps I've seen are basically doing this.
For the splash ad map, that is, every time you open the app flash through the ads, because we regularly to download a new ad map from the online and displayed on the Spalsh page, so here to use JPG format pictures.
For iOS, Apple specifies that the start page (Launch image) must be a PNG image, otherwise it will be rejected when it is approved.
Google later released a new image format, WebP, its compression rate is better than JPG, has been gradually popularized. Android is naturally supported, iOS wants to use this format picture, need to introduce the WEBP decoder in the program.
By analyzing images from more than 50 apps, I found 3 more typical scenarios where most of the company's solutions were identical:
1. Splash default advertising is the largest volume, and corresponding to different models, to do more than sets, according to my experience, each picture control in 300-500k around on it can be. High resolution, for mobile phones, can not see the effect.
2. The guide map, the designer will give a few high-resolution pictures each time, and then the programmer to put it into the app, the volume naturally become larger. In fact, careful observation, you will find that in order to maintain the unity of style, the background of these pictures is the same. So we can do this, for example, with a little bunny on the background:
3. For the background map, in order to achieve a visual effect, this picture is often added to the effect of the blur, so, there is no need to do too clear, should be controlled in around 50k, see a lot of apps similar background map is around 1M, really no need. The background map generally uses JPG files.
iOS does not use pixels as a unit, but instead uses the point unit, for IPhone4 and after, 1 points equals 2 pixels, and 1 points equals 1 pixels for iphone3gs and before. This ensures that the app that was previously running on the IPHONE3GS can be run on iPhone4 without modification. [3]
But images that were originally applied to iphone3gs, such as A.png's size of 40 pixels, looked blurry in iPhone4. So we have to prepare a 80-pixel image for A.png, named [email protected], also put in the app project, so the app will be run according to whether the screen is iphone3gs to select the appropriate image. IPHONE3GS will choose A.png,iphone4 will choose [email protected]. For IPhone4, if you do not have this twice times the graph, then choose A.png, so it is blurred.
Iphone4s, IPhone5, iphone5c, iphone5s, IPhone6, they all use [email protected] This twice-fold picture.
Until IPhone6 Plus, you will need to provide a picture of [email protected]. Without this 3 times times chart, it would choose 1 time times or twice times, I tried only twice times the picture, the IPhone6 Plus is really a blur effect.
So the question is, do we need to provide 1 time times, twice times, and 3 times times the 3 images for each diagram?
I see an international version of the app that handles pictures like this. It also produces 1 time times, twice times, and 3 times times more images per image, while providing multilingual text. This has led to a very large volume of the app. Looks a bit "rather wrong to kill 1000, not to let go of a" feeling, but as long as the reverse thinking, the picture is not missing, will never blur.
I have looked at a lot of pictures of the app and found that 1 time times the map is overwhelming, but not every 1 time times the graph has the corresponding twice times and 3 times times the graph, or only the corresponding twice times the graph without 3 times times the graph, of course, there are only twice times and 3 times times the graph and can not find 1 time times the picture. Picture management is a mess.
But in China, this is not the case. I have seen the data reported by Friends League, China iphone3gs users less than 0.1%. So, I have a bold idea, is to take the iOS app's package all 1 time times to kill, for each graph generated twice times and 3 times times the graph.
Many companies have the tools to generate twice times graphs and 3 times times graphs in batches based on 1 time times charts, and I have written one in C # once. But I found that there is a problem, not every picture after the conversion is clear, vector graphics can be stretched, but the stretched bitmap will be distorted. When I turn to 1 time times and twice times according to 3 times times graph, I find that the bitmap can be compressed, and the vector image will be distorted after compression. A good solution, then, is to classify all the images according to bitmaps and vectors, to provide 1 time times the graph, and then convert the batch to twice and 3 times times, while the bitmap is provided with 3 times times the graph, then the batch is converted to 1 time times and twice times the graph.
The solution given in this article does not reduce the volume of the iOS package, it may increase the size of the package, but it can manage the picture systematically, so that every picture is clear.
In the field of Android technology, popular. 9 Graph this concept, which greatly saves the volume of the picture. iOS can actually do so, using the iOS image stretching syntax, you can put a. 9 map full of an area, such as a button, as follows:
(UIImage *) Resizableimagewithcapinsets: (uiedgeinsets) capinsets
Where capinsets This parameter is a struct of type uiedgeinsets, the area covered by capinsets will remain unchanged, and the part that is not covered will be used for tiling.
The above method is only applicable to iOS0 and above, 0 of the following versions have another solution, but the current domestic app is only support more than 0 version, so I do not mention here.
For arrows, there is no need to prepare up and down 4 pictures, prepare a picture is enough, use the time in the direction of rotation can be.
The animation is mainly embodied in the Guide diagram and the loading progress bar.
For developers who do app apps, they're not very good at animation, so they will ask the designer to provide animated GIF format, or more than 20 pictures to be carousel to achieve the effect of GIF animation, as everyone knows, in programming simple, but the volume of the app is correspondingly larger.
A relatively simple solution is to reduce the size of the animation by reducing the keyframes in the animation.
Be a little more formal, or use native Android or iOS native code. Any complex animation is made up of four simple animations: move, rotate, zoom, and fade. In Android, the use of XML to configure, these four simple animations have the corresponding XML syntax, you can quickly piece together a complex animation, and for iOS, have to use the encoding method.
Why don't we emulate the technology of the Android XML animation and tailor a set of XML animated tags for iOS? Instead of writing any OBJECTIVE-C code, configure a few lines of XML to show an animation.
I've seen an app that uses this idea to configure properties for iOS animations in plist, 9-4, which is a panning animation:
Figure 9-4 Panning animation in a configuration file
Based on this configuration, an animation engine is also required to parse this configuration file and translate it into objective-c native language. In design mode, we call it the interpreter pattern.
Not only that, I also need to have a test page, by modifying the properties of the animation on this page, and then clicking the button to see the effect immediately after the change, without having to rerun the app. Click a button to execute the XML script in the input box.
Using some of the above methods, we can reduce the 1 500KB gif files to a few images of 50KB, and greatly save the development cost.
Sorry, I always don't like storyboard, but the existence is reasonable. I used to think that storyboard is bigger than Xib, which is one of the reasons for the size of the iOS installation package, so I did an exploratory job of splitting the pages in storyboard into several xib files and repackaging them, but the result was the same size.
The conclusion is that the use of storyboard does not affect the size of the IPA packet.
I found a font file in TTF format in an IPA package. At first I thought it was their app using a certain font, but opened the TTF file only to find that it is stored in a picture, 9-5 is shown:
Figure 9-5 icon image in the font file
Each icon corresponds to a hexadecimal number, for example, the first one is \ue600, and this value is unique.
Observing this font file, we see that all icons have the following commonalities:
Someone immediately reminds of iOS 1 time times, twice times and 3 times times, each time to prepare 3 pictures, respectively, for different phone models. If you make a font, you can reduce the volume, and no longer have to design @2x and @3x two sets of diagrams-this scheme is limited to monochrome images.
We generally go to the following website to convert the monochrome icon into a font file: Https://icomoon.io. Or use a tool like FontLab to make it yourself.
Next, let's look at how to promote this technology in the app.
1) Android
First put this font file in the assets directory, 9-6:
Figure 9-6 Font files in the assets directory
Next, we'll save the icon and hexadecimal encoding mappings in the drawable resource file:
<string name="font_icon_1_normal"></string> <string name="font_icon_1_pressed"></string>
This allows you to use the syntax of R.id.font_icon_1_normal to remove the image.
TextView textView1 = (TextView) findViewById(R.id.textView1); Typeface font = Typeface.createFromAsset(getAssets(), "icomoon.ttf"); textView1.setTypeface(font); textView1.setTextSize(12); textView1.setText(getResources().getString(R.string.font_icon_1_normal));
You can also design it as a Drawable object, and then set it to a control such as ImageView.
2) for iOS, realize the same idea.
First, we will add the Icmoon.ttf file to the project, as shown in 9-7:
Figure 9-7 the Icomoon.ttf file in Useiconinttf
In the Usericoninttf-info.plist file in the supporting files directory, add a configuration with the type specified as fonts provided by application, In which you add a declaration to the Icomoon.ttf font file, 9-8 shows:
Figure 9-8 Configuration in Useiconinttf-info.plist Icomoon.ttf
Like Android, in order not to encode numbers directly using the 16 mechanism such as \ue605, we define the icon and hexadecimal-encoded mapping relationship as a macro ttfconstants:
#define font_icon_1_normal "\ue605" #define font_icon_1_pressed "\ue606"
The next two lines of code will show the image in this font file:
10 Face Picture Package download[self.label1 setFont:[UIFont fontWithName:@"icomoon" size:12]]; [self.label1 setText: [NSString stringWithUTF8String: font_icon_1_normal]];
For emoji pictures. Many apps have integrated chat features, chat, nature will provide a variety of expression pictures, there is still map PNG, there are animated GIF, although each is not big, but the number of AH, all hit the package inside the release, will directly lead to the package becomes larger.
Considering the actual scenario, the user will not be able to open the app to use the chat function, so we can put these emoticons into a zip package, in the launch of the app, in a new thread in the asynchronous download the zip package and then extracted to the local. This allows you to use local images when chatting. For this, we have to do a version of the incremental upgrade function, to ensure that there are new emoji images can also be downloaded to the local after use.
For Android, Eclipse can automatically check out which pictures are not used.
For iOS, you need to write a small program to check which pictures are not used, note that for [email protected] and [email protected] processing, the first @2x and @3x to filter out.
Whether it's Android or iOS, even if you find a redundant picture, you can't delete it, because our program often decides which images to display in the code, we can only check the revision history of these images in the repository to determine whether they really do not need.
When it comes to Proguard in Android, the first thing we think of is code obfuscation, which is because we're constantly modifying proguard.cfg files to keep classes and methods that don't need to be confused.
In fact, Proguard can also slim APK, when packaged it will help to check the unused classes and methods to remove it. The most effective is the third-party SDK, such as Asmack, the SDK for XMPP has tens of thousands of methods, but in fact we only use a small part of it. Proguard will help us remove unused parts, greatly reducing the size of the APK.
In the process of studying the various apps, I found that an IPA file in an app has several images in PDF format.
In the study also found that there are several apps in the IPA package each picture is made into ImageSet form, each ImageSet directory in the same time there are 1 time times the picture, twice times and 3 times times the graph, 9-9 shows:
Figure 9-9 3 photos in Cancelselectedlistbtn.imageset directory
These two seemingly unrelated things, I see no connection, in fact, the use of iOS a new technology. Let's reference materials from these clues.
This is a few pdf pictures, I studied for half a day, please the designer students to make the same PNG picture, volume difference is not big, so compared with PNG no advantage. Since there are hundreds of images in the IPA package for this app, only these 3 images are in PDF format, so I suspect that this is just their new technology attempt.
After looking at the 3 images in the ImageSet catalogue, I found that every picture is like this one. This is not to make me realize, must be using what tools, once generated these pictures.
Search for keyword ios+pdf until you find the using Vector Images in Xcode 6 article [4], only to discover that this is a new technology that IOS8 appears, can only be used on XCode6.
Here is a brief introduction to this technology, first draw a PDF vector, and then XCode6 at compile time, will generate 3 PDF images, respectively, 1 time times, twice times, 3 times times the graph. This avoids the blurred picture caused by the image, but also avoids the need for designers to prepare 3 sets of diagrams each time the trouble.
But why do we have to put some images on the user's iphone that will never be used? Apple's painstaking approach to such a technology still does not address the growing reality of app volume, and the technology will only make the app more bulky-and that's where the user's pain points. If I am to design the next version of iOS, I will let the app only include PDF vector, only when the user downloaded the app to start the installation, will be based on the user's model, the PDF to the corresponding image, such as the iphone 6+ app generated image is 3 times times the picture.
Apple has introduced the app slimming feature in IOS9, which is said to dramatically reduce the volume of app packages to download. We'll wait and see what the effect is.
I compared the 100 apps and found that iOS and Android versions of the same app, iOS's IPA package is a lot larger than the Android APK package.
But there is always a maverick app, such as a famous video playback software, Android version 23.2M, and iOS version is only 20.5M. I initially thought that the Android version of the app was problematic, so I looked at the contents of the Android package, and I found out that the company's Android technology was so refined that it was larger than the iOS version, Because the Android version has a different picture and layout for dozens of resolutions, to ensure that the user experience is consistent at any resolution.
As shown in 9-10, there are 12 layout layouts:
Figure 9-10 The Layout folder in an Android project
Drawable folder is more, up to 28, confined to space, here is not the map.
These are just exceptions, and most apps aren't as detailed as they say:
1) First, it does not support so many resolutions. This is due to the current development situation of the app. On the one hand, product managers and designers in the lack of manpower, on the other hand, because designers prefer the iphone, generally will only give the iphone version of the design, and then let Android developers according to the design of the iphone to adapt. So the Android developers had to do the UI adaptation, using. 9 Drawing technology, it is not possible to find the designer to draw a new picture. So we will see the iphone app is mostly very sophisticated, the corresponding Android version is very rough, because the Android app UI is a lot of developers with their own aesthetic to two times processing.
2) Second, you will find that different content is placed in the various drawable directory images. Use the developer's picture to speak and find it. For example, drawable directory decentralization of various selector files, drawable–hdpi directory decentralized food class pictures, Drawable-large directory to decentralize tickets pictures. So, there are a lot of catalogs, but in fact there is only a set of figures. As everyone knows, this reduces the speed of the app, because it can not find a picture in the corresponding resolution of the drawable directory, will walk through each drawable directory of the picture, until the location of the image is found.
For iOS, there will be a. A format binary in the IPA package, which is the file generated after the code compiles, often occupying 50% to 80% of the volume of the entire IPA package. Apple has asked all apps to support 64-bit, and on that basis, the IPA package has expanded by nearly a fold, mainly the. A file is compiled and becomes larger.
We have to find a way to reduce the size of this. A file, in fact, to reduce redundant code in the project. After constant groping and trying, I found that these redundant codes are divided into 3 parts:
1) classes that are not already in use. To do this, we need to write a Python script that checks which classes are no longer in use. In the process of checking, I found that a class is not used, but still keeps a reference to it in other classes, so we have to rule out this particular situation and not let it affect our inspection work.
There is also a case where B is used in Class A. Class A is no longer used, the first time you execute a python script to find a class, delete it. At this point Class B was left alone and no longer used, so it was necessary to execute the Python script again to find out the B. And so on, keep executing this Python script until you can no longer find a class to use.
2) methods that are no longer used. This is a bit hard to find because Objective-c unique method signature form (the method signature consists of three parts, including the method name, parameter, and return type).
Still write a Python script that iterates through the methods in each class, and then finds out whether or not it is used in the project.
In the course of execution, when you encounter such a situation, both Class A and Class B have this Lovebaobao method, and the method signatures are identical. At this point, Python is indistinguishable from the Lovebaobao method of which class is used. We can only aggregate them and then use manual checks.
In addition, there are many ways to bring the system, such as the UITableView of the 6 methods, as long as the use of UITableView pages, there are 6 methods. We should not count such a method when we execute a python script. So you need to make a white list and fill in these methods beforehand.
3) Code similarity problem. When writing code, junior programmers like to paste a piece of code from Class A into Class B, and then modify several of these variable names, which is done. So two pieces of code with very high similarity are produced.
Someone who knows a little bit about object-oriented thinking is aware of the need to abstract such code, such as creating a new method in the Utils class, and then using this logic to call the Utils class.
But not all programmers have such a realm, even if a few years of experience, but also because of the rush to work two people the world or to change diapers for children and the use of copy and paste Dafa perfunctory. Over time, redundant code is more, the size of the package is naturally large. To do this, we need to have a tool to check the similarity of the code. In the iOS field, I recommend simian this tool. Interested readers can try and use this tool on your project to see how much similar code you can find.
[1] For more technology on Android incremental, see http://blog.csdn.net/hmg25/article/details/8100896
[2] for iOS incremental update mechanism, see https://developer.apple.com/library/ios/qa/qa1779/_index.html?utm_source=ios+dev+weekly& Utm_campaign=ios_dev_weekly_issue_114&utm_medium=email
[3] For more information, please refer to this article: http://www.zhihu.com/question/25421514/answer/31623909
[4] article see http://martiancraft.com/blog/2014/09/vector-images-xcode6/
App Competitor Technical Analysis (3) reduce the volume of the installation package (RPM)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
