【性能】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>

巴特西

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

最新文章

热门文章