臺灣博碩士論文加值系統

近年來,隨著網際網路技術的發展,網站已經成為現代人生活中不可或缺 的,也隨著瀏覽器技術的進步,具備有更完善的支援性及相容性,使得網頁程式 開發逐漸從伺服器運算(Server Side)轉移到用戶端運算(Client Side),由傳統的 WebService、AJAX、Web 2.0、REST 等等開發技術成長到單一頁面應用程式(Single- page Application,SPAs),透過 AJAX 技術將網站大部分的運算在使用者端的瀏覽器 上處理,使用者可以在單一頁面上操作如同使用桌面應用程式般,最有名的例子 如 Google 的 Gmail 和 Facebook,單一頁面應用程式除了能夠減低伺服器的負載 外,也可以增加使用者體驗。
隨著 HTML5 技術規範的成熟,各家瀏覽器也逐漸更新支援,HTML5 增加了 許多非常實用的語法特徵與元素,更可以讓開發者容易的嵌入多媒體或繪圖元 件,文件物件模型(Document Object Model,DOM)與應用程式介面(Application Programming Interface,API)也成為 HTML 的基礎,本論文研究使用的 API 為 HTML5 全新制定的 WebSocket API,瀏覽器與伺服器之間進行全雙工(Full-duplex)通訊的 網路技術
本論文將深入討論如何加快單一網頁應用程式的初始加載速度,並模擬一個 電子商務網站進行初始頁面載入時間測試,比較傳統網站與 SPAs 網站使用 AJAX 技術的初始頁面載入時間,研究中將使用 HTML5 新制定規範中的 WebSocket API,來改善使用傳統技術的延遲,比較效能並評估其他技術考量,對此讓使用者 有更佳的互動性與使用體驗。

With the development of Internet technology in recent years, the websites have become the integral part of life. Along with advances in the browser technology, the websites have better supportability and compatibility. Web Programs development has transferred from the server side to the client side computing. Traditional Web Service, AJAX, Web 2.0, REST and other development technologies have grown into the Single- page Application (SPAs). By using AJAX technology, most of the server-site computing can be done at the client side (i.e., the browser). Users can operate on a single-page web application like using a desktop application, for example, Google's Gmail and Facebook. In addition to reducing the server load, Single-page application can increase the users’ experience.
With the maturity of HTML5 technical specification, each browser has gradually gained update support. HTML5 has increased lots of useful grammatical feature and elements, developers easily to embed multimedia and graphics components. The Document Object Model (DOM) and Application Programming Interface (API) also become the basis of HTML. In our study, we use the WebSocket API defined in HTML5 specification to perform full-duplex communication between the browser and the server.
This study will explore how to enhance the initial loading speed for single-page applications, conduct a series of experiments to simulate the operation of an e- commerce website, and compare the initial page loading time for conventional website and single-page application using Ajax. The study will use the HTML5 WebSocket API to explore how to improve the initial delay caused by using traditional technology, and compare the performance of the web-socket approach and the Ajax approach, and then evaluate some other technical issues. We expect that this study can provide users better interactivity and experience.

摘 要
Abstract
誌 謝
目錄
圖目錄
表目錄
一、 緒論
1.1 研究背景
1.2 研究動機與目的
1.3 論文架構
二、 文獻回顧
2.1 Asynchronous JavaScript and XML (AJAX)
2.1.1 XMLHttpRequest
2.1.2 AJAX 之缺陷
2.2 Single-page application (SPAs)
2.2.1 Single-page application 缺陷
2.3 HTML5 WebSocket
2.3.1 Handshaking
2.3.2 Data Mask
三、 研究設計
3.1 模擬電子商務網站
3.2 SPAs使用AJAX技術
3.3 SPAs使用WebSocket技術
四、 效能評估
五、 其他技術議題評估
4.1 瀏覽器支援
4.2 相同來源政策
4.3 資料傳輸格式
六、 結論
參考文獻
附錄

[1] Andersson K., Johansson D., 2012, "Mobile e-services using HTML5", in Local Computer Networks Workshops (LCN Workshops), 2012 IEEE 37th Conference on: IEEE.
[2] Bozdag E., Mesbah A., et al., 2007, "A comparison of push and pull techniques for ajax", in Web Site Evolution, 2007. WSE 2007. 9th IEEE International Workshop on: IEEE.
[3] Davis H., 2006, Search Engine Optimization, O'Reilly Media, Inc.
[4] Erkkilä J.-P., 2012, "The Websocket security analysis", Aalto University School of
Science, pp.2-3.
[5] Fette I., Melnikov A., 2011, "The websocket protocol".
[6] Garrett J.J., 2005, "Ajax: A new approach to web applications".
[7] Google, 2012, Making AJAX Applications Crawlable, https://developers.google.com/webmasters/ajax-crawling/.
[8] Gutwin C.A., Lippold M., et al., 2011, "Real-time groupware in the browser: testing the performance of web-based networking", in Proceedings of the ACM 2011 conference on Computer supported cooperative work: ACM.
[9] Hämäläinen H., 2012, "HTML5: WebSockets", Aalto University, Department of Media Technology.
[10] Huang L.-S., Chen E.Y., et al., 2011, "Talking to yourself for fun and profit", Proceedings of W2SP, pp.1-11.
[11] Jacob S., Speed Is A Killer–Why Decreasing Page Load Time Can Drastically Increase Conversions, http://blog.kissmetrics.com/speed-is-a-killer/.
[12] Kyrnin J., 2011, Sams teach yourself HTML5 mobile application development in 24 35
hours, Sams Publishing.
[13] Magel K., 1997, "Is it too late to put the user back into HTML?", Computer, 30(12),
pp.131-132.
[14] Mandyam G.D., Ehsan N., 2012, "Html5 connectivity methods and mobile power
consumption", Accessed January, 16, pp.2013.
[15] Mesbah A., Van Deursen A., 2007, "An architectural style for Ajax", in Software
Architecture, 2007. WICSA'07. The Working IEEE/IFIP Conference on: IEEE.
[16] Mesbah A., van Deursen A., 2007, "Migrating multi-page web applications to single-page Ajax interfaces", in Software Maintenance and Reengineering, 2007. CSMR'07. 11th European Conference on: IEEE.
[17] Oh J., Ahn W.H., et al., 2013, "Automated Transformation of Template-Based Web Applications into Single-Page Applications", in Computer Software and Applications Conference (COMPSAC), 2013 IEEE 37th Annual: IEEE.
[18] Paulson L.D., 2005, "Building rich web applications with Ajax", Computer, 38(10), pp.14-17.
[19] Petersson J., 2012, "Designing and implementing an architecture for single-page applications in Javascript and HTML5".
[20] Rakhunde S.M., "Real Time Data Communication over Full Duplex Network Using Websocket".
[21] Russell A., 2006, "Comet: Low latency data for browsers", alex. dojotoolkit. org.
[22] Taivalsaari A., Mikkonen T., 2011, "The web as an application platform: The saga continues", in Software Engineering and Advanced Applications (SEAA), 2011 37th EUROMICRO Conference on: IEEE.
[23] van Wijngaarden T., "Asynchronous JavaScript and XML". 36
[24] Vaughan-Nichols S.J., 2010, "Will HTML 5 restandardize the web?", Computer, 43, pp.13-15.
[25] Work S., How Loading Time Affects Your Bottom Line, http://blog.kissmetrics.com/loading-time/.
[26] Yan X., Yang L., et al., 2012, "Application of HTML5 multimedia", in Computer Science and Information Processing (CSIP), 2012 International Conference on: IEEE.
[27] 台灣中等學校資訊管理人學會, 2007, Single Page Application-下一代的 Web 應 用程式(上), http://www.tsima.org.tw/wiki/dian-zi-qi-kan/2007nian10yue- hao/single-page-application---xia-yi-dai-deweb-ying-yong-cheng-shi-shang.
[28] 郭惠煌, 蕭裕正, 2007, "AJAX 網頁設計技術於校務行政資訊系統之應用", 網 際網路技術學刊, 8(2), pp.185-190.