早期突破之一是弄清楚如

suraiyaislamsum

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

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



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