【性能】web提升性能的小总结

1. 异步加载js文件，判断文件是否已加载，不重复加载

if (typeof echarts === 'undefined') {
console.log('异步加载echarts');
$.getScript(_relyScripts, function () {
_this.showWhLatencyData();
});
}else {
console.log('已加载echarts');
_this.showWhLatencyData();
}

2. 合并文件

合并css文件及图片；

切割js文件，分清类别：1）初始加载， 2）按需加载

3. 服务器端 ， 配置以apache为例

1）启用gzip 压缩传输文件

开启模块：

LoadModule deflate_module modules/mod_deflate.so

LoadModule headers_module modules/mod_headers.so

备注：deflate模块采用的是哈夫曼编码

服务器配置增加：

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI .(?:pdf|doc|avi|mov|mp3|rm)$ no-gzip dont-vary
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
AddOutputFilterByType DEFLATE application/x-java script
<IfModule mod_headers.c>
Header append Vary User-Agent

<FilesMatch ".(html|htm)$">
Header set Cache-Control "max-age=86400"
</FilesMatch>

<FilesMatch ".(js|css|txt)$">
Header set Cache-Control "max-age=259200"
</FilesMatch>

<FilesMatch ".(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=259200"
</FilesMatch>

<FilesMatch ".(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>

</IfModule>
</IfModule>

2) 加入失效时间，没验证成功

开启模块：

LoadModule expires_module modules/mod_expires.so

服务器配置：

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A600
ExpiresByType image/x-icon "access plus 2 month"
ExpiresByType application/x-javascript "now plus 2 day"
ExpiresByType text/css "now plus 2 day"
ExpiresByType image/gif "access plus 2 month"
ExpiresByType image/png "access plus 2 month"
ExpiresByType image/jpeg "access plus 2 month"
ExpiresByType text/plain "access plus 2 month"
ExpiresByType application/x-shockwave-flash "access plus 2 month"
ExpiresByType video/x-flv "access plus 2 month"
ExpiresByType application/pdf "access plus 2 month"
ExpiresByType text/html  "now plus 1 day"
</IfModule>