这是一个创建于 3027 天前的主题，其中的信息可能已经有所发展或是发生改变。
首页有一个 svg 做的 logo ，很次打开网站都是 logo 显示很慢或者显示不出来（这种情况很少），我看了下体积最大 7.3K ，为什么显示的那么慢呢？
 |
1
litpen 2016-02-01 23:25:05 +08:00
svg 在浏览器上跑就会不停的计算大小改变清晰度，对比位图肯定耗性能，这不是大小决定的
|
 |
2
imn1 2016-02-01 23:47:04 +08:00
7K 不小了，还带有 Script ？
最好 SVG 内设一个宽高预置值 |
 |
3
libook 2016-02-01 23:56:48 +08:00
SVG 貌似是像人一样把图一笔一划画出来，性能消耗和图的大小无关，只和图的复杂度有关，如果你的图小但很复杂还是用 png 呗~就算 PC 浏览器上解决了这个问题， Android 上也会有坑，别问我是怎么知道的。。。
|
 |
4
xiaodaigou OP @litpen 有什么好的解决方案吗
|
|
5
xiaodaigou OP @imn1 首页没有设定，副页那个有设定
|
 |
6
abelyao 2016-02-02 01:23:30 +08:00
话说 GitHub 首页的 LOGO 就是 SVG 绘制的，包括页脚的小圆也是，都是瞬间出来的，所以觉得楼上几个答案并不是原因…
|
|
7
xiaodaigou OP @abelyao 你是否晓得如何做到的，这位兄台
|
 |
8
techyan 2016-02-02 02:22:49 +08:00
7.3k 不算小也不算大吧。。有些小图标只有数百字节，中国国旗 600 多字节， Google logo 3KB 。但是大一点的，比如 https://upload.wikimedia.org/wikipedia/commons/7/78/People%27s_Republic_of_China_%28orthographic_projection%29.svg ，再大一点的 600 多 KB （这张图是我从英文翻译的）： https://upload.wikimedia.org/wikipedia/commons/f/f4/%E5%A4%A9%E6%B4%A5%E6%B8%AF%E5%9C%B0%E5%9B%BE%EF%BC%88%E5%90%AB%E7%88%86%E7%82%B8%E4%BD%8D%E7%BD%AE%EF%BC%89.svg
反正我的电脑加载上面这张图就明显需要一段时间了。 再大一点的 1.xMB ， https://upload.wikimedia.org/wikipedia/commons/0/0a/Four_color_world_map.svg 相信大部分电脑加载都需要时间。 所以实际上 7.3K 的 svg 应该不算大。打不开可能跟浏览器有关吧。不是所有的浏览器都能够很好地支持 svg 。如果要优化的话可以参考 MediaWiki ，默认所有的 svg 文件在条目中显示的时候都会转换成 png 格式。 https://zh.wikipedia.org/wiki/File:People%27s_Republic_of_China_(orthographic_projection).svg |
 |
9
kalintw 2016-02-02 03:36:52 +08:00
打开开发者工具，切换到 Network ， 然后访问你的页面，观察 svg logo 那个 HTTP 请求。
看看到底是 HTTP 请求耗时、卡住了， 还是图片已经请求到本地，卡在了渲染显示上。 |
 |
12
XianZaiZhuCe 2016-02-02 09:59:08 +08:00 via iPhone
@techyan 1.xM 这个，手机基本就是秒开…
|
|
13
techyan 2016-02-02 12:11:52 +08:00
|
|
15
xiaodaigou OP @techyan 我怎么也是秒开....
|
|
16
XianZaiZhuCe 2016-02-02 13:35:12 +08:00 via iPhone
@techyan 应该不是电脑问题吧，我这就是 850 元魅族而已
|
 |
17
yuetsh 2016-02-02 13:44:48 +08:00
看看是不是耗内存的问题。我之前就遇到过一个 svg 的问题，一个图占用内存 100M......
|
|
18
xiaodaigou OP @yuetsh 不晓得哈，我还单独让他跑一个 cdn
|
 |
19
Dannytmp 2016-02-02 17:20:38 +08:00 via Android
为什么就不能用 png
|
 |
21
Khlieb 2016-02-02 18:01:42 +08:00 via Android
|
 |
22
dong3580 2016-02-02 19:00:46 +08:00 via Android
感觉，渲染耗 GPU,显卡不行的要卡死，
|
|
23
litpen 2016-02-02 23:08:51 +08:00
@xiaodaigou 如果只是静态的展示用位图就好了， svg 要用在该用的地方，比如任意变形的图形，地图等等
|
|
24
xiaodaigou OP @litpen 网页自动变形，比如手机访问自己就会变，如果 svg 是必须的
|
|
25
litpen 2016-02-03 12:47:55 +08:00
@xiaodaigou 我指的任意变形是涉及到每一个像素的排列，不是图片尺寸大小的变化那么简单
|
 |
26
jsq2627 2016-02-04 02:25:58 +08:00
直接把 svg 内嵌 HTML 里面，可以排除网络因素。
我猜测楼主的问题应该还在网络上，很有可能 Web 服务器没有做好 svg 的 cache-control |
Select Language