[Silverlight] Browser에서 Silverlight를 실행하기까지의 과정

by thankee 2009. 10. 24. 02:22

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나 각 인증서 또는 암호화 자원 등이 어느 시점에 어디에서 초기화되고 관리되는지 파악해야겠네요.