chore: add screenshots and conclusion

David-Pena · Aug 6, 2024 · a863ffc · a863ffc
1 parent 3315377
commit a863ffc
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -27,5 +27,17 @@ This repository contains a simple yet effective benchmarking tool to compare the
 
 ## 📸 Screenshot
 
-![Benchmark Screenshot](/assets/screenshot.png)
-![Benchmark Results Screenshot](/assets/screenshot-results.png)
+![Benchmark Results Screenshot w 10_000](/assets/ss-results-10000.png)
+![Benchmark Results Screenshot w 20_000](/assets/ss-results-20000.png)
+![Benchmark Results Screenshot w 50_000](/assets/ss-results-50000.png)
+
+## 📊 Conclusion
+
+The benchmark results clearly indicate that **class selectors consistently outperform element selectors** in terms of speed when applying styles in JavaScript. As the number of HTML elements increases, the time difference between the two selector types becomes more pronounced. Specifically:
+
+- With **10,000 HTML elements**, class selectors are approximately **17% faster** than element selectors.
+- With **20,000 HTML elements**, class selectors are around **12% faster** than element selectors.
+- With **50,000 HTML elements**, class selectors are about **18% faster** than element selectors.
+
+> [!IMPORTANT]
+> These findings suggest that using class selectors can lead to more efficient performance, especially in scenarios with a large number of elements. Therefore, for better performance in styling large-scale web applications **class selectors should be preferred** over element selectors.
diff --git a/assets/screenshot-results.png b/assets/screenshot-results.png
diff --git a/assets/ss-results-10000.png b/assets/ss-results-10000.png
diff --git a/assets/ss-results-20000.png b/assets/ss-results-20000.png
diff --git a/assets/ss-results-50000.png b/assets/ss-results-50000.png