簡易檢索 / 詳目顯示

研究生: 張君豪
Chang, Chun-Hao
論文名稱: 瀏覽器之Javascript非同步執行機制的研製與改進-以Chrome瀏覽器為例
Study and Improvement of Browser’s Javascript Asynchronous Execution Mechanisms – A Case Study by Google Chrome
指導教授: 王宗一
Wang, Tzone-I
學位類別: 碩士
Master
系所名稱: 工學院 - 工程科學系碩士在職專班
Department of Engineering Science (on the job class)
論文出版年: 2017
畢業學年度: 105
語文別: 中文
論文頁數: 54
中文關鍵詞: 瀏覽器Google ChromeJavascript非同步執行
外文關鍵詞: Browser, Google Chrome, Javascript, Asynchronous execution
相關次數: 點閱:106下載:11
分享至:
查詢本校圖書館目錄 查詢臺灣博碩士論文知識加值系統 勘誤回報
  • 隨著科技技術的進步,電腦的各種作業平台不斷地推陳出新,由於網頁的可跨平台之特性,人們可在各平台中使用同一種瀏覽器來閱讀資訊。一個能夠提供快速瀏覽及占用較少系統資源的瀏覽器往往能獲得使用者的青睞,因而現在的開發者皆以此為目標來進行改良瀏覽器。在眾多瀏覽器(例如:Chrome、Microsoft Edge、Safari、Firefox)中,因Chrome版本更新速度夠快,各種錯誤(bugs)才能迅速修復,對於網頁新的標準也能在短時間支援。然而之前較舊瀏覽器版本在解析HTML及執行Javascript上面臨一個問題,即解析HTML時無法同時執行Javascript或在執行Javascript時無法同時解析HTML所產生的等待問題。在現行支援HTML5標準的新瀏覽器環境中,針對Javascript的執行時機有了新的非同步執行模式,但是網站開發人員須重構舊網頁內HTML與Javascript程式碼,以求讓新瀏覽器能發揮最大效率。而缺乏維護的網站將無法受益於新的規範及瀏覽器。為了讓舊網頁內之Javascript能夠以非同步的方式在解析HTML時執行,此研究為瀏覽器設計了一個偵測Javascript程式碼的機制,當其程式碼中無包含須立即執行之關鍵程式碼時,則將此份Javascript程式碼以非同步機制執行,來提高網頁解析速度。
    本研究以Google Chrome之開放原始碼專案Chromium 46.0.2490.86為基本,並加入此Javascript程式碼偵測機制,使所建立之瀏覽器能夠將原本須同步執行之Javascript程式碼以非同步方式執行。實驗結果顯示本研究所設計建造之偵測機制在執行時能有效縮短瀏覽網頁時的等待時間。

    As technology advances, more and more operating platforms launch, so as the browsers for reading website pages. Owing to cross-platform features of websites people tend to use a same web browser to read information from the same website. Therefore, a browser that can render webpages fast and use less system resources would become more popular. Many developers try to improvement their browsers to achieve this goal. Among many browsers, such as Chrome, Microsoft Edge, Safari, Firefox, etc., the Chrome from Google upgrades fast enough to support new HTML specifications and repairs bugs in a shortest possible time, which earns a major popularity. Older browsers have a problem in rendering webpages; they cannot parse a HTML page and execute Javascript codes in it asynchronously, i.e. when parsing the HTML page the executions of its Javascript codes must wait, and vice versa, because the execution main-thread can only perform one of the two at the same time. Web pages in a website are designed accordingly. The new HTML5 specification now supports a new asynchronous execution mode for the Javascript codes in webpages to enhance the performance of browsers, but that requires a restructuring of old webpages to comply with the HTML5, a big burden to the administrators of big websites. To release such burdens for older websites and make HTML pages parse and Javascript codes in it execute asynchronously when possible, this study designs a mechanism that identifies Javascript codes when parsing HTML pages, checks if they contain no key codes to be executed immediately, and, if so, moves the codes to sub-threads for execution while the main-thread continue parsing HTML pages asynchronously. Experiments show that the mechanism does increase the speed of rendering the older webpages.

    中文摘要 I Extended Abstract II 致謝 XI 目錄 XII 表目錄 XIV 圖目錄 XV 第一章 緒論 1 1.1 研究背景與動機 1 1.2 研究目的 2 1.3 論文架構 3 1.4 研究貢獻 4 第二章 文獻探討 5 2.1 Script標籤使用與執行方式分析 5 2.2 網頁瀏覽器 6 2.3 渲染引擎概述 9 2.4 Chromium概述 12 2.4.1 Chromium模組 12 2.4.2 Multi-process機制 13 2.5 Javascript概述 15 第三章 研究方法 17 3.1 系統設計 17 3.2 系統架構 19 3.3 系統流程 20 第四章 系統實作 23 4.1 開發環境介紹 23 4.2 Chromium 46.0.2490.86之HTML解析及執行架構 24 4.2.1 HTML解析架構 24 4.2.2 PreLoad架構 27 4.2.3 Javascript執行架構 29 4.3 程式碼修改說明 33 4.3.1 函式新增 33 4.3.2 流程修改 35 第五章 彙總與結果 39 5.1 實驗設計 39 5.2 實驗結果分析 40 第六章 結論與建議 45 6.1 結論 45 6.2 建議 47 參考文獻 48 附錄 51

    [1] Friedl, J.E.F.(2012),精通正規表達式(第三版),台灣: 歐萊禮.
    [2] Souders, S.(2013),高效能網站建置指南,台灣: 歐萊禮.
    [3] 左昌國(2009),「一種在瀏覽器端偵測並阻擋網頁惡意程式的解決方案」,國立中央大學資訊工程研究所碩士論文.
    [4] 理解WebKit和Chromium, http://blog.csdn.net/milado_nju/article/details/7216067.
    [5] 朱永盛(2014),WebKit技術內幕,大陸: 電子工業出版社.
    [6] 吳政霖(2009),「在可攜式多媒體裝置上實作人性化的嵌入式小螢幕網頁瀏覽器」,國立中央大學資訊工程研究所碩士論文.
    [7] 張孟洋(2007),「瀏覽器網頁內容搜集之實作設計」,元智大學資訊管理學系碩士論文.
    [8] 詹人杰(2010),「瀏覽器惡意擴充套件行為分析平台之研究」,國立成功大學電腦與通信工程研究所碩士論文.
    [9] Asynchronous and deferred JavaScript execution explained, http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/.
    [10] Navigation Timing, https://www.w3.org/TR/navigation-timing/.
    [11] Abstract syntax tree, https://en.wikipedia.org/wiki/Abstract_syntax_tree.
    [12] Blink, https://en.wikipedia.org/wiki/Blink_(web_engine).
    [13] Chromium, https://www.chromium.org/Home.
    [14] Esprima, http://esprima.org/.
    [15] Standard ECMA-262 ECMAScript® 2016 Language Specification 7th edition (June 2016), https://www.ecma-international.org/publications/standards/Ecma-262.htm.
    [16] HTML Tag, https://www.w3schools.com/tags/default.asp.
    [17] JavaScript, https://zh.wikipedia.org/wiki/JavaScript.
    [18] Parsing, https://en.wikipedia.org/wiki/Parsing.
    [19] How WebKit Works? , https://docs.google.com/presentation/d/1ZRIQbUKw9Tf077odCh66OrrwRIVNLvI_nhLm2Gi__F0/pub?slide=id.p.
    [20] Faster Websites: Crash Course on Web Performance, https://www.igvita.com/2013/01/15/faster-websites-crash-course-on-web-performance/.
    [21] Measuring the Critical Rendering Path, https://developers.google.com/web/fundamentals/performance/critical-rendering-path/measure-crp.
    [22] WebKit for Developers, http://www.paulirish.com/2013/webkit-for-developers/.
    [23] Google I/O 2014 - Mobile Web performance auditing https://www.youtube.com/watch?v=WrA85a4ZIaM.
    [24] How Browsers Work: Behind the scenes of modern web browsers, http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/.
    [25] Firing up the Ignition Interpreter, https://v8project.blogspot.tw/2016/08/firing-up-ignition-interpreter.html.
    [26] Zhen Wang, F.X.L., Lin Zhong, Mansoor Chishtie(2012), "How far can client-only solutions go for mobile browser speed?", Proceedings of the 21st international conference on World Wide Web, 31-40.

    下載圖示 校內:立即公開
    校外:立即公開
    QR CODE