NetNews論壇

標題: 早期突破之一是弄清楚如 [打印本頁]

作者: suraiyaislamsum 時間: 2024-1-23 18:39
標題: 早期突破之一是弄清楚如
何拆分网站的元素。您可以在下面的草图中看到网站通常如何工作：您有一个很长的页面，从概念上讲，浏览器的视口在页面上上下移动（即后者在前者上移动）。在下一个草图中，页面本身是一个巨大的空 GIF，您可以上下滚动；但网站会检测您每次滚动的时间，计算您的位置，然后将其转换为您应该所在的框架。窗口的高度也会根据浏览器视口的大小而变化，因为如果页面很大而视口很小，那么滚动条就会很小；Shift 希望保持滚动条的大小一致，而不管浏览器的大小如何。正如 Jeff 指出的那样，“虽然不准确，但目标是单击鼠标滚轮即可生成一帧”：标签层和 UI 层只是 HTML 和 CSS，但背景要么是我们绘制的 HTML5 画布，要么是 Flash。Flash 中的帧移动和背景变化。

之间大约有 20 毫秒的延迟，因此画布版本成为支持它的浏览器使用的主要方法。标签不会按传统意义上滚动，但对于每个帧，它们都会根据帧分配特定的 x 和 y 坐标。这允许标签“粘合”到背景元素（树、山顶等），并且如果调整浏览器窗口的大小，将动 购买电话号码列表 态重新计算这些坐标。为了创建这种效果，团队使用 Adobe After Effects 对每个标签设置关键帧并输出坐标。Jeff 构建了一个 PHP 脚本，团队可以将 After Effects 关键帧数据复制并粘贴到其中，然后该脚本将生成网站可以使用的 JavaScript。然后 Jeff 调整了 JavaScript 中的标签，以确保它们按预期滚动。精灵表为了创造页面加载速度很快的错觉，杰夫想出了使用精灵表的想法。正如他所说，“精灵表是一项突破，使我们能够在页面加载后快速。

使网站可用”。（背景图像的）第一帧为 90 KB。因此，加上第一个低分辨率精灵表（30 KB），这些图像最初仅重 130 KB。一旦页面加载了所有内容，它就会加载一个更高分辨率的精灵表，然后再加载另一个，然后一张一张地加载全分辨率图像。它不是按顺序加载这些大图像，而是根据文档中的滚动位置加载它们。您可以通过打开 Webkit 检查器并在页面开始渲染后观察“网络”活动来检查精灵表是否在全分辨率图像之前加载。使用内联 JavaScript 我问 Shift 的团队，为什么文档的头部有这么多内联 JavaScript。最佳实践建议将其移至单独的文件中。然而，这里还发生了更多的事情。 Shift 的解决方案架构师 Glenn Wright 在过去六年里一直致力于该网站的工作。他解释说：内联 JavaScript 用于定。

歡迎光臨 NetNews論壇 (http://www.5320.7788.tw/)