From 9b0c58b8a610d109e88b22ba5377576f2fe4a575 Mon Sep 17 00:00:00 2001 From: "FiveFilters.org" Date: Fri, 20 Aug 2021 15:54:08 +0200 Subject: Add method to unwrap img inside noscript https://github.com/mozilla/readability/commit/d784bf7e20e25ec1b3a6102a20c83d35fe3ef87d (but code based on current version of Readability.js) --- src/Nodes/DOM/DOMElement.php | 35 + src/Readability.php | 102 ++ test/test-pages/citylab-1/expected-images.json | 1 + test/test-pages/citylab-1/expected.html | 2 +- test/test-pages/lazy-image-1/expected-images.json | 12 + .../test-pages/lazy-image-1/expected-metadata.json | 8 + test/test-pages/lazy-image-1/expected.html | 379 ++++++ test/test-pages/lazy-image-1/source.html | 1277 ++++++++++++++++++++ test/test-pages/mozilla-1/expected-images.json | 2 +- test/test-pages/mozilla-1/expected.html | 2 +- test/test-pages/seattletimes-1/expected.html | 2 +- test/test-pages/yahoo-1/expected.html | 2 +- 12 files changed, 1819 insertions(+), 5 deletions(-) create mode 100644 test/test-pages/lazy-image-1/expected-images.json create mode 100644 test/test-pages/lazy-image-1/expected-metadata.json create mode 100644 test/test-pages/lazy-image-1/expected.html create mode 100644 test/test-pages/lazy-image-1/source.html diff --git a/src/Nodes/DOM/DOMElement.php b/src/Nodes/DOM/DOMElement.php index 900ad56..7486bad 100644 --- a/src/Nodes/DOM/DOMElement.php +++ b/src/Nodes/DOM/DOMElement.php @@ -7,4 +7,39 @@ use fivefilters\Readability\Nodes\NodeTrait; class DOMElement extends \DOMElement { use NodeTrait; + + /** + * Returns the child elements of this element. + * + * To get all child nodes, including non-element nodes like text and comment nodes, use childNodes. + * + * @return DOMNodeList + */ + public function children() + { + $newList = new DOMNodeList(); + foreach ($this->childNodes as $node) { + if ($node->nodeType === XML_ELEMENT_NODE) { + $newList->add($node); + } + } + return $newList; + } + + /** + * Returns the Element immediately prior to the specified one in its parent's children list, or null if the specified element is the first one in the list. + * + * @see https://wiki.php.net/rfc/dom_living_standard_api + * @return DOMElement|null + */ + public function previousElementSibling() + { + $previous = $this->previousSibling; + do { + if ($previous->nodeType === XML_ELEMENT_NODE) { + return $previous; + } + } while ($previous = $previous->previousSibling); + return null; + } } diff --git a/src/Readability.php b/src/Readability.php index d85b987..73a8a54 100644 --- a/src/Readability.php +++ b/src/Readability.php @@ -305,6 +305,9 @@ class Readability } $dom->encoding = 'UTF-8'; + // Unwrap image from noscript + $this->unwrapNoscriptImages($dom); + $this->removeScripts($dom); $this->prepDocument($dom); @@ -834,6 +837,105 @@ class Readability return false; } + + /** + * Check if node is image, or if node contains exactly only one image + * whether as a direct child or as its descendants. + * + * @param DOMElement $node + */ + private function isSingleImage(DOMElement $node) { + if ($node->tagName === 'img') { + return true; + } + + if ($node->children()->length !== 1 || trim($node->textContent) !== '') { + return false; + } + + return $this->isSingleImage($node->children()->item(0)); + } + + /** + * Find all

tag, + * and remove the <noscript> tag. This improves the quality of the images we use on + * some sites (e.g. Medium). + * + * @param DOMDocument $dom + */ + private function unwrapNoscriptImages(DOMDocument $dom) { + // Find img without source or attributes that might contains image, and remove it. + // This is done to prevent a placeholder img is replaced by img from noscript in next step. + $imgs = iterator_to_array($dom->getElementsByTagName('img')); + array_walk($imgs, function($img) { + for ($i = 0; $i < $img->attributes->length; $i++) { + $attr = $img->attributes->item($i); + switch ($attr->name) { + case 'src': + case 'srcset': + case 'data-src': + case 'data-srcset': + return; + } + + if (preg_match('/\.(jpg|jpeg|png|webp)/i', $attr->value)) { + return; + } + } + + $img->parentNode->removeChild($img); + }); + + // Next find noscript and try to extract its image + $noscripts = iterator_to_array($dom->getElementsByTagName('noscript')); + array_walk($noscripts, function($noscript) use($dom) { + // Parse content of noscript and make sure it only contains image + // var tmp = doc.createElement("div"); + // tmp.innerHTML = noscript.innerHTML; + $tmp = $noscript->cloneNode(true); + $dom->importNode($tmp); + //NodeUtility::setNodeTag($tmp, 'div'); + if (!$this->isSingleImage($tmp)) { + return; + } + + // If noscript has previous sibling and it only contains image, + // replace it with noscript content. However we also keep old + // attributes that might contains image. + $prevElement = $noscript->previousElementSibling(); + if ($prevElement && $this->isSingleImage($prevElement)) { + $prevImg = $prevElement; + if ($prevImg->tagName !== 'img') { + $prevImg = $prevElement->getElementsByTagName('img')->item(0); + } + + $newImg = $tmp->getElementsByTagName('img')->item(0); + for ($i = 0; $i < $prevImg->attributes->length; $i++) { + $attr = $prevImg->attributes->item($i); + if ($attr->value === '') { + continue; + } + + if ($attr->name === 'src' || $attr->name === 'srcset' || preg_match('/\.(jpg|jpeg|png|webp)/i', $attr->value)) { + if ($newImg->getAttribute($attr->name) === $attr->value) { + continue; + } + + $attrName = $attr->name; + if ($newImg->hasAttribute($attrName)) { + $attrName = 'data-old-' . $attrName; + } + + $newImg->setAttribute($attrName, $attr->value); + } + } + + $noscript->parentNode->replaceChild($tmp->getFirstElementChild(), $prevElement); + } + }); + } + /** * Removes all the scripts of the html. * diff --git a/test/test-pages/citylab-1/expected-images.json b/test/test-pages/citylab-1/expected-images.json index cfaef1a..8a74adf 100644 --- a/test/test-pages/citylab-1/expected-images.json +++ b/test/test-pages/citylab-1/expected-images.json @@ -1,5 +1,6 @@ [ "https:\/\/cdn.citylab.com\/media\/img\/citylab\/2019\/04\/mr1\/facebook.jpg?1556645448", + "https:\/\/cdn.citylab.com\/media\/img\/citylab\/2019\/04\/mr1\/300.jpg?mod=1556645448", "https:\/\/cdn.theatlantic.com\/assets\/media\/img\/posts\/2019\/04\/AP_8912060228\/cbd32b0e1.jpg", "https:\/\/cdn.theatlantic.com\/assets\/media\/img\/posts\/2019\/04\/AP_945361213236\/888fdd750.jpg" ] \ No newline at end of file diff --git a/test/test-pages/citylab-1/expected.html b/test/test-pages/citylab-1/expected.html index 0fec8c9..36d6553 100644 --- a/test/test-pages/citylab-1/expected.html +++ b/test/test-pages/citylab-1/expected.html @@ -7,7 +7,7 @@ <picture><source srcset="https://cdn.citylab.com/media/img/citylab/2019/04/mr1/940.jpg?mod=1556645448" media="(min-width: 1024px)"> <source srcset="https://cdn.citylab.com/media/img/citylab/2019/04/mr1/lead_large.jpg?mod=1556645448" media="(min-width: 576px)"></picture> <meta itemprop="height" content="128"> <meta itemprop="width" content="300"> - <meta itemprop="url" content="https://cdn.citylab.com/media/img/citylab/2019/04/mr1/300.jpg?mod=1556645448"><picture><source srcset="https://cdn.citylab.com/media/img/citylab/2019/04/mr1/300.jpg?mod=1556645448" media="(max-width: 575px)"><img srcset="https://cdn.citylab.com/media/img/citylab/2019/04/mr1/300.jpg?mod=1556645448" alt itemprop="contentUrl" onload="performance.mark("citylab_lead_image_loaded")"></picture> + <meta itemprop="url" content="https://cdn.citylab.com/media/img/citylab/2019/04/mr1/300.jpg?mod=1556645448"><picture><source srcset="https://cdn.citylab.com/media/img/citylab/2019/04/mr1/300.jpg?mod=1556645448" media="(max-width: 575px)"><img src="https://cdn.citylab.com/media/img/citylab/2019/04/mr1/300.jpg?mod=1556645448" alt srcset="https://cdn.citylab.com/media/img/citylab/2019/04/mr1/300.jpg?mod=1556645448"></picture> <figcaption> <span itemprop="caption">The Moulin Rouge cabaret in Paris</span> <span itemprop="creator">Benoit Tessier/Reuters</span> </figcaption> diff --git a/test/test-pages/lazy-image-1/expected-images.json b/test/test-pages/lazy-image-1/expected-images.json new file mode 100644 index 0000000..f8a39c4 --- /dev/null +++ b/test/test-pages/lazy-image-1/expected-images.json @@ -0,0 +1,12 @@ +[ + "https:\/\/miro.medium.com\/max\/1200\/1*EO-pr4RolgcAOj_Uk1rpDA.png", + "https:\/\/miro.medium.com\/fit\/c\/96\/96\/1*vFTVh_mYyf0p6m7f77A3vw.jpeg", + "https:\/\/miro.medium.com\/max\/3788\/1*5o3M5niyi911waUrKWVZ0Q.png", + "https:\/\/miro.medium.com\/max\/1994\/1*8uOdeOfnUzTaFIY1r7oAMg.png", + "https:\/\/miro.medium.com\/max\/1698\/1*e7gjTlzi55udTXbbPeEs2A.png", + "https:\/\/miro.medium.com\/max\/1508\/1*JJkRh7JihTUo2apW_9ZXAQ.png", + "https:\/\/miro.medium.com\/max\/5760\/1*6wi5BlNNnykjZs0PufrvLQ.png", + "https:\/\/miro.medium.com\/max\/1694\/1*cS9IXYGfMmgxaAUlC7oqOQ.png", + "https:\/\/miro.medium.com\/max\/1860\/1*87KlGgfbuWP38nAaQaj3xw.png", + "https:\/\/miro.medium.com\/max\/1690\/1*kfOK60PtmWx6iP681-qRcg.png" +] \ No newline at end of file diff --git a/test/test-pages/lazy-image-1/expected-metadata.json b/test/test-pages/lazy-image-1/expected-metadata.json new file mode 100644 index 0000000..1e1e19d --- /dev/null +++ b/test/test-pages/lazy-image-1/expected-metadata.json @@ -0,0 +1,8 @@ +{ + "Author": "Vincent Vallet", + "Direction": null, + "Excerpt": "Why CPU monitoring is important?", + "Image": "https:\/\/miro.medium.com\/max\/1200\/1*EO-pr4RolgcAOj_Uk1rpDA.png", + "Title": "Node.js and CPU profiling on production (in real-time without downtime)", + "SiteName": "Medium" +} \ No newline at end of file diff --git a/test/test-pages/lazy-image-1/expected.html b/test/test-pages/lazy-image-1/expected.html new file mode 100644 index 0000000..3cff201 --- /dev/null +++ b/test/test-pages/lazy-image-1/expected.html @@ -0,0 +1,379 @@ +<div> + <div> + <div> + + <div> + <div> + <div> + <p><a rel="noopener" href="http://fakehost/@vincentvallet?source=post_page-----d6e62af173e2----------------------"><img alt="Vincent Vallet" src="https://miro.medium.com/fit/c/96/96/1*vFTVh_mYyf0p6m7f77A3vw.jpeg" width="48" height="48"></a> + </p> + + </div> + + </div> + </div> + </div> + + <p id="d2c1"> + I work at <a href="http://voodoo.io/" target="_blank" rel="noopener nofollow">Voodoo</a>, a French company that creates mobile video games. We have a lot of challenges with performance, availability, and scalability because of the insane amount of traffic our infrastructure supports (billions of events/requests per day …… no joke!). In this setting, every metric is important and gives us a lot of information about the state of our system. + </p> + <p id="0e89"> + When working with Node.js one of the most critical resources to monitor is the CPU. Most of the time, when working on a low traffic API or project we don’t realize how many simple lines of code can have a huge impact on CPU. On the other hand, when traffic increases, a simple mistake can cost dearly. + </p> + + <p id="1efa"> + What kind of resources does your application need? In most cases, we focus on memory and CPU. Good monitoring of these two elements is mandatory for an application running on production. + </p> + <p id="dce9"> + For memory, constant monitoring is the best practice to track the worst developer nightmare a.k.a memory leak. + </p> + <figure> + <div> + <div> + <div> + <p><img src="https://miro.medium.com/max/3788/1*5o3M5niyi911waUrKWVZ0Q.png" width="1894" height="970" role="presentation" data-old-src="https://miro.medium.com/max/60/1*5o3M5niyi911waUrKWVZ0Q.png?q=20"> + </p> + </div> + </div> + </div> + <figcaption> + Memory leak in action + </figcaption> + </figure> + <p id="69dd"> + A good way to debug memory leak is a memory dump and/or memory sampling but this is not the subject. + </p> + <p id="1fbc"> + (for more details about V8 and its garbage collector you can read my previous article <a target="_blank" rel="noopener" href="http://fakehost/voodoo-engineering/nodejs-internals-v8-garbage-collector-a6eca82540ec">here</a>) + </p> + <blockquote> + <p> + Stay focused on the CPU! + </p> + </blockquote> + <p id="40e6"> + Most of the time we monitor this resource with a simple solution allowing us to get a graph representing CPU consumption over time. If we want to be reactive we add an alarm, based on a threshold, to warn us when CPU usage is too high. + </p> + <figure> + <div> + <div> + <div> + <p><img src="https://miro.medium.com/max/1994/1*8uOdeOfnUzTaFIY1r7oAMg.png" width="997" height="230" role="presentation" data-old-src="https://miro.medium.com/max/60/1*8uOdeOfnUzTaFIY1r7oAMg.png?q=20"> + </p> + </div> + </div> + </div> + <figcaption> + Basic CPU monitoring + </figcaption> + </figure> + <p id="0728"> + And what next? We don’t have data about the state of the instance when the CPU usage has increased. So we can’t determine why we had this peak, at least not without an important time of debugging, comparing log, etc. This is exactly why you need to use CPU profiling. + </p> + + <blockquote> + <p> + “Most commonly, profiling information serves to aid program optimization. Profiling is achieved by instrumenting either the program source code or its binary executable form using a tool called a profiler” + </p> + </blockquote> + <p id="3e11"> + Basically, for Node.js, CPU profiling is nothing more than collecting data about functions which are CPU consuming. And ideally, get a graphic representation of the collected data a.k.a “flame graph” or “flame chart”. + </p> + <p id="91c5"> + It will help you to track the exact file, line, and function which takes the most time to execute. + </p> + + <h2 id="dd40"> + Add arguments to Node.js + </h2> + <p id="0306"> + Node.js provides a way to collect data about CPU with two command lines. + </p> + <p id="66c8"> + The first command just executes your application, the argument just tells to V8 engine to collect data. When you stop your script all information is stored in a file. + </p> + <pre><span id="16bd">node --prof app.js</span></pre> + <figure> + <div> + <div> + <div> + <p><img src="https://miro.medium.com/max/1698/1*e7gjTlzi55udTXbbPeEs2A.png" width="849" height="534" role="presentation" data-old-src="https://miro.medium.com/max/60/1*e7gjTlzi55udTXbbPeEs2A.png?q=20"> + </p> + </div> + </div> + </div> + <figcaption> + Output of — prof + </figcaption> + </figure> + <p id="57a6"> + It is not very clear, is it? + </p> + <p id="abed"> + That’s why you just need to run this second command to transform your raw file into a more human-readable output. + </p> + <pre><span id="061c">node --prof-process isolate-0xnnnnn-v8.log > processed.txt</span></pre> + <figure> + <div> + <div> + <div> + <p><img src="https://miro.medium.com/max/1508/1*JJkRh7JihTUo2apW_9ZXAQ.png" width="754" height="306" role="presentation" data-old-src="https://miro.medium.com/max/60/1*JJkRh7JihTUo2apW_9ZXAQ.png?q=20"> + </p> + </div> + </div> + </div> + <figcaption> + The output of — prof-process + </figcaption> + </figure> + <p id="85fa"> + It seems better, here you can determine which function consumes the most of CPU (percentage of the time). + </p> + <h2 id="9e54"> + ClinicJs + </h2> + <p id="176a"> + ClinicJs is a set of tools that allow you to collect data and display performance charts. With “clinic flame” you can generate a flame graph based on CPU consumption. + </p> + <figure> + <div> + <div> + <div> + <p><img src="https://miro.medium.com/max/5760/1*6wi5BlNNnykjZs0PufrvLQ.png" width="2880" height="1534" role="presentation" data-old-src="https://miro.medium.com/max/60/1*6wi5BlNNnykjZs0PufrvLQ.png?q=20"> + </p> + </div> + </div> + </div> + <figcaption> + Flame chart + </figcaption> + </figure> + <p id="5347"> + But once again, you have to stop your app, launch the tool, then terminate the script in order to display the graph (files are generated on the disk). + </p> + <p id="d6e6"> + For more details, you can see the <a href="https://clinicjs.org/" target="_blank" rel="noopener nofollow">project</a>. + </p> + <p id="be18"> + <strong>To sum up</strong>, here is the list of drawbacks of the two previous solutions. + </p> + <ul class> + <li id="3bef">Downtime (you should kill your application to collect the data) + </li> + <li id="c0df">Performance overhead + </li> + <li id="27ec">Data collected locally + </li> + <li id="a4fd">Need external tools (ClinicJs) + </li> + </ul> + <p id="3f2c"> + In conclusion: these are good solutions to debug on development environments and/or on a local machine. + </p> + <blockquote> + <p id="fcd9"> + Unfortunately, CPU issues have a worrying tendency to occur on production, and when you are not in front of your screen. + </p> + </blockquote> + + <p id="294e"> + “Inspector” refers to an API thanks to which you can debug your application. By debugging we mean to be able to connect directly to the core of Node.js to collect real-time data about the process. + </p> + <p id="ea23"> + A module, available since version 8.x of Node.js, provides this kind of feature. There are two advantages to use it: + </p> + <ul class> + <li id="ed54">it’s native (no additional installation required) + </li> + <li id="7992">it can be used programmatically (no interruption) + </li> + </ul> + <p id="731f"> + And here is how to make a CPU profiling with this module: + </p> + <figure> + <div> + + </div> + </figure> + <p id="79d1"> + As you can see, all the data is returned in variable “profile”. Basically, it’s a simple JSON object representing all the call stack and the CPU consumption for each function. And if you want to use an Async/await syntax you can install the module “inspector-api”. + </p> + <pre><span id="c085">npm install inspector-api --save</span></pre> + <p id="195d"> + It also comes with a built-in exporter to send data to S3, with this method <strong>you don’t write anything on the disk</strong>! + </p> + <figure> + <div> + + </div> + </figure> + <p id="964f"> + If you use another storage system you can just collect the data and export it by yourself. + </p> + <figure> + <div> + + </div> + </figure> + + <p id="6933"> + We have an API that we want to test with autocannon tool. At this step, our project is able to serve around 200 requests in 20 seconds. There is probably a mistake somewhere in the code which slows down our application. + </p> + <figure> + <div> + <div> + <div> + <p><img src="https://miro.medium.com/max/1694/1*cS9IXYGfMmgxaAUlC7oqOQ.png" width="847" height="362" role="presentation" data-old-src="https://miro.medium.com/max/60/1*cS9IXYGfMmgxaAUlC7oqOQ.png?q=20"> + </p> + </div> + </div> + </div> + </figure> + <p id="fb78"> + But now, what if we want to trigger a CPU profiling remotely (without ssh connection to the server)? It’s possible using Websocket, SSE or any other technology to send a message to your instance. + </p> + <p id="2c91"> + Here is a simple example of a server using the “ws” module to send a message to a unique instance. + </p> + <figure> + <div> + + </div> + </figure> + <p id="2206"> + Of course, it only works with one instance, but it’s a fake project to demonstrate the principle ;) + </p> + <p id="e92d"> + Now we can request our server to ask it to send a message to our instance and start/stop a CPU profiling. In your instance, you can handle the CPU profiling like this: + </p> + <figure> + <div> + + </div> + </figure> + <p id="c3d0"> + <strong>To sum up</strong>: we are able to trigger a CPU profiling, on-demand, in real-time, without interruption or connection to the server. Data can be collected on the disk (and extracted later) or can be sent to S3 (or any other system, PR are welcomed on the <a href="https://github.com/wallet77/v8-inspector-api" target="_blank" rel="noopener nofollow">inspector-api project</a>). + </p> + <blockquote> + <p id="6e87"> + And because the profiler is a part of V8 itself, the format of the generated JSON file is compatible with the Chrome dev tools. + </p> + </blockquote> + </div> + </div><div> + <div> + <p id="2cda"> + <strong>How can we identify an issue?</strong> + </p> + <p id="e0d2"> + A CPU profiling should be read like this: + </p> + <ul class> + <li id="27e6">the x-axis shows the stack profile population + </li> + <li id="194a">the y-axis shows stack depth + </li> + </ul> + <p id="e950"> + <strong>What does it mean?</strong> + </p> + <p id="174c"> + The larger is a box (a function call) the more it consumed CPU. So a good CPU profiling should look like a “flame” graph where each stack is the finest possible. + </p> + <p id="48d9"> + In our example, every request try to generate a token. For this purpose, it calls the function pbkdf2 which is CPU consuming. Our CPU profile looks like a sequence of big blocks of time, like if the last function in the call stack takes 99% of the total time. + </p> + <p id="d62c"> + The CPU profiling after optimizations, with the same time range. + </p> + <figure> + <div> + <div> + <div> + <p><img src="https://miro.medium.com/max/1860/1*87KlGgfbuWP38nAaQaj3xw.png" width="930" height="523" role="presentation" data-old-src="https://miro.medium.com/max/60/1*87KlGgfbuWP38nAaQaj3xw.png?q=20"> + </p> + </div> + </div> + </div> + <figcaption> + CPU profiling after optimizations + </figcaption> + </figure> + <p id="10ee"> + As you can notice, we have to zoom to the profile if we want to see the call stack, because after optimizations the API was able to take a lot more traffic. Now every function in the call stack looks like a microtask. + </p> + </div> + </div><div> + <div> + <p id="10f1"> + And now our application is able to serve more than 200,000 requests in 20 seconds; <strong>we increased the performance by a factor of 100k</strong>! + </p> + <figure> + <div> + <div> + <div> + <p><img src="https://miro.medium.com/max/1690/1*kfOK60PtmWx6iP681-qRcg.png" width="845" height="362" role="presentation" data-old-src="https://miro.medium.com/max/60/1*kfOK60PtmWx6iP681-qRcg.png?q=20"> + </p> + </div> + </div> + </div> + </figure> + + <p id="e1ad"> + With the inspector module, you can do much more than just CPU profiling, here is a non-exhaustive list: + </p> + <ul class> + <li id="eb04">memory dump & memory sampling + </li> + <li id="a9ea">code coverage + </li> + <li id="b896">use the debugger in real-time + </li> + </ul> + + <p id="731b"> + Every tool, even the most powerful, comes with its own disadvantages. If you enable the profiler and/or the debugger on your production you have to keep an eye on two things: + </p> + <p id="e485"> + <strong>1) performance overhead</strong> + </p> + <p id="0513"> + A profiler needs to use CPU to work and it collects data into memory. The longer you let it run and the more CPU / memory it will need. This is why you should begin with very short CPU profiling, no more than a few seconds between the start and stop command. And never forget to monitor the impact of the profiler on your own infrastructure. If everything is fine you can increase the time and the frequency of CPU profiling. + </p> + <p id="049c"> + One more very important thing: <strong>never forget to always stop a started CPU profiling</strong>. You can add a timer to automatically call the stop function after a while. + </p> + <p id="0656"> + <strong>2) security</strong> + </p> + <p id="7999"> + Using the inspector in Node.js it’s like opening the door of the core of your application. You should be very careful about who can use features like CPU profiling and/or the debugger. Never make the inspector “public” as being able to launch a feature from an unsafe route (not protected with an authentification mechanism). Even the collected data can be seen as critical, never send it to a system you do not trust. + </p> + + <p id="ae1a"> + CPU profiling is really a must-have tool for every developer. And now, with some precautions, we can run it on production thanks to the amazing work done by the V8 and Node.js team. + </p> + <p id="1eab"> + The inspector module offers a lot more features than you can use to debug your application. + </p> + <p id="0aba"> + I will write another article about using CPU profiling and the inspector on production on a high traffic project. + </p> + + <ul class> + <li id="d86d"> + <a href="https://nodejs.org/api/inspector.html" target="_blank" rel="noopener nofollow">https://nodejs.org/api/inspector.html</a> + </li> + <li id="cc52"> + <a href="https://chromedevtools.github.io/devtools-protocol/v8" target="_blank" rel="noopener nofollow">https://chromedevtools.github.io/devtools-protocol/v8</a> + </li> + <li id="d331"> + <a target="_blank" rel="noopener" href="http://fakehost/netflix-techblog/node-js-in-flames-ddd073803aa4">https://medium.com/netflix-techblog/node-js-in-flames-ddd073803aa4</a> + </li> + <li id="6420"> + <a href="https://www.npmjs.com/package/inspector-api" target="_blank" rel="noopener nofollow">https://www.npmjs.com/package/inspector-api</a> + </li> + </ul> + </div> + </div> \ No newline at end of file diff --git a/test/test-pages/lazy-image-1/source.html b/test/test-pages/lazy-image-1/source.html new file mode 100644 index 0000000..de97b17 --- /dev/null +++ b/test/test-pages/lazy-image-1/source.html @@ -0,0 +1,1277 @@ +<!DOCTYPE html> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> + <head> + <meta data-rh="true" charset="utf-8" /> + <script> + <![CDATA[ + !function(c,f){var t,o,i,e=[],r={passive:!0,capture:!0},n=new Date,a="pointerup",u="pointercancel";function p(n,e){t||(t=e,o=n,i=new Date,w(f),s())}function s(){0<=o&&o<i-n&&(e.forEach(function(n){n(o,t)}),e=[])}function l(n){if(n.cancelable){var e=(1e12<n.timeStamp?new Date:performance.now())-n.timeStamp;"pointerdown"==n.type?function(n,e){function t(){p(n,e),i()}function o(){i()}function i(){f(a,t,r),f(u,o,r)}c(a,t,r),c(u,o,r)}(e,n):p(e,n)}}function w(e){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(n){e(n,l,r)})}w(c),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){e.push(n),s()}}(addEventListener,removeEventListener) + ]]> + </script> + <title data-rh="true"> + Node.js and CPU profiling on production (in real-time without downtime) + </title> + <meta data-rh="true" name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" /> + <meta data-rh="true" name="theme-color" content="#000000" /> + <meta data-rh="true" name="twitter:app:name:iphone" content="Medium" /> + <meta data-rh="true" name="twitter:app:id:iphone" content="828256236" /> + <meta data-rh="true" property="al:ios:app_name" content="Medium" /> + <meta data-rh="true" property="al:ios:app_store_id" content="828256236" /> + <meta data-rh="true" property="al:android:package" content="com.medium.reader" /> + <meta data-rh="true" property="fb:app_id" content="542599432471018" /> + <meta data-rh="true" property="og:site_name" content="Medium" /> + <meta data-rh="true" property="og:type" content="article" /> + <meta data-rh="true" property="article:published_time" content="2019-10-18T17:23:34.816Z" /> + <meta data-rh="true" name="title" content="Node.js and CPU profiling on production (in real-time without downtime)" /> + <meta data-rh="true" property="og:title" content="Node.js and CPU profiling on production (in real-time without downtime)" /> + <meta data-rh="true" property="twitter:title" content="Node.js and CPU profiling on production (in real-time without downtime)" /> + <meta data-rh="true" name="twitter:site" content="@Medium" /> + <meta data-rh="true" name="twitter:app:url:iphone" content="medium://p/d6e62af173e2" /> + <meta data-rh="true" property="al:android:url" content="medium://p/d6e62af173e2" /> + <meta data-rh="true" property="al:ios:url" content="medium://p/d6e62af173e2" /> + <meta data-rh="true" property="al:android:app_name" content="Medium" /> + <meta data-rh="true" name="description" content="How to run a CPU profiling with Node.js on your production in real-time and without interruption of service." /> + <meta data-rh="true" property="og:description" content="Why CPU monitoring is important?" /> + <meta data-rh="true" property="twitter:description" content="Why CPU monitoring is important?" /> + <meta data-rh="true" property="og:url" content="https://medium.com/voodoo-engineering/node-js-and-cpu-profiling-on-production-in-real-time-without-downtime-d6e62af173e2" /> + <meta data-rh="true" property="al:web:url" content="https://medium.com/voodoo-engineering/node-js-and-cpu-profiling-on-production-in-real-time-without-downtime-d6e62af173e2" /> + <meta data-rh="true" property="og:image" content="https://miro.medium.com/max/1200/1*EO-pr4RolgcAOj_Uk1rpDA.png" /> + <meta data-rh="true" name="twitter:image:src" content="https://miro.medium.com/max/1200/1*EO-pr4RolgcAOj_Uk1rpDA.png" /> + <meta data-rh="true" name="twitter:card" content="summary_large_image" /> + <meta data-rh="true" property="article:author" content="https://medium.com/@vincentvallet" /> + <meta data-rh="true" name="author" content="Vincent Vallet" /> + <meta data-rh="true" name="robots" content="index,follow" /> + <meta data-rh="true" name="referrer" content="unsafe-url" /> + <meta data-rh="true" name="twitter:label1" value="Reading time" /> + <meta data-rh="true" name="twitter:data1" value="8 min read" /> + <meta data-rh="true" name="parsely-post-id" content="d6e62af173e2" /> + <link data-rh="true" rel="search" type="application/opensearchdescription+xml" title="Medium" href="/osd.xml" /> + <link data-rh="true" rel="apple-touch-icon" sizes="152x152" href="https://cdn-images-1.medium.com/fit/c/152/152/1*8I-HPL0bfoIzGied-dzOvA.png" /> + <link data-rh="true" rel="apple-touch-icon" sizes="120x120" href="https://cdn-images-1.medium.com/fit/c/120/120/1*8I-HPL0bfoIzGied-dzOvA.png" /> + <link data-rh="true" rel="apple-touch-icon" sizes="76x76" href="https://cdn-images-1.medium.com/fit/c/76/76/1*8I-HPL0bfoIzGied-dzOvA.png" /> + <link data-rh="true" rel="apple-touch-icon" sizes="60x60" href="https://cdn-images-1.medium.com/fit/c/60/60/1*8I-HPL0bfoIzGied-dzOvA.png" /> + <link data-rh="true" rel="mask-icon" href="https://cdn-static-1.medium.com/_/fp/icons/monogram-mask.KPLCSFEZviQN0jQ7veN2RQ.svg" color="#171717" /> + <link data-rh="true" id="glyph_link" rel="stylesheet" type="text/css" href="https://glyph.medium.com/css/e/sr/latin/e/ssr/latin/e/ssb/latin/m2.css" /> + <link data-rh="true" rel="author" href="https://medium.com/@vincentvallet" /> + <link data-rh="true" rel="canonical" href="https://medium.com/voodoo-engineering/node-js-and-cpu-profiling-on-production-in-real-time-without-downtime-d6e62af173e2" /> + <link data-rh="true" rel="alternate" href="android-app://com.medium.reader/https/medium.com/p/d6e62af173e2" /> + <link data-rh="true" rel="icon" href="https://cdn-static-1.medium.com/_/fp/icons/favicon-rebrand-medium.3Y6xpZ-0FSdWDnPM3hSBIA.ico" /> + <script data-rh="true" type="application/ld+json"> + <![CDATA[ + {"@context":"http:\u002F\u002Fschema.org","@type":"NewsArticle","image":["https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F1200\u002F1*EO-pr4RolgcAOj_Uk1rpDA.png"],"url":"https:\u002F\u002Fmedium.com\u002Fvoodoo-engineering\u002Fnode-js-and-cpu-profiling-on-production-in-real-time-without-downtime-d6e62af173e2","dateCreated":"2019-10-18T17:23:34.816Z","datePublished":"2019-10-18T17:23:34.816Z","dateModified":"2019-10-18T17:23:35.066Z","headline":"Node.js and CPU profiling on production (in real-time without downtime)","name":"Node.js and CPU profiling on production (in real-time without downtime)","description":"How to run a CPU profiling with Node.js on your production in real-time and without interruption of service.","identifier":"d6e62af173e2","keywords":["Lite:true","Tag:Nodejs","Tag:Performance","Tag:Cpu","Tag:Profiling","Tag:Inspector","Publication:voodoo-engineering","Elevated:false","LockedPostSource:LOCKED_POST_SOURCE_NONE","LayerCake:0"],"author":{"@type":"Person","name":"Vincent Vallet","url":"https:\u002F\u002Fmedium.com\u002F@vincentvallet"},"creator":["Vincent Vallet"],"publisher":{"@type":"Organization","name":"Voodoo Engineering","url":"https:\u002F\u002Fmedium.com\u002Fvoodoo-engineering","logo":{"@type":"ImageObject","width":105,"height":60,"url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F210\u002F1*_LkVyEmY2-W1rlZD2__W5g.jpeg"}},"mainEntityOfPage":"https:\u002F\u002Fmedium.com\u002Fvoodoo-engineering\u002Fnode-js-and-cpu-profiling-on-production-in-real-time-without-downtime-d6e62af173e2"} + ]]> + </script> + <script data-rh="true"> + <![CDATA[ + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); + ga('create', 'UA-24232453-2', 'auto'); + ga('send', 'pageview'); + ]]> + </script> + <link rel="preload" href="https://cdn.optimizely.com/js/16180790160.js" as="script" /> + <style type="text/css" data-fela-rehydration="539" data-fela-type="STATIC"> + /*<![CDATA[*/ + html{box-sizing:border-box}*, *:before, *:after{box-sizing:inherit}body{margin:0;padding:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:rgba(0,0,0,0.8);position:relative;min-height:100vh}h1, h2, h3, h4, h5, h6, dl, dd, ol, ul, menu, figure, blockquote, p, pre, form{margin:0}menu, ol, ul{padding:0;list-style:none;list-style-image:none}main{display:block}a{color:inherit;text-decoration:none}a, button, input{-webkit-tap-highlight-color:transparent}img, svg{vertical-align:middle}button{background:transparent;overflow:visible}button, input, optgroup, select, textarea{margin:0} + /*]]>*/ + </style> + <style type="text/css" data-fela-rehydration="539" data-fela-type="KEYFRAME"> + /*<![CDATA[*/ + @-webkit-keyframes k1{0%{transform:scale(1);opacity:1}70%{transform:scale(1.4);opacity:0}100%{opacity:0}}@-moz-keyframes k1{0%{transform:scale(1);opacity:1}70%{transform:scale(1.4);opacity:0}100%{opacity:0}}@keyframes k1{0%{transform:scale(1);opacity:1}70%{transform:scale(1.4);opacity:0}100%{opacity:0}} + /*]]>*/ + </style> + <style type="text/css" data-fela-rehydration="539" data-fela-type="RULE"> + /*<![CDATA[*/ + .a{font-family:medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}.b{font-weight:400}.c{background-color:rgba(255, 255, 255, 1)}.l{height:100vh}.m{width:100vw}.n{display:flex}.o{align-items:center}.p{justify-content:center}.q{fill:rgba(0, 0, 0, 0.84)}.r{display:block}.s{position:absolute}.t{top:0}.u{left:0}.v{right:0}.w{z-index:500}.x{box-shadow:0 4px 12px 0 rgba(0, 0, 0, 0.05)}.ag{max-width:1192px}.ah{min-width:0}.ai{width:100%}.aj{height:65px}.am{flex:1 0 auto}.an{border-left:1px solid rgba(0, 0, 0, 0.2)}.ao{margin-left:15px}.ap{margin-right:14px}.aq{height:24px}.ar{width:1px}.as{height:36px}.at{width:63px}.au{flex:0 0 auto}.av{visibility:hidden}.aw{margin-left:16px}.ax{font-family:medium-content-sans-serif-font, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif}.ay{font-style:normal}.az{line-height:20px}.ba{font-size:15.8px}.bb{letter-spacing:0px}.bc{color:rgba(0, 0, 0, 0.54)}.bd{fill:rgba(0, 0, 0, 0.54)}.be{color:rgba(28, 153, 99, 1)}.bf{fill:rgba(2, 184, 117, 1)}.bg{font-size:inherit}.bh{border:inherit}.bi{font-family:inherit}.bj{letter-spacing:inherit}.bk{font-weight:inherit}.bl{padding:0}.bm{margin:0}.bn:hover{cursor:pointer}.bo:hover{color:rgba(11, 59, 40, 1)}.bp:hover{fill:rgba(28, 153, 99, 1)}.bq:focus{outline:none}.br:disabled{cursor:default}.bs:disabled{color:rgba(52, 148, 166, 0.5)}.bt:disabled{fill:rgba(52, 148, 166, 0.5)}.bu{border-top:1px solid rgba(0, 0, 0, 0.1)}.bv{display:none}.bx{height:54px}.by{overflow:hidden}.bz{margin-right:40px}.ca{overflow:auto}.cb{flex:0 1 auto}.cc{list-style-type:none}.cd{line-height:40px}.ce{white-space:nowrap}.cf{overflow-x:auto}.cg{align-items:flex-start}.ch{margin-top:20px}.ci{padding-top:20px}.cj{height:80px}.ck{margin-bottom:0px}.cn{padding-left:24px}.co{padding-right:24px}.cp{margin-left:auto}.cq{margin-right:auto}.cr{max-width:728px}.cs{box-sizing:border-box}.ct{flex-direction:column}.cu{top:calc(100vh + 100px)}.cv{bottom:calc(100vh + 100px)}.cw{width:10px}.cx{pointer-events:none}.cy{word-break:break-word}.cz{word-wrap:break-word}.da:after{display:block}.db:after{content:""}.dc:after{clear:both}.dd{max-width:680px}.de{line-height:1.23}.df{letter-spacing:0}.dg{color:rgba(0, 0, 0, 0.84)}.dh{font-family:medium-content-title-font, Georgia, Cambria, "Times New Roman", Times, serif}.ds{margin-bottom:-0.27em}.dy{margin-top:32px}.dz{justify-content:space-between}.ed{border-radius:50%}.ee{height:48px}.ef{width:48px}.eg{margin-left:12px}.eh{margin-bottom:2px}.ej{font-weight:300}.ek{font-size:16px}.el{max-height:20px}.em{text-overflow:ellipsis}.en{display:-webkit-box}.eo{-webkit-line-clamp:1}.ep{-webkit-box-orient:vertical}.eq{color:inherit}.er{fill:inherit}.es:hover{text-decoration:underline}.et:disabled{color:rgba(0, 0, 0, 0.54)}.eu:disabled{fill:rgba(0, 0, 0, 0.54)}.ev{margin-left:8px}.ew{padding:0px 8px}.ex{background:0}.ey{border-color:rgba(0, 0, 0, 0.54)}.ez:hover{color:rgba(0, 0, 0, 0.97)}.fa:hover{fill:rgba(0, 0, 0, 0.97)}.fb:hover{border-color:rgba(0, 0, 0, 0.84)}.fc:disabled{fill:rgba(0, 0, 0, 0.76)}.fd:disabled{border-color:rgba(0, 0, 0, 0.2)}.fe:disabled{cursor:inherit}.ff:disabled:hover{color:rgba(0, 0, 0, 0.54)}.fg:disabled:hover{fill:rgba(0, 0, 0, 0.76)}.fh:disabled:hover{border-color:rgba(0, 0, 0, 0.2)}.fi{border-radius:4px}.fj{line-height:18px}.fk{font-size:15px}.fl{border-width:1px}.fm{border-style:solid}.fn{display:inline-block}.fo{text-decoration:none}.fp{align-items:flex-end}.fx{padding-right:6px}.fy:hover{color:rgba(0, 0, 0, 0.9)}.fz:hover{fill:rgba(0, 0, 0, 0.9)}.ga{margin-right:8px}.gb{margin-right:-6px}.gc{line-height:1.12}.gd{letter-spacing:-0.022em}.ge{font-weight:600}.gn{margin-bottom:-0.28em}.go{line-height:1.58}.gp{letter-spacing:-0.004em}.gq{font-family:medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif}.hb{margin-bottom:-0.46em}.hc{background-repeat:repeat-x}.hd{background-image:linear-gradient(to right,rgba(0, 0, 0, 0.84) 100%,rgba(0, 0, 0, 0.84) 0);background-image:url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="1" y2="1" stroke="rgba(0, 0, 0, 0.84)" /></svg>')}.he{background-size:1px 1px}.hf{background-position:0 1.05em;background-position:0 calc(1em + 1px)}.hl{max-width:1894px}.hr{clear:both}.hs{transition:transform 300ms cubic-bezier(0.2, 0, 0.2, 1)}.ht{cursor:zoom-in}.hu{position:relative}.hv{z-index:auto}.hw{opacity:0}.hx{transition:opacity 100ms 400ms}.hy{height:100%}.hz{will-change:transform}.ia{transform:translateZ(0)}.ib{margin:auto}.ic{background-color:rgba(0, 0, 0, 0.05)}.id{padding-bottom:51.21436114044351%}.ie{filter:blur(20px)}.if{transform:scale(1.1)}.ig{visibility:visible}.ih{background:rgba(255, 255, 255, 1)}.ii{line-height:1.4}.ij{margin-top:10px}.ik{text-align:center}.in{padding-left:30px}.io{line-height:1.48}.ip{letter-spacing:-0.014em}.iq{color:rgba(0, 0, 0, 0.76)}.ir{font-size:24px}.ix{font-size:30px}.iy{line-height:44px}.je{max-width:997px}.jf{padding-bottom:23.069207622868607%}.jl{line-height:1.18}.jw{margin-bottom:-0.31em}.jx{padding:20px}.jy{background:rgba(0, 0, 0, 0.05)}.jz{font-family:Menlo, Monaco, "Courier New", Courier, monospace}.ka{margin-top:-0.09em}.kb{margin-bottom:-0.09em}.kc{white-space:pre-wrap}.kd{max-width:849px}.ke{padding-bottom:62.897526501766784%}.kf{max-width:754px}.kg{padding-bottom:40.58355437665782%}.kh{max-width:2880px}.ki{padding-bottom:53.263888888888886%}.kj{font-weight:700}.kk{list-style-type:disc}.kl{margin-left:30px}.km{padding-left:0px}.ks{box-shadow:inset 3px 0 0 0 rgba(0, 0, 0, 0.84)}.kt{padding-left:23px}.ku{margin-left:-20px}.kv{font-style:italic}.kw{padding-bottom:NaN%}.kx{max-width:847px}.ky{padding-bottom:42.739079102715465%}.lh{padding-bottom:5px}.li{padding-top:5px}.lj{padding-bottom:61.88811188811189%}.lk{max-width:930px}.ll{padding-bottom:56.236559139784944%}.lm{max-width:1844px}.ln{padding-bottom:31.23644251626898%}.lo{max-width:845px}.lp{padding-bottom:42.840236686390526%}.lq{will-change:opacity}.lr{position:fixed}.ls{width:188px}.lt{left:50%}.lu{transform:translateX(406px)}.lv{top:calc(65px + 54px + 14px)}.ly{top:calc(65px + 54px + 40px)}.ma{width:131px}.mb{padding-bottom:28px}.mc{border-bottom:1px solid rgba(0, 0, 0, 0.1)}.md{font-size:18px}.me{padding-bottom:20px}.mf{padding-top:2px}.mg{max-height:120px}.mh{-webkit-line-clamp:6}.mi{padding:8px 16px}.mj{border-color:rgba(2, 184, 117, 1)}.mk:hover{border-color:rgba(28, 153, 99, 1)}.ml{padding-top:28px}.mm{margin-bottom:19px}.mn{margin-left:-3px}.mo{margin-right:5px}.mp{outline:0}.mq{border:0}.mr{user-select:none}.ms{cursor:pointer}.mt> svg{pointer-events:none}.mu:active{border-style:none}.mv{-webkit-user-select:none}.mw:focus{fill:rgba(28, 153, 99, 1)}.mx{margin-top:5px}.my button{text-align:left}.mz{margin-top:40px}.na{flex-wrap:wrap}.nb{margin-top:25px}.nc{margin-bottom:8px}.nd{border-radius:3px}.ne{padding:5px 10px}.nf{line-height:22px}.ng{margin-top:15px}.nh{margin-right:16px}.ni{border:1px solid rgba(0, 0, 0, 0.1)}.nj{height:60px}.nk{width:60px}.nx:active{border-style:solid}.ny{z-index:2}.oa{padding-right:8px}.ob{padding-top:32px}.oc{margin-bottom:25px}.od{margin-bottom:32px}.oe{min-height:80px}.oj{width:80px}.ok{padding-left:102px}.om{text-transform:uppercase}.on{letter-spacing:0.05em}.oo{margin-bottom:6px}.op{font-size:28px}.oq{line-height:36px}.or{padding:4px 12px}.os{max-width:555px}.ot{max-width:450px}.ou{line-height:24px}.ow{max-width:550px}.ox{padding-top:25px}.oy{opacity:1}.oz{border:1px solid rgba(2, 184, 117, 1)}.pa{margin-top:64px}.pb{background-color:rgba(0, 0, 0, 0.02)}.pc{margin:32px 0}.pe{padding-bottom:8px}.pf{font-size:22px}.pg{line-height:28px}.ph{flex-direction:row}.qo{flex-grow:0}.ri{margin-bottom:12px}.rk{margin-bottom:16px}.rm{padding-bottom:66.46341463414635%}.rn{background-image:url(https://miro.medium.com/max/656/1*PgziD8xisQlGXkWMjDGz5w.png)}.ro{background-origin:border-box}.rp{background-size:cover}.rq{background-position:50% 50%}.rr{max-width:100%}.rs{margin-bottom:4px}.ru{font-weight:500}.rv{line-height:32px}.rw{letter-spacing:0em}.rx{margin-right:10px}.ry{height:40px}.rz{width:40px}.sa{fill:rgba(0, 0, 0, 0.76)}.sb:focus{fill:rgba(0, 0, 0, 0.54)}.sc:hover{fill:rgba(0, 0, 0, 0.54)}.sd{border-right:1px solid rgba(0, 0, 0, 0.1)}.se{height:20px}.sf{background-image:url(https://miro.medium.com/max/656/1*flvQZznQlpVs26M6SCL7DA.jpeg)}.sg{background-image:url(https://miro.medium.com/max/656/0*sduEjXj8BCMSMYU1)}.sh{padding:60px 0}.si{background-color:rgba(0, 0, 0, 0.9)}.sz{padding-bottom:48px}.ta{border-bottom:1px solid rgba(255, 255, 255, 0.54)}.tb{margin:0 -12px}.tc{margin:0 12px}.td{flex:1 1 0}.te{padding-bottom:12px}.tf:hover{color:rgba(255, 255, 255, 0.99)}.tg:hover{fill:rgba(255, 255, 255, 0.99)}.th:disabled{color:rgba(255, 255, 255, 0.7)}.ti:disabled{fill:rgba(255, 255, 255, 0.7)}.tj{color:rgba(255, 255, 255, 0.98)}.tk{fill:rgba(255, 255, 255, 0.98)}.tl{text-align:inherit}.tm{font-size:21.6px}.tn{letter-spacing:-0.32px}.to{color:rgba(255, 255, 255, 0.7)}.tp{fill:rgba(255, 255, 255, 0.7)}.tq{text-decoration:underline}.tr{padding-top:8px}.ts{width:200px} + /*]]>*/ + </style> + <style type="text/css" data-fela-rehydration="539" data-fela-type="RULE" media="all and (min-width: 1080px)"> + /*<![CDATA[*/ + .d{display:none}.af{margin:0 64px}.dq{font-size:40px}.dr{margin-top:0.78em}.dx{line-height:48px}.fw{margin-left:30px}.gl{font-size:34px}.gm{margin-top:1.95em}.gz{font-size:21px}.ha{margin-top:0.86em}.hk{margin-top:2em}.hq{margin-top:56px}.iw{margin-top:2.75em}.jd{margin-top:3.14em}.jk{margin-top:1.75em}.ju{font-size:26px}.jv{margin-top:1.72em}.kr{margin-top:1.05em}.lg{max-width:1192px}.pu{width:calc(100% + 32px)}.pv{margin-left:-16px}.pw{margin-right:-16px}.qk{padding-left:16px}.ql{padding-right:16px}.qm{flex-basis:33.333333%}.qn{max-width:33.333333%}.qy{align-items:flex-start}.qz{flex-direction:row}.rg{flex-basis:100%}.rh{max-width:100%}.sw{padding-left:64px}.sx{padding-right:64px}.sy{max-width:1320px} + /*]]>*/ + </style> + <style type="text/css" data-fela-rehydration="539" data-fela-type="RULE" media="all and (max-width: 1079.98px)"> + /*<![CDATA[*/ + .e{display:none}.fv{margin-left:30px}.il{margin-left:auto}.im{text-align:center}.st{padding-left:64px}.su{padding-right:64px}.sv{max-width:1080px} + /*]]>*/ + </style> + <style type="text/css" data-fela-rehydration="539" data-fela-type="RULE" media="all and (max-width: 903.98px)"> + /*<![CDATA[*/ + .f{display:none}.fu{margin-left:30px}.pd{margin-bottom:0px}.qp{margin-bottom:48px}.rt{display:block}.sq{padding-left:48px}.sr{padding-right:48px}.ss{max-width:904px} + /*]]>*/ + </style> + <style type="text/css" data-fela-rehydration="539" data-fela-type="RULE" media="all and (max-width: 727.98px)"> + /*<![CDATA[*/ + .g{display:none}.ak{height:56px}.al{display:flex}.bw{display:block}.cl{margin-bottom:0px}.cm{height:110px}.eb{margin-top:32px}.ec{flex-direction:column-reverse}.fs{margin-bottom:30px}.ft{margin-left:0px}.of{margin-bottom:24px}.og{align-items:center}.oh{width:102px}.oi{position:relative}.ol{padding-left:0}.ov{margin-top:24px}.sj{padding:32px 0}.sn{padding-left:24px}.so{padding-right:24px}.sp{max-width:728px}.tt{width:140px} + /*]]>*/ + </style> + <style type="text/css" data-fela-rehydration="539" data-fela-type="RULE" media="all and (max-width: 551.98px)"> + /*<![CDATA[*/ + .h{display:none}.z{margin:0 24px}.di{font-size:30px}.dj{margin-top:0.72em}.dt{line-height:40px}.ea{margin-top:32px}.ei{margin-bottom:0px}.fq{margin-bottom:30px}.fr{margin-left:0px}.gf{margin-top:1.2em}.gr{font-size:18px}.gs{margin-top:0.67em}.hg{margin-top:1.56em}.hm{margin-top:40px}.is{margin-top:1.42em}.iz{margin-top:2em}.jg{margin-top:1.08em}.jm{font-size:24px}.jn{margin-top:1.23em}.kn{margin-top:1.34em}.kz{margin:0}.la{max-width:100%}.pi{width:calc(100% + 24px)}.pj{margin-left:-12px}.pk{margin-right:-12px}.px{padding-left:12px}.py{padding-right:12px}.pz{flex-basis:100%}.qq{align-items:flex-start}.qr{flex-direction:row}.rj{display:block}.rl{margin-bottom:16px}.sk{padding-left:24px}.sl{padding-right:24px}.sm{max-width:552px} + /*]]>*/ + </style> + <style type="text/css" data-fela-rehydration="539" data-fela-type="RULE" media="all and (min-width: 904px) and (max-width: 1079.98px)"> + /*<![CDATA[*/ + .i{display:none}.ae{margin:0 64px}.do{font-size:40px}.dp{margin-top:0.78em}.dw{line-height:48px}.gj{font-size:34px}.gk{margin-top:1.95em}.gx{font-size:21px}.gy{margin-top:0.86em}.hj{margin-top:2em}.hp{margin-top:56px}.iv{margin-top:2.75em}.jc{margin-top:3.14em}.jj{margin-top:1.75em}.js{font-size:26px}.jt{margin-top:1.72em}.kq{margin-top:1.05em}.lf{max-width:1192px}.pr{width:calc(100% + 32px)}.ps{margin-left:-16px}.pt{margin-right:-16px}.qg{padding-left:16px}.qh{padding-right:16px}.qi{flex-basis:33.333333%}.qj{max-width:33.333333%}.qw{align-items:flex-start}.qx{flex-direction:row}.re{flex-basis:100%}.rf{max-width:100%} + /*]]>*/ + </style> + <style type="text/css" data-fela-rehydration="539" data-fela-type="RULE" media="all and (min-width: 728px) and (max-width: 903.98px)"> + /*<![CDATA[*/ + .j{display:none}.ac{margin:0 48px}.dm{font-size:40px}.dn{margin-top:0.78em}.dv{line-height:48px}.gh{font-size:34px}.gi{margin-top:1.95em}.gv{font-size:21px}.gw{margin-top:0.86em}.hi{margin-top:2em}.ho{margin-top:56px}.iu{margin-top:2.75em}.jb{margin-top:3.14em}.ji{margin-top:1.75em}.jq{font-size:26px}.jr{margin-top:1.72em}.kp{margin-top:1.05em}.ld{margin:0}.le{max-width:100%}.po{width:calc(100% + 28px)}.pp{margin-left:-14px}.pq{margin-right:-14px}.qd{padding-left:14px}.qe{padding-right:14px}.qf{flex-basis:100%}.qu{align-items:center}.qv{flex-direction:row-reverse}.rc{flex-basis:50%}.rd{max-width:50%} + /*]]>*/ + </style> + <style type="text/css" data-fela-rehydration="539" data-fela-type="RULE" media="all and (min-width: 552px) and (max-width: 727.98px)"> + /*<![CDATA[*/ + .k{display:none}.ab{margin:0 24px}.dk{font-size:30px}.dl{margin-top:0.72em}.du{line-height:40px}.gg{margin-top:1.2em}.gt{font-size:18px}.gu{margin-top:0.67em}.hh{margin-top:1.56em}.hn{margin-top:40px}.it{margin-top:1.42em}.ja{margin-top:2em}.jh{margin-top:1.08em}.jo{font-size:24px}.jp{margin-top:1.23em}.ko{margin-top:1.34em}.lb{margin:0}.lc{max-width:100%}.pl{width:calc(100% + 24px)}.pm{margin-left:-12px}.pn{margin-right:-12px}.qa{padding-left:12px}.qb{padding-right:12px}.qc{flex-basis:100%}.qs{align-items:center}.qt{flex-direction:row-reverse}.ra{flex-basis:50%}.rb{max-width:50%} + /*]]>*/ + </style> + <style type="text/css" data-fela-rehydration="539" data-fela-type="RULE" media="print"> + /*<![CDATA[*/ + .y{display:none} + /*]]>*/ + </style> + <style type="text/css" data-fela-rehydration="539" data-fela-type="RULE" media="(prefers-reduced-motion: no-preference)"> + /*<![CDATA[*/ + .lw{transition:opacity 200ms}.nl{transition:border-color 150ms ease}.nm::before{background: + radial-gradient(circle, rgba(28, 153, 99, 1) 60%, transparent 70%) + }.nn::before{border-radius:50%}.no::before{content:""}.np::before{display:block}.nq::before{z-index:0}.nr::before{left:0}.ns::before{height:100%}.nt::before{position:absolute}.nu::before{top:0}.nv::before{width:100%}.nw:hover::before{animation:k1 2000ms infinite cubic-bezier(.1,.12,.25,1)}.nz{transition:fill 200ms ease} + /*]]>*/ + </style> + <style type="text/css" data-fela-rehydration="539" data-fela-type="RULE" media="all and (max-width: 1230px)"> + /*<![CDATA[*/ + .lx{display:none} + /*]]>*/ + </style> + <style type="text/css" data-fela-rehydration="539" data-fela-type="RULE" media="all and (max-width: 1198px)"> + /*<![CDATA[*/ + .lz{display:none} + /*]]>*/ + </style> + </head> + <body> + <div id="root"> + <div class="a b c"> + <div class="d e f g h i j k"></div> + <script> + <![CDATA[ + document.domain = document.domain; + ]]> + </script> + <script> + <![CDATA[ + window.PARSELY = window.PARSELY || {autotrack: false} + ]]> + </script> + <nav class="r s t u v c w x y"> + <div> + <div class="r c"> + <div class="n p"> + <div class="z ab ac ae af ag ah ai"> + <div class="aj n o ak al"> + <div class="n o am w"> + <a aria-label="Homepage" rel="noopener" href="/?source=post_page-----d6e62af173e2----------------------"><svg width="35" height="35" viewbox="5 5 35 35" class="q"> + <path d="M5 40V5h35v35H5zm8.56-12.63c0 .56-.03.69-.32 1.03L10.8 31.4v.4h6.97v-.4L15.3 28.4c-.29-.34-.34-.5-.34-1.03v-8.95l6.13 13.36h.71l5.26-13.36v10.64c0 .3 0 .35-.19.53l-1.85 1.8v.4h9.2v-.4l-1.83-1.8c-.18-.18-.2-.24-.2-.53V15.94c0-.3.02-.35.2-.53l1.82-1.8v-.4h-6.47l-4.62 11.55-5.2-11.54h-6.8v.4l2.15 2.63c.24.3.29.37.29.77v10.35z"></path></svg></a> + <div class="an ao ap aq ar r g"></div> + <div class="r g"> + <a href="/voodoo-engineering?source=post_page-----d6e62af173e2----------------------" rel="noopener"> + <div class="as at r"> + <img alt="Voodoo Engineering" class="" src="https://miro.medium.com/max/126/1*_LkVyEmY2-W1rlZD2__W5g.jpeg" width="63" height="36" /> + </div></a> + </div> + </div> + <div class="r au w"> + <div class="n o"> + <div class="n g"> + <div class="av" id="lo-post-page-navbar-sign-in-link"> + <div class="aw r"> + <span class="ax b ay az ba bb r bc bd"><a href="https://medium.com/m/signin?operation=login&redirect=https%3A%2F%2Fmedium.com%2Fvoodoo-engineering%2Fnode-js-and-cpu-profiling-on-production-in-real-time-without-downtime-d6e62af173e2&source=post_page-----d6e62af173e2---------------------nav_reg-" class="be bf bg bh bi bj bk bl bm bn bo bp bq br bs bt" rel="noopener">Sign in</a></span> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + <div class="bu bv c bw"> + <div class="n p"> + <div class="z ab ac ae af ag ah ai"> + <div class="bx by n o"> + <div class="bz r au"> + <a href="/voodoo-engineering?source=post_page-----d6e62af173e2----------------------" rel="noopener"> + <div class="as at r"> + <img alt="Voodoo Engineering" class="" src="https://miro.medium.com/max/126/1*_LkVyEmY2-W1rlZD2__W5g.jpeg" width="63" height="36" /> + </div></a> + </div> + <div class="ca r cb"> + <ul class="cc bm cd ce cf n cg g ch ci cj"></ul> + </div> + </div> + </div> + </div> + </div> + </div> + </nav> + <div class="ck aj r cl cm"></div> + <article> + <section class="cn co cp cq ai cr cs n ct"></section> + <div> + <div class="s u cu cv cw cx"></div> + <section class="cy cz da db dc"> + <div class="n p"> + <div class="z ab ac ae af dd ah ai"> + <div> + <div id="daf0" class="de df dg ay dh b di dj dk dl dm dn do dp dq dr ds"> + <h1 class="dh b di dt dk du dm dv do dw dq dx dg"> + Node.js and CPU profiling on production (in real-time without downtime) + </h1> + </div> + <div class="dy"> + <div class="n dz ea eb ec"> + <div class="o n"> + <div> + <a rel="noopener" href="/@vincentvallet?source=post_page-----d6e62af173e2----------------------"><img alt="Vincent Vallet" class="r ed ee ef" src="https://miro.medium.com/fit/c/96/96/1*vFTVh_mYyf0p6m7f77A3vw.jpeg" width="48" height="48" /></a> + </div> + <div class="eg ai r"> + <div class="n"> + <div style="flex:1"> + <div class="eh n o ei"> + <span class="ax b ay az ba bb r dg q"><span class="ax ej ek az by el em en eo ep dg"><a class="eq er bg bh bi bj bk bl bm bn es bq br et eu" rel="noopener" href="/@vincentvallet?source=post_page-----d6e62af173e2----------------------">Vincent Vallet</a></span></span> + <div class="ev r au h"> + <button class="ew dg q ex ey ez fa fb bn et fc fd fe ff fg fh fi ax b ay fj fk bb fl fm cs fn fo bq">Follow</button> + </div> + </div> + </div> + </div> + <div> + <span class="ax b ay az ba bb r bc bd"><a class="eq er bg bh bi bj bk bl bm bn es bq br et eu" rel="noopener" href="/voodoo-engineering/node-js-and-cpu-profiling-on-production-in-real-time-without-downtime-d6e62af173e2?source=post_page-----d6e62af173e2----------------------">Oct 18, 2019</a> · 8 min read</span> + </div> + </div> + </div> + <div class="n fp fq fr fs ft fu fv fw y"> + <div class="n o"> + <div class="fx r au"> + <a href="//medium.com/p/d6e62af173e2/share/twitter?source=post_actions_header---------------------------" class="eq er bg bh bi bj bk bl bm bn fy fz bq br et eu" target="_blank" rel="noopener nofollow"><svg width="29" height="29" class="q"> + <path d="M22.05 7.54a4.47 4.47 0 0 0-3.3-1.46 4.53 4.53 0 0 0-4.53 4.53c0 .35.04.7.08 1.05A12.9 12.9 0 0 1 5 6.89a5.1 5.1 0 0 0-.65 2.26c.03 1.6.83 2.99 2.02 3.79a4.3 4.3 0 0 1-2.02-.57v.08a4.55 4.55 0 0 0 3.63 4.44c-.4.08-.8.13-1.21.16l-.81-.08a4.54 4.54 0 0 0 4.2 3.15 9.56 9.56 0 0 1-5.66 1.94l-1.05-.08c2 1.27 4.38 2.02 6.94 2.02 8.3 0 12.86-6.9 12.84-12.85.02-.24 0-.43 0-.65a8.68 8.68 0 0 0 2.26-2.34c-.82.38-1.7.62-2.6.72a4.37 4.37 0 0 0 1.95-2.51c-.84.53-1.81.9-2.83 1.13z"></path></svg></a> + </div> + <div class="fx r au"> + <button class="eq er bg bh bi bj bk bl bm bn fy fz bq br et eu"><svg width="29" height="29" viewbox="0 0 29 29" fill="none" class="q"> + <path d="M5 6.36C5 5.61 5.63 5 6.4 5h16.2c.77 0 1.4.61 1.4 1.36v16.28c0 .75-.63 1.36-1.4 1.36H6.4c-.77 0-1.4-.6-1.4-1.36V6.36z"></path> + <path fill-rule="evenodd" clip-rule="evenodd" d="M10.76 20.9v-8.57H7.89v8.58h2.87zm-1.44-9.75c1 0 1.63-.65 1.63-1.48-.02-.84-.62-1.48-1.6-1.48-.99 0-1.63.64-1.63 1.48 0 .83.62 1.48 1.59 1.48h.01zM12.35 20.9h2.87v-4.79c0-.25.02-.5.1-.7.2-.5.67-1.04 1.46-1.04 1.04 0 1.46.8 1.46 1.95v4.59h2.87v-4.92c0-2.64-1.42-3.87-3.3-3.87-1.55 0-2.23.86-2.61 1.45h.02v-1.24h-2.87c.04.8 0 8.58 0 8.58z" fill="#fff"></path></svg></button> + </div> + <div class="fx r au"> + <a href="//medium.com/p/d6e62af173e2/share/facebook?source=post_actions_header---------------------------" class="eq er bg bh bi bj bk bl bm bn fy fz bq br et eu" target="_blank" rel="noopener nofollow"><svg width="29" height="29" class="q"> + <path d="M23.2 5H5.8a.8.8 0 0 0-.8.8V23.2c0 .44.35.8.8.8h9.3v-7.13h-2.38V13.9h2.38v-2.38c0-2.45 1.55-3.66 3.74-3.66 1.05 0 1.95.08 2.2.11v2.57h-1.5c-1.2 0-1.48.57-1.48 1.4v1.96h2.97l-.6 2.97h-2.37l.05 7.12h5.1a.8.8 0 0 0 .79-.8V5.8a.8.8 0 0 0-.8-.79"></path></svg></a> + </div> + <div class="ga r"> + <a href="https://medium.com/m/signin?operation=register&redirect=https%3A%2F%2Fmedium.com%2Fvoodoo-engineering%2Fnode-js-and-cpu-profiling-on-production-in-real-time-without-downtime-d6e62af173e2&source=post_actions_header--------------------------bookmark_sidebar-" class="eq er bg bh bi bj bk bl bm bn fy fz bq br et eu" rel="noopener"><svg width="25" height="25" viewbox="0 0 25 25"> + <path d="M19 6a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v14.66h.01c.01.1.05.2.12.28a.5.5 0 0 0 .7.03l5.67-4.12 5.66 4.13a.5.5 0 0 0 .71-.03.5.5 0 0 0 .12-.29H19V6zm-6.84 9.97L7 19.64V6a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v13.64l-5.16-3.67a.49.49 0 0 0-.68 0z" fill-rule="evenodd"></path></svg></a> + </div> + <div class="gb r am"></div> + </div> + </div> + </div> + </div> + </div> + <h1 id="0231" class="gc gd dg ay ax ge di gf dk gg gh gi gj gk gl gm gn"> + Why CPU monitoring is important? + </h1> + <p id="d2c1" class="go gp dg ay gq b gr gs gt gu gv gw gx gy gz ha hb cy"> + I work at <a href="http://voodoo.io/" class="eq fo hc hd he hf" target="_blank" rel="noopener nofollow">Voodoo</a>, a French company that creates mobile video games. We have a lot of challenges with performance, availability, and scalability because of the insane amount of traffic our infrastructure supports (billions of events/requests per day …… no joke!). In this setting, every metric is important and gives us a lot of information about the state of our system. + </p> + <p id="0e89" class="go gp dg ay gq b gr hg gt hh gv hi gx hj gz hk hb cy"> + When working with Node.js one of the most critical resources to monitor is the CPU. Most of the time, when working on a low traffic API or project we don’t realize how many simple lines of code can have a huge impact on CPU. On the other hand, when traffic increases, a simple mistake can cost dearly. + </p> + <h1 id="292e" class="gc gd dg ay ax ge di gf dk gg gh gi gj gk gl gm gn"> + Resources + </h1> + <p id="1efa" class="go gp dg ay gq b gr gs gt gu gv gw gx gy gz ha hb cy"> + What kind of resources does your application need? In most cases, we focus on memory and CPU. Good monitoring of these two elements is mandatory for an application running on production. + </p> + <p id="dce9" class="go gp dg ay gq b gr hg gt hh gv hi gx hj gz hk hb cy"> + For memory, constant monitoring is the best practice to track the worst developer nightmare a.k.a memory leak. + </p> + <figure class="hm hn ho hp hq hr cp cq paragraph-image"> + <div class="hs ht hu hv ai"> + <div class="cp cq hl"> + <div class="ib r hu ic"> + <div class="id r"> + <div class="hw hx s t u hy ai by hz ia"> + <img class="s t u hy ai ie if ig" src="https://miro.medium.com/max/60/1*5o3M5niyi911waUrKWVZ0Q.png?q=20" width="1894" height="970" role="presentation" /> + </div><img class="hw hx s t u hy ai ih" width="1894" height="970" role="presentation" /><noscript><img class="s t u hy ai" src="https://miro.medium.com/max/3788/1*5o3M5niyi911waUrKWVZ0Q.png" width="1894" height="970" role="presentation" />

+ + + + +

+ Memory leak in action +

+ +

+ A good way to debug memory leak is a memory dump and/or memory sampling but this is not the subject. +

+ (for more details about V8 and its garbage collector you can read my previous article here) +

+
+
+ Stay focused on the CPU! +
+
+

+ Most of the time we monitor this resource with a simple solution allowing us to get a graph representing CPU consumption over time. If we want to be reactive we add an alarm, based on a threshold, to warn us when CPU usage is too high. +

+ And what next? We don’t have data about the state of the instance when the CPU usage has increased. So we can’t determine why we had this peak, at least not without an important time of debugging, comparing log, etc. This is exactly why you need to use CPU profiling. +

+ CPU profiling: what’s the difference with CPU monitoring? +

+
+
+ “Most commonly, profiling information serves to aid program optimization. Profiling is achieved by instrumenting either the program source code or its binary executable form using a tool called a profiler” +
+
+

+ Basically, for Node.js, CPU profiling is nothing more than collecting data about functions which are CPU consuming. And ideally, get a graphic representation of the collected data a.k.a “flame graph” or “flame chart”. +

+ It will help you to track the exact file, line, and function which takes the most time to execute. +

+ What about existing solutions? +

+ Add arguments to Node.js +

+ Node.js provides a way to collect data about CPU with two command lines. +

+ The first command just executes your application, the argument just tells to V8 engine to collect data. When you stop your script all information is stored in a file. +

node --prof app.js

+ It is not very clear, is it? +

+ That’s why you just need to run this second command to transform your raw file into a more human-readable output. +

node --prof-process isolate-0xnnnnn-v8.log > processed.txt

+ It seems better, here you can determine which function consumes the most of CPU (percentage of the time). +

+ ClinicJs +

+ ClinicJs is a set of tools that allow you to collect data and display performance charts. With “clinic flame” you can generate a flame graph based on CPU consumption. +

+ But once again, you have to stop your app, launch the tool, then terminate the script in order to display the graph (files are generated on the disk). +

+ For more details, you can see the project. +

+ To sum up, here is the list of drawbacks of the two previous solutions. +

Downtime (you should kill your application to collect the data) +
Performance overhead +
Data collected locally +
Need external tools (ClinicJs) +

+ In conclusion: these are good solutions to debug on development environments and/or on a local machine. +

+
+ Unfortunately, CPU issues have a worrying tendency to occur on production, and when you are not in front of your screen. +
+

+ Inspector +

+ “Inspector” refers to an API thanks to which you can debug your application. By debugging we mean to be able to connect directly to the core of Node.js to collect real-time data about the process. +

+ A module, available since version 8.x of Node.js, provides this kind of feature. There are two advantages to use it: +

it’s native (no additional installation required) +
it can be used programmatically (no interruption) +

+ And here is how to make a CPU profiling with this module: +

+ +

+ As you can see, all the data is returned in variable “profile”. Basically, it’s a simple JSON object representing all the call stack and the CPU consumption for each function. And if you want to use an Async/await syntax you can install the module “inspector-api”. +

npm install inspector-api --save

+ It also comes with a built-in exporter to send data to S3, with this method you don’t write anything on the disk! +

+ +

+ If you use another storage system you can just collect the data and export it by yourself. +

+ +

+ And now, CPU profiling on-demand! +

+ We have an API that we want to test with autocannon tool. At this step, our project is able to serve around 200 requests in 20 seconds. There is probably a mistake somewhere in the code which slows down our application. +

+ But now, what if we want to trigger a CPU profiling remotely (without ssh connection to the server)? It’s possible using Websocket, SSE or any other technology to send a message to your instance. +

+ Here is a simple example of a server using the “ws” module to send a message to a unique instance. +

+ +

+ Of course, it only works with one instance, but it’s a fake project to demonstrate the principle ;) +

+ Now we can request our server to ask it to send a message to our instance and start/stop a CPU profiling. In your instance, you can handle the CPU profiling like this: +

+ +

+ To sum up: we are able to trigger a CPU profiling, on-demand, in real-time, without interruption or connection to the server. Data can be collected on the disk (and extracted later) or can be sent to S3 (or any other system, PR are welcomed on the inspector-api project). +

+
+ And because the profiler is a part of V8 itself, the format of the generated JSON file is compatible with the Chrome dev tools. +
+

+ + +

+ How can we identify an issue? +

+ A CPU profiling should be read like this: +

the x-axis shows the stack profile population +
the y-axis shows stack depth +

+ What does it mean? +

+ The larger is a box (a function call) the more it consumed CPU. So a good CPU profiling should look like a “flame” graph where each stack is the finest possible. +

+ In our example, every request try to generate a token. For this purpose, it calls the function pbkdf2 which is CPU consuming. Our CPU profile looks like a sequence of big blocks of time, like if the last function in the call stack takes 99% of the total time. +

+ The CPU profiling after optimizations, with the same time range. +

+ As you can notice, we have to zoom to the profile if we want to see the call stack, because after optimizations the API was able to take a lot more traffic. Now every function in the call stack looks like a microtask. +

CPU profiling after optimization — + Zoom in the CPU profiling +

+ And now our application is able to serve more than 200,000 requests in 20 seconds; we increased the performance by a factor of 100k! +

+ More than just CPU profiling +

+ With the inspector module, you can do much more than just CPU profiling, here is a non-exhaustive list: +

memory dump & memory sampling +
code coverage +
use the debugger in real-time +

+ Warnings +

+ Every tool, even the most powerful, comes with its own disadvantages. If you enable the profiler and/or the debugger on your production you have to keep an eye on two things: +

+ 1) performance overhead +

+ A profiler needs to use CPU to work and it collects data into memory. The longer you let it run and the more CPU / memory it will need. This is why you should begin with very short CPU profiling, no more than a few seconds between the start and stop command. And never forget to monitor the impact of the profiler on your own infrastructure. If everything is fine you can increase the time and the frequency of CPU profiling. +

+ One more very important thing: never forget to always stop a started CPU profiling. You can add a timer to automatically call the stop function after a while. +

+ 2) security +

+ Using the inspector in Node.js it’s like opening the door of the core of your application. You should be very careful about who can use features like CPU profiling and/or the debugger. Never make the inspector “public” as being able to launch a feature from an unsafe route (not protected with an authentification mechanism). Even the collected data can be seen as critical, never send it to a system you do not trust. +

+ Conclusion +

+ CPU profiling is really a must-have tool for every developer. And now, with some precautions, we can run it on production thanks to the amazing work done by the V8 and Node.js team. +

+ The inspector module offers a lot more features than you can use to debug your application. +

+ I will write another article about using CPU profiling and the inspector on production on a high traffic project. +

+ Sources & links +

+ + + +

+ +

+ Voodoo Engineering +

+ Learn about Voodoo’s engineering efforts. +

+ +

+ Thanks to Clint FENTON. +

+ Nodejs +
+ Performance +
+ Cpu +
+ Profiling +
+ Inspector +

+ +

+ Written by +

+ Vincent Vallet +

+ +

+ Voodoo Engineering +

+ +

+ Learn about Voodoo’s engineering efforts. +

+ +

+ Write the first response +

+ More From Medium +

+ More on Nodejs from Voodoo Engineering +

+ +

+ More on Nodejs from Voodoo Engineering +

+ WebSockets on production with Node.js +

+ Vincent Vallet in Voodoo Engineering +

+ Mar 11 · 5 min read +

+ +

+ 42 +

+ +

+ More on Nodejs from Voodoo Engineering +

+ +

+ More on Nodejs from Voodoo Engineering +

+ A successful Voodoo.io NodeJS meetup on 13th November! +

+ Aymeric Roffé in Voodoo Engineering +

+ Nov 20, 2019 · 3 min read +

+ +

+ 5 +

+ +

+ Related reads +

+ +

+ Related reads +

+ Request Id Tracing in Node.js Applications +

+ Andrey Pechkurov in ITNEXT +

+ Dec 6, 2018 · 5 min read +

+ +

+ 827 +

+ +

+ Discover Medium +

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch +

+ +

+ Make Medium yours +

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore +

+ +

+ Become a member +

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade +

+ +

+ About Help Legal +

+ + + + + + + + + + + + + + + + + + + diff --git a/test/test-pages/mozilla-1/expected-images.json b/test/test-pages/mozilla-1/expected-images.json index f0fdef2..8ee13b8 100644 --- a/test/test-pages/mozilla-1/expected-images.json +++ b/test/test-pages/mozilla-1/expected-images.json @@ -1,7 +1,7 @@ [ "https:\/\/mozorg.cdn.mozilla.net\/media\/img\/firefox\/template\/page-image.af8027a425de.png", "http:\/\/mozorg.cdn.mozilla.net\/media\/img\/firefox\/desktop\/customize\/animations\/flexible-top-fallback.c960365ba781.png", - "http:\/\/mozorg.cdn.mozilla.net\/media\/img\/firefox\/desktop\/customize\/designed-redesigned-high-res.6efd60766484.png", + "http:\/\/mozorg.cdn.mozilla.net\/media\/img\/firefox\/desktop\/customize\/designed-redesigned.fbd3ee9402e6.png", "http:\/\/mozorg.cdn.mozilla.net\/media\/img\/firefox\/desktop\/customize\/animations\/flexible-bottom-fallback.cafd48a3d0a4.png", "http:\/\/mozorg.cdn.mozilla.net\/media\/img\/firefox\/desktop\/customize\/theme-red.61611c5734ab.png", "http:\/\/mozorg.cdn.mozilla.net\/media\/img\/firefox\/desktop\/customize\/add-ons.63a4b761f822.png", diff --git a/test/test-pages/mozilla-1/expected.html b/test/test-pages/mozilla-1/expected.html index 97f3761..de3c9e6 100644 --- a/test/test-pages/mozilla-1/expected.html +++ b/test/test-pages/mozilla-1/expected.html @@ -20,7 +20,7 @@ Open the “Customize” panel to add, move or remove any button you want. Keep your favorite features — add-ons, private browsing, Sync and more — one quick click away.

diff --git a/test/test-pages/seattletimes-1/expected.html b/test/test-pages/seattletimes-1/expected.html index 1f72bc1..27397d8 100644 --- a/test/test-pages/seattletimes-1/expected.html +++ b/test/test-pages/seattletimes-1/expected.html @@ -72,7 +72,7 @@

+ CPU profiling: what’s the difference with CPU monitoring? +

+ What about existing solutions? +

+ Add arguments to Node.js +

+ ClinicJs +

+ Inspector +

+ And now, CPU profiling on-demand! +

+ More than just CPU profiling +

+ Warnings +

+ Conclusion +

+ Sources & links +

+ Voodoo Engineering +

+ Learn about Voodoo’s engineering efforts. +

+ 11 +

+ Thanks to Clint FENTON. +

+ 11 claps +

+ Vincent Vallet +

+ Voodoo Engineering +

+ Learn about Voodoo’s engineering efforts. +

+ More From Medium +

+ More on Nodejs from Voodoo Engineering +

+ More on Nodejs from Voodoo Engineering +

+ WebSockets on production with Node.js +

+ 42 +

+ More on Nodejs from Voodoo Engineering +

+ More on Nodejs from Voodoo Engineering +

+ A successful Voodoo.io NodeJS meetup on 13th November! +

+ 5 +

+ Related reads +

+ Related reads +

+ Request Id Tracing in Node.js Applications +

+ 827 +

+ Discover Medium +

+ Make Medium yours +

+ Become a member +

+ +

+ +