Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

传输、内容与流

  HTML + CSS 2.1 如何实现动画效果?听上去简直不可能吧?或者得使用 MARQUEE 之类的奇葩标签来实现。但其实通过 HTTP 流动态输出样式也可以实现动画效果。这里只是给大家介绍下 HTTP 传输流的原理,可别真用这玩意儿去实现动画效果,会呵呵的。
  在使用 HTTP 传输数据时,无论传输类型是固定长度的 Content-Length,还是不固定长度的 Transfer-Encoding: chunked。数据总是一份份地传输到客户端。也就是说,客户端接收到的 HTTP 响应总是流的形式。然而并不是所有流都可以动态加载,首先要考虑 Content-Encoding 是否是压缩类型。如果服务器将数据以 gzip 之类的算法将内容压缩后再传输,那么客户端解析数据的粒度就不再是字节流,而是 gzip 包的流。
  然而即使 HTTP 支持各种流,要是内容类型不支持的话也是一样看不出效果。比如一个类型为 application/javascript 的响应,要是整个内容没有加载完成就无法解析执行,因为 JavaScript 本身不支持流。只有支持流的数据才能真正使用流加载。
  最典型的流加载类型是 image/*,大部分图片格式在加载过程中浏览器都可以部分渲染。比如从上到下渲染,或者开启交错模式的话可以从模糊到清晰渲染。除了这些媒体类型,text/html 文档本身也支持流解析,它可以做到服务器传输了多少就先渲染多少。利用这个特点我们可以干很多事,比如像本文开头所说的,实现一个动画效果。下面是一段演示用的 PHP 代码 ob_end_clean();
header('Content-Type: text/html');
echo '<div style="background:#000;width:16px;height:16px;position:absolute;"></div>';
$max = pi() * 20;
for($i = 0; $i < $max; $i += 0.05) {
  $x = round(sin($i) * 100 + 120, 3);
  $y = round(-cos($i) * 100 + 120, 3);
  // 由于我的 FastCGI 设置了缓冲区,懒得改配置,直接用空格填充
  echo "<style>div{left:{$x}px;top:{$y}px;}</style>" . str_repeat(' ', 1 << 10);
  flush();
  usleep(16 * 1000);
}
  这就是传说中的「无 JS,无 CSS3」的动画实现。这个程序会不断地输出 STYLE 元素来改变文档上某个元素的位置以实现动画效果。
  这个程序只是用于演示流的概念,如果谁真要把它用于项目,请不要说是我教的,谢谢!
网名:
54.162.218.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^