자바 스크립트 : 내 HTML에 미리 환경을

Question

다양한 색상과 큰 텍스트의 삽입을 최적화, 그리고 자바 스크립트를 사용하고있어 여기에 큰 문자열을 삽입 :

이

$my_environment.innerHTML = my_large_text; 

문자열은 약 10 자입니다 . 문자열이 깔끔한 텍스트로만 구성되어 있으면 모든 것이 좋습니다. 내가 (그래서 1/3 정도) 문자의 많은 색상을 추가 할 때 그러나, 나는 눈에 띄는 지연, 동안 브라우저 창이있다

<span style="background-color:some-color;"></span> 

에 의해 각각의 편지를 포장하여 수행 -하고 파이어 폭스의 경우 브라우저 전체가 작동하지 않습니다.

사전 환경 자체는 크기가 제한되어 있으며 오버플로를 사용하므로 실제로 텍스트 변경 중에 실제로 그 중 일부만 칠해야합니다.

지연의 원인은 무엇이며이를 고칠 수있는 방법이 있습니까?

1. 나는 pre 대신에 다른 환경을 사용할 수도 있지만, 그렇지 않을 수도 있습니다.
2. 색상이 서로 일치하지 않습니다. 무작위로 배포 된 채색되어야하는 글자를 생각해보십시오.
3. 글자에 색상을 지정하는 대신, 스팬 환경에서 단순히 색상을 배치하는 대신 색상을 지정하는 것이 더 좋습니다.

Answer 1

최적화 단계 중 하나는 '스타일'태그 대신 '클래스'태그를 사용하는 것입니다. 사전 정의 된 CSS 클래스를 사용하는 경우 정확한 시나리오에 따라 렌더링 시간을 줄일 수 있습니다.

또 다른 방법은 단색으로 렌더링 된 모든 문자를 id가있는 범위 요소로 렌더링하는 것입니다. 그런 다음 Javascript를 사용하여 변경해야하는 문자를 색칠 할 수 있습니다.