You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -46,11 +46,11 @@ results might be for mixed browser versions, number of runs per benchmark may va
46
46
47
47
## Keyed vs non-keyed frameworks
48
48
49
-
Some frameworks like react, vue.js or angular allow to create a 1:1-relationship between a data item and a DOM node by assigning a “key” attribute (or for angular specifying “trackBy” in *ngFor). If you use some identifier of the data as the key you get the “keyed” mode. Any update to the data will update the associated DOM node. If you reorder the list, the DOM nodes will be reordered accordingly.
49
+
Some frameworks like React, Vue.js or Angular, allow you to create a 1:1relationship between a data item and a DOM node by assigning a “key” attribute (or for Angular, specifying “trackBy” in *ngFor). If you use some identifier of the data as the key, you get the “keyed” mode. Any update to the data will update the associated DOM node. If you reorder the list, the DOM nodes will be reordered accordingly.
50
50
51
-
The other mode is “non-keyed” and this is what e.g. vue.js uses by default for lists. In this mode a change to the data items can modify DOM nodes that were associated with other data before. This can be more performant, since costly DOM operations can be avoided (e.g. first removing old nodes, and the adding new nodes) and the existing DOM nodes are updated to display the new data. For react and angular using the item index as the key uses “non-keyed” mode for those frameworks.
51
+
The other mode is “non-keyed” and this is what e.g. vue.js uses by default for lists. In this mode, a change to the data items can modify DOM nodes that were associated with other data before. This can be more performant, since costly DOM operations can be avoided (e.g. first removing old nodes and then adding new nodes) and the existing DOM nodes are updated to display the new data. For React and Angular, using the item index as the key uses “non-keyed” mode for those frameworks.
52
52
53
-
Depending on your requirements the “non-keyed” mode can be a performance gain or can cause severe problems so one must choose carefully the mode and check that the framework supportsthatmode.
53
+
Depending on your requirements, the “non-keyed” mode can be a performance gain or can cause severe problems, so one must carefully choose the mode and check that the framework supportsthatmode.
54
54
55
55
Read more here: [https://www.stefankrause.net/wp/?p=342](https://www.stefankrause.net/wp/?p=342)
56
56
@@ -72,7 +72,7 @@ v20.8.0
72
72
```
73
73
74
74
## 1.2 Downloading the pre-built binaries and starting the server
75
-
Builiding all frameworks can be challenging. There's a new way that allows to skip that and just run the benchmark without builiding all implementationss.
75
+
building all frameworks can be challenging. There's a new way that allows to skip that and just run the benchmark without builiding all implementations.
76
76
77
77
78
78
Start with checking out a tagged release like that. Pick the release that you want (e.g. chrome 100):
@@ -106,13 +106,13 @@ npm run results
106
106
Open js-framework-benchmark/webdriver-ts-results/table.html in a browser and take a look at the results. You can open the result table with the link [http://localhost:8080/webdriver-ts-results/table.html](http://localhost:8080/webdriver-ts-results/table.html)
107
107
108
108
109
-
Here's what you should do when the benchmark run was not sucessful. Let's assume the benchmark printed the following to the console:
109
+
Here's what you should do when the benchmark run was not successful. Let's assume the benchmark printed the following to the console:
110
110
```
111
111
================================
112
112
The following benchmarks failed:
113
113
================================
114
114
Executing frameworks/non-keyed/ef-js and benchmark 04_select1k failed: No paint event found
115
-
run was not completely sucessful Benchmarking failed with errors
115
+
run was not completely successful Benchmarking failed with errors
116
116
```
117
117
You'll now have to run the benchmark again for those that failed like that:
0 commit comments