Coder Social home page Coder Social logo

Comments (2)

Osmose avatar Osmose commented on May 18, 2024

+1, will keep in mind during refactoring

from advanced-open-file.

Osmose avatar Osmose commented on May 18, 2024

So I've spent a few weekends working on this, and I've got something close, but not quite there: https://github.com/Osmose/advanced-open-file/compare/react

Here's what happened:

  1. I wanted to make all the file operations async. But the current view code had grown to be difficult to follow and made making this change difficult.
  2. I rewrote the view code in React to see if it was easier to manage. My attempt was more complex than I'd like, but it was enough! There wasn't any real major performance improvement, which was expected.
  3. I moved all the file operation methods out of the Path model class an into a single fileService object. This was to implement caching of file operations in one spot. It didn't really help our speed on large directories. I realized that the massive amount of DOM elements being inserted was a likely culprit.
  4. I found a lovely React library called react-infinite that would only render visible elements in the list. It made a huge difference in the rendering time of directories with a lot of elements. However, loading the directory still took a second or two, and froze the UI.
  5. I made all the file operations async. It was a lot of playing the What Color is Your Function? game. This avoided locking up the UI for the first large directory read, but subsequent reads were still slow. I suspected the caching was to blame, but I tested by rendering the large list of files and then filtering on a common prefix, to avoid the caching. It still locked up.

I suspected that the React DOM diffing was taking a long time, but my recent profiling attempts show some weird call graphs:

screen shot 2016-04-16 at 5 19 22 pm

That's after typing another letter in a common prefix of a directory with 10,000 files. Those three flat peaks are topped with removeChild calls that take between 50ms and 100ms deep within React's DOM-change code. But those huge gaps are trouble too.

So I'm still investigating. But help is always appreciated!

from advanced-open-file.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.