Some columns have inputs that can be either a text, select or checkbox type. I have a table with 18 rows and 66 columns.
#VUE V FOR CODE#
I know it may be the issue of the, but I am worried this may be related to how the style loader is implemented in Vue.Īnother finding is that, only using this code will cause the "Maximum call stack size exceeded" but not using the v-for in template React.js with the material ui library is significantly shower than rendering just 20,000 divs but it can be done within seconds however the Vue.js with its material ui library never renders and hangs the browser. However, since we need to use Vue.js with a material ui library, I tested using Vue.js to render 20,000 raised buttons to using React.js with material ui library to rendering 20,000 raised buttons. Vue.js can rendering 10,000,000 divs in about 120 seconds which is better than 180 seconds of React.js When either the index.html imports the CSS files or using import in the JS file, the will slow down the rendering quite a lot.Īfter removing any references of CSS file, Vue.js actually shows better performance than React. Import 'vue-material/dist/theme/default.css' With the capacity like React.js, we can go a lot further without reaching the limitation of the platform. When adding a one or more complex components such as a Vue material design button to each component, the rendering will unbearably slow and I have to optimize the component without using any advanced component in it in order to let it renders in reasonable time.Īlthough the ultimate solution for rendering a large amount of data may be using paging or other techniques but in my opinion, capacity is also important. I actually came to this issue when rendering just about 2000 components with each of them primary just contains a file name. With the capacity of rendering 100,000 lines within 7 seconds, the application will accommodate a lot more scenarios without complex solutions. For example a data set may never reaches 100,000. Many application may need to render large amount of data occasionally but the amount of data is within a range. The conclusion is that React.js has more capacity than Vue.js when rending large amount of data. However React.js can "easily" render all 100,000 lines in about 7 seconds. The worst for Vue.js is that when testing rendering 100,000 lines, Vue.js will just hang the browser (Chrome) and I have to kill the browser process through OS. Vue.js takes 30 seconds to render and React.js takes 5 seconds to render. My only solution is the most terrible solution which is generating the HTML in javascript. Im using vue-perfect-scrollbar for scrolling the main content.Im using v-for still, but i've switched to (i in data.length) so instead of all of the data being stored, its only storing the index and that's how im retrieving the value for each column.Im using Vue Material currently (but my tables are my own code).I changed my table elements to divs (very little performance impact).For example, loading the next batch with this amount of rows takes almost 7s, and after that it would take maybe 8s. Furthermore, loading more batches takes increasingly longer loading times. For example, when I click a button that brings up a modal, it simply changes the state from open = false to open = true and this takes about 10-20s with this amount of rows in the table. Its also really important to mention that changing other state values is extremely slow. If you look closely the scrolling is more glitchy, not as smooth. This is a GIF of me scrolling after about 10 more batches of 50 rows each. This is a GIF of me scrolling on the first batch.