优化javascript加载的最佳实践 [英] Best practice to optimize javascript loading

问题描述

我在线阅读了一些关于优化javascript加载的文章。
我得到的一些关键点是最小化脚本文件（http请求）的数量，缩小并启用服务器上的gzip。目前，我所做的是所有javascript文件都缩小了，gzip也可以简单启用。

I have read a few articles online about optimizing javascript loading. A few key points I got is to minimize the number of script files (http requests), minify and enable gzip on the server. Currently, what is done on my side is that all javascript files are minified, and gzip can be simply enabled as well.

第1部分）

我的问题是我有大约20个javascript文件，有一个common.js具有所有核心功能。除此之外，每个页面都会加载至少一个实现该页面功能的其他文件。

My problem is that I have around 20 javascript files, there is one common.js that has all the core functions. Besides that, every page would load at least one other file that implements the functionality of that page.

解决方案1，将所有脚本合并到一个大脚本文件中，为每个客户端加载一次，这似乎是其他人正在做的事情。我猜YUI或JSMin可以用于压缩，所以我应该手动组合文件？

Solution 1, is to combine all scripts in one big script file, and get loaded once for each client, which seems to be what everyone else is doing. I guess YUI or JSMin can be used for compressing, so I should combine the files manually?

解决方案2，需要时需要延迟加载，我不需要真的知道这是如何工作的，但它似乎是一种方法，但仍然需要更多的http请求。我很想听到这方面的任何意见。

Solution 2, lazy loading when a required function is needed, I don't really know how this works, but it seems to be a way to do it, though still requires more http requests. I would love to hear any inputs for this.

第2部分）

我正在处理的网络应用程序将被部署到许多其他计算机，因为javascripts非常小，制作一个从中央服务器动态加载最新脚本的脚本是一个好习惯，这样每个客户端都将运行最新的脚本吗？

The web application I am working on will be deployed to many other computers, since javascripts are pretty small, is it a good practice to make a script that dynamically load the newest script from a central server, so that every client will run the newest script?

推荐答案

第1部分：就像你说的那样，有两种方法。

Part 1: Like you said, there's two approaches.

• 解决方案1有效，并且有工具可以执行此操作，包括 Google的Closure Compiler 。问题是在大多数情况下，它需要包含您网站上的每个脚本才能正常工作，因此无论您的网页可能使用什么，它都能获得所有内容


• 解决方案2也是有效，但像你说的那样并没有真正阻止多个http请求。但它的好处在于它只在您需要时加载您需要的内容，并且不会在初始页面加载时创建任何阻塞调用。 Head.js是一个被提及的选项，以及Require.js和其他。

• Solution 1 is valid, and there are tools out there to do this, including Google's Closure Compiler. The problem is in most cases it needs every single script on your site to be included in order to work properly, so regardless of what your page might use, it gets everything
• Solution 2 is also valid, but like you said doesn't really prevent the multiple http requests. But it's good in that it only loads what you need, when you need it, and doesn't create any blocking calls on the initial page load. Head.js is an option that was mentioned, as well as Require.js and others.

第2部分：

• 有一些方法可以强制浏览器始终下载最新的javascript文件，尽管这种方式否定了浏览器缓存的好处。一种常见的方法是在javascript URL的末尾添加get变量，即domain.com/index.js?timestamp=_123123123。这类似于jQuery在为其ajax调用关闭缓存时所执行的操作。

这篇关于优化javascript加载的最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！