优化 Jquery:如果 href 包含来自缩短链接的 url

Question

当我想突出显示页面中的所有缩短链接时，我试图避免潜在的问题。目前我有这个代码：

$('a').each(function() {
var urlHref = $(this).attr('href');
var shortenedLinks = ["bit.ly", "amzn.to","goo.gl","t.co","lnkd.in"];
for (var item in shortenedLinks) {
if (urlHref.includes(shortenedLinks[item])) {
console.log('yes');
} else {
console.log('no');
}
}
});

这工作正常，因为控制台中的结果是：

是的

(4( 否

潜在的问题

目前，对于每个链接，它都会通过数组运行并比较URL的一部分。这对于少量 URL 来说很好，但是我有大约 80 个 URL 缩短器服务，如果页面包含 80 个链接，那将是 6,400 次检查怎么办。

我尝试了页面上的一些链接和所有缩短的 url 提供程序，花了一段时间才将它们全部浏览。

问题

有没有办法加快这个过程，这样我就可以检查数组和部分 url 而不循环？

Answer 1

首先进行一些小调整，休息是节省资源

// define the array more global, otherwise you set the array every call.
var shortenedLinks = ["bit.ly", "amzn.to","goo.gl","t.co","lnkd.in"];
$('a').each(function() {
// use native JS where you can
var urlHref = this.href // was: $(this).attr('href');

for (var item in shortenedLinks) {
// use starts with: https://stackoverflow.com/questions/646628/how-to-check-if-a-string-startswith-another-string
if (urlHref.startsWith('http://'+shortenedLinks[item]) || urlHref.startsWith('https://'+shortenedLinks[item])) {
console.log('yes');
break; // we've found a match, stop looping <-- this is the biggest win
} else {
console.log('no');
}
}
});

您可以通过在数组中添加http://部分来进一步改进这一点，这样您就不必执行两次操作。

---

之后，您还可以先检查它是否是内部链接。所有内部链接都不是短网址，因此您可以一次性跳过这些链接，跳过循环的需要：

var shortenedLinks = ["bit.ly", "amzn.to","goo.gl","t.co","lnkd.in"];
function isHrefShorturl(elem){
// <a href="/example"> is an internal link, continue
if( elem.href.substr(0,1)!="/" ){
for (var item in shortenedLinks) {
// use starts with: https://stackoverflow.com/questions/646628/how-to-check-if-a-string-startswith-another-string
if (elem.href.startsWith('http://'+shortenedLinks[item]) || elem.href.startsWith('https://'+shortenedLinks[item])) {
return true; // when we find something, return true
}
}
}
return false; // fallback, return false if no matches
};
$('a').each(function() {
if( isHrefShorturl(this) ){
console.log('yes');
} else {
console.log('no');
}
});

Answer 2

你可以直接获取以字符串开头的href的锚点，就像

$( "a[href^='http://bit.ly']" ).each //do something
$( "a[href^='http://amzn.to']" ).each //do something

但是要检查 80 个域，您必须查询 DOM 80 次，这样您就可以将选择器合并为一个

$( "a[href^='http://bit.ly'],a[href^='http://amzn.to']" ).each //do something

如果，正如你所说，你只是想突出显示这些链接，也许你可以使用相同的选择器，但在css中

a[href^="http://bit.ly"],a[href^='http://amzn.to'] {
background: #ffff00;
}

编辑： 经过一些讨论和测试，如果浏览器支持querySelectorAll，看起来vanilla JavaScript方法在性能方面是最快的。

document.querySelectorAll('a[href^="http://bit.ly"],a[href^="http://amzn.to"],a[href^="http://goo.gl"]').forEach(function(e){
e.style.background='#ffff00';//highlights the link
});

jQuery的属性选择器可能是旧浏览器上较慢的

尽管如此，CSS 选项(再次，取决于浏览器(将是性能和动态添加链接的最佳

选择