前言
你是否还在找前端学习图,来看看我整理的这份图吧,前端学习路线图,从入门到进阶,一网打尽!再也不用担心找不到前端学习路线了!
我决定使用象限图来展示前端学习路线图,因为象限图可以更好地展示前端学习路线的广度和深度。那么怎么做这个象限图呢?那当然是使用Trae,看看Trae的象限图效果吧!
向Trae提问

前端学习路线图
象限图分为四部分,分别是:
- 现在·高价值:React + Hooks、TypeScript、工程化(Vite/ESBuild)、性能与稳定性、监控与埋点、数据可视化、可访问性/国际化。理由:对求职即时增益最大,也是大中型前端项目的通用基座。
- 现在·低价值:IE Hack、jQuery 细节、老旧脚手架的深度技能。理由:生态已淡出主流,不建议投入大量时间。
- 未来·高价值:WebGPU、WASM/Rust、边缘渲染/SSR、前端侧 AI、CRDT/实时协作、微前端2.0/模块联邦、PWA。理由:面向前端能力边界和业务形态演进,适合中长期投入。
- 未来·低价值:小众 CSS 魔法、重复性样式搬砖。理由:投入产出比低,适合点到为止。
悬浮上去即可看到每一点的具体内容

Trae关键代码解析
- 高 DPI 适配(一次性设置坐标变换,消除模糊)
arduino
const dpr = Math.max(1, Math.floor
(window.devicePixelRatio || 1));
canvas.width = rect.width * dpr;
canvas.height = rect.height * dpr;
canvas.style.width = rect.width+'px';
canvas.style.height = rect.height
+'px';
ctx.setTransform(dpr,0,0,dpr,0,0); //
HiDPI 一次性缩放
- 归一化坐标到像素映射(统一入口,确保布局与交互一致)
ini
const pad = {l:80, r:60, t:60, b:64};
function map(p){
const w = canvas.clientWidth, h =
canvas.clientHeight;
const x0 = pad.l, y0 = pad.t, cw =
w - pad.l - pad.r, ch = h - pad.t -
pad.b;
return {x: x0 + p.x * cw, y: y0 + p.
y * ch, x0, y0, cw, ch, w, h};
}
- 绘制网格、中线与象限标题(一次 path,减少状态切换)
ini
const {x0,y0,cw,ch} = map({x:0,y:0});
ctx.fillStyle = '#161b3d'; ctx.
fillRect(x0,y0,cw,ch);
ctx.strokeStyle = '#8fa3ff33'; ctx.
lineWidth = 1;
ctx.strokeRect(x0+.5,y0+.5,cw-1,ch-1);
ctx.beginPath();
ctx.moveTo(x0+cw/2+.5, y0); ctx.lineTo
(x0+cw/2+.5, y0+ch);
ctx.moveTo(x0, y0+ch/2+.5); ctx.lineTo
(x0+cw, y0+ch/2+.5);
ctx.stroke();
- 技能点数据与绘制(归一化数据驱动,可随时增删)
scss
const skills = [ {name:'React + Hooks', x:.86, y:. 10, color:'var(--nowHi)'}, {name:'WebGPU', x:.88, y:.74, color:'var(--futureHi)'}, {name:'jQuery 细节', x:.22, y:.10, color:'var(--low)'}, // ...];
for(const p of skills){ const {x,y} =
map(p); drawPoint(x,y,p.color); }
- 悬停命中与气泡提示(简单半径检测,轻量无依赖)
ini
canvas.addEventListener('mousemove',
(e)=>{
const rect = canvas.
getBoundingClientRect();
const mx = e.clientX - rect.left,
my = e.clientY - rect.top;
let found = -1;
for(let i=0;i<skills.length;i++){
const {x0,y0,cw,ch} = map({x:0,
y:0});
const cx = x0 + skills[i].x*cw,
cy = y0 + skills[i].y*ch;
if((mx-cx)*(mx-cx)+(my-cy)*
(my-cy) <= 64){ found=i;
break; } // 命中半径 8
}
if(found>=0){ showTip(mx,my,skills
[found]); } else { hideTip(); }
});
为什么Trae要用 Canvas 而非 DOM/SVG
- 自绘坐标体系,在 HiDPI 下保持锐利;大量点/实时交互时更稳定高效。
- 渲染逻辑集中、无额外布局计算,易于扩展(拖拽、缩放、区域选择都可按统一坐标处理)。
这个象限的路线图,如何定制你的专属路线
- 直接在 skills 数组中增删或移动点(修改 x/y 即可),颜色规范 nowHi/futureHi/low 已预设。
- 可为每个点扩展字段如 "学习资源链接、目标周数、前置技能",在 showTip 中拼接展示。
总结
象限图是极好的可视化工具,但需注意:
- 每个象限的划分标准,需结合个人情况。
- 每个象限的技能点,需结合个人情况。
这次Trae的表现可圈可点,但是也有一些不足的地方,比如:Trae绘制象限图,内容不是适合每个人,需要根据自己的实际情况来定制。
快来试试Trae的象限图,看看你适合哪个象限,然后说出的想法,让Trae定制你的专属路线吧!