潜在问题

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个URLshortener服务，如果该页面包含80个链接，那将是6,400次检查。

我尝试使用页面上的一些链接和所有缩短的网址提供程序，并且需要一段时间才能完成所有这些操作。

问题

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

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选项（再次，依赖于浏览器）将是性能和动态添加链接的最佳选择

优化Jquery：如果href包含来自缩短链接的网址

潜在问题

问题

2 个答案: