diff options
Diffstat (limited to 'test/test-pages/lazy-image-1/expected.html')
| -rw-r--r-- | test/test-pages/lazy-image-1/expected.html | 72 |
1 files changed, 8 insertions, 64 deletions
diff --git a/test/test-pages/lazy-image-1/expected.html b/test/test-pages/lazy-image-1/expected.html index 3cff201..2092395 100644 --- a/test/test-pages/lazy-image-1/expected.html +++ b/test/test-pages/lazy-image-1/expected.html @@ -1,18 +1,9 @@ <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. @@ -29,13 +20,9 @@ </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> @@ -56,13 +43,9 @@ </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> @@ -95,13 +78,9 @@ <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> @@ -115,13 +94,9 @@ <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> @@ -137,13 +112,9 @@ </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> @@ -192,9 +163,7 @@ 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”. @@ -204,17 +173,13 @@ 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"> @@ -222,13 +187,9 @@ </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. @@ -237,9 +198,7 @@ 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 ;) @@ -248,9 +207,7 @@ 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>). @@ -260,9 +217,7 @@ 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> + </div><div> <p id="2cda"> <strong>How can we identify an issue?</strong> </p> @@ -289,13 +244,9 @@ </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> @@ -303,21 +254,15 @@ <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> + </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"> @@ -375,5 +320,4 @@ <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 + </div>
\ No newline at end of file |