记一次页面优化及使用缓存机制_html/css_WEB-ITnose
- WBOY原創
- 2016-06-24 11:45:361193瀏覽
一、使用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:*
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">
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函数。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn