| 研究生: |
張君豪 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 Chrome 、Javascript 、非同步執行 |
| 外文關鍵詞: | 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.
[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.