2018. 10. 3. 23:34ㆍ기술공부
iframe
[https://jsfiddle.net/BDC9Q/328/]
Inline Frame의 약자로 웹 문서 HTML 안에 Inline Frame을 만들고 다른 웹 문서나 사이트를 삽입할 수 있는 요소입니다.
HTML5에서 허용되는 HTML 4.0 Transitional 에서 표준화 된 기술로 1997 년 Microsoft Internet Explorer에서 처음 소개되었습니다.
iframe은 object와 달리 다른 요소에 의해 정의 된 링크의 대상 프레임 일 수 있으며, 브라우저의 인라인 프레임을 지원하지 않으면 요소의 내용이 대체 텍스트로 사용됩니다.
|
1
2
3
4
5
6
7
8
9
|
<script>
var iframe = window.getElementsByTagName( "iframe" )[ 0 ];
alert( "Frame title: " + iframe.contentWindow.title );
</script>
<iframe src="page.html" width="300" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
|
cs |
Shadow DOM
[https://jsfiddle.net/jspatel/rwqsf7sk]
Shadow DOM은 웹 컴포넌트 내에 존재하는 JavaScript, CSS, 템플릿 코드를 캡슐화 시킬 수 있는 기능을 가지고 있습니다.
Shadow DOM 덕분에 이 코드들을 메인 문서의 DOM에서 분리할 수 있고, 웹 컴포넌트와 무관하게 Shadow DOM 만 따로 사용할 수도 있습니다.
왜 코드의 특정 부분을 따로 떼어 관리하고자 할까요? 한 가지 예를 들어보자면, 여러분이 큰 규모의 사이트를 관리하는 입장이라고 해봅시다. CSS를 신경써서 관리하지 않으면, 사이트 네비게이션에 들어가는 스타일이 예기치 못하게도 메인 콘텐츠 영역으로 흘러 들어갈 수 있습니다. 물론 그 반대의 경우도 일어날 수 있겠죠. 사이트나 앱의 규모가 커지면 커질수록 이러한 상황은 예방하기가 어려워지기 때문입니다.
Shadow DOM은 이미 존재하는 요소에 붙어야만 합니다. 이러한 요소는 문자 그대로 HTML 파일 내에 요소이거나, 스크립트 언어에 의해 DOM에 추가된 요소일 수 있습니다. 또한 <div> 나 <p> 같은 원주(原住, native) 요소일 수도 있고, <my-element> 같은 사용자 정의(custom) 요소일 수도 있습니다. 다음 예제에서 볼 수 있듯이, Element.createShadowRoot()라는 구문을 사용하여 Shadow DOM을 붙입니다.
|
1
2
3
4
5
6
7
8
9
10
|
<html>
<head></head>
<body>
<p id="hostElement"></p>
<script>
// 위에 등장하는 <p> 요소에 Shadow DOM을 붙입니다.
var shadow = document.querySelector('#hostElement').createShadowRoot();
</script>
</body>
</html>
|
cs |
위 예시는 아직 콘텐츠도 가지고 있지 않은 <p> 요소에 Shadow DOM을 붙이는 코드입니다. 아직 화면에는 아무것도 표시되지 않습니다. 위의 예시 코드에 다음과 같은 코드를 덧붙인다면, Shadow DOM 안에 텍스트를 추가할 수 있습니다. 추가된 텍스트는 브라우저에 표시될 것입니다.
|
1
|
shadow.innerHTML = '<p>새로운 내용을 추가하였습니다.</p>';
|
-
http 요청이 한차례 더 일어난다.
-
별도의 페이지이기 때문에, 소비되는 리소스도 높고 느리다.
-
iframe의 주소가 같은 도메인이 아닌 경우 접근 불가능하다.
Virtual DOM
[https://jsfiddle.net/reactjs/69z2wepo/]
가상 DOM은 실제 DOM의 메모리 내 표현입니다. React 및 Vue와 같은 인기있는 UI 라이브러리는 "diffing"프로세스를 기반으로 UI 구성 요소를보다 효율적으로 다시 렌더링 할 수 있도록 가상 DOM을 구현합니다. 가상 DOM과 실제 DOM 사이의 변경을 비교함으로써 렌더링 엔진은 실제로 업데이트해야 할 대상을보다 효율적으로 결정할 수 있습니다. 이렇게하면 변경된 요소 만 다시 그려지므로 DOM 노드를 불필요하게 다시 그릴 필요가 없습니다. 가상 DOM이 없으면 모든 요소가 변경되었는지 여부에 관계없이 모든 요소가 다시 그려집니다. 이것은 요소를 다시 그리는 것이 값 비싼 프로세스이기 때문에 DOM 조작에 엄청난 성능 향상을 추가합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<div id="container">
This element's contents will be replaced with your component.
</div>
<script>
class Hello extends React.Component {
render() {
return <div>Hello </div>;
}
}
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
</script>
|
cs |
가상 DOM의 구현은 다양하지만 전반적인 개념은 동일합니다. 요소가 렌더링되면 가상 DOM이 먼저 업데이트됩니다. 두 버전의 DOM을 업데이트하는 데 많은 비용이 들지만 가상 DOM이 페이지에서 실제로 다시 그리기를하지 않기 때문에보다 효율적입니다. 가상 DOM은 본질적으로 메모리 내 JavaScript 객체이기 때문에 실제 DOM에서 요소를 다시 렌더링하는 것만 큼 계산에 많은 비용이 들지 않습니다.
가상 DOM을 업데이트 한 후 "diffing"이라는 프로세스를 통해 실제 DOM과 비교합니다. 이 프로세스를 통해 렌더링 엔진은 실제로 변경된 내용을보다 정확하게 판별하고 UI에서 다시 그려지는 요소의 수를 최소화합니다. "diffing"프로세스가 완료되면 실제 DOM이 필요한 업데이트를 수행하고 변경된 요소를 다시 렌더링합니다.
Shadow DOM 과 Virtual DOM의 차이점
Shadow DOM과 Virtual DOM은 별도의 DOM Instance를 만드는 것과 유사하지만 근본적으로 다릅니다.
Virtual DOM은 추가 DOM을 만들지만, Shadow DOM은 구현 세부 정보를 단순히 숨기고 웹 구성 요소에 대해 격리 된 범위를 제공합니다.
두 가지 모두 성능상의 이점을 추가하지만, Virtual DOM은 UI를 효율적으로 다시 그리는 데 사용되는 반면,
Shadow DOM은 사용자 정의 웹 구성 요소의 구현을 캡슐화합니다.