设置图像的实际 HTML 高度和宽度是否会减少加载时间?
我有一个网站,我想提高其性能。我已经解决了所有常见问题,但有两个问题:
1) 假设我有一个 100x100px 的图像,我想显示它。此 加载速度是否比此
?
2) 假设我的域是 www.test.com。同一域上的 HTTP 绝对路径加载速度是否比相对路径慢? 比
?
谢谢 !
I have an website and I want to improve it's performance. I've fixed all common issues but I have two questions:
1) Let's say I have a 100x100px image and I want to show it. Does this <img src=" test.jpg" height=100" width="100" alt="">
load slower than this <img src=" test.jpg" alt="">
?
2) Let's say my domain is www.test.com. Do HTTP absolute paths on the same domain load slower than relative paths ?
Is <img src=" http://www.test.com/test.jpg" alt="">
slower than <img src=" test.jpg" alt="">
?
Thank you !
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(6)
1) 如果您设置了宽度和高度,它肯定不会加载得更快,尽管它在浏览器上看起来会更好,因为当您不指定它们时,浏览器将使用标准尺寸,并且当图像加载后会更改为实际大小,因此您会看到所有内容都在移动(回流)。
2)也不是,反正浏览器决定了绝对路径,所以对图片的请求是一模一样的。
1) It will definitely not load any faster if you set the width and height, although it will look better on the browser because when you don't specify them, the browser will use a standard size and when the image loads it will change to the actual size, so you'll see everything move (reflow).
2) Not at all, the browser determines the absolute path anyway, so the request for the image is exactly the same.
在这两种情况下,答案取决于浏览器的实现。以下是一些猜测:
加载时间不应该由于图像缩放逻辑将被触发,因此可能会产生一些额外的处理时间,但重新计算布局的时间会更少,因为一旦图像加载,它就不会影响它占用的空间。
如果必须重新查询域名,相对 URL 可能会变慢,但在大多数情况下,请求将被管道化,因此您不会看到任何真正的差异。
In both of these cases, the answer depends on the browser implementations. These are some speculations:
The load time shouldn't change significantly. There may be some extra processing time since the image scaling logic would be triggered, but there would be less time in recomputing the layout, since once the image loads, it won't affect how much space it occupies.
The relative URL may be slower in case the domain name has to be requeried, but in most cases, the requests will be pipelined, so you shouldn't see any real differences.
指定尺寸允许浏览器在加载图像之前为图像创建正确大小的空间。这可以避免图像加载时文本的回流。
绝对 URI 比相对 URI 长,因此包含它们的 HTML 文档的下载时间会更长……可以忽略不计。
Specifying the dimensions allows the browser to create a correctly sized space for the image before it has loaded it. This avoids reflows of text when the image does load.
Absolute URIs are longer than relative URIs so make the HTML document containing them take longer to download … by a negligible amount.
给出图像的宽度和高度可以防止布局在图像加载后发生变化,这将节省重绘。这应该会让它更快。
Giving the width and height of an image keeps the layout from changing after the image is loaded, which would save a redraw. That should make it faster.
1)。无论图像属性设置为什么,图像下载都将是相同的。浏览器仍然必须下载相同数量的内容。图像应该根据其使用进行优化
2)。使用相对路径..否则,当图像位于相对目录中时,浏览器将通过网络返回图像
我刚刚进行了一些快速谷歌搜索并找到了此链接:
这里有一些信息
http://www.boogiejack.com/server_paths.html
google“相对与绝对图像路径 SEO ”
1). The images download will be the same no matter what the image attributes are set to.. the browser still has to download the same amount of content.. the image should be optimized to its use
2). Use relative paths.. otherwise the browser travels through the web to get back to the image when it's sitting in a relative directory
I just did some quick googling and found this link:
here's some info
http://www.boogiejack.com/server_paths.html
google "relative vs absolute image paths SEO"
在 1080p 视频流的时代,几个字节可能不会产生太大的影响。缩小 JavaScript、压缩图像等可能会产生更大的效果。
A few bytes probably don't make that much of a difference in the day and age of 1080p video streaming. Minifying JavaScript, compressing images and such probably has a much greater effect.