emmetio / livestyle-sublime-old

Live bi-directional CSS edit of new generation
http://livestyle.emmet.io
260 stars 23 forks source link

How to throttle livestyle to prevent slowdowns on large files? #153

Open yuchant opened 9 years ago

yuchant commented 9 years ago

Hey all,

This plugin is the single most exciting thing I've seen in web development, especially when working with remote-only sites, and I've been using livereload for years. Thank you!

How can I throttle the plugin so that it only responds to saves, or every X miliseconds?

I am using the alpha, and it currently causes major slowdowns in ST3 on large 6000 line+ sass files.

Shopify doesn't support @import so shrinking these files is not an option.

Thank you, thank you, thank you.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/25337315-how-to-throttle-livestyle-to-prevent-slowdowns-on-large-files?utm_campaign=plugin&utm_content=tracker%2F305388&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F305388&utm_medium=issues&utm_source=github).
sergeche commented 9 years ago

Can you post an example of such file? ST3 shouldn’t slow down here because it doesn’t do any calculations, it only sends data to Chrome

yuchant commented 9 years ago

Hey @sergeche,

Thanks so much for your response.

Here's the actual file in question. https://gist.github.com/yuchant/52cf803d9dc3cf50d3b0

I've been trying to read up on the sublime API / tornado.. but not getting anywhere quite yet.

I added some print statements to the plugin you can see here (max typing speed): http://gyazo.com/a077223f31456c1238a4cc51c9eec179

Example of typing with livestyle disabled: http://gyazo.com/6ecff310e1af497834ebcfb1810815da

I'll keep playing around with the plugin.. any suggestions would be hugely appreciated!

yuchant commented 9 years ago

Throttling the send function in livestyle.client for calculate-diff requests is my current solution, but I'm sure this is a terrible hack. Not too familiar with the sublime plugins or tornado.

Edit: this skips diffs and causes bad syncs. Time to dig into the sublime api.

Currently copying from the Git Gutter package debounce/async method.

# modify to use async + debounced function
def on_modified_async(self, view):
    if is_supported_view(view, True) and not editor_utils.is_locked(view):
        self.debounce(view, 'calculate-diff', lambda view: client.send('calculate-diff', editor_payload(view)))

def debounce(self, view, event_type, func):
    key = (event_type, view.file_name())
    this_keypress = time.time()
    latest_keypresses[key] = this_keypress

    def callback():
        latest_keypress = latest_keypresses.get(key, None)
        if this_keypress == latest_keypress:
            func(view)

    sublime.set_timeout_async(callback, 500)
sergeche commented 9 years ago

The general solution is to send calculate-diff message and then wait for incoming diff message which means current payload was calculated. In-between calculate-diffdiff any on_modified editor events must simply tell that there are more updates so when diff message is received a new calculate-diff message must be sent.

A more robust solution is to wait until complete calculate-diffdiffapply-patchpatch messaging chain is complete for a single update, it will save even more resources.

sergeche commented 9 years ago

See https://github.com/livestyle/client#events-reference for event reference