@gogocat/data-bind 1.11.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 (274) 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 +2772 -2519
  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/form.html +20 -4
  147. package/examples/globalConfig.html +131 -0
  148. package/examples/js/afterRenderDemo.js +190 -0
  149. package/examples/js/appTodo.js +46 -46
  150. package/examples/js/attrBindingDemo.js +2 -2
  151. package/examples/js/dbMonApp.js +24 -26
  152. package/examples/js/dbMonAppReact.jsx +79 -0
  153. package/examples/js/dbMonAppReactive.js +28 -0
  154. package/examples/js/fiberDemo.js +4 -4
  155. package/examples/js/filtersDemo.js +8 -8
  156. package/examples/js/forOfDemo.js +7 -9
  157. package/examples/js/forOfDemoComplex.js +44 -17
  158. package/examples/js/form.js +44 -12
  159. package/examples/js/globalConfig.js +117 -0
  160. package/examples/js/ifBindingDemo.js +16 -16
  161. package/examples/js/reactiveDemo.js +119 -0
  162. package/examples/js/switchBindingDemo.js +8 -8
  163. package/examples/react-dbmonster/dist/bundle.js +43 -0
  164. package/examples/react-dbmonster/package-lock.json +537 -0
  165. package/examples/react-dbmonster/package.json +16 -0
  166. package/examples/react-dbmonster/src/index.jsx +80 -0
  167. package/examples/reactiveDemo.html +127 -0
  168. package/examples/refreshRateTest.html +75 -75
  169. package/index.html +841 -0
  170. package/package.json +31 -34
  171. package/rollup.config.js +79 -36
  172. package/src/{_escape.js → _escape.ts} +19 -17
  173. package/src/applyBinding.ts +179 -0
  174. package/src/{attrBinding.js → attrBinding.ts} +14 -13
  175. package/src/binder.ts +289 -0
  176. package/src/changeBinding.ts +93 -0
  177. package/src/{commentWrapper.js → commentWrapper.ts} +33 -30
  178. package/src/config.ts +107 -0
  179. package/src/createBindingOption.ts +91 -0
  180. package/src/createEventBinding.ts +88 -0
  181. package/src/{cssBinding.js → cssBinding.ts} +13 -11
  182. package/src/{domWalker.js → domWalker.ts} +44 -30
  183. package/src/{forOfBinding.js → forOfBinding.ts} +4 -3
  184. package/src/hoverBinding.ts +84 -0
  185. package/src/{ifBinding.js → ifBinding.ts} +14 -12
  186. package/src/index.ts +53 -0
  187. package/src/{modelBinding.js → modelBinding.ts} +11 -9
  188. package/src/postProcess.ts +22 -0
  189. package/src/{pubSub.js → pubSub.ts} +24 -15
  190. package/src/reactiveProxy.ts +285 -0
  191. package/src/{renderForOfBinding.js → renderForOfBinding.ts} +55 -33
  192. package/src/{renderIfBinding.js → renderIfBinding.ts} +45 -20
  193. package/src/renderIteration.ts +53 -0
  194. package/src/renderTemplate.ts +165 -0
  195. package/src/renderTemplatesBinding.ts +73 -0
  196. package/src/{showBinding.js → showBinding.ts} +4 -3
  197. package/src/{switchBinding.js → switchBinding.ts} +18 -15
  198. package/src/{textBinding.js → textBinding.ts} +5 -4
  199. package/src/types.ts +124 -0
  200. package/src/util.ts +810 -0
  201. package/test/css/reporter.css +9 -9
  202. package/test/fixtures/dataBindBootstrap.html +2 -2
  203. package/test/fixtures/formBindings.html +9 -1
  204. package/test/globals.d.ts +19 -0
  205. package/test/helpers/testHelper.js +46 -11
  206. package/test/mocks/featureAdsResult.json +65 -65
  207. package/test/mocks/searchResult.json +57 -57
  208. package/test/specs/{attrBinding.spec.js → attrBinding.spec.ts} +103 -106
  209. package/test/specs/{binder.spec.js → binder.spec.ts} +29 -27
  210. package/test/specs/blurBinding.spec.ts +60 -0
  211. package/test/specs/chainableUse.spec.ts +125 -0
  212. package/test/specs/clickBinding.spec.ts +194 -0
  213. package/test/specs/{cssBinding.spec.js → cssBinding.spec.ts} +72 -79
  214. package/test/specs/{dataBindBootstrap.spec.js → dataBindBootstrap.spec.ts} +332 -313
  215. package/test/specs/{filter.spec.js → filter.spec.ts} +75 -76
  216. package/test/specs/{forOfBinding.spec.js → forOfBinding.spec.ts} +208 -219
  217. package/test/specs/formBinding.spec.ts +272 -0
  218. package/test/specs/ifBinding.spec.ts +165 -0
  219. package/test/specs/{nestedComponent.spec.js → nestedComponent.spec.ts} +88 -88
  220. package/test/specs/reactiveProxy.spec.ts +465 -0
  221. package/test/specs/{showBinding.spec.js → showBinding.spec.ts} +148 -149
  222. package/test/specs/{switchBinding.spec.js → switchBinding.spec.ts} +172 -173
  223. package/test/specs/templateBinding.spec.ts +273 -0
  224. package/test/specs/{textBinding.spec.js → textBinding.spec.ts} +47 -48
  225. package/test/tsconfig.json +31 -0
  226. package/test-output.txt +200 -0
  227. package/test-reactive.html +224 -0
  228. package/tsconfig.json +28 -0
  229. package/vendors/lodash.custom.js +4577 -4577
  230. package/vendors/lodash.custom.min.js +45 -45
  231. package/vitest.config.js +27 -0
  232. package/.eslintrc.js +0 -1
  233. package/.grunt/grunt-contrib-jasmine/boot.js +0 -161
  234. package/.grunt/grunt-contrib-jasmine/dist/js/dataBind.js +0 -9
  235. package/.grunt/grunt-contrib-jasmine/grunt-template-jasmine-istanbul/reporter.js +0 -23
  236. package/.grunt/grunt-contrib-jasmine/jasmine-html.js +0 -853
  237. package/.grunt/grunt-contrib-jasmine/jasmine.css +0 -271
  238. package/.grunt/grunt-contrib-jasmine/jasmine.js +0 -9761
  239. package/.grunt/grunt-contrib-jasmine/jasmine_favicon.png +0 -0
  240. package/.grunt/grunt-contrib-jasmine/json2.js +0 -489
  241. package/.grunt/grunt-contrib-jasmine/reporter.js +0 -107
  242. package/coverage/coverage.json +0 -1
  243. package/coverage/lcov/lcov-report/base.css +0 -213
  244. package/coverage/lcov/lcov-report/index.html +0 -93
  245. package/coverage/lcov/lcov-report/js/dataBind.js.html +0 -6596
  246. package/coverage/lcov/lcov-report/js/index.html +0 -93
  247. package/coverage/lcov/lcov-report/prettify.css +0 -1
  248. package/coverage/lcov/lcov-report/prettify.js +0 -1
  249. package/coverage/lcov/lcov-report/sort-arrow-sprite.png +0 -0
  250. package/coverage/lcov/lcov-report/sorter.js +0 -158
  251. package/coverage/lcov/lcov.info +0 -1991
  252. package/eslintrc.json +0 -40
  253. package/examples/bootstrap/js/bootstrap.min.js +0 -6
  254. package/examples/bootstrap/js/popper.min.js +0 -5
  255. package/examples/bootstrap/js/searchSuggestion.js +0 -58
  256. package/examples/bootstrap/js/typeahead.jquery.js +0 -1538
  257. package/gruntfile.js +0 -92
  258. package/gulpfile.js +0 -32
  259. package/src/binder.js +0 -422
  260. package/src/changeBinding.js +0 -57
  261. package/src/config.js +0 -65
  262. package/src/createBindingOption.js +0 -66
  263. package/src/createEventBinding.js +0 -46
  264. package/src/eventSystem.js +0 -46
  265. package/src/hoverBinding.js +0 -57
  266. package/src/index.js +0 -26
  267. package/src/renderTemplate.js +0 -128
  268. package/src/util.js +0 -648
  269. package/test/specs/blurBinding.spec.js +0 -57
  270. package/test/specs/formBinding.spec.js +0 -292
  271. package/test/specs/ifBinding.spec.js +0 -169
  272. package/test/specs/templateBinding.spec.js +0 -117
  273. package/vendors/jasmine-jquery.js +0 -841
  274. 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>