IE11에서 큰 그룹의 요소를 매우 느리게 추가합니다.

많은 양의 데이터를 DOM에로드하는 데 많은 문제가 있습니다. 사실 IE11만이 거래 차단기입니다. 여기에 몇 가지 예제 코드는 기본적으로 내가이 일을하고, 첫 번째 :IE11에서 큰 그룹의 요소를 매우 느리게 추가합니다.

이제

var concat = []; 
    for (var i = 0; i < 10000; i++) { 
    concat[i] = "<li value='"+'XYZ' + i+"'>"+'XYZ ' + i+"</li>"; 
    } 
    var element = conc.join(''); 
    $('ul.mylist').append(element);

, 그것의 아주 기본적인 예제로 나누어, 그 나는 유사한 주제에 여기 발견 jsFiddle에서 영감 :

http://jsfiddle.net/bVAFF/152/

바이올린은 IE에서 잘 작동합니다!

최대 10.000 개의 목록 요소를 큰 덩어리로 삽입합니다. 이것은 하나의 큰 문자열로 하나의 요소를 연결하고 있기 때문에 훌륭합니다. 결국 DOM에 추가됩니다.

적어도 크롬과 파이어 폭스에서 성능이 우수합니다. 데이터를 삽입하는 데 1-2 초가 걸리는 반면, IE11은 주입 발작에서 부활하려면 MINUTES가 필요합니다. 나는 더 큰 데이터 양을 실험하고 있었다 : 최대 9MB/70.000 엘리먼트 (!)를 가진 문자열은 여전히 "meh"를로드했다. (그러나 나는 그 시점에서 IE에서 이것을 테스트하지 않았다.)

필자가 실제 주입하는 문자열이 (매우 간단한) 예제보다 훨씬 크다는 것을 인정해야하지만 여전히 Chrome 및 FF에서 훌륭하게 수행됩니다. IE 만 고정!

누구에게 이것이 사실인지 실마리가 있습니까?

인사말 : 베를린에서! 그들은 매우 도움이를 werent 불구하고

아합

출처

2014-07-23 Ahab

Internet Explorer에 오신 것을 환영합니다. – sWW

IE 성능이 그다지 좋지 않다고 가정하면 ** 많은 요소를 생성해서는 안됩니다. 사용자가 모두 함께 읽을 수 없으므로 단계별로 페이지를 작성할 수 있습니다. 쪽수 매기기? 무한 스크롤? 최대까지 ... –

귀하의 질문에 확실하게 대답 할 수있는 것처럼 보이지 않습니다. 응답자는 최소한 IE의 내부 작업에 대해 잘 알고 있어야합니다. 그러한 회원이 커뮤니티에 존재하는지는 모르지만, 그렇다면 공개적으로 성능 문제를 브라우저에 기록 할 의향이 있는지 확신 할 수 없습니다. –

, 지금까지 빨리 답변 IE-

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset= "utf-8"> 
<title>dynamic list</title> 
<style> 
</style> 
<script> 
onload= function(){ 
    var start= new Date(); 
    var pa= document.querySelector('ul.mylist'), 
    timer= document.querySelector('h1'), 
    conc= []; 
    for(var i= 0; i<10000; i++){ 
     conc[i]= '<li title= "XYZ' + i+'">XYZ ' + i+'</li>'; 
    } 
    pa.innerHTML+= conc.join('\n'); 
    str= ' time: '+(new Date()-start)+' milliseconds' 
    timer.appendChild(document.createTextNode(str)); 
} 
</script> 

</head> 
<body> 
<h1>New list </h1> 
<ul class="mylist"> 
<li title="First list item">First list item</li> 
</ul> 
</body> 
</html> 

<!-- samples 

IE 11: 130msec 
Opera 22: 213 msec 
FFox 31: 50msec 
Chrome36: 125msec 

-->

출처

2014-07-23 15:21:15 kennebec

나는 솔루션을 발견하고, 나는 꽤 중요한 세부 사항을 은폐 인정해야합니다. – Ahab

덕분에 합리적으로 innerHTML을에 할당, 자신의 오버 헤드가 추가 jQuery를,있다 따로 설정 ...

하지만 나는 분명히 내 게시물에서 매우 중요한 세부 사항을 잊어 버렸다.

나중에 구문 분석 할 큰 JSON 문자열이 포함 된 SOAP 봉투에서 내 목록 콘텐츠 (많은 콘텐츠)를 얻고 있습니다.

그러나 XML SOAP 봉투의 구문 분석은 모든 것을 얼어 죽게하는 작업이었습니다!

$(data).find('json_content').text();

이전 작업이었습니다. 심지어 DOM에 내용을 붙여 넣기, 그것은을 연결 문자열을 구문 분석

var jsonString = 
data[0].documentElement. 
childNodes[0].childNodes[0].childNodes[0].firstChild.nodeValue;

이제 초 취는 '수동'XML 탐색을 할 때 지금은 JSON 문자열에 직접 액세스 할 수 있습니다. 크롬과 파이어 폭스보다 속도가 느리지 만, 지금은 (마침내!) 나는 초를 얘기하고있다. 아니. 의사록.

또한 testet innerHTML을 jQuery.append()와 비교했습니다.

innerHTML이 거의 빠릅니다. : P

Greetz from B!나는 (그것이 어떤 아이가 전에) 먼저 DOM에 래퍼를 삽입하는 것으로 나타났습니다

후손을 위해

출처

2014-07-25 10:50:36 Ahab

은 삼초

처음에 나는를 작성 하였다 복용에 페이지를 동결에서 그것을 가속화 문서 단편을 추가하고 적절하게 채워진 후에 추가하는 것이 가장 좋습니다. 분명히 IE 11은 단편에 1 만 명의 어린이가 포함되어 있으면 숨 막힐 것입니다.

출처

2017-06-23 20:00:06 CheapSteaks

IE11에서 큰 그룹의 요소를 매우 느리게 추가합니다.

답변

관련 문제