브라우저가 HTML 요소를 렌더링하려고 시도하기 전에 HTML 요소를 스크램블합니다. 이것은 "document.write"에 대한 드문 유효한 사용 사례입니까?

Question

내 웹페이지에는 반복되는 배경 이미지가 있는 헤더 영역이 있습니다.

해상도가 약간 높고 스크롤 없이 볼 수 있는 부분 위에 있으므로 브라우저가 첫 번째 이미지 이외의 이미지 로드를 시작하지 않기를 바랍니다.

하지만 이미지의 순서도 무작위로 지정하고 싶습니다.

문제는 제가 정적 웹 호스트(Netlify)를 사용하고 있다는 것입니다.

내가 고려한 몇 가지 접근 방식은 다음과 같습니다.

• 평소처럼 요소를 문서에 넣은 다음 Javascript를 사용하여 요소를 쿼리하고 순서를 무작위로 지정합니다. 브라우저가 HTML에 도착하는 첫 번째 이미지를 로드하기 시작한 다음 무작위로 다른 위치로 이동하기 때문에 꺼려집니다. 나는 이런 상황을 피하고 싶다.
• 무작위화를 위해 일부 서버 코드를 사용하세요. 하지만 저는 이 기능만을 위해 서버를 운영하고 싶지 않습니다.
• 가능한 각 조합 또는 최소한 몇 가지 조합을 별도의 HTML 파일로 작성하고 엣지 기능에서 URL 재작성을 통해 무작위화합니다. 조금 지저분해 보입니다. 필요하지 않은 경우 엣지 기능을 사용하고 싶지 않습니다. 이는 걱정할 또 다른 할당량일 뿐이기 때문입니다.
• 페이지 응답을 가로채서 변경하는 로직을 Edge 함수에 작성하세요. 코드 자체는 더 복잡해지지만 제공된 파일은 덜 복잡해집니다. Edge 기능 실행에 대한 동일한 혐오감과 결합됩니다.

내가 원하는 것은 JS 코드를 실행하고, 짧은 로직을 실행하고, 브라우저가 전체 HTML 응답을 보기 전에 스트림에 마크업을 추가하는 것입니다. 그런 다음 JS를 끄는 사람들과 JS 실행을 원하지 않는 검색 엔진을 위해

제가 보기엔 그게 바로 document.write 하는 일이죠, 그렇죠?

모든 출처에서는 전염병 document.write처럼 피하라고 말합니다. 하지만 이것이 드물고 유효한 사용 사례인지 궁금합니다.

으아아아

이거 나쁜 생각인가요? 왜? 내 소원을 성취할 수 있는 더 좋은 방법이 있나요?

Answer 1

그래, 그건 좋은 생각이 아니야. 이 방법은 매우 오래되었으며 브라우저마다 특정 동작이 다를 수 있습니다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/API/Document/write를 참조하세요.

다음과 같은 현대적인 방법을 사용하세요:

• https://developer.mozilla.org/en -US/docs/Web/API/Node/cloneNode
• https://developer.mozilla.org/en -US/docs/Web/API/Node/appendChild
• https://developer.mozilla.org/en -US/docs/Web/API/Node/removeChild
• https://developer.mozilla.org/en -US/docs/Web/API/Node/replaceChild

잠깐. 렌더러/브라우저에 안전하므로 요소를 무작위로 배열합니다.

귀하의 특정 사용 사례에 대한 제안: 원하는 방식으로 작동하려면 브라우저가 먼저 JavaScript를 로드해야 하지만 그렇지 않을 수도 있습니다. 이미지는 원래 HTML 소스에 나타난 순서대로 계속 로드될 수 있습니다. 가능하다면 이 논리를 서버로 옮기는 것이 좋습니다. 결국 어떤 자바스크립트도 귀하의 사용 사례에 맞지 않을 수 있습니다. 문서 자체에 이미지를 포함하지 않고 JS(임의 로드 시)를 통해 이미지를 추가하는 것이 가능할 수도 있는데, 이것이 제가 선호하는 접근 방식입니다.