Javascript 文件包含在 html 页面中 - 浏览器下面会发生什么？
我认为这可能是一个依赖于浏览器的问题 - 假设我有 10 个 Javascript 文件和几个 HTML 页面。假设HTML页面A只需要JS1.js和JS3.js，同样HTML页面B需要JS4.js和JS1.js。我想知道在所有 HTML 页面中包含所有 10 个 javascript 文件会产生什么效果？它与浏览器的内存消耗直接相关吗？
我面临这个问题，尤其是 YUI javascript 库。有几个组件，如数据表、事件、容器、日历、dom-event 等，它们的包含顺序似乎也很重要 - 例如 dom-event js 应该在其余组件之前包含才能正常工作。因此，为了避免所有这些混乱，我想到将所有这些 js 文件包含在一个头文件中，该头文件包含在所有 HTML 页面中。
我担心的是它可能导致的内存膨胀和性能问题。请提供您的建议。
谢谢， -克沙夫
I think this may be a browser dependent question- Suppose I have 10 Javascript files and several HTML pages. Suppose HTML pageA needs only JS1.js and JS3.js, similarly HTML pageB needs JS4.js and JS1.js. I want to know what would be effect of including all the 10 javascript files in all HTML pages? Will it directly relate to the memory consumption by the browser?
I am facing this problem particularly with YUI javascript library. There are several components like datatable, event, container, calendar, dom-event etc., The order in which they are included also seems to matter a lot- For example the dom-event js should be included before the rest for it to work. So to avoid all this confusion, I thought of including all these js files in a header file that gets included in all HTML pages.
The thing that I am worried about is the memory bloat and performance problems that it may cause. Please provide your suggestions on the same..
Thanks,
-Keshav
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（8）
您加载到页面中的任何脚本，即使已经下载并缓存，仍然必须在加载页面的其余部分之前进行解析。因此，从这个意义上说，存在内存损失，并且脚本中的某些内容仍然有可能显着延迟渲染。
然而，对于像 YUI 这样精心设计的库，我希望解析时间能够最小化。
如果您可以在页面末尾加载所有脚本，则可以极大地提高性能，因为整个页面可以在被 JavaScript 执行阻止之前呈现，并且您的网站会感觉更加敏捷。
我建议调查 Firebug Net 面板 和 YSlow 扩展 获取您网站的具体性能统计数据。
Any script you load into your page, even once downloaded and cached must still be parsed before the rest of the page can load. So in that sense there is a memory penalty, and there's still a potential for something in the script to significantly delay rendering.
However, in the case of a conscientiously designed library such as YUI I would expect the parsing time to be minimised.
If you can load all your scripts in at the end of the page, that can vastly improve performance as the entire page can render before being blocked by javascript execution, and your site will feel a lot snappier.
I would suggest investigating the Firebug Net panel and the YSlow extension to get specific performance stats for your website.
外部脚本会延迟以下 html 的显示，直到它们加载并执行。在第一个页面加载后，影响要小得多，因为它们已经被缓存了，尽管浏览器偶尔会检查新版本，但这仍然会带来延迟。我尝试限制脚本的数量，并在可能的情况下将脚本标签移至页面底部。如果页面已经完全显示，用户不会注意到脚本加载延迟。
External scripts delay the display of the following html until they have loaded and executed. The impact is much less after the first page load, since they're already cached, though browsers will occasionally check for new versions, which still carries a delay. I try to limit the number of scripts and move the script tags to the bottom of the page when possible. Users won't notice the script loading delay if the page has already fully displayed.
如果给定的脚本不执行任何操作，则不会影响性能。
显然，第一页加载速度会很慢，但其余页面不需要加载所有脚本，因为它们会被缓存。这样接下来的页面将加载得更快。
提示：
1) 在页面底部加载脚本（就在结束 BODY 标记之前）。
2) 使用非阻塞方式加载脚本。这是我正在使用的。
但找不到源网页:-(
if a given script does nothing, it will not affect the performance.
Obviously the first page will load slowly, but the rest will not need to load all the scripts because they will be cached. So the next pages will load faster
Tips:
1) Load the script at the bottom of the page (just before the closing BODY tag).
2) Use a non-blocking way of loading the scripts. This is the one I'm using .
Can't find the source web page though :-(
内存消耗：
假设脚本编写得很好，那么内存消耗和性能问题应该是名义上的。一次包含所有脚本的最大问题将是用户第一次体验的延迟，或者如果您进行更改，因为他们必须一次下载所有脚本。我认为您应该只包含每页所需的脚本，而不是一次包含所有脚本。
您可以使用简单的工具自行评估影响，例如 Windows 中的任务管理器/进程来监视内存/处理器的使用情况，或者使用 Firebug 等插件来评估影响火狐。
您还可以查看名为 缩小 的内容，以帮助使您的脚本文件小至可能的。
依赖关系：
包含脚本的顺序很重要，因为某些脚本可能依赖于其他脚本中的功能。因此，如果一个脚本中的代码尝试运行，并且需要另一脚本中尚未下载的代码，那么它将失败。我的建议是真正理解脚本文件中的这些依赖关系，而不是立即下载所有内容，因为这看起来更容易。
Memory Consumption:
Assuming the scripts are well written then memory consumption and performance issues should be nominal. Your biggest problem with including all scripts at once will be the latency in the user experience first time through, or if you make changes, because they will have to download all of them in one hit. I think you should only include the scripts you need per page, not all scripts at once.
You can assess the impact yourself using simple tools like task manager/processes in Windows to monitor memory/processor useage, or plugs ins like Firebug for FireFox.
You can also look into something called minification to help make your script files as small as possible.
Dependencies:
The order in which you include the scripts is important as some scripts may depend on functionality in other scripts. So if the code in one script attempts to run and it requires code in another script that has not been downloaded then it will fail. My advice would be to actually understand those dependancies in your scripts files rather than just downloading everything at once because it seems easier.
使用 YUI 配置器帮助确定所需的文件包含和顺序，以及如何使用 Yahoo! CDN 组合服务将所有 YUI 文件组合到单个脚本标签中。
http://developer.yahoo.com/yui/articles/hosting/
Use the YUI Configurator to help determine the required file includes and order, as well as how to use the Yahoo! CDN combo service to combine all YUI files into a single script tag.
http://developer.yahoo.com/yui/articles/hosting/
HTML 页面的外部资源通常由浏览器缓存。外部资源是 HTML 请求的任何内容，例如图像、CSS、JavaScript 和其他内容。因此，如果您预先加载所有 10 个脚本文件，您将强制用户进行一次性大量下载。在这一次之后，用户不需要再次下载脚本，除非文件上的修改时间戳发生变化。
您的页面将只使用它需要的内容。如果特定页面请求 js4.js 和 js5.js，那么这些文件中的所有函数都将按照首先从 HTML 请求它们的顺序加载到解释器中，然后按照它们在每个文件中指定的顺序加载到解释器中。那些文件。如果存在任何命名空间冲突，则最后加载到解释器中的内容会获胜。一旦页面从浏览器中卸载，解释器就会清除这些函数。
为了提高效率，我建议使用服务器端包含过程来读取每个 js 文件并将每个文件的内容包含到一个新的单个 js 文件中。这将减少对服务器的 HTTP 请求数量，并为用户节省有关 HTTP 标头和 GET 请求的大量带宽资源。另外，将这一新脚本文件的请求直接放在 HTML 的结束正文标记之前。下载脚本会阻止 IE 中的并行下载，因此您希望在页面的最低位置加载脚本。
External assets to the HTML page are typically cached by the browser. External assets are anything requested from the HTML such as images, CSS, JavaScript, and anything else. So if you load all 10 script files up front you are forcing a one time massive download hit to your user. After this one time the user does not need to download the scripts again unless the modify timestamp on the files change.
Your page will only use what it requires. If a particular page requests js4.js and js5.js then all the functions in those files will be loaded into the interpreter in the order in which they are first requested from the HTML and second by the order in which they are specified in each of those files. If there are any namespace conflicts what ever is loaded into the interpreter last wins. The interpreter will clear out the functions once the page is unloaded from the browser.
For efficiency I would suggest using a server-side inclusion process to read each of the js files and include the contents of each file into a new single js file. This will reduce the number of HTTP requests to the server and save your users an extreme amount of bandwidth resources with regard to HTTP headers and GET requests. Also, put the request of this new one script file directly prior to the closing body tag of your HTML. Downloading of scripts block parallel downloads in IE, so you want to load scripts at the lowest possible point in the page.
Scriptaculous 实现了一种处理 js 依赖关系的好方法。我猜你可以检查一下并“重新实现”它。 ;D
至于内存膨胀和性能问题...只要你的 JS 不会泄漏太多（YUI 可能不会），内存不会成为太大的问题，尽管它会让你的页面加载速度变慢，尤其是如果加载到标题中。
Scriptaculous implements a nice way to handle js dependencies. Guess you could check it out and "re-implement" it. ;D
As for memory bloat and performance issues... as long as your JS doesn't leak a lot (YUI probably doesn't) memory won't be much of a problem, although it will make your pages load slower, especially if loaded in the header.
您可以阅读使用 PHP 的缓存方法，将多个 javascript 文件作为一个大 JS 文件传递，其中包含您需要的所有内容。为了获得额外的性能提升，除了发送 gzip 压缩文件之外，您还可以让浏览器在本地缓存该文件（如果浏览器支持使用 ob_start("ob_gzhandler"); 之类的编码）。通过使用 gzip 编码，您可以大大减少您发送的主 JS 文件的文件大小，其中包括所有 JS 代码（因为纯文本压缩得很好）。我最近不得不在自己的网站上执行此操作，它对 JS 和 CSS 文件都很有效。
http://www.ejeliot.com/blog/72
请注意，按照以下说明进行操作在该教程中，您的 JS 文件只会发送一次，客户端计算机上的浏览器将保留存储的本地副本，这也将提高此后每次访问的性能。
另外，考虑谷歌搜索“Minify”，它应该托管在 Google 代码上。
You can read on caching methods using PHP to pass on several javascript files as one big JS file which includes everything you need. For additional performance gains, you can make the browser cache the file locally in addition to sending it gzipped (if the browser has support for the encoding using something like ob_start("ob_gzhandler");). By using gzip encoding, you can severely reduce the filesize of the main JS file you're sending which includes all your JS code (since plain text compresses so well). I recently had to do this on my own website and it's worked like a charm for both JS and CSS files.
http://www.ejeliot.com/blog/72
Note that by following the instructions on that tutorial, your JS file will only be sent once and the browser on the client's machine will keep a local copy stored which will also improve performance of every visit thereafter.
Also, consider googling "Minify" which should be hosted on Google Code.