网页加载的思考

浏览器加载一个页面,会先加载 html 文档,在渲染文档的同时加载图片。很多网站的 img 元素是没有 width、height 属性的,我的也没有设置。这样浏览器在渲染文档的时候,不会给图片留出空间,在开始加载图片,知道图片的实际宽高之后,再留出图片的空间。这样就造成在网页加载的过程中,网页的高度会逐渐变高,垂直滚动条会闪烁跳动。

之前我采用了这样的一个解决方案,先设置 body 元素为不可见:

        body
        {
            visibility: hidden;
        }

在 onload 事件里面设置为可见:

$(window).load(function () {
    $("body").css("visibility", "visible");
});

这样推迟图片的显示时间来防止网页在加载的时候高度产生变化,因为 body 元素不可见了,所以网页高度的变化是看不到的,但是 visibility: hidden 的元素会占位,所以垂直滚动条还是会闪烁。

问题是 window.onload 事件会在图片完全加载之后触发,当网页的图片多了,显示速度会明显变慢,网页打开的时候有几秒钟的空白其实就挺令人难受的了。

所以我删除了上面的代码,不用这种做法了。

有趣的是在我把 body 元素设置为不可见的时候,百度快照抓取了我的网页,结果当然是一片空白了……

我保留了这个“百度快照的快照

http://bibaoke.com/snapshot

因为快照不会执行网页的脚本,所以 body 元素不可见。把 body 元素设置为可见后,是这样的:

http://bibaoke.com/snapshot?visibility=visible

百度的快照页面做得相当的粗糙,应该是很多年都没有改进过。直接在原网页的 html 元素外层加了一个 div,以致于原网页的样式可以影响百度加进来的内容。

现在很多网站会用到一种延时加载图片的方法,图片在浏览器的可视区域内的时候,才去加载。这种方法可以加快网页的加载速度,但是要防止网页在加载的时候高度产生变化,有一个前提条件就是要设置 img 元素的 width 和 height。因为在文档加载的时候,就要让浏览器知道需要预留的空间。

几年前我看到前公司的网站也使用了这种延时加载的方法,效果还是很显著的。因为是电商网站,商品的图片尺寸都是固定的,所以 img 的 width 和 height 是比较容易设置的。一些社区、博客类网站就稍微麻烦一点,因为文章的配图大小不一,这样就需要在保存图片的同时,也保存图片的尺寸信息。

我认为只要有时间去追求更好的用户体验,img 的 width 和 height 属性还是要设置的。


广州必简信息科技有限公司 版权所有 粤ICP备15047625号-2