如何创建 .htaccess 来捕获 html 页面？

Question

我有一个 html 页面，在这个页面内我使用了一个音频播放器，它是用 html、css 和 javascript 创建的，所有文件都是 mp3 ......每次当访问者访问这个页面时，它需要一些时间来加载所有准备播放的文件.. 由于文件又长又大，速度很慢...问题是如果访问者刷新页面或关闭并打开它.. 加载将重新开始！

我想要一些代码或 .htaccess 文件来捕获访问者浏览器中的所有文件，并在他们再次访问它时...它不应该再次加载所有文件。

这是我的页面 https://khamkhor.com/audio/

非常感谢

这是我的 .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>

<IfModule mod_headers.c>
    #Saves the .mp3 for a week
    <FilesMatch "\.(mp3)$">
        Header set Cache-Control "max-age=604800, public"
    </FilesMatch>
</IfModule>

ExpiresActive on 

ExpiresByType image/jpg "access plus 60 days" 
ExpiresByType image/png "access plus 60 days" 
ExpiresByType image/gif "access plus 60 days" 
ExpiresByType image/jpeg "access plus 60 days" 

ExpiresByType text/css "access plus 2 weeks" 
ExpiresByType image/x-icon "access plus 2 weeks" 

ExpiresByType application/pdf "access plus 1 month" 
ExpiresByType audio/x-wav "access plus 1 month" 
ExpiresByType audio/mpeg "access plus 1 month" 
ExpiresByType audio/mp3 "access plus 1 month" 
ExpiresByType video/mpeg "access plus 1 month" 
ExpiresByType video/mp4 "access plus 1 month" 
ExpiresByType video/quicktime "access plus 1 month" 
ExpiresByType video/x-ms-wmv "access plus 1 month" 
ExpiresByType application/x-shockwave-flash "access 1 month" 

ExpiresByType text/javascript "access plus 2 weeks" 
ExpiresByType application/x-javascript "access plus 2 weeks" 
ExpiresByType application/javascript "access plus 2 weeks" 

Answer 1

正如您自己所说，媒体文件很大。缓存媒体内容并不总是最好的解决方案。首先，我建议您启用数据压缩以降低服务器上的带宽要求，因为您似乎没有。这是一个指导如何做到这一点https://varvy.com/pagespeed/enable-compression.html

这是来自使用.gzip 压缩的服务器的响应标头与content-encoding 标头的样子。

如果您确实需要缓存媒体文件，我会使用 mod_headers.c

<IfModule mod_headers.c>
    #Saves the .mp3 for a week
    <FilesMatch "\.(mp3)$">
        Header set Cache-Control "max-age=604800, public"
    </FilesMatch>
</IfModule>

Mod 标头文档：https://httpd.apache.org/docs/current/mod/mod_headers.html