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?