High CPU usage and unresponsive autocomplete

[avvertix]

Hi, thanks for the great extension that saved me a lot of time. With the latest update (0.6.3) I was experiencing some hiccups. Although I'm not sure this is a bug or a problem of the extension per se I'm opening the issue in case someone is searching the same problem and trying to find a solution (or at least the solution that worked for me).

Description

• Extension version: 0.6.3
• VSCode Version: 1.56.2
• OS: Windows 10 (10.0.19041)

I was migrating a static site project that used Tailwind 1.9 to Tailwind 2.1 and after updating all Javascript dependencies to use Laravel Mix 6 and Tailwind 2.1 the autocomplete was very slow and unresponsive. I was experiencing this in Blade files, but I think it was not really connected to the type of file.

From the task manager the effect of this was a process, pertaining to VSCode, using more than 7GB of RAM and about 60% of the CPU continuously. Terminating that process would terminate and restart the Tailwind CSS IntelliSense extension. After that the extension works for some minutes before again occupy all the resources

I'm referencing here the loaded versions and files as reported in the output of the extension. The tailwind config file is almost empty.

Found Tailwind CSS config file: ***\tailwind.config.js
Loaded postcss v8.2.15: ***\node_modules\postcss
Loaded tailwindcss v2.1.2: ***\tailwindcss

Actions done

After some time I decided to disable the extension to confirm that the problem was caused by the Tailwind IntelliSense and in fact the CPU and RAM usage was back to an acceptable level. Re-enabling the extension unfortunately recreate the same problem.

In order to resolve it I uninstalled the extension and installed it again. Once reinstalled the autocomplete was again very quick and the system resources were back to a normal level.

I'm not sure what was causing the problem and I didn't investigate it deeply.

[alexweininger]

I am experiencing the exact same issue, and narrowed it down to this extension. Uninstalling and reinstalling does not fix the issue for me.

[avvertix]

Turns out that my solution worked for me, but probably for a coincidence. I edited the tailwind.config.js to add the Typography plugin and saved the file and the extension host process of VSCode started to consume cpu and ram again.

I noticed that the autocomplete takes a while after a change in the configuration, so it must be due to an internal rebuild. I'm not using the JIT so the produced CSS is 3MB and this might add to the time required to recalculate the intellisense.

I have also a watcher active to rebuild the site I'm working on. I'm not sure if this also plays a role.

To further narrow down the problem I decided to install one of the older version, the v0.6.0, from VSIX to check if the problem was introduced somehow in a patch.

I'm currently monitoring the cpu and ram usage while working on the website. Let's see if I'm able to get some more insights.

[alexweininger]

I actually reverted back to version 0.5.10 and it seems to have fixed my issues. I reverted this far back because I noticed that there were some other issues (#326, #325, #318, #315) that reported issues with the autocomplete and intellisense performance.

Tip (not sure if this is an insiders feature only) but you can install different versions of extensions without installing from the VSIX:

[bradlc]

I am pretty sure this is a duplicate of #316, but maybe not. Either way, please can you update to v0.6.4 and let me know if the problem persists.

[avvertix]

Installing now the new release. I'm not entirely sure it was the JIT since I didn't activate it on that project and I didn't see duplicates in the intellisense. Will comment again after some hours of use. Thanks @bradlc

[avvertix]

I have tried to recreate the original problem, but I was not fully able. I saw only some lags when saving rapidly the Tailwind config file while having Laravel Mix in watch mode with browsersync active. At this point I think it can be as you said, an effect of #316

[alexweininger]

I'm installing 0.6.4 now, will update again later after working for a little while. Thanks for the quick response!!!

[alexweininger]

I don't think 0.6.4 has fixed my issues.

[avvertix]

Now I experienced it again, when I pressed Ctrl+Spacebar to show the autocomplete it was lagging and the VSCode extension host process was using a good amount of resources. I'm not sure how to investigate it further

[bradlc]

@alexweininger @avvertix If you're not using v0.6.5 please update. Then, if you are seeing CPU issues please run code --status on the command line and paste the output here if possible, thanks!

[avvertix]

Sure, upgrading now, I didn't realize there was a new patch version

[bradlc]

Sure, upgrading now, I didn't realize there was a new patch version

I published it today to change the server filename from index.js to tailwindServer.js – makes it easier to identify in the code --status output 😅

[avvertix]

I have more insights. I tried in different conditions. Since I'm building a static website I decided to try with yarn watch with browser sync active and manually building the website. In both scenarios I ran into high cpu and ram consumption. Here the code --status output while the autocomplete was lagging

Version:          Code 1.56.2 (054a9295330880ed74ceaedda236253b4f39a335, 2021-05-12T17:13:13.157Z)
OS Version:       Windows_NT x64 10.0.19041
CPUs:             Intel(R) Core(TM) i7 CPU         860  @ 2.80GHz (8 x 2807)
Memory (System):  15.96GB (5.46GB free)
VM:               0%
Screen Reader:    no
Process Argv:     --crash-reporter-id b7a02981-3e83-41bf-af6d-30cff16b7adc
GPU Status:       2d_canvas:                  enabled
                  gpu_compositing:            enabled
                  multiple_raster_threads:    enabled_on
                  oop_rasterization:          unavailable_off
                  opengl:                     enabled_on
                  rasterization:              unavailable_off
                  skia_renderer:              enabled_on
                  video_decode:               enabled
                  vulkan:                     disabled_off
                  webgl:                      enabled
                  webgl2:                     enabled

CPU %   Mem MB     PID  Process
    0       89   22704  code main
    0       22    2652     crashpad-handler
    0      126    8676     gpu-process
    0       74   13912     shared-process
    0       60   22640       ptyHost
    0       53    1476         C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe
    0        5   14372           C:\WINDOWS\system32\cmd.exe /c ""C:\Program Files (x86)\Yarn\bin\yarn.cmd" watch"
    0       44   10540             node  "C:\Program Files (x86)\Yarn\bin\\yarn.js" watch
    0        5   22688               C:\WINDOWS\system32\cmd.exe /d /s /c "mix watch"
    0       22   17912                 "C:\Program Files\nodejs\node.exe"    "C:\Users\***\Documents\GitHub\***\node_modules\.bin\\..\laravel-mix\bin\cli.js" watch
    0        5   14612                   electron_node config.js
    0      261    9820                     "C:\Program Files\nodejs\\node.exe"  "C:\Program Files\nodejs\\node_modules\npm\bin\npx-cli.js" webpack --progress --watch --config="node_modules\laravel-mix\setup\webpack.config.js"
    0        6   12932         console-window-host (Windows internal process)
    0        6   20088         console-window-host (Windows internal process)
    0       83   23172         C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe
    0        5    6656           C:\WINDOWS\system32\cmd.exe /c ""C:\Users\***\AppData\Local\Programs\Microsoft VS Code\bin\code.cmd" --status"   
    0       73   22360             electron_node cli.js
    0       91   19956               "C:\Users\***\AppData\Local\Programs\Microsoft VS Code\Code.exe" --status
    0       65   13452                 crashpad-handler
    1       76   17992                 gpu-process
    0       38   15800     utility
    0      229   19548     window (ÔùÅ footer.blade.php - **** - Visual Studio Code)
    0       19    9264       watcherService
    0        7    9880         console-window-host (Windows internal process)
    0       73   10592       searchService
    0      124   17808       extensionHost
    0       94    1732         "C:\Users\***\AppData\Local\Programs\Microsoft VS Code\Code.exe" "c:\Users\***\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\html-language-features\server\dist\node\htmlServerMain" --node-ipc --clientProcessId=17808
    0       72   13600         "C:\Users\***\AppData\Local\Programs\Microsoft VS Code\Code.exe" "c:\Users\***\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\css-language-features\server\dist\node\cssServerMain" --node-ipc --clientProcessId=17808
    0       87   18848         electron_node htmlServerMain.js
   47     3847   22788         electron_node tailwindServer.js

Workspace Stats:
|  Window (footer.blade.php - *** - Visual Studio Code)
|    Folder (www-****-xyz): 3164 files
|      File types: php(2107) md(81) text(60) xhtml(56) json(51) woff2(44)
|                  jpg(43) woff(40) rst(37) png(36)
|      Conf files: package.json(2) makefile(1)

The strange effect is that when editing with no webserver active or watch everything seems to runs smoothly and fast as expected, but when I rebuild the website the cpu spikes again for some time. Considering that the static site builds the html in a folder within the opened folder in VSCode I'm thinking that there should be a connection. I'm also trying on a different computer to see if there is something else to consider.

[bradlc]

The strange effect is that when editing with no webserver active or watch everything seems to runs smoothly and fast as expected, but when I rebuild the website the cpu spikes again for some time.

I don't suppose there's any way you can share your project, even just privately with me?

[avvertix]

I think I can let you access a stripped version by excluding some information that should not be visible. I'll sort it out and let you know.

[avvertix]

I got the ok, so I invited you to a private repo with a stripped version. Let me know if you prefer to switch to email communication

[VladimirMikulic]

@bradlc I am experiencing the same issue on a private Next.js codebase (30k lines).

electron_node tailwindServer.js 1755MB of RAM and it keeps rising until it completely crashes the desktop.

[vesper8]

Had to revert to 0.5.10 too.. it was getting worse and worse.. my fans were spinning like jet engines and my system was becoming unresponsive.. and all this while editing a Laravel project with php files and no Tailwind classes anywhere

[alaadahmed]

I have the exact same issue, I thought it is concern with VSCode v 1.56.2 because I noticed it after upgrading vscode, but then I found out the extension is consuming really high cpu and memory and fans always very loud. I have version 0.6.6

[rexdesigndk]

I have the exact same issue, I thought it is concern with VSCode v 1.56.2 because I noticed it after upgrading vscode, but then I found out the extension is consuming really high cpu and memory and fans always very loud. I have version 0.6.6

Reverting back to 0.5.10 seems to have fixed it for me. Before it was forcing my ram to 90% usage and 100% cpu.

[taylorthurlow]

Also experiencing this on 0.6.6 on a smaller Ruby/Rails codebase. If it means anything I am also using Onivim2, so not VSCode.

[bradlc]

Hey all. I am keen to get to the bottom of this, so I have just published a new version of the extension (v0.6.7) with a new setting: tailwindCSS.inspectPort. This will allow you to inspect the language server Node process:

1. Set the tailwindCSS.inspectPort setting to a number (typically a 4-digit number but not sure it matters)
2. Reload the VS Code window. You can do this using the Developer: Reload Window command or you can just close your window and reopen it.
3. Open Chrome and navigate to chrome://inspect
4. Click Configure... and add localhost:{port} (e.g. localhost:1234) to the list of hosts
5. Click Done
6. The language server should now show up under Remote Target. The file will be something like /Users/brad/.vscode/extensions/bradlc.vscode-tailwindcss-0.6.7/dist/server/tailwindServer.js – click inspect

This is where my knowledge is limited but from here you can record a CPU profile (Profiler tab) or take a memory snapshot (Memory tab). If you're experiencing high CPU usage I would really appreciate you recording a profile and sharing it here, and hopefully it will provide some clues 🕵️‍♂️ Thank you! 🙏

[rexdesigndk]

Sure. I just recorded a cpu profile for you to look at. Hopefully it helps you. While i used the profiler it spiked at 70% cpu in the vscode process explorer

cpu profile.zip

[bradlc]

Thank you @rexdesigndk! 🙏 So my working theory based on that is that it's something to do with the file watcher (chokidar). I am actually working on removing the file watcher completely but want to test a few things first to see if we can find the root cause, because some editors (not VS Code) will still need to use it.

I have created a couple of special builds with specific changes. I have still been unable to reproduce the issue myself so I would appreciate it if anyone could try out both of these builds and let me know if the issue persists:

• vscode-tailwindcss-0.6.8-no-watch.zip – file watcher is completely removed. If the issue is related to the file watcher at all then it shouldn't be present with this build. This build is not fully functional as it doesn't respond to config changes.
• vscode-tailwindcss-0.6.8-downgrade.zip – chokidar is downgraded to v3.3.1. This is the version used by v0.5.10 of the extension that people have said doesn't have the issue.

To install:

1. Download the .zip file and replace the .zip extension with .vsix
2. Uninstall any existing Tailwind CSS IntelliSense extension and reload the VS Code window
3. Run the Extensions: Install from VSIX... command from the command palette and select the .vsix file

[rexdesigndk]

I installed both versions and used the chrome profiler while i was developing on a project.

• profiles.zip

Just looking at the process explorer It seemed to me that removing chokidar helped a lot. But downgrading it, didn't seem to help at all.

[bradlc]

Amazing, thank you again @rexdesigndk ❤️

The no-watch profile, which doesn't have a watcher, looks much healthier to me, so I'm fairly sure your issue is related to the watcher. I still don't know exactly why that is though 🤔 The downgrade profile looks slightly better than the original one (maybe?), but still seems not good.

I have one more build that I'm curious about if you wouldn't mind testing this one: vscode-tailwindcss-0.6.8-cwd.zip. This one has a minor change to the chokidar options that may or may not do anything 😅

Really appreciate you taking to time to help debug this!

[rexdesigndk]

Amazing, thank you again @rexdesigndk ❤️

The no-watch profile, which doesn't have a watcher, looks much healthier to me, so I'm fairly sure your issue is related to the watcher. I still don't know exactly why that is though 🤔 The downgrade profile looks slightly better than the original one (maybe?), but still seems not good.

I have one more build that I'm curious about if you wouldn't mind testing this one: vscode-tailwindcss-0.6.8-cwd.zip. This one has a minor change to the chokidar options that may or may not do anything 😅

Really appreciate you taking to time to help debug this!

Sure no problem. Here you go
cwd-profile.zip

[avvertix]

I'm late, but here my profiles

0-6-8-profiles.zip

The content is the following

• 0-6-8-cwd-test-case-1.cpuprofile under which I did a yarn dev to build my project, followed by a change in the tailwind config by removing one line under purge section to trigger the file watch, and finally I added back the same line and changed an unrelated file
• 0-6-8-cwd-test-case-watch.cpuprofile under which I did the same actions as in the previous test, but having yarn watch active in my project, which listen for all file changes in the source directory, including the tailwind config file
• 0-6-8-no-watch-test-case.cpuprofile using the no-watch you provided in an earlier comment. In this case I did the same actions as for 0-6-8-cwd-test-case-1.cpuprofile

So my working theory based on that is that it's something to do with the file watcher (chokidar)

@bradlc I'm thinking the same as you, at least in my case having the watcher also at the project level to rebuild the static website as I work on it seems to suggest that the intellisense plugin receives a lot of notifications from chokidar (I believe it receives also notifications about git changes, as the project is under version control). I'm not sure if this causes more internal rebuild, as from the method names in the profile is not clear.

I'm not sure and I don't know if could be a possibility, but considering that in my case also the RAM was filling, maybe there is a chance you are recreating an instance of something that references the file system watcher. This is just a guess and the memory snapshot is not so readable and also difficult to obtain when the problem arises, so I don't have proof

[bradlc]

@avvertix Yeah the memory thing is still a mystery to me. Thanks for the profiles, they are super interesting! So bizarre that the issue seems to only present itself when you run a build, or have your own watcher running. Are you using Docker by the way?

Also a couple follow-up questions for you @rexdesigndk: are you using Docker or something else where your project is running inside a virtual machine? Also did you have a watcher running when you did your profiles?

[vesper8]

I suspect this may be related to an extension that we all use. Off the top of my head I use https://github.com/Zignd/HTML-CSS-Class-Completion and https://github.com/bmewburn/vscode-intelephense which are both watcher-type extensions

[rexdesigndk]

@avvertix Yeah the memory thing is still a mystery to me. Thanks for the profiles, they are super interesting! So bizarre that the issue seems to only present itself when you run a build, or have your own watcher running. Are you using Docker by the way?

Also a couple follow-up questions for you @rexdesigndk: are you using Docker or something else where your project is running inside a virtual machine? Also did you have a watcher running when you did your profiles?

Yes i run my projects in a docker container and i have npm watch running.

[avvertix]

@avvertix Yeah the memory thing is still a mystery to me. Thanks for the profiles, they are super interesting! So bizarre that the issue seems to only present itself when you run a build, or have your own watcher running. Are you using Docker by the way?

No, I have PHP 7.4 and Node 14 installed directly on my computer. I use Yarn as package manager on those projects, version 1.22.

@vesper8 I suspect this may be related to an extension that we all use.

I'll try to disable all the extensions except Tailwind IntelliSense to get a better idea if those can have an impact.

There are the ones I currently have active

• PHP Intelephense https://github.com/bmewburn/vscode-intelephense
• Blade snippets https://github.com/onecentlin/laravel-blade-snippets-vscode
• Gitlens https://github.com/eamodio/vscode-gitlens.git
• Alpine IntelliSense https://github.com/AdrianWilczynski/AlpineIntelliSense.git

I'm not entirely sure how others could play a role, but I'll try to disable all of them for a test.

@bradlc Btw I discovered a pretty interesting option, in the process explorer within VS Code you can debug the tailwindServer by right click and choose Debug. VS Code then will connect the debugger to it. Unfortunately the code is minified and unreadable, so I'm not sure where to put a breakpoint.

[VladimirMikulic]

I suspect this may be related to an extension that we all use. Off the top of my head I use https://github.com/Zignd/HTML-CSS-Class-Completion and https://github.com/bmewburn/vscode-intelephense which are both watcher-type extensions

I don't use any of these :)

[bradlc]

@avvertix How was your memory usage looking when using the no-watch build? Was it improved?

[avvertix]

From what I observed it was acceptable and improved in comparison with the abnormal consumption in the other case. Let me do another test to confirm that.

[bradlc]

@avvertix Thanks! This build has some logging when directories are being read by chokidar: vscode-tailwindcss-0.6.8-read-log.zip – it's also unminified

If you could, install this build and take a look in the server output (Tailwind CSS: Show Output command). Is it constantly logging? And if so, which directory/directories is it reading?

[avvertix]

awesome @bradlc I'll try it immediately

[avvertix]

@bradlc here it is the output file with the debug info

intellisense-debug.txt

Is it constantly logging?

yes, and it prints various undefined plus all the content of the folder where I have the tailwind.config.js, except node_modules which I believe is ignored per configuration.

The execution was:

• Install the extension
• Save manually the tailwind.config.js
• Activate the watcher (two builds)

I think the listed paths will be self-explanatory, but the line 8493 states when the plugin finished the initialization with Found Tailwind CSS config file...

it's also unminified

Thanks, I saw where you placed the debug log and the files array usually contains around 30 entries each time. Is difficult to follow the async execution, but at a glance the more the watcher notifies changes in the files the more time is spent in the promise.all that is after your console.log.

I also took a bit of time to profile the RAM usage, but I was able only to get information up to a certain point of the execution as heap memory dump is unreliable when the problem appears. Basically it starts with around 64 MB and then after the first save was already at 140 MB. I guess this is connected to the number of files in my folder that the watcher notifies each times a save operation happens or a change in the folder structure.

[bradlc]

Thanks @avvertix! I really have no idea what's causing this haha. My latest approach is to just replace chokidar and hope the issue goes away 😅 vscode-tailwindcss-0.6.8-parcel.zip – if anyone is able to try this build and run a CPU profile for a bit that would be amazing.

[avvertix]

Thanks @bradlc ! I installed right now the build. I'll run the profiler and let you know.

[avvertix]

Here some profiles @bradlc

0.6.8-parcel--profiles.zip

• single-yarn-dev, is just a single one shot build after installing the extension
• single-yarn-dev-with-autocomplete, another one shot build plus some triggering of autocomplete
• long-running-watch, having the watcher on my project for building when I hit save. In this I also edited the tailwind config file to add new colors and then triggered the autocomplete on those new colors for backgrounds

At a glace I would tentatively say that the profiles looks more natural than the previous ones. Also the memory consumption (seen from the memory profiler) seems stable spanning from 35 MB (before the tests) to 80 MB after the end of each test.

[bradlc]

Ok yeah that is looking way better! 🙌 I have one last build if you wouldn't mind trying it out? This one still uses chokidar but adds some more stuff to the ignored option: vscode-tailwindcss-0.6.8-ignore.zip

Following any feedback from this build I am planning to get a release out this week that will hopefully address this issue 👍

[avvertix]

I will for sure try it out!

[avvertix]

A bit later than expected, but here it is

0.6.8-ignore-profile.zip

It is a longer single session doing the usual edit to the file alone, do a build of the project, call the autocomplete and then use the watcher.

I think this build is in the middle between 0.6.8 and 0.6.8-parcel about how it feels. The graphs are very similar, probably 0.6.8-ignore do more work in between of builds due to some notifications from chokidar that do not happen with parcel.

[bradlc]

Thank you @avvertix and @rexdesigndk for your help debugging this ❤️ The latest release (v0.6.9) no longer uses a custom file watcher at all. Anyone that was having CPU or memory issues please try it out and let me know if you're still seeing these 🙏

[avvertix]

You're welcome @bradlc

Upgrading to 0.6.9 at the speed of light

[bradlc]

How's it looking @avvertix? 👀

[avvertix]

So far everything is good on my side. I would say the issue is resolved and can be closed from my point of view

[rexdesigndk]

So far everything is good on my side. I would say the issue is resolved and can be closed from my point of view

Same for me. It's been running flawless 👌

[bradlc]

So far everything is good on my side. I would say the issue is resolved and can be closed from my point of view

Brilliant! I'll close this then, but feel free to open a new issue in the future if you run into anything else 👍

[diogoterremoto]

For anyone else that might still occur this: I had the whole user folder /Users/$USER open in one tab. Closing it resolved the issue.