[온라인 쇼핑몰 속도 최적화] document.write()를 피하세요.

 

목차

 

💡 document.write()의 개요

💡 document.write()는 기본개념

💡 document.write()를 사용하면 페이지 성능에 어떤 영향을 줍니까?

💡 이 감사를 수정하는 방법은 무엇입니까?

 

---

 

 

💡 document.write()의 개요

document.write()는 JavaScript에서 사용되는 명령어로, 웹 페이지에 동적으로 내용을 추가할 때 사용됩니다. 그러나 이 명령어는 웹 페이지의 성능과 안정성에 부정적인 영향을 미칠 수 있습니다. 
문제는 document.write()를 사용하면 웹 페이지가 로드되는 동안 페이지의 구조를 변경하거나 덮어쓸 수 있기 때문입니다. 이로 인해 웹 페이지가 예기치 않게 깨지거나 다운로드 시간이 늘어날 수 있습니다.
대신에, 웹 개발자들은 innerHTML 또는 createElement()과 같은 다른 방법을 사용하여 동적으로 내용을 추가하는 것을 권장합니다. 이렇게 하면 웹 페이지가 더 빨리 로드되고 예상대로 작동합니다.

 

특히, 브라우저는 다음 조건들이 모두 충족될 때 document.write()를 통해 삽입된 <script>를 실행하지 않습니다.

● 사용자가 상대적으로 느린 네트워크(예: 2G/3G 또는 느린 Wi-Fi)에 있는 경우
● <script>렌더링 차단인 경우
● <script>타사 스크립트인 경우
● 브라우저가 <script>를 캐시하지 않은 경우
● document.write()최상위 문서에 있는 경우
● 페이지에 대한 요청이 새로고침이 아닌 경우

 

하지만, 이러한 조건들이 모두 충족되지 않으면 브라우저가 document.write()를 실행할 수 있으며, 이는 특히 제3자 스크립트와 관련된 경우 페이지 로드 시간을 크게 증가시킬 수 있습니다.

 

 

---

 

💡 document.write()는 기본개념

 

document.write()는 HTML 문서에 동적으로 텍스트나 HTML 코드를 추가하는 데 사용됩니다. 예를 들어, 다음과 같은 코드를 작성하여 페이지의 특정 위치에 텍스트를 추가할 수 있습니다.

document.write("Hello, world!");

 

그러나 document.write()는 웹 페이지의 로딩 시간을 느리게 만들 수 있습니다. 이는 document.write()가 페이지가 완전히 로드되기 전에 실행될 경우에 발생할 수 있습니다.
　

 

---

 

💡 document.write()를 사용하면 페이지 성능에 어떤 영향을 줍니까?

document.write()는 JavaScript 함수 중 하나로, 웹 페이지가 로드되는 동안 콘텐츠를 동적으로 추가합니다. 그러나 이 기능을 사용할 때 다음과 같은 문제가 발생할 수 있습니다.

1. 렌더링 지연
document.write()를 사용하면 이미 웹 페이지가 로딩 중일 때 콘텐츠를 추가하려고 할 수 있습니다. 이로 인해 페이지가 느리게 로딩되며 사용자가 기다려야 할 수 있습니다.
2. 스크립트 실행 문제
document.write()는 스크립트를 중간에 삽입할 수 있기 때문에 다른 스크립트와 충돌할 가능성이 있습니다. 이로 인해 웹 페이지가 예기치 않게 동작하지 않을 수 있습니다.
3. 성능 감소
document.write()를 사용하면 브라우저가 페이지를 다시 렌더링해야 할 수 있습니다. 이는 페이지의 성능을 떨어뜨릴 수 있으며, 사용자 경험을 저하시킬 수 있습니다.

따라서 document.write()는 일반적으로 웹 개발에서 피해야 할 기능 중 하나입니다. 

대신에 DOM 조작 및 다른 JavaScript 기술을 사용하여 페이지를 동적으로 업데이트하고 콘텐츠를 추가하는 것이 더 좋은 방법입니다.
이렇게 하면 페이지 성능이 향상되고 예기치 않은 문제를 방지할 수 있습니다. 이 감사를 최적화하면 웹사이트의 성능이 크게 향상되고 방문자의 페이지 경험이 향상될 수 있습니다.
　

 

---

 

💡 이 감사를 수정하는 방법은 무엇입니까?

1. innerHTML 사용
document.write() 대신 HTMLElement의 innerHTML 속성을 사용하세요. innerHTML은 해당 요소의 내용을 동적으로 변경할 수 있습니다.
예를 들어, 웹 페이지의 특정 요소에 텍스트를 추가하려면 다음과 같이 작성합니다.

2. createElement와 appendChild 사용
원하는 요소를 동적으로 생성하고 추가할 때 document.write() 대신 createElement()와 appendChild() 메서드를 사용하세요.
예를 들어, 새로운 <div> 요소를 생성하고 페이지에 추가하려면 다음과 같이 작성합니다.

3. 템플릿 리터럴 (Template Literals) 사용
ES6의 템플릿 리터럴을 사용하여 동적으로 HTML 코드를 생성할 수 있습니다.
예를 들어, 다음과 같이 템플릿 리터럴을 사용하여 HTML 코드를 생성할 수 있습니다.

 

이러한 방법을 사용하면 document.write()를 대체하고 동적으로 콘텐츠를 추가할 수 있습니다. 이것은 웹 페이지의 성능과 안정성을 향상시키고 예상치 못한 문제를 방지하는데 도움이 됩니다.
어떤 이유로든 document.write() 사용을 피할 수 없는 경우 <scripts>에 비동기 태그를 추가하여 스크립트의 비동기 로드를 활성화 하고 렌더링 차단 동작을 제거합니다.