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

时间:2018-08-21 06:44:17

标签: javascript jquery html image performance

我有一个chrome扩展名,当我按下一个按钮时,它会转到一个URL,在该URL中,它将单击按钮并进行搜索。我希望它尽可能快地运行,所以我想转到url而不加载任何图像,因此它可以更快地运行

$('img').remove();
在网站的控制台中

https://www.supremenewyork.com/shop/all

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

无论如何,它都可以访问该网站,但是在加载网站之前以某种方式删除了这些图像以节省时间?

1 个答案:

答案 0 :(得分:1)

一种选择是在Tampermonkey / Greasemonkey(或类似Fashion的插件中的自定义样式表)中创建用户脚本,以确保img始终获得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

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

当然,可以根据需要进行自定义-更改

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

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

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