[Silverlight] Browser가 Silverlight를 읽고 실행하는 순서

2009. 10. 24. 02:28WEB/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에서 실행한 출력결과 값입니다.

  1. HTML : Load Header
  2. HTML : Before Load Image1
  3. HTML : After Load Image2
    //여기까지는 단순합니다. 순차적으로 HTML코드를 실행합니다. 다만 Image와 같은 외부 Resource를 만나면 이 때부터 다운로드가 시작됩니다.
  4. HTML : Before silverlight object
  5. Silverlight : App 생성자 실행
  6. Silverlight : InitializeComponent 실행
  7. Silverlight : App Xaml 로드
  8. Silverlight : App 생성자 종료
  9. Silverlight : App StartUp Event 실행
  10. Silverlight : this.RootVisual 실행
  11. Silverlight : RootVisual 개체 생성자 실행
  12. SIlverlight : App StartUp Event 종료
    //xap파일이 다운로드 되고, Silverlight.js에 의해서 Silverlight Plugin으로 읽혀지게 됩니다. 또한 한가지 주목할 점은 Silverlight가 읽혀지고 내부적으로 모든 초기화가 끝나야 Silverlight 다음의 HTML문의 해석이 시작된다는 점입니다.
  13. HTML :After silverlight object 1
  14. HTML : Before Load Image2
  15. HTML : After Load Image2

위의 결과를 종합적으로 판단해보면 다음과 같은 몇 가지 결론이 도출됩니다.

  1. 브라우저는 HTML페이지만을 먼저 다운로드하며, 각 HTML코드를 해석하고 HTML Code가 가리키는 자원들을 다운로드 및 로드 합니다.
  2. Silverlight 개체가 초기화 될 때 외부의 자원을 참조하려면, 해당 외부 자원이 Silverlight 개체 보다 먼저 초기화 될 수 있도록 해당 Silverlight 개체 보다 위쪽에 기술해야 합니다.
  3. Silverlight 개체의 초기화가 모두 완료된 후에 Silverlight 개체 다음 HTML 코드 해석을 시작합니다.

다음에는 서버에서 출력한 Cookie나 각 인증서 또는 암호화 자원 등이 어느 시점에 어디에서 초기화되고 관리되는지 파악해야겠네요.