时间戳

首页 > 解决方案 > 加载没有图像的网站以提高效率

javascript - 加载没有图像的网站以提高效率

问题描述

我有一个 chrome 扩展，当我按下一个按钮时，它会转到一个 url，它会点击按钮并搜索东西。我希望它尽可能快地运行，所以我想转到 url 并且不加载任何图像，这样它可以运行得更快我试过了

$('img').remove();

在网站的控制台中 ( https://www.supremenewyork.com/shop/all )

它确实删除了所有图像，但我想知道是否有更好的方法来执行此操作，因为似乎我必须在访问网站时加载该网站，然后它将删除所有图像。

有没有办法让它进入这个网站，但在加载网站之前以某种方式删除图像以节省时间？

标签： javascriptjqueryhtmlimageperformance

解决方案

一种选择是在 Tampermonkey/Greasemonkey（或像 Stylish 这样的插件中的自定义样式表）中创建一个用户脚本，以确保imgs 总是得到display: none. 例如：

// ==UserScript==
// @name         Hide Images
// @namespace    CertainPerformance
// @version      1
// @match        https://stackoverflow.com/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

document.head.appendChild(document.createElement('style')).textContent = `
img {
  display: none !important
}
`;

安装此用户脚本，打开浏览器的“网络”选项卡，然后导航到 stackoverflow.com 上您以前未访问过的某个位置 - 即您的浏览器以前未加载海报图像的位置。使用此用户脚本，您将看到头像图像请求www.gravatar.com永远不会被发送 - 不需要下载任何不需要的内容。

请注意，

// @run-at       document-start

很重要 - 否则，用户脚本将在初始页面加载后运行，这将使浏览器在脚本运行之前有几毫秒的时间开始下载图像以准备显示它们。

当然，根据需要自定义 - 更改

// @match        https://stackoverflow.com/*

到您要在其上隐藏图像的任何 URL。

也就是说，如果您想在该其他页面上运行自动脚本来收集数据，使用像 with 这样的普通请求可能会更有效fetch，然后将响应文本解析到文档中，然后搜索文档，而不是在浏览器中加载一个全新的页面。

推荐阅读