1. iPhone weak network environment configuration
Select existing network status
Or customize network status
Setting parameters:
The meaning of each parameter is roughly as follows:
in bandwidth: downlink bandwidth
in packet loss: downlink packet loss rate
in delay: Downlink delay (ms)
out bandwidth: upstream bandwidth
out packet loss: uplink packet loss rate
out delay: uplink delay
DNS delay: DNS resolution delay. Android does not know how to simulate this function.
protocol: Protocol--optional Any, IPv4, IPv6
interface: interface--optional ALL, WLAN, Cellular
2. Optimization plan
1. Necessary status presentation
1.1. No network prompt
Monitor network status changes, available AFNetworkReachabilityStatus of AFNetworking.
When there is no network status, the user is notified.
1.2. Before loading the network request, add "Loading animation"
Such as MBProgressHUD
1.3. After loading the network request, you need to remove the network status animation and add empty data processing. (Determine whether it is due to the network or lack of data)
1.4. Make good use of status switching notifications to make different changes to the interface.
Make different state diagram switches or interactive switches in different networks such as 2G, 3G, 4G, 5G, WiFi, etc.
2. Network request optimization
2.1 . Set the most appropriate timeout time
Develop different calculation plans for the total read and write timeout (timeout from request to response), first packet timeout, and packet timeout (timeout between two data segments) to speed up the judgment of timeout, reduce waiting time, and restart as soon as possible try. The timeout here can also be set dynamically according to the network status. For example, different timeouts can be set when the network status is 2G, 3G, 4G, 5G, and WiFi.
Allows users to cancel long-running or slow network operations.
2.2 . "Delay" of multi-submodule requests
Based on the principle that the user's waiting tolerance does not exceed 2 seconds, if multiple business modules such as the home page are presented together, it will wait for a long time if all the interface data is requested at once, so multiple sub-modules can be segmented. Delay" request.
- Priority module: The amount of requested data is small and business needs to be displayed first.
- Delay module: Large amount of data, multiple pieces of data similar to a list, suitable for placing loading animations, the duration is highly acceptable to users, so in addition to being placed at the back, it can be used for paging processing and delayed loading processing after sliding.
2. 3. Add caching mechanism or incremental update mechanism to fixed modules
Cache data on the home page and specific first-level pages. Data can be read directly from the cache when requested again within a certain period of time, which can also prevent blank pages from affecting the experience.
Or judge whether there are incremental changes in the data. If so, update the data on the premise of inserting animation.
2. 4. Multi-module reloading operation
Like some complex pages with multiple modules and correlations between modules, multiple modules will have multiple requests. When a request fails and a "reload" button needs to be added, it is recommended that all requests be re-requested to prevent correlation between modules. The data is deviated or the UI layout is disordered.
So, if there is a button/drop-down operation that reloads after a network request fails, the suggestion is:
- Multiple modules request it again.
- Recalculate complex UI.
The reason is: in a weak network environment, the data requested may not be complete. Multiple requests may only get part of the data. In most cases, each module complements each other.
2.5. Preload setting "critical value"
Based on the current position of UITableView, divide it by the current height of the entire UITableView.contentView to determine whether a network request needs to be initiated: when 70% of the current page has been crossed, new resources are requested and data is loaded;
2. 6. Start with the action of requesting
Optimize DNS queries: DNS queries should be reduced as much as possible, DNS caching should be done to avoid domain name hijacking and DNS pollution, and users should be scheduled to the "optimal access point".
Reduce data packet size and optimize packet volume: Reduce data packet size and packet volume through compression, streamlining of packet headers, message merging, etc.
Optimize ACK packets: Balance the number of redundant packets and ACK packets to reduce latency and improve throughput.
2. 7. Disconnection and reconnection
There are so many reasons why a data connection may be lost on a wireless network. CDN can be used here.
(CDN is a distributed content distribution network built on a data network. The role of CDN is to use streaming media server cluster technology to overcome the shortcomings of insufficient output bandwidth and concurrency capabilities of a single-machine system, and can greatly improve the concurrent streams supported by the system. number to reduce or avoid the adverse effects of single point failure.)
2. 8. Reduce the number of data connection creation times
Since creating a connection is a very expensive operation, the number of data connection creation times should be reduced as much as possible, and tasks should be performed in batches in one request. If you send small data packets multiple times, you should try to ensure that they are sent within 2 seconds. When accessing different servers in a short period of time, reuse wireless connections as much as possible.
3. User experience optimization
3. 1. Contents are displayed in order.
For example, if a business module has both text and pictures, the loading may be stuck at 50%-90%, so the text is loaded first, and then the pictures are loaded.
3. 2. Driven by progress
Regardless of network conditions, the loading progress always starts at 50% and stays at about 98% progress.
3.3. Fixed UI display layout, virtual layout view can be preloaded when loading
Similar to Zhihu, when loading, the "Loading animation/view" is changed to display the preloaded placeholder image on the main page.
3. 4. For weak network loading failure/empty data, a "reload" button can be added, or a pull-down refresh operation can be added
For example: if the request has no data/network failure, add a 'reload' button to make users aware that they are in a "controllable" state and reduce user anxiety.
4. Image loading optimization
4.1. Use faster image formats
Strictly speaking, it is not an optimization under weak network, but a faster image format is really important! It is recommended to use WebP format here. (WebP format, an image format developed by Google to speed up image loading. The image compression volume is only about 2/3 of JPEG, and can save a lot of server bandwidth resources and data space. But WebP is a Lossy compression. Encoding WebP files of the same quality requires more computing resources than encoding JPEG files.)
4. 2. Present graphs with different accuracy according to network status
For example (for the original image is 600X480):
- 2/3G uses low-definition pictures: send 300X240 pictures with a precision of 80;
- 4G normal resolution pictures are delivered at 600X480 with a precision of 80;
- WiFi high-definition pictures (it is best to judge based on the network speed, WiFi can also be slow): Send 600X480 pictures with a precision of 100.
4.3 , SDWebImage parameter options
According to the usage scenario, refer to the SDWebImageOptions constant description to load the image.
4.4 . Do not load images
In the case of a weak network, if the operation is not affected and the user can be informed of the content of the area through a simple text description, the image may not be loaded until the network is smooth before loading the image. Of course, this method depends on the situation, or you can generally add a "Don't display pictures in weak network status" button in the APP's settings options.