如何将gzip Javascript放入网站。

Question

I am newby to speeding up web pages and I was wondering if anyone could tell me how to put a compressed gzip javascript file into my html?

I have compressed the js using YUI Compressor which gave me a gzip file and my current js is located at:

<script type="text/javascript" src="js/jquery.flexslider.js">

Do I just redirect the src to the new gzip file? And if I do that what happens if a browser can't read the file? Any help would be greatly appreciated and thanks in advance!

I have also gzipped the rest of the site by putting the following into the htaccess:

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

(hashtag) compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

(hashtag) Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>

(hashtag) remove browser bugs
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

(hashtag) compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

(hashtag) Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>

(hashtag) remove browser bugs
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent 

Answer 1

Gzip compression happens on the fly, you don't need to change the file paths or src. It happens automatically between your server and the browser. There is no need to worry about browsers that don't support gzip, it's very likely they don't exist anymore , such as Netscape 4.0, Opera 4.0 and IE 4.0.

Your code .htaccess code above should work fine.

---

Update:

I ran a quick test and currently your HTML is successfully being transmitted with gzip, seems like only JS files are not yet compressed. This line in your .htaccess is the culprit <files *.html> , it is only selecting HTML files for gzip compression.

I updated your config, try this one:

<IfModule mod_deflate.c>
    #The following line is enough for .js and .css
    AddOutputFilter DEFLATE js css
    AddOutputFilterByType DEFLATE text/plain text/xml application/xhtml+xml text/css text/javascript application/xml application/rss+xml application/atom_xml application/javascript application/x-javascript application/x-httpd-php application/x-httpd-fastphp text/html

    #The following lines are to avoid bugs with some browsers
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>