Web前端最新跨平台应用开发进阶(五十八)：短链基本工作原理与实现方案，前端架构师成长路线

专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

• HTML+CSS
• JavaScript
• 前端框架
• 前端性能优化
• 前端监控
• 模块化+项目构建
• 代码管理
• 信息安全
• 网络协议
• 浏览器
• 算法与数据结构
• 团队管理
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容

以上可以很清晰的看到整个短链跳转的过程。

这里说一下301响应码和302响应码：

• 301 代表永久重定向，也就是第一次重定向以后就会从浏览器缓存中获取重定向地址，下次直接访问；
• 302 代表临时重定向，客户端每次都会重新请求后端获取重定向地址。

四、短链实现步骤

了解短链跳转的基本原理以后，实现短链就很简单了。

1. 部署一个短链域名解析服务（也可以是系统中的一个模块）用来生成短链并存储短链和长链的映射关系。
2. 客户端请求短链域名解析服务，服务拿到短链后取出对应的长链返回给客户端即可。
3. 客户端拿到长链后进行重定向访问。

五、使用哈希算法生成短链

短链格式：固定短链域名+哈希值（在https://eficc.cicconline.com/s/qAE6Uq中，eficc.cicconline.com就是短链域名，qAE6Uq就是哈希值）

固定短链域名就是部署的短链域名解析服务的请求地址，哈希值就是请求参数，也就是长链经过某种hash运算之后算出来的一个唯一的hash字符串，短链域名解析服务拿到这个哈希值找到对应的长链返回。

在对长链做hash运算的时候，因为它仅仅只一个网址而已，所以不用关心反向解密的难度，不需要使用MD5等加密算法，关注点应该放在哈希的运算速率和哈希冲突概率（两个不同的链接算出的hash值如果一样就需要一些其他额外的处理手段），这里哈希算法的的选择可以自己调研一下然后进行选择。

以Google的 MurmurHash算法 为例， MurmurHash算法当前的最新版本是MurmurHash3，提供了32bit和128bit两种长度的hash值。MurmurHash运算出来hash值是无符号的十进制数，为了进一步缩短哈希值的长度，可以将MurmurHash运算出来的结果转为62进制（数字 + 小写字母 + 大写字母）。

解决哈希冲突：如果使用MySQL存储长链和短链的映射关系，可以给短链加上唯一索引，将长链和由长链生成的短链插入到数据库中时，如果失败，就说明短链已经存在，hash冲突了，此时可以在长链地址末尾加上一个预先定义好的字符串，再次算出短链，如果还是冲突就继续拼接再次运算直到不冲突为止，取出长链的时候再把末尾拼接的字符串去掉即可。

5.1 其他方法生成短链

• 使用snowflake算法，然后再转为62进制;
• 使用MySQL全局数据库自增主键，然后再转为62进制（存在单机瓶颈问题）;
• 使用MySQL相同步长自增主键方案;
• 使用UUID;
• 使用redis做全局自增（redis宕机自增数据丢失）;
• 其他自定义算法;

5.2 实现方案

将原链接存数据库做短链映射 h5页面请求原地址再跳转，前端打开时 后端302定向。

六、短链生成工具

使用短链生成工具要使用专用域名，不使用共享域名，原因如下：

共享域名=多人使用同一个域名，当这个域名的其中一个使用者出现了违规行为，其他用这个域名的使用者也将会受到牵连，导致无法再使用这个域名。

独享域名=一个人使用这个域名，只要你自己不出问题，这个域名一般就不会出现问题，使用独享域名能够很好地保证推广者的利益，同时也能对用户进行更好的分析。

6.1 网站工具：ft12

官网

1、功能介绍

• 长链接转换成短链接
• 同时转换成网址二维码
• 免登录7天数据（访问人数、访问设备、访问浏览器）统计

数据统计页面

2、转换效果

速度快；点击即可进入网址，中间无跳转。

3、优点

• 免费
• 转换速度快
• 支持批量转换
• 不用登录，也可以直接使用

4、缺点

• 不支持域名自定义；
• 批量转换仅支持同时转换100条；
• 批量转换时不支持同步转换二维码，单条可以。

6.2 网站工具：缩我短网址

官网

优点

• 支持批量转换；
• 4种域名选择（自定义域名需付费）；

缺点

• 需要登录；
• 生成短链接的同时自动跳转到另一个网站；
• 不支持转换成二维码；
• 没有数据统计报表；

6.3 Sina新浪短网址

新浪短网址支持九种域名转换（不支持自定义域名），不用登录也可以使用，速度也比较快。

官网

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-cxsOpGo3-1715214591434)]