@gogocat/data-bind 1.12.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (271) hide show
  1. package/.editorconfig +14 -14
  2. package/.vscode/launch.json +12 -12
  3. package/CONFIGURATION.md +294 -0
  4. package/REACTIVE_MODE.md +553 -0
  5. package/README.md +266 -829
  6. package/babel.config.json +30 -0
  7. package/dist/js/_escape.d.ts +14 -0
  8. package/dist/js/_escape.d.ts.map +1 -0
  9. package/dist/js/applyBinding.d.ts +11 -0
  10. package/dist/js/applyBinding.d.ts.map +1 -0
  11. package/dist/js/attrBinding.d.ts +12 -0
  12. package/dist/js/attrBinding.d.ts.map +1 -0
  13. package/dist/js/binder.d.ts +67 -0
  14. package/dist/js/binder.d.ts.map +1 -0
  15. package/dist/js/changeBinding.d.ts +19 -0
  16. package/dist/js/changeBinding.d.ts.map +1 -0
  17. package/dist/js/commentWrapper.d.ts +39 -0
  18. package/dist/js/commentWrapper.d.ts.map +1 -0
  19. package/dist/js/config.d.ts +55 -0
  20. package/dist/js/config.d.ts.map +1 -0
  21. package/dist/js/createBindingOption.d.ts +32 -0
  22. package/dist/js/createBindingOption.d.ts.map +1 -0
  23. package/dist/js/createEventBinding.d.ts +10 -0
  24. package/dist/js/createEventBinding.d.ts.map +1 -0
  25. package/dist/js/cssBinding.d.ts +15 -0
  26. package/dist/js/cssBinding.d.ts.map +1 -0
  27. package/dist/js/dataBind.js +2756 -2530
  28. package/dist/js/dataBind.min.js +8 -1
  29. package/dist/js/dataBind.min.js.map +1 -1
  30. package/dist/js/domWalker.d.ts +9 -0
  31. package/dist/js/domWalker.d.ts.map +1 -0
  32. package/dist/js/forOfBinding.d.ts +12 -0
  33. package/dist/js/forOfBinding.d.ts.map +1 -0
  34. package/dist/js/hoverBinding.d.ts +13 -0
  35. package/dist/js/hoverBinding.d.ts.map +1 -0
  36. package/dist/js/ifBinding.d.ts +12 -0
  37. package/dist/js/ifBinding.d.ts.map +1 -0
  38. package/dist/js/index.d.ts +10 -0
  39. package/dist/js/index.d.ts.map +1 -0
  40. package/dist/js/modelBinding.d.ts +12 -0
  41. package/dist/js/modelBinding.d.ts.map +1 -0
  42. package/dist/js/postProcess.d.ts +3 -0
  43. package/dist/js/postProcess.d.ts.map +1 -0
  44. package/dist/js/pubSub.d.ts +11 -0
  45. package/dist/js/pubSub.d.ts.map +1 -0
  46. package/dist/js/reactiveProxy.d.ts +28 -0
  47. package/dist/js/reactiveProxy.d.ts.map +1 -0
  48. package/dist/js/renderForOfBinding.d.ts +8 -0
  49. package/dist/js/renderForOfBinding.d.ts.map +1 -0
  50. package/dist/js/renderIfBinding.d.ts +22 -0
  51. package/dist/js/renderIfBinding.d.ts.map +1 -0
  52. package/dist/js/renderIteration.d.ts +16 -0
  53. package/dist/js/renderIteration.d.ts.map +1 -0
  54. package/dist/js/renderTemplate.d.ts +14 -0
  55. package/dist/js/renderTemplate.d.ts.map +1 -0
  56. package/dist/js/renderTemplatesBinding.d.ts +19 -0
  57. package/dist/js/renderTemplatesBinding.d.ts.map +1 -0
  58. package/dist/js/showBinding.d.ts +13 -0
  59. package/dist/js/showBinding.d.ts.map +1 -0
  60. package/dist/js/switchBinding.d.ts +13 -0
  61. package/dist/js/switchBinding.d.ts.map +1 -0
  62. package/dist/js/textBinding.d.ts +13 -0
  63. package/dist/js/textBinding.d.ts.map +1 -0
  64. package/dist/js/types/_escape.d.ts +14 -0
  65. package/dist/js/types/_escape.d.ts.map +1 -0
  66. package/dist/js/types/applyBinding.d.ts +11 -0
  67. package/dist/js/types/applyBinding.d.ts.map +1 -0
  68. package/dist/js/types/attrBinding.d.ts +12 -0
  69. package/dist/js/types/attrBinding.d.ts.map +1 -0
  70. package/dist/js/types/binder.d.ts +67 -0
  71. package/dist/js/types/binder.d.ts.map +1 -0
  72. package/dist/js/types/changeBinding.d.ts +19 -0
  73. package/dist/js/types/changeBinding.d.ts.map +1 -0
  74. package/dist/js/types/commentWrapper.d.ts +39 -0
  75. package/dist/js/types/commentWrapper.d.ts.map +1 -0
  76. package/dist/js/types/config.d.ts +55 -0
  77. package/dist/js/types/config.d.ts.map +1 -0
  78. package/dist/js/types/createBindingOption.d.ts +32 -0
  79. package/dist/js/types/createBindingOption.d.ts.map +1 -0
  80. package/dist/js/types/createEventBinding.d.ts +10 -0
  81. package/dist/js/types/createEventBinding.d.ts.map +1 -0
  82. package/dist/js/types/cssBinding.d.ts +15 -0
  83. package/dist/js/types/cssBinding.d.ts.map +1 -0
  84. package/dist/js/types/domWalker.d.ts +9 -0
  85. package/dist/js/types/domWalker.d.ts.map +1 -0
  86. package/dist/js/types/forOfBinding.d.ts +12 -0
  87. package/dist/js/types/forOfBinding.d.ts.map +1 -0
  88. package/dist/js/types/hoverBinding.d.ts +13 -0
  89. package/dist/js/types/hoverBinding.d.ts.map +1 -0
  90. package/dist/js/types/ifBinding.d.ts +12 -0
  91. package/dist/js/types/ifBinding.d.ts.map +1 -0
  92. package/dist/js/types/index.d.ts +10 -0
  93. package/dist/js/types/index.d.ts.map +1 -0
  94. package/dist/js/types/modelBinding.d.ts +12 -0
  95. package/dist/js/types/modelBinding.d.ts.map +1 -0
  96. package/dist/js/types/postProcess.d.ts +3 -0
  97. package/dist/js/types/postProcess.d.ts.map +1 -0
  98. package/dist/js/types/pubSub.d.ts +11 -0
  99. package/dist/js/types/pubSub.d.ts.map +1 -0
  100. package/dist/js/types/reactiveProxy.d.ts +28 -0
  101. package/dist/js/types/reactiveProxy.d.ts.map +1 -0
  102. package/dist/js/types/renderForOfBinding.d.ts +8 -0
  103. package/dist/js/types/renderForOfBinding.d.ts.map +1 -0
  104. package/dist/js/types/renderIfBinding.d.ts +22 -0
  105. package/dist/js/types/renderIfBinding.d.ts.map +1 -0
  106. package/dist/js/types/renderIteration.d.ts +16 -0
  107. package/dist/js/types/renderIteration.d.ts.map +1 -0
  108. package/dist/js/types/renderTemplate.d.ts +14 -0
  109. package/dist/js/types/renderTemplate.d.ts.map +1 -0
  110. package/dist/js/types/renderTemplatesBinding.d.ts +19 -0
  111. package/dist/js/types/renderTemplatesBinding.d.ts.map +1 -0
  112. package/dist/js/types/showBinding.d.ts +13 -0
  113. package/dist/js/types/showBinding.d.ts.map +1 -0
  114. package/dist/js/types/switchBinding.d.ts +13 -0
  115. package/dist/js/types/switchBinding.d.ts.map +1 -0
  116. package/dist/js/types/textBinding.d.ts +13 -0
  117. package/dist/js/types/textBinding.d.ts.map +1 -0
  118. package/dist/js/types/types.d.ts +111 -0
  119. package/dist/js/types/types.d.ts.map +1 -0
  120. package/dist/js/types/util.d.ts +119 -0
  121. package/dist/js/types/util.d.ts.map +1 -0
  122. package/dist/js/types.d.ts +111 -0
  123. package/dist/js/types.d.ts.map +1 -0
  124. package/dist/js/util.d.ts +119 -0
  125. package/dist/js/util.d.ts.map +1 -0
  126. package/eslint.config.js +124 -0
  127. package/examples/DBMONSTER_COMPARISON.md +123 -0
  128. package/examples/afterRenderDemo.html +119 -0
  129. package/examples/bootstrap/css/animate.css +1579 -1579
  130. package/examples/bootstrap/css/bootstrap.min.css +6 -6
  131. package/examples/bootstrap/css/homeservices.css +378 -390
  132. package/examples/bootstrap/css/open-iconic.css +511 -511
  133. package/examples/bootstrap/fonts/open-iconic.svg +543 -543
  134. package/examples/bootstrap/js/compMessageDialog.js +20 -19
  135. package/examples/bootstrap/js/compSearchBar.js +12 -19
  136. package/examples/bootstrap/js/compSearchResults.js +50 -46
  137. package/examples/bootstrap/js/featureAdsResult.json +65 -65
  138. package/examples/bootstrap/js/searchResult.json +57 -57
  139. package/examples/bootstrap.html +343 -332
  140. package/examples/css/baseTodo.css +141 -141
  141. package/examples/css/dbMonsterStyles.css +27 -27
  142. package/examples/css/indexTodo.css +374 -374
  143. package/examples/dbmonsterForOfReactive.html +40 -0
  144. package/examples/dbmonsterReact.html +19 -0
  145. package/examples/forOfBindingSimpleDebug.html +45 -0
  146. package/examples/globalConfig.html +131 -0
  147. package/examples/js/afterRenderDemo.js +190 -0
  148. package/examples/js/appTodo.js +46 -46
  149. package/examples/js/attrBindingDemo.js +2 -2
  150. package/examples/js/dbMonApp.js +24 -26
  151. package/examples/js/dbMonAppReact.jsx +79 -0
  152. package/examples/js/dbMonAppReactive.js +28 -0
  153. package/examples/js/fiberDemo.js +4 -4
  154. package/examples/js/filtersDemo.js +8 -8
  155. package/examples/js/forOfDemo.js +7 -9
  156. package/examples/js/forOfDemoComplex.js +44 -17
  157. package/examples/js/form.js +14 -14
  158. package/examples/js/globalConfig.js +117 -0
  159. package/examples/js/ifBindingDemo.js +16 -16
  160. package/examples/js/reactiveDemo.js +119 -0
  161. package/examples/js/switchBindingDemo.js +8 -8
  162. package/examples/react-dbmonster/dist/bundle.js +43 -0
  163. package/examples/react-dbmonster/package-lock.json +537 -0
  164. package/examples/react-dbmonster/package.json +16 -0
  165. package/examples/react-dbmonster/src/index.jsx +80 -0
  166. package/examples/reactiveDemo.html +127 -0
  167. package/examples/refreshRateTest.html +75 -75
  168. package/index.html +841 -0
  169. package/package.json +31 -34
  170. package/rollup.config.js +79 -36
  171. package/src/{_escape.js → _escape.ts} +19 -17
  172. package/src/{applyBinding.js → applyBinding.ts} +27 -18
  173. package/src/{attrBinding.js → attrBinding.ts} +14 -13
  174. package/src/{binder.js → binder.ts} +289 -181
  175. package/src/changeBinding.ts +93 -0
  176. package/src/{commentWrapper.js → commentWrapper.ts} +33 -30
  177. package/src/config.ts +107 -0
  178. package/src/{createBindingOption.js → createBindingOption.ts} +39 -15
  179. package/src/createEventBinding.ts +88 -0
  180. package/src/{cssBinding.js → cssBinding.ts} +13 -11
  181. package/src/{domWalker.js → domWalker.ts} +44 -30
  182. package/src/{forOfBinding.js → forOfBinding.ts} +4 -3
  183. package/src/hoverBinding.ts +84 -0
  184. package/src/{ifBinding.js → ifBinding.ts} +14 -12
  185. package/src/index.ts +53 -0
  186. package/src/{modelBinding.js → modelBinding.ts} +11 -9
  187. package/src/{postProcess.js → postProcess.ts} +6 -4
  188. package/src/{pubSub.js → pubSub.ts} +24 -21
  189. package/src/reactiveProxy.ts +285 -0
  190. package/src/{renderForOfBinding.js → renderForOfBinding.ts} +54 -32
  191. package/src/{renderIfBinding.js → renderIfBinding.ts} +41 -19
  192. package/src/{renderIteration.js → renderIteration.ts} +24 -8
  193. package/src/renderTemplate.ts +165 -0
  194. package/src/renderTemplatesBinding.ts +73 -0
  195. package/src/{showBinding.js → showBinding.ts} +4 -3
  196. package/src/{switchBinding.js → switchBinding.ts} +18 -15
  197. package/src/{textBinding.js → textBinding.ts} +5 -4
  198. package/src/types.ts +124 -0
  199. package/src/util.ts +810 -0
  200. package/test/css/reporter.css +9 -9
  201. package/test/globals.d.ts +19 -0
  202. package/test/helpers/testHelper.js +46 -11
  203. package/test/mocks/featureAdsResult.json +65 -65
  204. package/test/mocks/searchResult.json +57 -57
  205. package/test/specs/{attrBinding.spec.js → attrBinding.spec.ts} +103 -106
  206. package/test/specs/{binder.spec.js → binder.spec.ts} +29 -27
  207. package/test/specs/blurBinding.spec.ts +60 -0
  208. package/test/specs/chainableUse.spec.ts +125 -0
  209. package/test/specs/clickBinding.spec.ts +194 -0
  210. package/test/specs/{cssBinding.spec.js → cssBinding.spec.ts} +72 -79
  211. package/test/specs/{dataBindBootstrap.spec.js → dataBindBootstrap.spec.ts} +332 -313
  212. package/test/specs/{filter.spec.js → filter.spec.ts} +75 -76
  213. package/test/specs/{forOfBinding.spec.js → forOfBinding.spec.ts} +208 -219
  214. package/test/specs/formBinding.spec.ts +272 -0
  215. package/test/specs/ifBinding.spec.ts +165 -0
  216. package/test/specs/{nestedComponent.spec.js → nestedComponent.spec.ts} +88 -88
  217. package/test/specs/reactiveProxy.spec.ts +465 -0
  218. package/test/specs/{showBinding.spec.js → showBinding.spec.ts} +148 -149
  219. package/test/specs/{switchBinding.spec.js → switchBinding.spec.ts} +172 -173
  220. package/test/specs/templateBinding.spec.ts +273 -0
  221. package/test/specs/{textBinding.spec.js → textBinding.spec.ts} +47 -48
  222. package/test/tsconfig.json +31 -0
  223. package/test-output.txt +200 -0
  224. package/test-reactive.html +224 -0
  225. package/tsconfig.json +28 -0
  226. package/vendors/lodash.custom.js +4577 -4577
  227. package/vendors/lodash.custom.min.js +45 -45
  228. package/vitest.config.js +27 -0
  229. package/.eslintrc.js +0 -1
  230. package/.grunt/grunt-contrib-jasmine/boot.js +0 -161
  231. package/.grunt/grunt-contrib-jasmine/dist/js/dataBind.js +0 -9
  232. package/.grunt/grunt-contrib-jasmine/grunt-template-jasmine-istanbul/reporter.js +0 -23
  233. package/.grunt/grunt-contrib-jasmine/jasmine-html.js +0 -853
  234. package/.grunt/grunt-contrib-jasmine/jasmine.css +0 -271
  235. package/.grunt/grunt-contrib-jasmine/jasmine.js +0 -9761
  236. package/.grunt/grunt-contrib-jasmine/jasmine_favicon.png +0 -0
  237. package/.grunt/grunt-contrib-jasmine/json2.js +0 -489
  238. package/.grunt/grunt-contrib-jasmine/reporter.js +0 -107
  239. package/coverage/coverage.json +0 -1
  240. package/coverage/lcov/lcov-report/base.css +0 -213
  241. package/coverage/lcov/lcov-report/index.html +0 -93
  242. package/coverage/lcov/lcov-report/js/dataBind.js.html +0 -6596
  243. package/coverage/lcov/lcov-report/js/index.html +0 -93
  244. package/coverage/lcov/lcov-report/prettify.css +0 -1
  245. package/coverage/lcov/lcov-report/prettify.js +0 -1
  246. package/coverage/lcov/lcov-report/sort-arrow-sprite.png +0 -0
  247. package/coverage/lcov/lcov-report/sorter.js +0 -158
  248. package/coverage/lcov/lcov.info +0 -1991
  249. package/eslintrc.json +0 -40
  250. package/examples/bootstrap/js/bootstrap.min.js +0 -6
  251. package/examples/bootstrap/js/popper.min.js +0 -5
  252. package/examples/bootstrap/js/searchSuggestion.js +0 -58
  253. package/examples/bootstrap/js/typeahead.jquery.js +0 -1538
  254. package/gruntfile.js +0 -92
  255. package/gulpfile.js +0 -32
  256. package/src/applyBindingExport.js +0 -5
  257. package/src/changeBinding.js +0 -63
  258. package/src/config.js +0 -66
  259. package/src/createEventBinding.js +0 -46
  260. package/src/eventSystem.js +0 -46
  261. package/src/hoverBinding.js +0 -57
  262. package/src/index.js +0 -26
  263. package/src/renderTemplate.js +0 -128
  264. package/src/renderTemplatesBinding.js +0 -44
  265. package/src/util.js +0 -648
  266. package/test/specs/blurBinding.spec.js +0 -57
  267. package/test/specs/formBinding.spec.js +0 -316
  268. package/test/specs/ifBinding.spec.js +0 -169
  269. package/test/specs/templateBinding.spec.js +0 -117
  270. package/vendors/jasmine-jquery.js +0 -841
  271. package/vendors/jquery-3.2.1.min.js +0 -4
package/examples/reactiveDemo.html ADDED
@@ -0,0 +1,127 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6
+ <title>dataBind Demo | Reactive Rendering</title>
7
+ <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
8
+ <style>
9
+ body {
10
+ padding: 20px;
11
+ }
12
+ .demo-section {
13
+ margin: 20px 0;
14
+ padding: 20px;
15
+ border: 1px solid #ddd;
16
+ border-radius: 5px;
17
+ }
18
+ .updated {
19
+ background-color: #ffffcc;
20
+ transition: background-color 0.5s;
21
+ }
22
+ .comparison {
23
+ display: flex;
24
+ gap: 20px;
25
+ }
26
+ .comparison > div {
27
+ flex: 1;
28
+ }
29
+ </style>
30
+ </head>
31
+
32
+ <body>
33
+ <div class="container">
34
+ <h1>Reactive Rendering Demo</h1>
35
+ <p class="lead">
36
+ Compare <strong>Manual Mode</strong> (requires calling render()) vs <strong>Reactive Mode</strong> (automatic rendering).
37
+ </p>
38
+
39
+ <div class="comparison">
40
+ <!-- Manual Mode Demo -->
41
+ <div class="demo-section">
42
+ <h3>Manual Mode</h3>
43
+ <p class="text-muted">Requires explicit render() calls</p>
44
+
45
+ <div data-bind-comp="manual-component">
46
+ <div>
47
+ <p>Name: <span data-bind-text="name"></span></p>
48
+ <p>Age: <span data-bind-text="age"></span></p>
49
+ <p>Counter: <span data-bind-text="counter"></span></p>
50
+ </div>
51
+
52
+ <div class="mt-3">
53
+ <button class="btn btn-primary btn-sm" data-bind-click="updateData">
54
+ Update Data (Manual)
55
+ </button>
56
+ <button class="btn btn-secondary btn-sm" data-bind-click="incrementCounter">
57
+ Increment Counter (Manual)
58
+ </button>
59
+ </div>
60
+ </div>
61
+ </div>
62
+
63
+ <!-- Reactive Mode Demo -->
64
+ <div class="demo-section">
65
+ <h3>Reactive Mode ✨</h3>
66
+ <p class="text-muted">Automatic rendering on data changes</p>
67
+
68
+ <div data-bind-comp="reactive-component">
69
+ <div>
70
+ <p>Name: <span data-bind-text="name"></span></p>
71
+ <p>Age: <span data-bind-text="age"></span></p>
72
+ <p>Counter: <span data-bind-text="counter"></span></p>
73
+ </div>
74
+
75
+ <div class="mt-3">
76
+ <button class="btn btn-success btn-sm" data-bind-click="updateData">
77
+ Update Data (Reactive)
78
+ </button>
79
+ <button class="btn btn-info btn-sm" data-bind-click="incrementCounter">
80
+ Increment Counter (Reactive)
81
+ </button>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ </div>
86
+
87
+ <!-- Advanced Reactive Demo -->
88
+ <div class="demo-section mt-4">
89
+ <h3>Advanced Reactive Features</h3>
90
+ <p class="text-muted">Arrays, nested objects, and batch updates</p>
91
+
92
+ <div data-bind-comp="advanced-reactive">
93
+ <div>
94
+ <h5>Todo List (Reactive)</h5>
95
+ <ul>
96
+ <li data-bind-for="todo of todos">
97
+ <span data-bind-text="todo.text"></span>
98
+ <span data-bind-if="todo.completed"> ✓</span>
99
+ </li>
100
+ </ul>
101
+
102
+ <div class="mt-3">
103
+ <button class="btn btn-primary btn-sm" data-bind-click="addTodo">Add Todo</button>
104
+ <button class="btn btn-warning btn-sm" data-bind-click="completeFirst">Complete First</button>
105
+ <button class="btn btn-danger btn-sm" data-bind-click="removeLast">Remove Last</button>
106
+ <button class="btn btn-success btn-sm" data-bind-click="batchUpdate">Batch Update (3 changes)</button>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </div>
111
+
112
+ <div class="alert alert-info mt-4">
113
+ <h5>Key Benefits of Reactive Mode:</h5>
114
+ <ul>
115
+ <li>✅ No manual <code>render()</code> calls needed</li>
116
+ <li>✅ Automatic batching via <code>requestAnimationFrame</code></li>
117
+ <li>✅ Works with nested objects and arrays</li>
118
+ <li>✅ Same performance as manual mode (uses existing debouncing)</li>
119
+ <li>✅ Backward compatible (opt-in feature)</li>
120
+ </ul>
121
+ </div>
122
+ </div>
123
+
124
+ <script src="../dist/js/dataBind.min.js"></script>
125
+ <script src="js/reactiveDemo.js"></script>
126
+ </body>
127
+ </html>
package/examples/refreshRateTest.html CHANGED
@@ -1,75 +1,75 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta name="description" content="" />
5
- <title>Refresh rate test</title>
6
- </head>
7
-
8
- <body>
9
- <div>
10
- <h1>Browser performance test</h1>
11
- <p>This example test how many operation can be perform within 60 FPS</p>
12
- <small>
13
- By Ilmari Heikkinen -
14
- <a href="https://developers.google.com/web/updates/2012/07/How-to-measure-browser-graphics-performance" target="_blank">
15
- How to measure browser graphics performance
16
- </a>
17
- </div>
18
- <div>
19
- <p>Results:</p>
20
- <p id="res"></p>
21
- <p>Canvas:</p>
22
- <p><canvas id="canvas" width="400" height="400"></canvas></p>
23
- <br /><br />
24
- <p>Sprite:</p>
25
- <img
26
- id="img"
27
- src="http://lh6.ggpht.com/-TTZ5OhpPNOs/TaM83_mTXAI/AAAAAAAAH3E/HhB7AXAVBDQ/s128/chrome-a_512.png"
28
- />
29
- </div>
30
- <script>
31
- var ctx = document.getElementById('canvas').getContext('2d');
32
- var img = document.getElementById('img');
33
-
34
- var draw = function(load) {
35
- var angle = 0.01;
36
- ctx.clearRect(0, 0, 400, 400);
37
- ctx.save();
38
- ctx.translate(200, 200);
39
- for (var i = 0; i < load; i++) {
40
- ctx.rotate(angle);
41
- ctx.drawImage(img, 0, 0);
42
- }
43
- ctx.restore();
44
- };
45
-
46
- var t, previousTime;
47
- var drawLoad = 1;
48
- var slowCount = 0;
49
- var maxSlow = 10;
50
-
51
- t = previousTime = performance.now();
52
-
53
- var tick = function() {
54
- var maximumFrameTime = 1000 / 60; // 60 FPS
55
- t = performance.now();
56
- var elapsed = t - previousTime;
57
- previousTime = t;
58
- if (elapsed < maximumFrameTime || slowCount < maxSlow) {
59
- if (elapsed < maximumFrameTime) {
60
- drawLoad += 10;
61
- } else {
62
- slowCount++;
63
- }
64
- draw(drawLoad);
65
- requestAnimationFrame(tick);
66
- } else {
67
- // found maximum sustainable load at 30 FPS
68
- document.getElementById('res').innerHTML =
69
- 'could draw ' + drawLoad + ' in ' + Math.round(maximumFrameTime) + ' ms';
70
- }
71
- };
72
- requestAnimationFrame(tick);
73
- </script>
74
- </body>
75
- </html>
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta name="description" content="" />
5
+ <title>Refresh rate test</title>
6
+ </head>
7
+
8
+ <body>
9
+ <div>
10
+ <h1>Browser performance test</h1>
11
+ <p>This example test how many operation can be perform within 60 FPS</p>
12
+ <small>
13
+ By Ilmari Heikkinen -
14
+ <a href="https://developers.google.com/web/updates/2012/07/How-to-measure-browser-graphics-performance" target="_blank">
15
+ How to measure browser graphics performance
16
+ </a>
17
+ </div>
18
+ <div>
19
+ <p>Results:</p>
20
+ <p id="res"></p>
21
+ <p>Canvas:</p>
22
+ <p><canvas id="canvas" width="400" height="400"></canvas></p>
23
+ <br /><br />
24
+ <p>Sprite:</p>
25
+ <img
26
+ id="img"
27
+ src="http://lh6.ggpht.com/-TTZ5OhpPNOs/TaM83_mTXAI/AAAAAAAAH3E/HhB7AXAVBDQ/s128/chrome-a_512.png"
28
+ />
29
+ </div>
30
+ <script>
31
+ var ctx = document.getElementById('canvas').getContext('2d');
32
+ var img = document.getElementById('img');
33
+
34
+ var draw = function(load) {
35
+ var angle = 0.01;
36
+ ctx.clearRect(0, 0, 400, 400);
37
+ ctx.save();
38
+ ctx.translate(200, 200);
39
+ for (var i = 0; i < load; i++) {
40
+ ctx.rotate(angle);
41
+ ctx.drawImage(img, 0, 0);
42
+ }
43
+ ctx.restore();
44
+ };
45
+
46
+ var t, previousTime;
47
+ var drawLoad = 1;
48
+ var slowCount = 0;
49
+ var maxSlow = 10;
50
+
51
+ t = previousTime = performance.now();
52
+
53
+ var tick = function() {
54
+ var maximumFrameTime = 1000 / 60; // 60 FPS
55
+ t = performance.now();
56
+ var elapsed = t - previousTime;
57
+ previousTime = t;
58
+ if (elapsed < maximumFrameTime || slowCount < maxSlow) {
59
+ if (elapsed < maximumFrameTime) {
60
+ drawLoad += 10;
61
+ } else {
62
+ slowCount++;
63
+ }
64
+ draw(drawLoad);
65
+ requestAnimationFrame(tick);
66
+ } else {
67
+ // found maximum sustainable load at 30 FPS
68
+ document.getElementById('res').innerHTML =
69
+ 'could draw ' + drawLoad + ' in ' + Math.round(maximumFrameTime) + ' ms';
70
+ }
71
+ };
72
+ requestAnimationFrame(tick);
73
+ </script>
74
+ </body>
75
+ </html>