javascript - 有没有办法覆盖浏览器呈现页面的方式？

Question

我大致知道浏览器是如何解析网站的，以及它是如何完成从我输入stackoverflow.com到浏览器中的页面的所有工作的。

这里的问题是我怎样才能覆盖或操纵它的行为，以便按照我想要的顺序强制执行一组特定的任务。

我的意思是这样的：

1. 仅下载网站首屏部分的 HTML 代码。
2. 下载并解析网站首屏部分的样式表。
3. 首屏渲染
4. 下载首屏图片
5. 下载首屏的JS
6. 在解析 JS 的同时，下载网站的另一部分
7. 重复...

在我的示例中，我只想尽快渲染首屏，然后渲染页面的其余部分。

显然，这是一个非常简化的例子，我询问是否可以做，而且我想知道是否有一些库可以实现这个功能（或类似的东西）。

Answer 1

浏览器应该如何知道您网站的哪个来源仅触及首屏区域？

好吧，你需要照顾好它。明确的。

• 在您网站的初始样式表中，仅包含“首屏”的样式。
• 在您网站的初始 JavaScript 中，仅包含“首屏”行为和动态获取其余内容的行为（例如， jspm允许您这样做）。
• 渲染初始视口后，下载 JavaScript 并插入其余样式/脚本，然后将它们插入到您的 DOM 中。
• 您还可以将您的网站分成块，一旦用户滚动到附近，这些块就会动态加载（例如，请参阅图像/视频的延迟加载、YouTube 的评论部分等）。

当心：什么是“首屏”？您能说出屏幕较小的设备（例如手机甚至智能手表）的优势吗？

大多数时候，是不必要的脚本和媒体扼杀了网站性能。没有理由预先获取这些。

与其过度设计，不如采取更简单的方法（例如延迟加载用户首先需要滚动到的大块数据）。