Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Possible performance impact of dynamic script injection #423

Closed
gorphensu opened this issue Sep 27, 2016 · 17 comments
Closed

Possible performance impact of dynamic script injection #423

gorphensu opened this issue Sep 27, 2016 · 17 comments

Comments

@gorphensu
Copy link

when i run nam run dev, and the app is running ,but it show error message like this

A Parser-blocking, cross-origin script, http://localhost:3000/dist/bundle.js, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity.

why? I use mac os 10.11.5, it cannot work,
and i use window, it ok,
how can i do??

@amilajack
Copy link
Member

This is not really a problem. The boilerplate app should still work.

@gorphensu
Copy link
Author

@amilajack but why it report cross-origin error in mac os?

@amilajack
Copy link
Member

It is because creating inserting a script dynamically at runtime is terrible for performance. Browsers want to be able to walk the DOM tree without having to evaluate JS to insert scripts that will pull in other scripts.

@gorphensu
Copy link
Author

@amilajack and how to do ?

@amilajack
Copy link
Member

The message can be ignored.

@amilajack
Copy link
Member

@amilajack
Copy link
Member

Reopening because I think this actually may have some noticeable performance.

@amilajack amilajack reopened this Sep 28, 2016
@amilajack amilajack changed the title A Parser-blocking, cross-origin script, http://localhost:3000/dist/bundle.js, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity. Possible performance impact of dynamic script injection Sep 28, 2016
@gorphensu
Copy link
Author

@amilajack thank you , solved!

@amilajack amilajack reopened this Sep 30, 2016
@amilajack
Copy link
Member

http://blog.dareboost.com/en/2016/09/avoid-using-document-write-scripts-injection/

Dynamic script injection will be disallowed in Chrome 54. We definitely need to migrate from this soon.

@yourfavorite
Copy link

yourfavorite commented Oct 6, 2016

I am already seeing errors from this using electron 1.4.3. Not sure when this happened but in my haste, I downgraded to electron 1.3.4 and my errors went away. Will have to slowly decrement down in electron versions from 1.4.3 to find the latest compatible version.

I get the Parser-blocking error both in terminal and in console of electron app.

@amilajack
Copy link
Member

amilajack commented Oct 6, 2016

Are they warnings or errors? I'm pretty sure they are warnings

@yourfavorite
Copy link

Last night there were errors that I assumed were related. After downgrading electron, I did a bit more work. I just updated to the latest electron again though and now I'm just getting the Parser-blocking warning. So perhaps the error was unrelated as I cannot reproduce now.

@Ugarz
Copy link

Ugarz commented Oct 26, 2016

I have this too with this repo. Downloaded about an hour ago, npm i && npm run dev show me
capture d ecran 2016-10-26 a 09 34 15
Chrome Version 54.0.2840.71 (64-bit) on MacOs

@amilajack
Copy link
Member

Its probably caused by something else. The first two errors are just warnings

@amilajack
Copy link
Member

@Ugarz Did you see #400

@dustintownsend
Copy link
Collaborator

I replaced
document.write(link.outerHTML) with document.body.appendChild(link)
and document.write(script.outerHTML) with document.body.appendChild(script)

The resulting output is the same and it gets rid of the errors.

@amilajack
Copy link
Member

Made #604 for this. Would be great if you could review it just to confirm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants