[Silverlight] Browser가 Silverlight를 읽고 실행하는 순서
2009. 10. 24. 02:28ㆍWEB/Silverlight
Browser는 Silverlight를 언제, 어떻게 다운로드하고 실행할까요? HTML을 구성하는 모든 DOM요소가 Parsing되고 나서 Silverlight가 읽히는 걸까요? 만약 Silverlight를 Initialize하는 정보를 HTML페이지에 둬야 한다면 언제 어디에 둬야 할까요?
이 모든 궁금증을 해결하기 위해 실험을 진행하였으며, 그 페이지 구조와 소스 코드는 다음과 같습니다.
페이지 구조
HTML Page
Head Area
Body Area
HTML Code Or Resource
Silverlight Area
App
Other Page
Html Code Or Resource
소스 코드
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<!-- Check Read Head Area -->
<script> alert("HTML : Load Header"); </script>
<title>Silverlight Test</title>
<script type="text/javascript" src="Silverlight.js"></script>
</head>
<body>
<form id="frm" runat="server" style="height:100%">
<!-- Check Read Pre Silverlight Resource -->
<script> alert("HTML : Before Load Image1"); </script>
<img src="Images/whale.jpg" style="width: 100px; height: 100px;" />
<script> alert("HTML : After Load Image1"); </script>
<!-- Check Read Silverlight Resource -->
<div id="silverlightControlHost" style="height: 300px; width: 100%;">
<script> alert("HTML : Before silverlight object"); </script>
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2">
<param name="source" value="ClientBin/Test.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="3.0.40624.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object>
<script> alert("HTML :After silverlight object 1"); </script>
<iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
</div>
<!-- Check Read Resource After Silverlight -->
<script> alert("HTML : Before Load Image2"); </script>
<img src="Images/whale.jpg" style="width: 100px; height: 100px;" />
<script> alert("HTML : After Load Image2"); </script>
</form>
</body>
</html>
HTML 페이지의 각 주요 부분에 Alert Message를 나타내는 코드를 삽입함으로써 순서를 확인합니다. Test.xap라는 Silverlight 개체 내부에도 주요 이벤트와 생성자에 MessageBox.Show()를 두었습니다.
출력된 Message를 그대로 나열하면 다음과 같습니다. 이는 FF3, IE8에서 실행한 출력결과 값입니다.
- HTML : Load Header
- HTML : Before Load Image1
- HTML : After Load Image2
//여기까지는 단순합니다. 순차적으로 HTML코드를 실행합니다. 다만 Image와 같은 외부 Resource를 만나면 이 때부터 다운로드가 시작됩니다. - HTML : Before silverlight object
- Silverlight : App 생성자 실행
- Silverlight : InitializeComponent 실행
- Silverlight : App Xaml 로드
- Silverlight : App 생성자 종료
- Silverlight : App StartUp Event 실행
- Silverlight : this.RootVisual 실행
- Silverlight : RootVisual 개체 생성자 실행
- SIlverlight : App StartUp Event 종료
//xap파일이 다운로드 되고, Silverlight.js에 의해서 Silverlight Plugin으로 읽혀지게 됩니다. 또한 한가지 주목할 점은 Silverlight가 읽혀지고 내부적으로 모든 초기화가 끝나야 Silverlight 다음의 HTML문의 해석이 시작된다는 점입니다. - HTML :After silverlight object 1
- HTML : Before Load Image2
- HTML : After Load Image2
위의 결과를 종합적으로 판단해보면 다음과 같은 몇 가지 결론이 도출됩니다.
- 브라우저는 HTML페이지만을 먼저 다운로드하며, 각 HTML코드를 해석하고 HTML Code가 가리키는 자원들을 다운로드 및 로드 합니다.
- Silverlight 개체가 초기화 될 때 외부의 자원을 참조하려면, 해당 외부 자원이 Silverlight 개체 보다 먼저 초기화 될 수 있도록 해당 Silverlight 개체 보다 위쪽에 기술해야 합니다.
- Silverlight 개체의 초기화가 모두 완료된 후에 Silverlight 개체 다음 HTML 코드 해석을 시작합니다.
다음에는 서버에서 출력한 Cookie나 각 인증서 또는 암호화 자원 등이 어느 시점에 어디에서 초기화되고 관리되는지 파악해야겠네요.
'WEB > Silverlight' 카테고리의 다른 글
| [Silverlight] Textbox 돋보기 기능 Behavior (0) | 2009.11.06 |
|---|---|
| [Silverlight] Font Family 변경하기 (0) | 2009.11.06 |
| [Silverlght] XML파일 읽기 (0) | 2009.10.25 |
| [Silverlight] PagedCollectionView를 사용한 리스트 그룹 표시 (0) | 2009.10.19 |
| [Silverlight] Silverlight 시작 시 실행 순서 (0) | 2009.10.18 |