• <ruby id="5koa6"></ruby>
    <ruby id="5koa6"><option id="5koa6"><thead id="5koa6"></thead></option></ruby>

    <progress id="5koa6"></progress>

  • <strong id="5koa6"></strong>
    • 軟件測試技術
    • 軟件測試博客
    • 軟件測試視頻
    • 開源軟件測試技術
    • 軟件測試論壇
    • 軟件測試沙龍
    • 軟件測試資料下載
    • 軟件測試雜志
    • 軟件測試人才招聘
      暫時沒有公告

    字號: | 推薦給好友 上一篇 | 下一篇

    瀏覽器對Script下載的非并行處理再說明

    發布: 2008-5-13 14:18 | 作者: 網絡轉載 | 來源: 網絡 | 查看: 114次 | 進入軟件測試論壇討論

    領測軟件測試網 我提到了“將Script放到HTML文件中盡量靠近尾部”的方法來提高用戶感覺上的響應時間,有朋友對這個問題提出了疑問,因此在這里更詳細的對該方法進行說明。
          首先,瀏覽器對于script的下載是避免并行進行的。HTTP/1.1協議中規定瀏覽器和同一host之間只建立最多兩個連接,也就是說允許的最大并行度為2(當然,對IE和Firefox來說,你都可以通過修改瀏覽器的設置來擴大這個并行度)。但對于Script的下載來說,瀏覽器在開始下載Script之后,是不會并行的下載其他element的。不會并行下載script這一點是一個事實,但瀏覽器為什么要采用這種策略,以及瀏覽器我們提到的“將Script放到HTML文件中盡量靠近尾部”到底能起到多大的作用,需要注意哪些事項,我希望在這篇文章中進一步的進行討論。

          為了討論方便,我準備了一個簡單的HTML文件:
    php?aid=3996" target="_blank">


          這個HTML文件include了兩個javascript文件,含有兩張圖片。兩個javascript文件內容分別如下:




          從代碼中看出,這個HTML文件很簡單,帶有兩張圖片和一個button,當button被click的時候,調用jsdownload_j2.js的OnB1Click()函數,而OnB1Click()函數是簡單的調用jsdownload_j1.js文件中的OnJ1B1Click()函數。

          我們來看看用IBM Page Detailer工具獲得的IE瀏覽器訪問該頁面時的頁面元素下載圖:


       從圖中可以看到,javascript的下載block了其他元素的下載,因此第一個可視元素(圖片)的下載完成是在1.33秒的時刻,也就是說,用戶等待1.33秒才能看到頁面上的第一幅圖片。而如果我們把HTML中的javascript的位置放到稍后的位置,例如,改成這樣:

           

    則得到的element下載圖如下:




            雖然總的下載時間比上一次稍長,但在0.72秒的時候,第一幅圖片就已經下載完成,此時用戶會看到頁面的主要部分,因此對用戶來說,頁面變“快”了。

            這是一個典型的利用瀏覽器下載Script時候的非并行特性優化頁面性能的方法。接下來,我們討論下為什么瀏覽器在下載Script的時候會采用非并行的方式。其實原因也不復雜:

            在我們的HTML文件中,有兩個Script,一個是jsdownload_j1.js,另一個是jsdownload_j2.js文件,如果允許瀏覽器并行下載這兩個script,則可能發生jsdownload_j2.js文件先于jsdownload_j1.js文件下載完成的情況。這時如果頁面上后續的一個javascript調用使用了jsdownload_j2.js文件中的函數,則此調用會立即發生(因為瀏覽器判斷到jsdownload_j2.js文件已經下載完成了),而如果此時jsdownload_j2.js文件中的該函數需要依賴于jsdownload_j1.js中的另一個函數,由于此時jsdownload_j1.js文件還未下載完成,則此調用會產生一個javascript error。為了避免這樣的情況,瀏覽器采用了嚴格按照HTML文件中定義的順序下載Script,并嚴格按照非并行方式下載的策略。

            最后一個需要討論的問題,就是這種提升頁面性能的方式有哪些需要注意的內容了。實際上,如同上面黑體字的討論,如果不分青紅皂白把Script文件全部放在HTML的最后部分,也是會出問題的。例如,在我們的例子中,Button的Click事件需要調用js文件中的某個函數,如果Script都被放到HTML文件的最后的話,button這個element會在script下載完成之前被render出來,如果此時用戶點擊了這個button,就一定會出現一個Script error。關于這個問題,有兩個解決方法:
    1,將Script放在合適的,盡量靠近尾部的地方,由開發人員保證不會出現這樣的問題;
    2,為所有的js文件中需要被調用的函數,在HTML中實現一個空函數(放在靠前的位置),這樣當頁面需要的js文件沒有download完成時,用戶點擊按鈕等操作之后出發一個空函數,避免了Script Error(當然,可能會confuse用戶);而等js文件download完成后,這些function會被override,用戶的操作能夠得到正確的解決


    延伸閱讀

    文章來源于領測軟件測試網 http://www.kjueaiud.com/

    TAG: 瀏覽器 性能測試


    關于領測軟件測試網 | 領測軟件測試網合作伙伴 | 廣告服務 | 投稿指南 | 聯系我們 | 網站地圖 | 友情鏈接
    版權所有(C) 2003-2010 TestAge(領測軟件測試網)|領測國際科技(北京)有限公司|軟件測試工程師培訓網 All Rights Reserved
    北京市海淀區中關村南大街9號北京理工科技大廈1402室 京ICP備10010545號-5
    技術支持和業務聯系:info@testage.com.cn 電話:010-51297073

    軟件測試 | 領測國際ISTQBISTQB官網TMMiTMMi認證國際軟件測試工程師認證領測軟件測試網

    老湿亚洲永久精品ww47香蕉图片_日韩欧美中文字幕北美法律_国产AV永久无码天堂影院_久久婷婷综合色丁香五月

  • <ruby id="5koa6"></ruby>
    <ruby id="5koa6"><option id="5koa6"><thead id="5koa6"></thead></option></ruby>

    <progress id="5koa6"></progress>

  • <strong id="5koa6"></strong>