提高Javascript加载时间-串联与多个+；隐藏物_Javascript_Performance

提高Javascript加载时间-串联与多个+；隐藏物

javascript performance

提高Javascript加载时间-串联与多个+；隐藏物,javascript,performance,Javascript,Performance,我想知道，对于一个加载了大量javascript（jQuery+jQuery UI+各种其他javascript文件）的页面，以下哪项会带来更好的性能。我已经浏览了YSlow和Google页面速度的大部分内容，但是我对一个特定的细节感到疑惑对我来说，这里的一个关键点是，我正在工作的网站不在公共网络上；这是一个企业对企业的平台，几乎所有的用户都是重复访问者（因此都有数据缓存，YSlow认为这对于大量访问者来说是不可能的）首先，YSlow等工具推荐的标准方法是将其连接、压缩，并在页面末尾加载的单

我想知道，对于一个加载了大量javascript（jQuery+jQuery UI+各种其他javascript文件）的页面，以下哪项会带来更好的性能。我已经浏览了YSlow和Google页面速度的大部分内容，但是我对一个特定的细节感到疑惑

对我来说，这里的一个关键点是，我正在工作的网站不在公共网络上；这是一个企业对企业的平台，几乎所有的用户都是重复访问者（因此都有数据缓存，YSlow认为这对于大量访问者来说是不可能的）

首先，YSlow等工具推荐的标准方法是将其连接、压缩，并在页面末尾加载的单个文件中提供。这种方法听起来相当有效，但我认为这里推理的一个关键部分是提高没有缓存数据的用户的性能

我现在的系统是这样的

所有javascript文件都在页面底部进行压缩和加载
所有javascript文件都有很长的缓存过期日期，因此（对于大多数用户）将在缓存中保留很长一段时间
页面只加载所需的javascript文件，而不是加载一个单一的文件，其中大部分都不是必需的

现在，我的理解是，如果javascript文件的缓存过期日期尚未达到，则会立即使用缓存版本；根本没有向服务器发送HTTP请求。如果这是正确的，我会假设拥有多个标记不会导致任何性能损失，因为我在大多数页面上仍然没有任何额外的请求（从上面回忆起，几乎所有用户都填充了缓存）

除此之外，不加载JS意味着浏览器不必解释或执行它不需要的所有额外代码；作为一个B2B应用程序，不幸的是，我们的大多数用户都被IE6及其缓慢的JS引擎所困扰

另一个好处是，当代码更改时，只需要再次获取受影响的文件，而不是整个文件集（当然，只需要获取一次，所以这不是什么好处）

我还研究了在不缓存JS时使用它来允许并行加载JS

具体问题

如果有许多标记，但所有文件都是从本地缓存加载的，并且总体上加载的javascript较少，那么这是否会比同样从缓存加载但包含站点上任何位置所需的所有javascript而不是适当子集的标记快
有没有其他理由选择其中一个而不是另一个
类似的想法是否适用于CSS？（我目前正在使用一种更加单一的CSS方法）

-博客帖子
-GC的性能
-关于javascript的一些提示

javascript( 'jquery', 'jquery.ui', 'home-page' );

<script type="text/javascript" src="/js/?files=eNptkFsSgjAMRffCP4zlTVmDi4iQkVwibbEUHzju3UYEHMffc5r05gJnEX8IvisHnnHPQN9cMHZeKThzJOVeex7R3AmEDhQLCEZBLHLMLVhgpaXUikRMXCJbhdTjgNcG59UJyWSVPSh_0lqSSp0KN6XNEZSYwAqt_KoBY-lRRvNblBZrYeHQYdAOpHPS-VeoTpteVFwnNGSLX6ss3uwe1fi-mopg8aqt7P0LzIWwz-T_UCycC2sQavrp-QIsrnKh"></script>

$compressed_js_file_path = $_SERVER['DOCUMENT_ROOT'] . '/cache/js/' . md5( implode( '|', $js_files ) ) . '.js';

if( file_exists( $compressed_js_file_path ) ) {
    echo file_get_contents( $compressed_js_file_path );
} else {

if( $fh = @fopen( $compressed_js_file_path, 'w' ) ) {
    fwrite( $fh, $js );
    fclose( $fh );
}

// Echo the compressed Javascript
echo $js;

<html>
<!-- all your HTML content... -->
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<script src="mycode.js"></script>

<html>
<!-- all your HTML content... -->

<script>var startTime = new Date().getTime();</script>

<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<script src="mycode.js"></script>

<script>
var endTime = new Date().getTime();
var totalTime = endTime - startTime; // In milliseconds
new Image().src = "/time_tracker?script_load=" + totalTime;
</script>

// Set up caching on media files for 1 month
<FilesMatch "\.(gif|jpg|jpeg|png|swf|js|css)$">
    ExpiresDefault A2629744
    Header append Cache-Control "public, proxy-revalidate"
    Header append Vary "Accept-Encoding: *"
</FilesMatch>

// compresses all files for faster transfer
LoadModule deflate_module modules/mod_deflate.so
AddOutputFilterByType DEFLATE text/html text/plain text/xml font/opentype font/truetype font/woff
<FilesMatch "\.(js|css|html|htm|php|xml)$">
   SetOutputFilter DEFLATE
</FilesMatch>