Question:
What is the best way to communicate between separate Google Chrome rendering processes (tabs) without the use of a web-server?
Background:
I am writing a large application and recently I decided to try and migrate the whole thing to the browser. Due to where I work this is Google Chrome. Previous the application consisted of a c++ based (Qt) webserver / calculation engine and the browser was only used for the GUI. Now I have moved the calculation engine to javascript and I run it in the browser.
The problem is that the GUI is slightly unstable. It will often stay running for about 12 hours but then crash with an "Aw Snap" error. Before I wasn't worried because it was a simple matter of refreshing the page. Now when the GUI crashes because it is running in the same process as the calculation engine, that crashes also.
Details:
The calculation engine is now a web-page that spawns a number of web-workers. It also opens the GUI (a separate webpage) as a popup window and communicates to it using PostMessage.
The GUI typically needs to read ~ 500 floating point numbers / second (sent as JSON) from the calculation engine and write back ~ 5 numbers / second.
Yesterday I got excited because I discovered the SharedWorker API which I thought would accomplish was I wanted. Today however, I learned that recently modifications were made to Chrome so the SharedWorker actually runs in the same process as the attached tabs and it actually forces all the tabs attached to it into one process. Apparently it didn't used to do this. Does anyone know if there are any browser flags that I can set to revert to the old behavior?
I also have read a little bit about ServiceWorkers and other new APIs such as WebRTC. I have also played around with the storage APIs and thought that maybe they could be used to get two separate processes (tabs) to communicate at the rates that I need.
I want a solution that will work locally (using switches like --allow-file-access-from-files) and that doesn't require plugin installation (since even local plugins are blocked where I work).
NOTE: I saw some other similar questions but they didn't specifically address the need for there to be separate processes (only separate tabs)
Well, it looks like I figured out the answer already. The problem turned out to be how I was trying to open the GUI window.
I had a link on the calculation engine that the user clicked on to open the window:
Open GUI
However, it turns out that adding rel="noreferrer" will cause chrome to open the window in a new process.
Open GUI in new process
After I figured this out, the SharedWorker began to function as I had expected and I was able to keep by engine tab running even when the GUI tab crashed.
Related
If I use Chrome Dev Tools I can do the following:
Open chrome dev tools (right click on the page in chrome => inspect)
Navigate to the "performance" tab
Click the record button
Click on a button in my web app
Stop performance recording
Then i get a nice little pie in the "Summary" tab of chrome:
My question is:
How can i start recording, stop recording and get those summary values (Loading, Scripting etc.) in javascript?
It would be really nice if someone could give me a little code example.
My question is not on how I can handle page navigation, cause for this I am using C# selenium. What I want to do is start performance recording, execute some steps with the webdriver, stop recording and measure the performance.
There are two ways you could do it:
First one:
I would recommend looking into puppeteer.
It's a project done by the guys from google chrome and it has support for tracing. As you can see here https://pptr.dev/#?product=Puppeteer&version=v1.13.0&show=api-class-tracing they have a way to retrieve the generated trace, and you should just write it to your computer to be able to use it later.
The call of tracing.start({}) uses a path which specifies the file to write the trace to.
The call of tracing.stop() can be very easily integrated with the fs library to convert the Buffer output to a file that later you can read with the chrome dev tools in case you wouldn't want to use the start function with the path parameter.
The only downside, is that you can't really reuse your Selenium script and you would have to start more or less from the scratch, even thought Puppeteer claims to be easier.
Second one (a little more difficult):
Use something similar to this library. https://github.com/paulirish/automated-chrome-profiling
It's written in JS, and it works perfectly as it's expected with the example, if you follow the installation steps of the package and then run the command node get-timeline-trace.js and load the file generated (profile-XXXXXXXX.devtools.trace) to the chrome profiler you will have a very nice report.
The only problem I see is that you will have to find a way to execute your selenium scripts passing it the chrome instance to it, and I don't know how easy that could be (maybe the PID might do?)
today I am asked to write some Javascript for a Website which runs within a Windows App. The app uses a browser internally (I guess some version of IE) to render its content on screen, what is represented by a static/local website.
The main Problem is, that there isn't any way to debug that, what is normally possible with the default developer tools of each browser.
So my question(s): Is there any way to start the developer tools by JS, in case the browser internally used is IE? Are the any other ways to pull some debug data out of the app, such that I could view that output anywhere else?
So in case somebody else has already dealt with a problem alike, I would really be interested to get some ideas, how to solve that properly.
We use PhantomJs 2.0 to take screenshots of web pages. We've found that one particular page takes several minutes to process. This page does not appear to have this issue (or at least not of any comparable magnitude) when loaded in Chrome.
I believe that this is because the javascript is hanging/running very slowly. During the hang, Phantom is using a lot of CPU (although only one core). It does not appear to be taking up an abnormal amount of memory. I am fairly confident that javascript is the culprit because I can see from logging that all requests complete quickly, but then after the page loads Phantom hangs for awhile and won't run anything (I think this is because Phantom is all single-threaded so if the page is still running javascript my Phantom script won't run anything).
I'd like to debug and try to understand what part of the JS is taking so long, but I can't figure out how to get at this in Phantom. For example, I can't seem to collect any output from console.profile/console.profileEnd. How can I profile the javascript running in Phantom to find the bottleneck?
I use Phantomas, via grunt-phantomas. It's a tool that integrates with PhantomJS to profile a wide variety of performance-related metrics. Definitely worth checking out. If it doesn't give you exactly what you need, you can look at the source and see how they integrate with PhantomJS and get data out.
I've got a highly recursive JavaScript function, which calls no other JavaScript functions. It's just the one function calling itself doing some simple logic and calling system functions (Array.slice, Array.splice , Array.push, etc.).
And I'm trying to optimize it, however Chrome's and Firefox's (the only browsers the website works in) DevTools and Firebug's profilers don't show anything more specific than function calls. Visual Studio has a nice thing where after profiling an application, it will tell you what percent of execution was spent on each line of your functions, which is really helpful.
I've tried breaking up the function into smaller functions, but then the function call overhead inflates to take up most of my execution time.
Firebug's and the DevTools' profilers provide you with detailed information on how much time was spent within each function. See the following screenshots:
Firebug (Own Time column)
Firefox DevTools (Self Time column)
Chrome DevTools (Self column)
The Firefox DevTools furthermore allow you to include platform data by enabling the option Show Gecko Platform Data within the Performance panel options:
Though the tools only display data per-function. They do not allow you to display per-line, or to be more precise, per-statement information, probably because this is something the JavaScript author cannot influence directly.
If you believe that this information can be relevant for a JavaScript author, you should file requests for each of those tools to implement this feature explaining the reasoning behind it.
Intel XDK provides information you are asking for. Here is a link to the Inbtel XDK profiling tools: https://software.intel.com/en-us/xdk/docs/using-the-profile-tab There are several pictures and help how to use it.
We are collecting the profile and annotate the source view by the self time metrics.
Currently we are doing this on Android devices, but have plans to migrate GUI to CDT and upstream it. But even before upstreaming this functionality will be available on Windows and Linux platforms in the browser named Crosswalk. Crosswalk is a chromium based browser, containing promising features like SIMD.js or WebCL.js
Several more worlds regarding collected information. Intel XDK JavaScript CPU profiler annotates only sources by self time, but we are working on adding total times - how much time was spend for certain line and all callee functions from this line.
For running of the profiling you need to download XDK, create new project and add your code to it. Then switch to Profile tab, plug the device via wire, select CPU profiler if it is not selected and press Profile button. Waiting your feedback on using it.
I am completely new to javascript programming and I have a question that I didn't manage to find an answer for anywhere.
I have recently put together a simple slideshow to view the photos remotely that I host on my home computer. This by itself works fine. The problem I run into is that when I'm viewing photos I don't interact with the hardware, which after some time causes the monitor to switch off. This is particularly annoying when watching photos on my mobile phone.
My question is: is there a way to prevent this from happening? I am thinking in the direction of faking a mouse or other event every time I refresh the photo, but I have no clue how to do that and if it is possible.
Any help is greatly appreciated!
No. JavaScript on the browser cannot interact with the underlying system. Simulating keystrokes in the browser will not stop the screen saver from turning on. This is for security reasons, so that malicious code can't harm the system when you visit a web page.
Link on JavaScript Security
The modern JavaScript security model
is based upon Java. In theory,
downloaded scripts are run by default
in a restricted “sandbox” environment
that isolates them from the rest of
the operating system. Scripts are
permitted access only to data in the
current document or closely related
documents (generally those from the
same site as the current document). No
access is granted to the local file
system, the memory space of other
running programs, or the operating
system’s networking layer. Containment
of this kind is designed to prevent
malfunctioning or malicious scripts
from wreaking havoc in the user’s
environment. The reality of the
situation, however, is that often
scripts are not contained as neatly as
one would hope. There are numerous
ways that a script can exercise power
beyond what you might expect, both by
design and by accident.
Over the decade since this questions question was originally asked JavaScript has grown to provide much of the OS functionality (usually in a secure manner). The "wake lock" functionality is slowly being implemented. Currently there is a draft for the navigator.getWakeLock interface: https://www.w3.org/TR/wake-lock/#conformance
Chrome (https://developers.google.com/web/updates/2018/12/wakelock) and Mozilla (https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API) are considering it in various manners.
No, JavaScript cannot affect hardware or operating system. Just turn off monitor power saving settings until you're done with the slideshow.
Yes, It's possible now :)
Just use NoSleep.js library: https://github.com/richtr/NoSleep.js
It's working form me with Reveal.js slides on my Android Tablet
You could do it with a console application written in c# that interacted with the os
since js is a client side browser language it can only interact with the browser/bowser