communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > 记一次页面优化及使用缓存机制_html/css_WEB-ITnose

记一次页面优化及使用缓存机制_html/css_WEB-ITnose

WBOY
Libérer： 2016-06-24 11:45:36
original
1210 Les gens l'ont consulté

一、使用html5的缓存机制

1.先上规则代码：m.manifest

CACHE MANIFEST# 2015-04-24 14:20#直接缓存的文件CACHE:/templates/specialty/css/style.css/templates/specialty/js/jquery.js/templates/specialty/js/index.js/templates/specialty/js/custom.js/templates/specialty/js/97zzw.jsNETWORK:*
Copier après la connexion

CACHE: 需要缓存的文件

NETWORK: 需要从网络加载的文件

当然还有其他参数，但我只测试这些；注意：时常变化的就不要缓存了，如果已缓存可以通过修改manifest文件，让浏览器重新创建缓存。

2.在中添加规则文件

<!DOCTYPE html><html manifest="m.manifest"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="viewport" content="width=device-width, initial-scale=1.0">
Copier après la connexion

3.manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。

如果使用的是Apache，可在 .htaccess 中添加：

AddType text/cache-manifest manifest

以上3步完成，这时就可以测试了

chrome下：

缓存成功！继续测试????>

状态码304，使用缓存。

Firefox下：

总结：定义规则时注意要缓存那些不是时时更新的数据，不要漏写NETWORK规则；速度还是有非常明显的提升的。

二、使用css sprite，减少http请求。

三、压缩js代码，只引用当前页面需要的js。

四、使用异步加载图片及内容。

五、开启服务器gzip压缩。

六、压缩css。

七、压缩html代码

经过以上的优化，再次使用百度站长检测，分数有很大的提升。

以上是现阶段的优化，往后在优化下php函数。

Étiquettes associées：
记一次页面优化及使用缓存机制
source：php.cn
Article précédent：多说自定义CSS动感头像和多说评论显示User Agent的那些小事_html/css_WEB-ITnose Article suivant：在input 中按回车如何把焦点定位到linkbutton上？_html/css_WEB-ITnose
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2226
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2372
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1980
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1869
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1939
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal