@initplatform, zone.js doesn't register unload event, all event listeners will call zone.js patched version, so it looks like it is from zone.js, I just checked it, in dev mode, ng serve is using socket.js to do the live loading (maybe), so the unload event is registered by the socket.js, if you run ng build --prod and try lighthouse again, this unload warning will be gone.

Closing this ticket based on the comment above. Feel free to reopen if the problem still exists. Thank you.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

You can run lighthouse on our app to see it.

https://startbootstrap.com/

This is build with :

npm run ng -- build --prod --crossOrigin=anonymous --build-optimizer=true --vendor-chunk=true --statsJson=true

Also.. we have upgraded to angular 11, same issue.

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 11.0.1
Node: 12.18.3
OS: darwin x64

Angular: 11.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.1
@angular-devkit/build-angular   0.1100.1
@angular-devkit/core            11.0.1
@angular-devkit/schematics      11.0.1
@angular/cli                    11.0.1
@nguniversal/builders           11.0.0
@nguniversal/express-engine     11.0.0
@schematics/angular             11.0.1
@schematics/update              0.1100.1
rxjs                            6.6.3
typescript                      4.0.5

Also, shouldn't matter, but FWIW, npm run ng is:

"ng": "cross-env NODE_OPTIONS=--max_old_space_size=2048 ./node_modules/.bin/ng",

I ran Lighthouse on https://startbootstrap.com/ and the one report about unload event I got was from line 23 of the fbevents.js file (which is not related to Angular). Are you seeing something different, @initplatform?

This is weird.. If I do it multiple times I see one.. or the other...

The first time I did it, I saw the facebook one like you.. but now I only seem to be getting the polyfills one https://startbootstrap.com/polyfills-es2015.9509cf6cf3660a1b8556.js

I wonder if this may have something to do with the pwa voodoo in ngsw-worker.js ...

Are you able to run it multiple times and see the polyfills-es2015.9509cf6cf3660a1b8556.js one?

This is the contents of my polyfills.ts with all comments removed:

import '@angular/localize/init';

import 'zone.js/dist/zone'; // Included with Angular CLI.

import smoothscroll from 'smoothscroll-polyfill';
smoothscroll.polyfill();

smoothscroll does not appear to be using unload -> https://github.com/iamdustan/smoothscroll/blob/master/src/smoothscroll.js

I wonder if lighthouse is incorrectly thinking zone.js is using unload, since it includes ->
node_modules/zone.js/dist/zone.js - line 2332

    var windowEventNames = [
        'absolutedeviceorientation',
        'afterinput',
        'afterprint',
        'appinstalled',
        'beforeinstallprompt',
        'beforeprint',
        'beforeunload',
        'devicelight',
        'devicemotion',
        'deviceorientation',
        'deviceorientationabsolute',
        'deviceproximity',
        'hashchange',
        'languagechange',
        'message',
        'mozbeforepaint',
        'offline',
        'online',
        'paint',
        'pageshow',
        'pagehide',
        'popstate',
        'rejectionhandled',
        'storage',
        'unhandledrejection',
        'unload',
        'userproximity',
        'vrdisplayconnected',
        'vrdisplaydisconnected',
        'vrdisplaypresentchange'
    ];

@initplatform, just like @gkalpak said, the unload is added by fbevents.js

 g.addEventListener("unload", function() {
                        return m.forceEndBatch()
                    });

Here is what I believe happens:
fbevents.js registers an unload listener. When zone.js is loaded, it monkey-patches the addEventListener() method, so any calls to that method appear as if they are coming from polyfills.js. Depending on whether zone.js has been loaded before fbevents.js registers the unload listener, it might appear to LightHouse that the addEventListener() call is coming from polyfills.js or fbevents.js.

So, as @JiaLiPassion has said above, zone.js does not register any unload listeners. You can also see this by running LightHouse on an Angular app that does not import any 3rd party library that registers unload listeners (for example https://angular.io/).

I am going to close this, since there doesn't seem to be anything to be fixed in Angular or zone.js. Feel free to continue the discussion below in case I have missed something or you need more clarification.

Thanks @gkalpak and @JiaLiPassion. Makes sense. Looks like I need to file a bug against facebook :)

Investigation

I'm seeing this in https://www.devintent.com/ which does not use fbevents.js.

I looked at each of the libraries in my polyfills.ts and the only one with the string 'unload' in it is zone.js.

Then after reading this thread, I thought that I might have been wrong... so I went and looked at https://www.devintent.com/polyfills-es2015.00bf12ee6ad9d54b5a1c.js and searched for the string in there and the only place that it was found was in the zone.js code.

This error alone, takes 7 points off of the Lighthouse Best Practices audit.

How to find the real culprit in your app

I think that many people are going to hit this issue. It might be worth pinning it and providing clear steps for how to track down the actual library that registers the unload listener:

1. Open your app in incognito mode to run lighthouse audits

2. If you see this issue in the Best Practices audit, go to your Sources tab

3. Right click on the top folder in the left panel

   

4. Select "Search all files"

5. Search for addEventListener("unload"

In my case, the offending library is LogRocket.

Should we write up an issue in the Lighthouse repo to ask them to make it smarter? It seems like the audit should be able to do this kind of thing automatically and save us a lot of extra issues.