壯麗豪華的 javascript 圖形實作之不解釋 source code

19
9762101 謝謝謝 9762108 謝謝謝 9762240 謝謝謝 9762307 謝謝謝

Upload: vivien

Post on 10-Jan-2016

95 views

Category:

Documents


13 download

DESCRIPTION

9762101 謝秉勳 9762108 林冠樺 9762240 李英嘉 9762307 廖孟楷. 壯麗豪華的 javascript 圖形實作之不解釋 source code. 大綱. JavaScript 引擎效能 JavaScript 簡介 JavaScript 執行速度測試 JavaScript 引擎簡介 Interpreter 引擎與 JIT 引擎的比較與介紹 實用的 JavaScript 應用 chromeexperiments.com. JavaScript 是 …. 腳本語言 ( Scripting Language ) - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: 壯麗豪華的 javascript 圖形實作之不解釋  source code

9762101 謝秉勳9762108 林冠樺9762240 李英嘉9762307 廖孟楷

Page 2: 壯麗豪華的 javascript 圖形實作之不解釋  source code

大綱

JavaScript 引擎效能 JavaScript 簡介 JavaScript 執行速度測試 JavaScript 引擎簡介 Interpreter 引擎與 JIT 引擎的比較與介紹

實用的 JavaScript 應用 chromeexperiments.com

Page 3: 壯麗豪華的 javascript 圖形實作之不解釋  source code

JavaScript 是…

腳本語言( Scripting Language ) 由「引擎」解釋腳本,再執行真正的動作

直譯式語言( Interpreted Language ) 優點

好學、好寫 缺點

安全性較低 執行效能低落

Page 4: 壯麗豪華的 javascript 圖形實作之不解釋  source code

JavaScript 執行速度測試

SunSpider JavaScript Benchmark http://www2.webkit.org/perf/sunspider-0.

9/sunspider.html V8 Benchmark Suite

http://v8.googlecode.com/svn/data/benchmarks/current/run.html

我們自己寫的 JavaScript 速度測試網頁 http://www.oz.nthu.edu.tw/~u9762307/

web-javascript/speed_index.htm

Page 5: 壯麗豪華的 javascript 圖形實作之不解釋  source code

我們的 JavaScript 速度測試網頁

迴圈(Loop)測試 從零到 n4 做累加

遞迴(Recursive)測試 計算斐波納契數列

InternetExplorer

8.0

Mozilla Firefox3.6.3

Google Chrome

4.1.249.1064

Loop 279.6 ms 18 ms 29.4 ms

Recursive

201.4 ms 56.4 ms 4 ms

Page 6: 壯麗豪華的 javascript 圖形實作之不解釋  source code
Page 7: 壯麗豪華的 javascript 圖形實作之不解釋  source code

常見的 JavaScript 引擎

JScript Microsoft Internet Explorer

SpiderMonkey (TraceMonkey) Mozilla Firefox

V8 Google Chrome

Carakan Opera 10.5 series

JavaScriptCore Apple Safari

Page 8: 壯麗豪華的 javascript 圖形實作之不解釋  source code

InternetExplorer

8.0

Mozilla Firefox3.6.3

Google Chrome

4.1.249.1064

Loop 279.6 ms 18 ms 29.4 ms

Recursive

201.4 ms 56.4 ms 4 ms

Page 9: 壯麗豪華的 javascript 圖形實作之不解釋  source code

Interpreted Engine

逐行解譯,逐行執行 解譯的過程導致效能低落 目前市面上常見的瀏覽器只有 IE 8 的

JavaScript 引擎以此種執行方式為主

想像你正在看一本全英文的小說…

Page 10: 壯麗豪華的 javascript 圖形實作之不解釋  source code

JIT Engine

即時( Just In Time )編譯的引擎 將 JavaScript 程式碼編譯成機械碼,加

快執行速度 目前 Mozilla Firefox 、 Google

Chrome 、 Opera 、 Safari 等瀏覽器皆採用此種引擎

IE 9 也將採用此種引擎

請想像你讀的是那本英文小說的中譯本…

Page 11: 壯麗豪華的 javascript 圖形實作之不解釋  source code

InternetExplorer

8.0

Mozilla Firefox3.6.3

Google Chrome

4.1.249.1064

Loop 279.6 ms 18 ms 29.4 ms

Recursive

201.4 ms 56.4 ms 4 ms

Page 12: 壯麗豪華的 javascript 圖形實作之不解釋  source code

Method JIT vs. Trace JIT

Method JIT Google Chrome, Opera 以 function 為單位做 JIT Compile 較難進行細部調校

Trace JIT Mozilla Firefox 尋找 Traceable code (通常是 loop )進行

JIT Compile Traceable code 表現很好,無法 trace 的

code 則回到 Interpreted Engine

Page 13: 壯麗豪華的 javascript 圖形實作之不解釋  source code
Page 14: 壯麗豪華的 javascript 圖形實作之不解釋  source code

說了這麼多…

Page 15: 壯麗豪華的 javascript 圖形實作之不解釋  source code

注意,問題來了!

我們為何要如此關心 JavaScript 的執行速度 ? Plurk? Gmail? FaceBook? Wikipedia? Speed Tests? Web 程式設計、技術與應用 ?

Page 16: 壯麗豪華的 javascript 圖形實作之不解釋  source code

JavaScript 不只是 JavaScript

JavaScript 不只是拿來作為網頁的陪襯

JavaScript 是一個可以寫出複雜功能的程式語言

JavaScript 已經夠成熟,可以達成電腦上最為精緻的應用…

Page 17: 壯麗豪華的 javascript 圖形實作之不解釋  source code

壯麗豪華的 JavaScript 應用程式 The chrome experiments

http://www.chromeexperiments.com Created by Google

建議必玩的項目 Ball Pool Browser Ball Browser Pong

Page 18: 壯麗豪華的 javascript 圖形實作之不解釋  source code

我們的網站

http://www.oz.nthu.edu.tw/~u9762307/web-javascript/

我們的網頁皆經 W3C 驗證器驗證過為標準的網頁

請使用下列瀏覽器以確保能夠順利瀏覽 Mozilla Firefox 3.6.3 (或更新的版本) Google Chrome 4 (或更新的版本) Internet Explorer 8.0 (以及更舊的版本)

都無法正確顯示我們的網站

Page 19: 壯麗豪華的 javascript 圖形實作之不解釋  source code

參考來源

Wikipedia: List of ECMAScript engines

Chrome Experiments David Mandelin's blog: Starting

JägerMonkey