(Original) vendors that make development less smooth

Question)Cocos2d-x seems very good, but its different versions of the difference, compatibility makes people helpless, its websocket under the WP problem, SQLite problem seems to have been erased, U3D seems good, development Frame-frame debugging is really good. Based on the mono running environment, however, in the middle and low end machines, 3d seems to be always so imperfect, and 2D seems always so bad. However, the engine is nothing more than high or low, and all applications-games are superior to programmers in the end.

 

1) Android pitfalls

During the development of the first project, the need was the combination of games and applications. The number of images in the Application Section was quite large, and the entire page was almost full of images. Even texts were played with images, the game part is cocos2dx.

The entire system uses tabactivity. It is beautiful to switch the tabs generated by the activity managed by ASM until it appears: oom.

In Android systems, oom is generally divided into the overall OOM and a single oom. An OOM occurs when a single oom is loaded as a resource. In general, oom is generated when all resources in the memory are loaded together, as there are more than 10 project tabs,

After switching the tab, the memory occupied by the previous tab resource is not released in time. After switching the tab multiple times, oom appears.

After many tossing times, I decided to use fragment to replace the little leiyin, and manually load all the resources and perform manual GC. After testing on different models, the effect was good, everything seems so perfect until it appears:

Xiaomi 3, after being installed in Xiaomi 3, after multiple switching, resolutely Oom, it seems that manual GC has not taken effect for it, debugging, indeed, after manual GC is performed on other mobile phones, the memory is released, but it is stored on Xiaomi. After manual GC, the resource still exists. When it is loaded again, the memory is directly taken out, it seems that the manual GC has taken effect on Xiaomi, but when does Xiaomi actually implement GC. Because the image resources are large, oom is triggered after a large background image is loaded.

As a last resort, for Xiaomi 3, use a program to switch, cut the resources into small horizontal bars, load them one by one, reduce the entry size, and discard the effect of extremely compressed images. The success of Xiaomi 3 brought about one day and one night of work, adding a little energy to the road to growth.

 

2) HTML5 pitfalls

Since the development of small games is good, the company decided to spend almost one day developing two or three similar cat-like things, so it handwritten a little thing, because on the Mobile End, the browser kernel caused double-click amplification, A 300-millisecond latency occurs when you click. This 300-millisecond latency is replicated by mobile browsers to better display the page design on mobile devices, there is a problem here, that is, when you click the hyperlink of a mobile device, the browser does not know whether to jump or double-click to zoom in, so a latency of 300 milliseconds is generated, if a second click is generated within 300 milliseconds, double-click the button to zoom in. If not, it is regarded as one click.

Today, because of the emergence of responsive layout, double-click amplification is no longer applicable, and people can't wait to remove it, So Google was the first to produce:

 

<meta name="viewport" content="user-scalable=no"><meta name="viewport" content="initial-scale=1,maximum-scale=1">

 

In this way, double-click amplification can be disabled. However, this solution seems perfect, but it also brings a significant defect-you must completely disable scaling for your purpose, from the perspective of mobile site availability and accessibility, scaling is a key link. You may have encountered this problem, that is, you want to enlarge an image or text with a small font, but you cannot complete the operation. It can only be said that the disabled scaling optimization provided by chrome and Firefox on the Android platform is only applicable to some specific scenarios such as web games, but most websites cannot benefit from it.

 

So Google came up with another solution:

<meta name="viewport" content="width=device-width">

This code tells the browser to set the browser to the device size. The effect on the iPhone is to change the browser width from 980 pixels to 320 pixels by default.

In this way, the screen display problem can be solved, and the double-click amplification effect can be disabled. Without double-click amplification, the latency of 300 milliseconds does not exist. I thought everything was so smooth and I knew that I encountered it:

Xiaomi, when the application is opened on Xiaomi, the double-click amplification effect disappears, and there is still a 300 ms latency after the click. The click event is successfully executed only after a 300 ms delay. Only On Xiaomi's cell phone.

There is a 300 ms physical latency between the trigger of the click event and a physical tap on a mobile browser. It seems that everything can't be said, but it has to be solved.

Since there is a delay in mobile browser events, if we receive and handle browser events instead of browsers, we will receive and handle them with our own code, which seems to completely solve this problem.

 

Google probably found a thing: fastclick. After reading it, It imitates the browser to handle events, instead of the browser's built-in touch-screen events, and sends messages to respond to users:

var methods = [‘onMouse‘, ‘onClick‘, ‘onTouchStart‘, ‘onTouchMove‘, ‘onTouchEnd‘, ‘onTouchCancel‘];    var context = this;    for (var i = 0, l = methods.length; i < l; i++) {        context[methods[i]] = bind(context[methods[i]], context);    }

You can set which events are received and simulate event processing:

FastClick.prototype.sendClick = function(targetElement, event) {    ‘use strict‘;    var clickEvent, touch;    // On some Android devices activeElement needs to be blurred otherwise the synthetic click will have no effect (#24)    if (document.activeElement && document.activeElement !== targetElement) {        document.activeElement.blur();    }    touch = event.changedTouches[0];    // Synthesise a click event, with an extra attribute so it can be tracked    clickEvent = document.createEvent(‘MouseEvents‘);    clickEvent.initMouseEvent(this.determineEventType(targetElement), true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);    clickEvent.forwardedTouchEvent = true;    targetElement.dispatchEvent(clickEvent);};FastClick.prototype.determineEventType = function(targetElement) {    ‘use strict‘;    //Issue #159: Android Chrome Select Box does not open with a synthetic click event    if (deviceIsAndroid && targetElement.tagName.toLowerCase() === ‘select‘) {        return ‘mousedown‘;    }    return ‘click‘;};

 

Declare that our system only needs to use fastclick:

FastClick.attach(document.body);        Array.prototype.forEach.call(document.getElementsByClassName(‘test‘), function(testEl) {            testEl.addEventListener(‘click‘, function() {                textInput.focus();            }, false)        });    }, false);

 

At last, there was no black latency of 300 milliseconds On Xiaomi.

Postscript)

On the development road, the farther the line is ..