# JavaScript에서 문자열 성능과 메모리 효율성을 최적화하는 방법
JavaScript에서는 StringBuilder와 같은 전용 클래스는 없지만, 성능과 메모리 효율성을 향상시키는 방법이 있습니다.
1. 성능 개선
문자열을 자주 수정하거나 연결해야 할 때, 기존 문자열을 매번 복사하고 새로운 객체를 생성하는 것은 성능에 부담이 됩니다. 이 문제는 배열에 각 문자열을 저장한 후, join 메서드를 사용해 최종 문자열을 생성하는 방식으로 해결할 수 있습니다. 이를 통해 불필요한 메모리 할당을 줄이고, CPU 리소스를 절약할 수 있습니다.
2. 메모리 효율성
C#이나 Java의 StringBuilder처럼, JavaScript에서도 메모리 효율성을 고려해야 합니다. 문자열 조작이 많을 경우, 배열을 사용해 부분 문자열을 저장하고, 마지막에 join을 사용해 결합하는 방식은 메모리 사용량을 최적화하는 데 유리합니다.
이 방법을 통해 JavaScript에서도 성능과 메모리를 효율적으로 관리할 수 있습니다.
위와 같은 내용이지만.
C# 을 기준으로 문자열 += 과 StringBuilder 로 작성된 문자 객체(char[]) 를 탐색했을 때 성능차이가 상당히 많이 났었으며
장문의 문자열 일수록 그 속도의 체감은 심했던 것으로 기억함
- 문자열 연결에 대한 성능에 관련하여 참고할 만한 포스트 :
https://www.freecodecamp.org/news/efficient-string-building-in-javascript/
# 코드 샘플
1. 문자열 더하기
- 문자열 + 가 적을 경우에는 이 방법이 간단해서 좋을 수 있음
- 요즘 PC들이 좋아서 성능을 깊게 생각 안하는 경향이 있지만.. 객체가 생성되고 버려지고의 반복
- 우선 코드가 어질어질함
var url = 'http://www.dog.food'
var querySting = '?&food1=' + '깡통사료' + '&food2=' + '개밥그릇' + '&food3=' + '통조림' + '&food4=' + '로얄캐닌';
var pathQuery = url + querySting;
2. StringBuider 를 흉내낸 배열
- StringBuilder 가 없는 자바스크립트에서 대체 사용 방법
var html = [];
html.push("http://www.dog.food",
"?&food=" ,
"깡통사료" ,
"&food2=" ,
"개밥그릇" ,
"&food3=" ,
"통조림" ,
"&food4=" ,
"로얄캐닌");
alert(html.join(""));
3. 위 2번 String을 메소드화
- 이렇게 해두면 단순히 c#이나 java 같아서 가독성이 좋다.
- 공통 JS 파일에 넣어두고 쓰기 좋음
- 구글검색에서 긁어온 건데..
- https://www.codeproject.com/Articles/12375/JavaScript-StringBuilder
- 아래 코드를 jsfiddle 의 html 영역에 복사하고 run 버튼을 클릭하여 테스트 할 수 있습니다.
https://jsfiddle.net/
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
// [시작] 공용함수로 빼둔다
function StringBuilder(value) {
this.strings = new Array();
this.append(value);
}
StringBuilder.prototype.append = function (value) {
if (value) {
this.strings.push(value);
}
}
StringBuilder.prototype.clear = function () {
this.strings.length = 0;
}
StringBuilder.prototype.toString = function () {
return this.strings.join("");
}
// [종료] 공용함수로 빼둔다
$(function() {
// 실행예시
var sb = new StringBuilder();
sb.append("http://www.dog.food");
sb.append("?&food=");
sb.append("깡통사료");
sb.append("&food2=");
sb.append("개밥그릇");
sb.append("&food3=");
sb.append("통조림");
sb.append("&food4=");
sb.append("로얄캐닌");
alert(sb.toString());
});
</script>
</head>
<body></body>
</html>
'Web > JS & jQuery' 카테고리의 다른 글
| 유효성 검사 (1) | 2024.09.03 |
|---|---|
| jQuery-Confirm 플러그인 (1) | 2024.09.01 |
| String.Format, String.IsNullOrEmpty, String.IsNullOrWhiteSpace (0) | 2024.08.30 |
| FAKE Ajax JSON 데이터가 필요할 때 jsonplaceholder (0) | 2024.08.30 |
| jQuery Templates plugin (1) | 2024.08.29 |