IE / EDGE 의 개발자도구 에서 innerHTML 속도 저하.

서론

라온을 작업하던 도중, IE / EDGE 에서 조금이라도 많은량(1만자) 정도만 되더라도 innerHTML 속도가 지나치게 느려지는 현상을 발견했습니다. 고속으로 작동해야하는 기능을 만드는게 목표였기 때문에 속도가 문제였고.. 심지어 30초 이상의 로딩을 보여주며… 궁극의!? 속도를 자랑합니다….

여러가지 고민을하다가 Document.createDocumentFragment 로 처리를 했습니다. https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment - 자세한문서 Fragment를 사용하면 50~100 배정도의 속도 항상이 있습니다.

아.. 이제 된건가!! 하면서 마무리 테스트를 하던 도중.. 우연히 개발자 도구를 닫아보니… createDocumentFragment 를 쓰지않더라도 속도는 같습니다.(차이가 무시할정도입니다.) 예를들어 30초 넘게 걸리는 innerHTML이 0.2초이내 처리됩니다…….

제가 실험한결과 IE / Edge 전버전에서 모두 나타나는 현상입니다.

결론!!! 갑자기 결론인건 기분탓입니다.!!

IE / EDGE 에서 속도에 관련한 테스트할때에는 console.log를 대신할걸 하나 만들어두고 개발자 도구를 닫고 테스트 하셔야 실제와 근접한 속도가 나옵니다. (IE / 에지) 에서 개발자 도구를 열면 속도저하가 있는것은 알고있었지만.. 이정도로 심할줄은 몰랐습니다.

추신

혹시나 같은 문제를 겪다가 구글링하시게 되면 이문서를 보고 개발자 도구를 닫아주세요.!! (뭔가… 글에서도 피곤함이 느껴집니다…. ㅠㅠ) 2일이나 걸려서 거의다 만들었다! 이제 라온도 미들버전을 올릴때가 됬구나… 하하하(기쁨++) -> 크로스 브라우징 테스트좀해볼까(기대++) -> 속도가 왜이래!!(피로++) -> 다고쳤다… 휴…..(피로++, 찜찜함++) -> 헐… 이게뭐야 개발자도구 끄니깐 속도가 같아… 하하하하하ㅏ하ㅏㅎ(피로++)