如何在浏览器解析 HTML 之前对其进行预处理 - 阻止资源加载答案

【问题标题】：How to preprocess HTML before it is parsed by the browser - block resorce loading如何在浏览器解析 HTML 之前对其进行预处理 - 阻止资源加载
【发布时间】：2012-11-10 18:13:52
【问题描述】：

我正在寻找一种在浏览器解析 HTML 之前修改 HTML 中的某些文本的方法。更准确地说，我想从 HTML 中删除一些标签，这样浏览器就不会获取图像资源，只有当我准备好时，我才能将这些标签重新插入以加载它们。是否可以通过一些 JS/Jquery 或 CSS 来做到这一点，如果可以，怎么做？

这里的动机是能够阻止页面上某些资源的加载，并根据某些逻辑仅在需要时加载它们。这需要通过添加到页面的某种脚本来完成

【问题讨论】：

我猜没有神奇的方法可以做到这一点，从各种延迟加载插件如何做到这一点来判断，例如appelsiini.net/projects/lazyload要求你改变你的HTML：<img data-original="img/example.jpg" src="a-placeholder.png">

标签： javascript html css

【解决方案1】：

因为您是在 JavaScript 中执行此操作，所以在启动您的 <script> 标记时已经在处理 HTML。

您可以将<script> 标签从<body> 移动到<head>，或将其移动到正文的最开头。但是这里的问题是，您必须等待元素在 DOM 中实际创建后才能使用它们。

您可以使用 setTimeout() 或类似的东西，并不断寻找它们，直到找到它们，但在创建它们和您的脚本找到它们之间仍然会有一点延迟，此时它们可能已经开始加载。

唯一可靠的方法是在标记服务器端到达浏览器之前很久就对其进行处理。

【讨论】：

另外请注意，如果您将 JS 代码放在 HTML 的开头（头部或正文），它将在页面之前加载。如果您的脚本很重，那么它将花费加载时间，而用户视觉上不会发生任何事情。这对用户体验来说是一个坏点。我强烈建议您在服务器端工作...

【解决方案2】：

如果您可以在解析/评估之前将 noscript 标记放在标记中的关键位置，我的回答可能会有用：

Client-Side Dynamic Removal of <script> Tags in <head>

这种方法（对于启用了 javascript 的代理）会延迟整个页面的呈现，或者至少会延迟您需要影响的区域。

基本广义理论

使用noscript 标记来包装您的身体或特定区域，该标记以类或ID 标识。放置一些 javascript 在关闭 noscript 之后直接执行，它会抓取标签并将 html 内容作为字符串读取。此时，您可以随意修改 html 字符串，然后将其重新注入 DOM，替换 noscript 标记。

更具体的实现

如果您事先知道需要推迟哪些资源（例如所有图像），则可以使用noscript 标签包装每个有问题的图像。然后触发一些 JavaScript 来获取所有 noscripts 并重写包含的图像 html 以使用占位符或较低质量的图像版本。同时，您可以设置事件侦听器或超时，以便在适当的时候注入实际图像。

【讨论】：

【解决方案3】：

Lazy Load Plugin for jQuery 可能就是您要找的。它延迟了长网页中图像的加载。

您可以使用任何 jQuery 事件，例如单击或鼠标悬停。您还可以使用自己的自定义事件，例如 foobar。默认是等到用户向下滚动并且图像出现在窗口上。

除了所有之外，还可以延迟加载图像。以下代码等待页面完成加载（不仅是 HTML，还有任何可见图像）。页面完成后五秒自动加载图像。

$(function() {          
    $("img:below-the-fold").lazyload({
        event : "sporty"
    });
});
$(window).bind("load", function() { 
    var timeout = setTimeout(function() {
       $("img.lazy").trigger("sporty");
    }, 5000);
});

检查delayed loading demo。

【讨论】：