사파리 페이지가 iOS 렌더링을 중단하는 이유는 무엇입니까?

사파리 페이지가 iOS 렌더링을 중단하는 이유는 무엇입니까?

제목이 그렇게 설명적이지 않다는 것을 알지만 여기 이야기가 있습니다: 저는 주로 자바스크립트와 맵박스 라이브러리를 사용하는 브라우저 게임을 개발하고 있습니다.

데스크톱, Android 및 iOS에서는 모든 것이 잘 작동하지만 iOS에서는 한 가지 문제가 나타납니다. 게임을 몇 분간 실행한 후 전화기에 갑자기 그래픽 아티팩트가 생기기 시작하고 대부분의 텍스트가 스크램블되어 표시된다는 것입니다.

다음은 전화기가 어떻게 시작되는지를 보여주는 사진입니다.

제 질문은 제 코드에 정확히 무엇이 이런 원인이 될 수 있을까요?메모리 누수? (LE: 사실 메모리 누수인 것으로 드러났습니다.
진짜 질문은 다음과 같습니다.웹 페이지를 검색하는 것만으로 전화기 전체를 거의 벽돌로 만들 수 있는 이유는 무엇입니까?사파리는 이것을 멈춰야 하지 않을까요, 아니면 적어도 iOS는 중단해야 하지 않을까요?

이 문제는 다른 아이폰 기기에서 재현될 수 있기 때문에 이 특정 기기에서는 문제가 되지 않습니다.(다른 iOS 버전에 대해서는 잘 모르겠습니다.)

오류를 재현하는 방법:

1. 게임을 엽니다(Safari 안에서).
2. 3-4분간 작동시킵니다.
3. 알림 센터를 미끄러져 내려가시면 모든 것이 미쳐버립니다.
   (아이폰5C에서) 오류를 재현하는 방법을 보여주는 유튜브 영상을 추가했습니다.
   (메뉴를 위에서 아래로 스와이프하면) 알림 센터에 문제가 먼저 나타나는 것 같습니다.
   현재로서는 이 문제가 발생하는 것은 다음과 같습니다.iPhone 5CiOS 9.2.1 (13D15).새로운 iOS 9.3 버전에서도 발생합니다.

이 문제를 해결하려면 다음 작업을 수행해야 합니다.

1. 게임 탭이 열려 있는 Safari 응용 프로그램을 닫습니다.
2. 전화 잠그세요.잠금을 해제하면 모든 것이 정상으로 돌아갑니다.

게임 자체에 대한 몇 가지 세부 사항:

1. 게임은 맵박스 맵과 그 위에 있는 일부 유닛(마커)을 보여줍니다.
2. Node.js 서버는 1 tick/second로 실행되며 각 tick/second 후 업데이트된 게임 상태가 Socket.io 을 통해 브라우저로 전송됩니다.
3. 브라우저가 게임 상태를 수신할 때마다 그에 따라 마커를 업데이트합니다.
4. *확대 또는 축소하거나 선택할 경우 마커를 업데이트할 수도 있습니다.

EDIT2: 메모리 누수를 찾았습니다(예상대로).리크 수리 후(확인)undefined_icon) 더 이상 문제가 발생하지 않습니다.이는 Safari/iOS 버그가 해당 라인의 어딘가에서 트리거됨을 의미합니다.

클러스터된 각 장치(MarkerCluster 내의 다른 장치와 숨겨진 채로 그룹화됨)에 대해 정확히 각 눈금이라고 불리는 것은 다음과 같습니다.

    var $icon = $(marker._icon); // marker._icon is undefined because of the clustering

    $icon.html('');

    $icon.append($('<img class="markerIcon" src="' + options.iconUrl + '" />'));

    var iconX = 10;
    var iconY = -10;
    var iconOffset = 0;

    for(var v in this.icons) {
        this.icons[v].css('z-index', + $icon.css('z-index') + 1);
        this.icons[v].css('transform', 'translate3d(' + iconX + 'px,' 
                                + (iconY + iconOffset) + 'px,' + '0px)');
        iconOffset += 20;

        this.icons[v].appendTo($icon);
    }

    // Fire rate icons
    this.attackRateCircle = $('<div class="circle"></div>');
    this.attackRateCircle.circleProgress({
        value: 0,
        size: 16,
        fill: { color: "#b5deff" },
        emptyFill: 'rgba(0, 0, 0, 0.5)',
        startAngle:  -Math.PI / 2,
        thickness: 4,
        animation: false,
    });
    this.attackRateCircle.hide();

    // Create and display the healthbar
    this.healthBar = $('<div>').addClass('healthBar ');
    this.healthBar.css('z-index', $icon.css('z-index'));
    this.healthBarFill = $('<span class="fill">');
    this.healthBar.append(this.healthBarFill);

    $icon.append(this.healthBar);
    $icon.append(this.attackRateCircle);

가 입니다.icons열:

this.icons = {
    attack_order: $('<img src="img/attack.png" class="status_icon">'),
    attack: $('<img src="img/damage.png" class="status_icon icon_damage">'),
    hit: $('<img src="img/hit.png" class="status_icon icon_hit">'),
};

circleProgress전화는 이 도서관에서 온 것입니다: https://github.com/kottenator/jquery-circle-progress

데모

예, 저는 버그를 재현하는 jsFiddle을 만들 수 있었습니다. https://jsfiddle.net/cte55cz7/14/ 아이폰 5C의 사파리에서 열기를 몇 분 정도 기다리십시오.iPhone 6 및 iPad mini에서 페이지가 충돌합니다(메모리 누수로 인해 예상됨).

여기 HastyBin에 있는 동일한 코드가 있습니다. 실행하고 싶지 않은 사람들을 위한 것입니다.

이 메모리 누수는 아마도 'WebKit's JS Engine'의 작동 방식 때문일 것입니다 [safari webkit-javascript llvm].

가상 메모리 버퍼 오버플로우로 보이며, 남아있는 RAM에 직접적인 영향을 미칩니다(사용자 인터페이스 그래픽 요소를 저장하기 위해 iOS에서도 공유 및 사용됨).

상대적으로 코드 조각: "[...]jQuery 메모리 유출을 찾는 것은 쉽습니다.$.cache 크기를 확인합니다.너무 크면 검사하고 어떤 항목이 남아 있는지, 어떤 이유로 남아 있는지 확인합니다. [...]"http://javascript.info/tutorial/memory-leaks)

루프의 경우 이와 관련이 있을 것으로 예상합니다.

for(var v in this.icons) {
    this.icons[v].css('z-index', + $icon.css('z-index') + 1);
    this.icons[v].css('transform', 'translate3d(' + iconX + 'px,' 
                            + (iconY + iconOffset) + 'px,' + '0px)');
    iconOffset += 20;

    this.icons[v].appendTo($icon);
}

검사가 완료되었으며 항목을 발견했다고 가정할 때 removeData()로 수동으로 데이터를 정리하거나 first$elem을 사용할 수 있습니다.()을 분리한 후 $(elem)을 넣습니다.setTimeout에서 remove().

언급URL : https://stackoverflow.com/questions/35782231/why-is-a-safari-page-breaking-ios-rendering