如何可靠地加载所需的 JavaScript 文件？
由于互联网连接问题，一些必需的 JavaScript 文件无法加载，我遇到了这个问题。正文 onload 事件被触发，但页面逻辑所需的类不存在。
另一件事，我想要解决的问题不在网站中，而是在没有任何图像或 CSS 文件的 Web 应用程序中。想象一下在 iframe 中运行的 JavaScript 代码。因此，我只遇到脚本问题。
以下是我的想法如何解决这个问题，如果我错了，请评论/纠正我：
- 在推送到实时版本时混淆并合并文件，这样文件的整体大小将减少，并且任务将可靠地加载 1 个文件
- 启用 gzip 压缩在服务器上。因此，最终的文件大小会小得多，
- 为该文件放置适当的缓存标头，因此一旦加载，它将被缓存在浏览器/代理服务器中
- 最后，即使拥有所有这些，也可能存在文件不会被加载的情况。在本例中，我计划在页面加载后从 JavaScript 动态加载该文件。例如，将出现“重试失败加载”逻辑，最多尝试 5 次。
还有其他想法吗？
I came across the problem when due to internet connection problems, some of the required JavaScript files are not loading. Body onload event gets fired however classes required for logic of the page are not present.
One more thing, problem which I want to fix is not in the website, it is in web application which does not have any image or CSS files. Just imagine a JavaScript code running in iframe. Thus, I have problems only with scripts.
Here are my ideas how to fix this, please comment/correct me if I'm wrong:
- Obfuscate and combine files into when pushing to live so overall size of the files will be decreased and task will come to reliably loading 1 file
- Enable gzip compression on server. So again resulting file size will be much smaller
- Put proper cache headers for that file, so once loaded it will be cached in browser/proxy server
- Finally, even having all this, there could be a case that file will not be loaded. In this case I plan to load that file dynamically from JavaScript, once page is loaded. There will be "Retry failed load" logic with maximum 5 attempts for example
Any other ideas?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
如果“重试”脚本无法获取所需的依赖项，请重定向到该站点的“无脚本”版本（如果可用）。或者尝试有一个优雅的降级页面，这样即使所有步骤都失败，该网站仍然可以使用。
If the "retry" script fails to grab the required dependencies, redirect to a "no script" version of the site, if one is available. Or try to have a gracefully degrading page, so even if all steps fail, the site is still usable.
1 - 正确但仔细检查来自不同文件的 JavaScript 函数是否不会相互重叠。
2 - 正确 - 这应该始终打开。
3 - 正确，但浏览器仍会尝试从服务器获取
HTTP 304：未修改代码。4 - 正确，在 1 或 2 次失败尝试后考虑回退到网站的
noscript版本（5 次太多了）。1 - Correct but double check if JavaScript functions from different files don't overlap each other.
2 - Correct - this should be always on.
3 - Correct but the Browser will still try to get a
HTTP 304: Not Modifiedcode from the server.4 - Correct, consider fallback to a
noscriptversion of the website after 1 or 2 failed attempts (5 is too much).我个人认为不值得尝试重做浏览器的逻辑。如果页面中的图像无法加载怎么办？如果主页无法加载怎么办？如果用户有互联网连接问题，他们需要解决这些互联网连接问题。很多事情在它们真正实现之前都不会可靠地工作。
那么，您是否要检查页面显示的每个图像是否正确加载，如果未加载，您是否还要手动尝试重新加载这些图像？
在我看来，放置一些内联 JS 来检测外部 JS 文件是否未加载可能是值得的（您所要做的就是检查外部 JS 文件中是否存在一个全局变量或顶级函数）然后告诉用户他们遇到了互联网连接问题，他们应该解决这些问题，然后重新加载网站。
I don't personally think it's worth it to try to redo the logic that the browser has. What if the images in your page don't load? What if the main page doesn't load. If the user has internet connection problems, they need to fix those internet connection problems. Lots of things will not work reliably until they do.
So, are you going to check that every image your page displays loads properly and if it didn't load, are you going to manually try to reload those too?
In my opinion, it might be worth it to put some inline JS to detect whether an external JS file didn't load (all you have to do is check for the existence of one global variable or top level function in the external JS file) and then just tell the user that they are having internet connection problems and they should fix those problems and then reload the site.
您的积分对于脚本加载有效，但您还必须考虑网站的使用情况。
如果脚本由于某种原因未加载，则该站点必须仍然完全可用和可导航。用户体验高于一切。
脚本应该在浏览器加载并可视化网站界面后加载，并且应该包含增强用户体验的代码，而不是您必须绝对依赖的东西。
这样，即使连接非常慢，我仍然能够阅读内容并选择更改页面或转到其他地方，而不是空白页面或仅显示标题的页面。
这对我来说是最重要的一点。
另外，您确定要重试方法吗？它会导致向服务器发出更多请求。如果连接缓慢或滞后，那么最好根本不运行脚本，特别是考虑到用户可能在页面上花费很少的时间，只需要快速阅读内容。另外，如果连接速度很慢，你会设置多少时间超时？如果在超时触发时正在下载脚本并且您重试怎么办？如何有效地确定该时间量以及连接的“缓慢程度”？
编辑
您尝试过head.js吗？是一个旨在以最快的速度加载脚本的插件，也许会有帮助。
Your points are valid for script loading, but you must also consider the website usage.
If the scripts are not loading for whatever reason, the site must be still completely usable and navigable. The user experience come first before everything else.
The scripts should be loaded after the website interface has been loaded and visualized by the browsers, and should contain code to enhance user experience, not something you must absolutely rely on.
This way even when the connection is really slow, I will still be able to read content and choose to change page or go somewhere else, instead of having a blank page or a page with only the header displayed.
This to me is the most important point.
Also, are you sure about a retry approach? It causes more requests to the server. If the connection is slow or laggy then it may be best to not run the script at all, expecially considering users may spend little time on the page and only need to fast read at content. Also, in the connection is slow, how much time would you set for a timeout? What if the script is being downloaded while your timeout fired and you retry again? How can you effectively determine that amount of time, and the "slowness" of the connection?
EDIT
Have you tried out head.js? Is a plugin aimed at fastest possible sripts loading, maybe it will help.