一个离奇的白屏 Bug

@CSS魔法

2015. 06. 25.

（30 分钟）

每次只端一个 Bug 上来

上菜

（生产环境真实代码）

HTML

有啥问题？

没啥大问题……

光看 HTML 是无法判断的

但是，

CSS

看实际效果

预期效果（页面完全加载后）

实际效果（页面加载过程中）

（截图环境： Firefox 38）

两个点

“白屏”

长时间白屏

提问：什么情况下会产生页面白屏？

但这里的白屏并不是常规原因导致的

此时页面已就绪（参考页头、反馈浮窗）

为什么说它是个 Bug？

  • 页面呈现不是由页面核心资源（HTML、CSS、JS——常规白屏因素）的加载决定
  • 而是……

页面主体已就绪

但用户只能看到白屏

最大的悲剧莫过于：

前端性能重要指标：首屏可交互时间

为什么？

在现代浏览器中

图片的加载优先级很低

真相一

（可能会等到页面中所有 CSS、JS 加载执行完之后。）

浏览器在渲染 <img> 节点时

往往会生成图片占位符

真相二

（因为图片何时加载还不确定，显然浏览器不会卡在这里。）

“图片占位符” 能看得见吗？

IE 设置界面

勾选之后的显示效果

“图片占位符” 的行为

  • 当图片还未加载时，占位符负责占位
  • 当图片开始加载时，图片填入占位符
  • 图片占位符有默认宽高
  • 图片占位符的宽高表现行为与图片基本一致

“图片占位符” 的默认宽高

var $img = $('<img src="http://my-cdn.net/img/logo.png">')
    .css({
        position: 'fixed',
        top: 0
    })
    .appendTo(document.body)

alert(
    'w: ' + $img.width() + '\n' +
    'h: ' + $img.height()
)

鬼知道？

写代码测试啊！

IE8

Firefox

Chrome

图片的宽高表现行为

  • 未被指定宽高时，使用默认宽高显示
  • 被指定宽高时，显示为指定宽高
  • 当只指定宽度时，显示为指定宽度，长度根据默认宽高比进行缩放
  • 当只指定高度时，行为类似上一条

（图片占位符的宽高行为与之类似）

如何指定图片宽高？

  • <img> 元素自身的 width 和 height 属性
  • 它获得的 width 和 height 样式属性

差不多可以揭开真相了

<div class="top-banner">
    <a href="/a/love?src=web-home-banner" target="_blank">
        <img src="http://file.baixing.net/201506/xxx.jpg">
    </a>
</div>

HTML

CSS

.top-banner img {
    display: block;
    width: 1200px;
}

先回顾代码

再回顾实际效果

为什么说它是个 Bug？

  • 页面呈现不是由页面核心资源（HTML、CSS、JS——常规白屏因素）的加载决定
  • 而是……
  • 由外围资源（一张图片）的加载决定。

拓展：其它可能影响图片加载的因素

  • 网络质量（废话）
  • 浏览器连接数限制
  • 域名解析耗时

拓展：其它影响图片显示的因素

  • 替换文本
  • 图片的数据排列方式（渐进、隔行等）
  • ……

结论一

前端 ≠ HTML ＋ CSS ＋ JS

浏览器、HTTP、多媒体……

结论二

  • 你关注结果
  • 用户关注过程

前端工程师必须关注过程。

Q & A

Thank You!

Made with Slides.com