<p dir="auto">Electron <code class="notranslate">1.7.9</code><br>
OS - <code class="notranslate">macOS 10.12.6</code>  <code class="notranslate">Windows 10</code></p>
<hr>
<p dir="auto">Calling <code class="notranslate">fs.readdirSync</code> in recursive manner from renderer process freezes the application.</p>
<p dir="auto"><strong>STR:</strong></p>
<ul dir="auto">
<li>Run following function from devtools and try to click via electron application<br>
<em>change <code class="notranslate">dir</code> with some large directory which contains many files, so function run for some time</em></li>
</ul>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var fs = require('fs')
var path = require('path')

var dir = '/Users'
var totalFiles = [0]
var filesArray = []
var sizesArray = []


function getFilesRecursively(dir, totalFiles, filesArray, sizesArray){

  try { var files = fs.readdirSync(dir); }
  catch(err) { } // 'fs.readdirSync(dir) -', console.warn(err.message)  }

  for(var i in files){
        
    var name = path.join(dir, files[i])

    try {  

        let stats = fs.lstatSync(name)  // track symlink as link, but not as file

        if (stats.isDirectory())
            getFilesRecursively(name, totalFiles, filesArray, sizesArray) 
    

        // filtering out symlinks, sockets etc    
        else if (stats.isFile()) {
            
            // we can't use regular counter, since incrementing a primitive value doesn't change the value back in the caller function's scope.
            // https://stackoverflow.com/a/48378462/4537590
            totalFiles[0]++  
 
            // filtering out 0 size files
            if (stats.size &gt; 0) {   
                sizesArray.push(stats.size)
                filesArray.push(name) 
            }
        } 

        } catch(err) { } // console.warn('fs.lstatSync(name) -', err.message) }   
    
    }
       
    console.log(filesArray.length) // console logging to see function progress
    return { &quot;files&quot; : filesArray, &quot;sizes&quot; : sizesArray, &quot;total_files&quot; : totalFiles }
}
"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">fs</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'fs'</span><span class="pl-kos">)</span>
<span class="pl-k">var</span> <span class="pl-s1">path</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'path'</span><span class="pl-kos">)</span>

<span class="pl-k">var</span> <span class="pl-s1">dir</span> <span class="pl-c1">=</span> <span class="pl-s">'/Users'</span>
<span class="pl-k">var</span> <span class="pl-s1">totalFiles</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span>
<span class="pl-k">var</span> <span class="pl-s1">filesArray</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-kos">]</span>
<span class="pl-k">var</span> <span class="pl-s1">sizesArray</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-kos">]</span>


<span class="pl-k">function</span> <span class="pl-en">getFilesRecursively</span><span class="pl-kos">(</span><span class="pl-s1">dir</span><span class="pl-kos">,</span> <span class="pl-s1">totalFiles</span><span class="pl-kos">,</span> <span class="pl-s1">filesArray</span><span class="pl-kos">,</span> <span class="pl-s1">sizesArray</span><span class="pl-kos">)</span><span class="pl-kos">{</span>

  <span class="pl-k">try</span> <span class="pl-kos">{</span> <span class="pl-k">var</span> <span class="pl-s1">files</span> <span class="pl-c1">=</span> <span class="pl-s1">fs</span><span class="pl-kos">.</span><span class="pl-en">readdirSync</span><span class="pl-kos">(</span><span class="pl-s1">dir</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span>
  <span class="pl-k">catch</span><span class="pl-kos">(</span><span class="pl-s1">err</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-kos">}</span> <span class="pl-c">// 'fs.readdirSync(dir) -', console.warn(err.message)  }</span>

  <span class="pl-k">for</span><span class="pl-kos">(</span><span class="pl-k">var</span> <span class="pl-s1">i</span> <span class="pl-k">in</span> <span class="pl-s1">files</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
        
    <span class="pl-k">var</span> <span class="pl-s1">name</span> <span class="pl-c1">=</span> <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s1">dir</span><span class="pl-kos">,</span> <span class="pl-s1">files</span><span class="pl-kos">[</span><span class="pl-s1">i</span><span class="pl-kos">]</span><span class="pl-kos">)</span>

    <span class="pl-k">try</span> <span class="pl-kos">{</span>  

        <span class="pl-k">let</span> <span class="pl-s1">stats</span> <span class="pl-c1">=</span> <span class="pl-s1">fs</span><span class="pl-kos">.</span><span class="pl-en">lstatSync</span><span class="pl-kos">(</span><span class="pl-s1">name</span><span class="pl-kos">)</span>  <span class="pl-c">// track symlink as link, but not as file</span>

        <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">stats</span><span class="pl-kos">.</span><span class="pl-en">isDirectory</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
            <span class="pl-en">getFilesRecursively</span><span class="pl-kos">(</span><span class="pl-s1">name</span><span class="pl-kos">,</span> <span class="pl-s1">totalFiles</span><span class="pl-kos">,</span> <span class="pl-s1">filesArray</span><span class="pl-kos">,</span> <span class="pl-s1">sizesArray</span><span class="pl-kos">)</span> 
    

        <span class="pl-c">// filtering out symlinks, sockets etc    </span>
        <span class="pl-k">else</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">stats</span><span class="pl-kos">.</span><span class="pl-en">isFile</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            
            <span class="pl-c">// we can't use regular counter, since incrementing a primitive value doesn't change the value back in the caller function's scope.</span>
            <span class="pl-c">// https://stackoverflow.com/a/48378462/4537590</span>
            <span class="pl-s1">totalFiles</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-c1">++</span>  
 
            <span class="pl-c">// filtering out 0 size files</span>
            <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">stats</span><span class="pl-kos">.</span><span class="pl-c1">size</span> <span class="pl-c1">&gt;</span> <span class="pl-c1">0</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>   
                <span class="pl-s1">sizesArray</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span><span class="pl-s1">stats</span><span class="pl-kos">.</span><span class="pl-c1">size</span><span class="pl-kos">)</span>
                <span class="pl-s1">filesArray</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span><span class="pl-s1">name</span><span class="pl-kos">)</span> 
            <span class="pl-kos">}</span>
        <span class="pl-kos">}</span> 

        <span class="pl-kos">}</span> <span class="pl-k">catch</span><span class="pl-kos">(</span><span class="pl-s1">err</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-kos">}</span> <span class="pl-c">// console.warn('fs.lstatSync(name) -', err.message) }   </span>
    
    <span class="pl-kos">}</span>
       
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">filesArray</span><span class="pl-kos">.</span><span class="pl-c1">length</span><span class="pl-kos">)</span> <span class="pl-c">// console logging to see function progress</span>
    <span class="pl-k">return</span> <span class="pl-kos">{</span> <span class="pl-s">"files"</span> : <span class="pl-s1">filesArray</span><span class="pl-kos">,</span> <span class="pl-s">"sizes"</span> : <span class="pl-s1">sizesArray</span><span class="pl-kos">,</span> <span class="pl-s">"total_files"</span> : <span class="pl-s1">totalFiles</span> <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="getFilesRecursively(dir, totalFiles, filesArray, sizesArray)"><pre class="notranslate"><span class="pl-en">getFilesRecursively</span><span class="pl-kos">(</span><span class="pl-s1">dir</span><span class="pl-kos">,</span> <span class="pl-s1">totalFiles</span><span class="pl-kos">,</span> <span class="pl-s1">filesArray</span><span class="pl-kos">,</span> <span class="pl-s1">sizesArray</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">I've tested this on <a href="https://github.com/electron/electron-api-demos">Electron API Demos</a> app as well which uses <code class="notranslate">"electron": "~1.6.2"</code> It also freezes.</p>
<p dir="auto">Kindly help</p>
<ul dir="auto">
<li>Electron version: 1.6.x, 1.7.x</li>
<li>Operating system: macOS 10.12.5, Windows 10</li>
</ul>
<h3 dir="auto">Expected behavior</h3>
<p dir="auto">Doing blocking (10ms or higher) node operations in main process or in renderer process shouldn't freeze CSS animations in an entirely different BrowserWindow/renderer processes (that only contains HTML/CSS, no JS/node, but has <code class="notranslate">noteIntegration: true</code>).</p>
<h3 dir="auto">Actual behavior</h3>
<p dir="auto">Long <em>blocking</em> node operations (from 10ms to higher) in the main process or in a renderer process will freeze CSS animations in ALL renderer processes.</p>
<h3 dir="auto">How to reproduce</h3>
<ol dir="auto">
<li>Create one BrowserWindow with <code class="notranslate">nodeIntegration: true</code>, and rotate a green square div using CSS animation.</li>
<li>In main process or a different BrowserWindow, do anything that is blocking.</li>
<li>Even if nothing is happening in the BrowserWindow with the animation (pure html/css, no JS), the square rotating animation will be jerky when the blocking operation is happening in the main process or other renderer.</li>
</ol>
<p dir="auto">This is pretty annoying because even extremely small blocking operations will still make a fluid animation (like a infinite rotating loader) jerky.</p>
<p dir="auto">Also, doing the same operation in another BrowserWindow will have the same effect (I'm assuming all node operations, in main or renderer process, are all in the same node thread?).</p>