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

WBOY
Lepaskan: 2016-06-24 11:45:36
asal
1190 orang telah melayarinya

一、使用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:*
Salin selepas log masuk

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">
Salin selepas log masuk

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函数。

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan