2
3 천 가지 스타일 정의를 사용하는 것은 매우 드문 경우입니다. 일부 모호한 모바일 장치가 불평 할 가능성이 있습니까?대부분의 모바일 브라우저는 3000 개의 CSS 스타일 정의를 처리 할 수 있습니까?
세부 정보 : 가능한 한 많은 브라우저에서 실행되도록 게임을 만들므로 캔버스를 사용하지 않아야합니다. 스타일 변수를 변경하여 애니메이션 캐릭터를 시도했지만 너무 많은 리플 로우가 발생했습니다. 다음으로 DOM 노드를 한 번에 "innerHTML"으로 변경하고 replacechild 및 documentfragment를 시도했습니다. 대부분의 브라우저는 훌륭하지만 Internet Explorer는 메모리 누수없이 오랜 기간 동안 DOM 노드를 망칠 수 없습니다 (심지어 IE9 누출도 천천히). 하나의 메모리 누출을 수정하려는 모든 시도는 다른 누출을 일으켰습니다. 마침내 대신 모든 픽셀 위치에 대한 별도의 클래스와 CSS를 사용합니다. 예 :
class="Height123 Width456 Left789 Top0";
이것은 리플 로우가 하나뿐이므로 메모리 누수가 없으므로 IE8에서도 빠르게 실행됩니다. 시도한 모든 데스크톱 브라우저에서 완벽하게 실행되지만 약 3 천 개의 클래스가 필요합니다. IE8은 CSS2 만 지원하므로 CSS3 단축키를 사용할 수 없습니다. 저에게는 더 작은 장치에 대한 불안감이 생깁니다. 가능한 모든 핸드 헬드가 없으므로 CSS 스타일을 제한하는 것으로 알려져 있는지 궁금합니다.
당신이 이미 이렇게하지 않은 경우, 당신은 할 수 이름을 최소한으로 줄이십시오 : class = "H123 W456 L789 T0". 또한 클래스를 실제 장치 크기로 제한하면 도움이됩니다. 당신의 해결책은 나를 좌절하게 만듭니다. –
감사. 제가 말했듯이, 이것은 제 첫 해답이 아니었지만 작동하는 유일한 해결책이었습니다. 그리고 네, 스타일 시트를 축소하고 실제로 나타나는 값만 사용했습니다. 하지만 오프셋 목적으로 음수가 필요한 CSS 스프라이트를 사용하고 있으므로 3000보다 훨씬 적은 수를 얻는 것이 어렵습니다. –
JS를 직접 사용하고 있습니까, 아니면 jQuery와 같은 라이브러리를 사용하고 있습니까? 그리고 메모리 누수의 원인이되는 코드의 예가 있습니까? - 누출에 대한 증거는 무엇입니까? 그냥 메모리 사용량이 올라간다는 것을 의미하기 때문에 나중에 내려 가지 않을 것을 의미합니다. – Adrian