JavaScript和网站加载时间优化
[英]Javascript and website loading time optimization
问题描述
I know that best practice for including javascript is having all code in a separate .js file and allowing browsers to cache that file. 
我知道，包含javascript的最佳做法是将所有代码存储在单独的.js文件中，并允许浏览器缓存该文件。
But when we begin to use many jquery plugins which have their own .js , and our functions depend on them, wouldn't it be better to load dynamically only the js function and the required .js for the current page? 但是，当我们开始使用许多具有自己的.js且功能依赖于它们的jquery插件时，仅动态加载js函数和当前页面所需的.js会更好吗？
Wouldn't that be faster, in a page, if I only need one function to load dynamically embedding it in html with the script tag instead of loading the whole js with the js plugins? 如果我只需要一个函数来通过script标签动态地将其嵌入html中，而不是通过js插件来加载整个js，那在页面中会不会更快？
In other words, aren't there any cases in which there are better practices than keeping our whole javascript code in a separate .js ? 换句话说，难道没有比将整个javascript代码保存在单独的.js中更好的做法了吗？
6 个解决方案
解决方案1
1 2010-12-20 16:53:42
One problem with having separate js files is that will cause more HTTP requests. 具有单独的js文件的一个问题是，这将导致更多的HTTP请求。
Yahoo have a good best practices guide on speeding up your site: http://developer.yahoo.com/performance/rules.html 雅虎拥有加快网站访问的最佳做法指南： http ： //developer.yahoo.com/performance/rules.html
I believe Google's closure library has something for combining javascript files and dependencies, but I havn't looked to much into it yet. 我相信Google的闭包库可以将javascript文件和依赖项结合起来，但是我对此并没有太多关注。 So don't quote me on it: http://code.google.com/closure/library/docs/calcdeps.html 所以不要在上面引用我： http : //code.google.com/closure/library/docs/calcdeps.html
Also there is a tool called jingo http://code.google.com/p/jingo/ but again, I havn't used it yet. 另外，还有一个名为jingo的工具http://code.google.com/p/jingo/，但是我仍然没有使用过。
解决方案2
1 已采纳 2010-12-20 16:55:45
It would seem at first glance that this would be a good idea, but in fact it would actually make matters worse. 乍一看，这将是一个好主意，但实际上这会使情况变得更糟。 For example, if one page needs plugins 1, 2 and 3, then a file would be build server side with those plugins in it. 例如，如果一个页面需要插件1、2和3，则将在服务器端构建一个包含这些插件的文件。 Now, the browser goes to another page that needs plugins 2 and 4. This would cause another file to be built, this new file would be different from the first one, but it would also contain the code for plugin 2 so the same code ends up getting downloaded twice, bypassing the version that the browser already has. 现在，浏览器转到另一个需要插件2和4的页面。这将导致构建另一个文件，该新文件与第一个文件不同，但是它也包含插件2的代码，因此相同的代码结束最多下载两次，绕过浏览器已有的版本。
You are best off leaving the caching to the browser, rather than trying to second-guess it. 最好不要将缓存留给浏览器，而要对它进行第二次猜测。 However, there are options to improve things. 但是，有一些可以改善的方法。
Top of the list is using a CDN. 列表顶部是使用CDN。 If the plugins you are using are fairly popular ones, then the chances are that they are being hosted with a CDN. 如果您使用的插件是相当流行的插件，则很有可能它们是由CDN托管的。 If you link to the CDN-hosted plugins, then any visitors who are hitting your site for the first time and who have also happened to have hit another site that's also using the same plugins from the same CDN, the plugins will already be cached. 如果您链接到CDN托管的插件，那么第一次访问您的站点的访客以及碰巧访问了另一个也使用相同CDN的相同插件的站点的访问者，这些插件将已经被缓存。
There are, of course, other things you can to to speed your javascript up. 当然，您还可以通过其他方法来加快javascript的速度。 Best practice includes placing all your script include tags as close to the bottom of the document as possible, so as to not hold up page rendering. 最佳实践包括将所有脚本的include标记放置在尽可能靠近文档底部的位置，以免阻碍页面呈现。 You should also look into lazy initialization. 您还应该研究延迟初始化。 This involves, for any stuff that needs significant setup to work, attaching a minimalist event handler that when triggered removes itself and sets up the real event handler. 对于需要大量设置才能正常工作的所有事情，这需要附加一个极简事件处理程序，该事件处理程序在触发时会删除自身并设置真实事件处理程序。
解决方案3
1 2010-12-20 17:02:10
I keep separate files for each plug-in and page during development, but during production I merge-and-minify all my JavaScript files into a single JS file loaded uniformly throughout the site. 在开发过程中，我为每个插件和页面保留单独的文件，但是在生产过程中，我将所有JavaScript文件合并并缩小为一个在整个站点统一加载的JS文件。 My main layout file in my web framework ( Sinatra ) uses the deployment mode to automatically either generate script tags for all JS files (in order, based on a manifest file) or perform the minification and include a single querystring-timestamped script inclusion. 我的Web框架（ Sinatra ）中的主布局文件使用部署模式来自动为所有JS文件生成脚本标签（基于清单文件），或者执行压缩，并包含单个带有查询字符串时间戳的脚本。
Every page is given a body tag with a unique id , eg <body id="contact"> . 每个页面都有一个带有唯一id的body标签，例如<body id="contact"> 。
For those scripts that need to be specific to a particular page, I either modify the selectors to be prefixed by the body: 对于那些需要特定于特定页面的脚本，我可以修改选择器以使其成为正文的前缀：
$('body#contact form#contact').submit(...);
or (more typically) I have the onload handlers for that page bail early: 或者（通常），我较早就有该页面保释的onload处理程序：
jQuery(function($){
if (!$('body#contact').length) return;
// Do things specific to the contact page here.
});
Yes, including code (or even a plug-in) that may only be needed by one page of the site is inefficient if the user never visits that page. 是的，如果用户从不访问该页面，则包括仅站点的一个页面可能需要的代码（甚至是插件）是没有效率的。 On the other hand, after the initial load the entire site's JS is ready to roll from the cache. 另一方面，在初始加载之后，整个站点的JS就可以从缓存中滚动了。
解决方案4
1 2010-12-20 17:26:45
The network latency is the main problem. 网络延迟是主要问题。
You can get a very responsive page if you reduce the http calls to one. 如果将http调用减少到一个，则可以得到响应迅速的页面。
It means all the JS, CSS are bundled into the HTML page. 这意味着所有JS，CSS都捆绑到HTML页面中。
And if your can forget IE6/7 you can put the images as data:image/png;base64 如果您可以忘记IE6 / 7，则可以将图像作为data:image/png;base64
When we release a new version of our web app, a shell script minify and bundle everything into a single html page. 当我们发布Web应用程序的新版本时，shell脚本会缩小所有内容并将其捆绑到一个html页面中。 Then there is a second call for the data, and we render all the HTML client-side using a JS template library: PURE 然后再调用一次数据，然后我们使用JS模板库呈现所有HTML客户端： PURE
Ensure the page is cached and gzipped. 确保页面已缓存并压缩。 There is probably a limit in size to consider. 在大小上可能要考虑一个限制。
We try to stay under 400kb unzipped, and load secondary resources later when needed. 我们尝试将压缩后的文件压缩到400kb以下，并在以后需要时加载辅助资源。
解决方案5
0 2012-08-10 10:32:08
I would recommend you join common bits of functionality into individual javascript module files and load them only in the pages they are being used using RequireJS / head.js or a similar dependency management tool. 我建议您将功能的常用部分加入单个javascript模块文件中，并仅使用RequireJS / head.js或类似的依赖项管理工具将它们加载到正在使用的页面中。
An example where you are using lighbox popups, contact forms, tracking, and image sliders in different parts of the website would be to separate these into 4 modules and load them only where needed. 例如，在网站的不同部分使用lighbox弹出窗口，联系表单，跟踪和图像滑块的示例是将它们分成4个模块，并仅在需要时加载它们。 That way you optimize caching and make sure your site has no unnecessary flab. 这样，您可以优化缓存并确保您的站点没有不必要的flab。
As a general rule its always best to have less files than more, its also important to work on the timing of each JS file, as some are needed BEFORE the page completes loading and some AFTER (ie, when user clicks something) 通常，最好总是拥有少于文件的文件，而减少每个JS文件的时间也很重要，因为在页面完成加载之前需要一些，之后（例如，当用户单击某些内容时），需要一些JS文件
See a lot more tips in the article: 25 Techniques for Javascript Performance Optimization . 请参阅本文中的更多技巧： 25种Javascript性能优化技术 。
Including a section on managing Javascript file dependencies. 包括有关管理Javascript文件依赖性的部分。
Cheers, hope this is useful. 干杯，希望这是有用的。
解决方案6
0 2010-12-21 19:33:40
You can also try a service like http://www.blaze.io . 您也可以尝试使用http://www.blaze.io之类的服务。 It automatically peforms most front end optimization tactics and also couples in a CDN. 它会自动执行大多数前端优化策略，并且还会加入CDN。
There currently in private beta but its worth submitting your website to. 目前有私人Beta版，但值得将您的网站提交到。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.