花几分钟分析了CSDN各领域榜单，我得到了这样的结果

Posted 余光、

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了花几分钟分析了CSDN各领域榜单，我得到了这样的结果相关的知识，希望对你有一定的参考价值。

我从CSDN排行榜上发现惊人的秘密，快进来看看吧～

本篇文章尽量不使用的晦涩复杂的技术手段，仅仅利用简单的前端知识和相关api，配合浏览器获得我们想要的数据，进行分析
希望本篇文章可以让技术大佬会心一笑，回想自己当年是否也会有类似的的“奇葩”研究呢吧
也许这篇文章会勾起你当初从事技术工作时最纯粹的初衷

一、前言

CSDN是我大学时接触的第一个技术社区，最近它增加了排行榜板块，里面细分了十几个分类，从互动、点赞、评论、收藏、时间纬度计算得到每篇文章的热度，将他们投放到对应的分类，最终汇聚成分类榜单和综合榜单。

社区在大力的鼓励大家进行技术分享和沉淀，以推动整个技术圈的发展。本篇文章也是因为我在浏览排行榜时的一个念头而诞生的，那就是我想从用户的视角：

  • 统计各个榜单的文章标题+作者+所在榜单
  • 将汇总的榜单数据整合，并做出一份新的“综合领域榜单”
  • 统计综合领域榜单，看看有没有财富密码，哈哈

用互联网黑话应该是这样的：

  1. 在细分领域找到抓手
  2. 形成方法论，对外输出
  3. 分析自己的痛点，做精细化运营

在这里插入图片描述

二、开始行动

下面的代码都可以直接运行在浏览器控制台中，且我们尽量从用户的操作出发，避免给整个实现增加难度。

2.1 一条榜单内容我能得到什么

思路：

  1. 选中单条内容
  2. 获取内容内的标题、作者、热度

代码：

// 选中单条内容
const hotRankItem = document.querySelector('.hostitem');
// 获取标题
hotRankItem.querySelector('a.title').innerText;
// 获取作者
hotRankItem.querySelector('a.name').innerText;
// 获取热度
hotRankItem.querySelector('span.num').innerText;

结果：

在这里插入图片描述

2.2 获取一个榜单完整的数据

思路：

  1. 获取内容列表，并转换成数组
  2. 遍历获取所需内容，并返回数组

代码：

function getData() {
    const likeArray = (arr) => Array.prototype.slice.call(arr)
    // 获取列表数组
    const hotRankList = likeArray(document.querySelectorAll('.hostitem'));
    // 处理榜单内所有数据
    const newHotRankList = hotRankList.map((element, index) => {
        const title = element.querySelector('a.title').innerText;
        const name = element.querySelector('a.name').innerText;
        const hot = element.querySelector('span.num').innerText;
        return {title, name, hot}
    })
    return newHotRankList;
}

getData()

结果：

在这里插入图片描述

注意

经常浏览排行榜的小伙伴可能意识到了，出于性能和体验的考虑，只有用户划到页面底部，才会更新排行榜单后续的内容，每次新增25条。所以我们也像一个真正的用户一样，让代码帮我们做实现浏览阅读行为好啦～

2.3 模拟用户滑动获取完整榜单

思路：

  1. 借助window.scrollTo(x, y)可把内容滚动到指定的坐标。
  2. 已知每次加载25条数据，单榜共50条数据，综合榜共100条数据
  3. 利用回调函数来确定处理数据的时机

代码：

function getData() {
    const likeArray = (arr) => Array.prototype.slice.call(arr)
    // 获取列表数组
    const hotRankList = likeArray(document.querySelectorAll('.hostitem'));
    // 处理榜单内所有数据
    const newHotRankList = hotRankList.map((element, index) => {
        const title = element.querySelector('a.title').innerText;
        const name = element.querySelector('a.name').innerText;
        const hot = element.querySelector('span.num').innerText;
        return {title, name, hot}
    })
    return newHotRankList;
}

function getComData(){
    let mainHeight = 0; // 内容高度
    let timer = setInterval(() => {
        let height = document.querySelector('.main').offsetHeight
        if (mainHeight === height) {
            const res = getData();
            console.log(res)
            clearInterval(timer);
        } else {
            mainHeight = height
            window.scrollTo({
                top: 100000,
                behavior: "smooth"
            })
        }
    }, 1000)
}

getComData();

结果：

在这里插入图片描述

2.4 获取所有领域内容榜的数据

之后的所有示例，默认先执行本小节的代码

同样，如果我是用户且我想看过所有的榜单，我的操作应该是这样的

  1. 浏览C/C++榜单，划至底部（阅读完毕）
  2. 点击Java分类，继续步骤1->步骤2
  3. 注意：此时用获取完整列表的方法使用了Promise

在这里插入图片描述

思路：

  1. 循环模拟用户点击
  2. 进入新的榜单，重复2.3小节的操作
  3. 将所有的榜单的结果汇总，并获取榜单名称用于区分
const likeArray = (arr) => Array.prototype.slice.call(arr)
function getData() {
    // 获取列表数组
    const hotRankList = likeArray(document.querySelectorAll('.hostitem'));
    const curBlogRankName = document.querySelector('.blog-rank-right-top li.active').innerText;
    console.log(`正在拉去${curBlogRankName}榜单数据`)
    // 处理榜单内所有数据
    const newHotRankList = hotRankList.map((element, index) => {
        const title = element.querySelector('a.title').innerText;
        const name = element.querySelector('a.name').innerText;
        const hot = element.querySelector('span.num').innerText;
        return {title, name, hot, curBlogRankName}
    })
    return newHotRankList
}

function getComData(){
    let mainHeight = 0; // 内容高度
    return new Promise((resolve, reject)=>{
        let timer = setInterval(() => {
            let height = document.querySelector('.main').offsetHeight
            if (mainHeight === height) {
                const res = getData();
                resolve(res);
                clearInterval(timer);
            } else {
                mainHeight = height;
                window.scrollTo({
                    top: 100000,
                    behavior: "smooth"
                })
            }
        }, 1000)
    })
}


// 获取列表榜单
async function loopNav(curList) {
    const result = {}
    let i = 0;
    const navList = likeArray(document.querySelectorAll('.blog-rank-right-top ul li'));
    for(let i = 0; i < navList.length; i++){
        navList[i].click();
        const res = await getComData();
        result[navList[i].innerText] = res;
    }
    console.log('榜单结果汇总：', result)
    window.rankResult = result; // 将结果挂到window对象上
}

loopNav();

结果：

在这里插入图片描述

2.5 获取单个榜单数据集合

如果大家想要获取某个榜单内容：

例如：在CSDN全站综合热榜页面，打开控制台，执行2.3小节的代码

就可以的得到数组类型的数据。

三、拿到数据开始整活

我们拿到的数据应该下面这样的，按照第一章的思路，还要对其进行处理。

集合：{
    榜单1：[
        {文章1}， {文章1}，
    ],
    榜单1：[
        {文章1}， {文章1}，
    ]
}

3.1 热度最高的前100名单

有人可能会问，会什么不直接看综合热榜，这是因为单榜和热榜更新时间不同，其实任选其一往深研究即可。

思路：

  1. 所有榜单合并
  2. 按热度排序
  3. 截取前100名

代码：

window.rankResult100 = Object.keys(rankResult)
    .reduce((prev, next) => prev.concat(rankResult[next]), [])
    .sort((a, b) => b.hot - a.hot)
    .slice(0, 100)
console.log('热度前100名（每日更新）:', window.rankResult100)

结果：

在这里插入图片描述

emmm 可以看到，此时排在第一的是运维榜单-<程序猿是小贺>大佬的文章。

3.2 统计前100名中出现的领域模块

实现此需求的方式有很多，不要纠结方式～

代码：

window.rankResult100 = Object.keys(rankResult)
    .reduce((prev, next) => prev.concat(rankResult[next]), [])
    .sort((a, b) => b.hot - a.hot)
    .slice(0, 100)
console.log('热度前100名（每日更新）:', window.rankResult100)

// 统计榜单进去前100的数量
window.rankResultGroup = {};
// 获取榜单名称并生成Key
const navList = Array.prototype.slice.call(document.querySelectorAll('.blog-rank-right-top li'))
    .map(item => item.innerText)
    .forEach(item => window.rankResultGroup[item] = 0)
// 统计数量
window.rankResult100.forEach(item => window.rankResultGroup[item.curBlogRankName]++);
console.log('各榜单拥有前100数量:', window.rankResultGroup);

结果：

在这里插入图片描述

3.3 榜单“分析”结论——模块排名占有率高 和 语言使用率存在一定关系

怎么看，都像一句废话

使用的人多：

  • 遇到的问题就多
  • 解决问题的人就多
  • 技术沉淀就多

虽然我不是专业做数据分析的，但在知乎随便翻了一下编程语言热度排行，在TIOBE 公布的 2020年9月的编程语言排行榜，可以看到前三名是 C、Java 和 Python，如图：

在这里插入图片描述

对比我们最后得到的结果：

在这里插入图片描述

嗯~相差不大。

在这里插入图片描述

3.4 小结

截止到此时，我们完成了：

  1. 获取榜单数据
  2. 整合榜单数据
  3. 统计若干排名的文章
  4. 统计单榜选手在综合榜100名内的数量
  5. 简单的分析（虚心接受指教）

而这也让我对 click、dom操作、数组操作等加深了印象，希望读到这里的同学也能有所收获，当然上面的代码一定有可以改进的地方的地方，欢迎各位大佬留言互动哦～

之后还能怎么做？我期待大家也能参与进来，和我和或其他人进行自己领域内的互动，例如：

  1. 生成二维、三维的数据模型；
  2. 分析上榜作者的粉丝数量，进一步得到对自己有用的信息；
  3. 获取榜单文章的发布时间，统计大佬们的发布时间规律
  4. …

也许一条隐密的捷径就在你感兴趣、你正在探索的事情中，加油！

在这里插入图片描述

四、写在最后

本篇文章是技术与生活结合一篇文章，我将它定义为something interesting，也会同步在《余光的前端进阶笔记》中

读到这里的同学不妨做件小事，给我的GitHub仓库点个star吧！Thanks♪(･ω･)ﾉ

关于我

  • 花名：余光
  • WX：j565017805
  • 邮箱：webbj97@163.com

其他沉淀

以上是关于花几分钟分析了CSDN各领域榜单，我得到了这样的结果的主要内容，如果未能解决你的问题，请参考以下文章

炼个BERT别人花几分钟你花了快1天？谷歌：我这是4810亿参数的巨型BERT

5分钟让你在大火的多模态领域权威榜单VQA上超越人类

5分钟教会你用Python采集CSDN的热榜

CSDN精品专栏第17期

CSDN精品专栏第23期

CSDN精品专栏第22期