Web 开发黑魔法资源手册：90 条前端与工程实践索引

这是一份按主题整理的外部阅读索引，覆盖 JavaScript/TypeScript、前端框架、Node.js、安全、工具、HTML/CSS 与其他语言，共收录 90 条资源。它适合用来发现问题、拓展思路，不是生产环境的操作手册，也不代表每个链接当前仍然可用或其中的做法仍然适合现代项目。

这份清单来自 2022 年 3 月的公开目录快照。阅读旧文章时，请把它当作历史材料：涉及框架 API、浏览器兼容性和性能结论时，回到当前官方文档核对；涉及漏洞利用、反弹 Shell、绕过与远程执行的内容，只能在获授权、隔离的实验环境中学习，不能对真实系统尝试。

JavaScript 与 TypeScript

适合沿着语言语义、类型系统、调试、代理与引擎行为继续阅读。示例代码应先弄清求值顺序、边界条件和兼容性，再决定是否用于业务代码。

• JavaScript奇技淫巧45招
• 使用atob解码utf-8字符
• 调试黑魔法
• JS黑魔法之this, setTimeout/setInterval, arguments
• 为什么等于10？
• setTimeout 的黑魔法
• typescript泛型与类型黑魔法
• 拿Proxy可以做哪些有意思的事儿
• 适配器在JavaScript中的体现
• JAVASCRIPT 的黑魔法 JSFUCK
• JS无形装逼，最为致命
• JavaScript黑魔法jother编码之谜
• V8源码边缘试探-黑魔法指针偏移
• TS 标称类型介绍及社区实现
• 一些js的黑魔法集合
• JavaScript 有什么奇技淫巧？

React、Vue、Angular 与状态管理

本组集中在组件边界、状态更新、事件系统、生命周期和框架高级能力。阅读时注意文章对应的框架版本；旧版实现细节不能直接推导为当前版本行为。

• Redux 的黑魔法
• vue.js有哪些奇技淫巧？
• Vue 动态样式黑魔法（超实用）
• Vue中你不知道但却很实用的黑科技
• React高级玩家指南
• Portal + SyntheticEvent + Iframe
• Deep In React（五）setState中的黑魔法
• react-redux生产环境追踪action,state流的黑魔法
• Angular Query黑魔法
• Vue中你不知道但却很实用的黑科技
• 关于 ReactJS 生命周期以外的性能提升奇技淫巧
• Vue的奇技淫巧
• React高级特性解析
• Redux 的黑魔法
• React Hooks 奇技淫巧 —— 副作用, 闭包 与 Timer
• React 奇技淫巧 - defaultValue 和虚拟 dom diff 算法实现表单重置
• is属性用法 vue_Vue 动态样式黑魔法
• vue3组件高级补充
• Vue3-Composition API--高级篇-

Node.js 与服务端 JavaScript

主题包括密码学 API、服务关闭、性能、调试、校验、多进程和架构边界。生产服务还要结合当前 Node.js LTS、依赖维护状态、威胁模型与压测结果判断。

• nodeJS之crypto模块公钥加密及解密
• 你应该知道的 Next.js 高级技巧 10 点
• 在 NodeJS 中正确关闭浏览器
• 5个提高Node.js应用性能的技巧
• Nodejs在实现中用了哪些奇技淫巧？
• 前后分离的架构以及Node在其中的作用
• Node黑魔法之无痛用上多线程
• Nodejs优化的小小黑科技
• 让你 nodejs 水平暴增的 debugger 技巧
• Nodejs技巧之----Joi数据校验
• nodejs代码执行绕过的一些技巧汇总
• node.js cluster多进程、负载均衡和平滑重启

Web 安全

安全文章用于建立防御视角、理解漏洞成因和历史攻防案例。不要执行不明命令、下载未知载荷或把文章中的 PoC 指向公网目标；优先参考现行标准、厂商公告与可信实验环境。

• 利用Node.js反序列化的漏洞执行远程代码
• 远程控制地址栏
• 渗透测试之反弹shell命令分析
• 【WEB 安全】前端够得到的 Web 安全
• 常见 Web 安全攻防总结
• 前端黑魔法之URL
• Web安全漏洞之SSRF
• 更安全的https && https的问题
• XSS、CSRF与验证码
• 黑魔法：断网离线也能看的页面
• 关于Web安全的三个攻防姿势
• HTTPS及HTTPS中间人攻击

工具、调试与构建

此处收录 Git 排错、多项目管理、移动端调试、构建工具与部署相关资料。工具版本和维护状态变化很快，安装前确认项目仍维护、来源可信，并审查权限与供应链风险。

• Git Merge时“交换文件.MERGE_MSG.swp已经存在”的问题
• gitignore 不起作用的解决办法
• 移动端调试工具-Debuggap
• 量化平分浏览器支持的 HTML5的新特性，一共555每个小点算一个
• Webpack 黑魔法之 CSS Entry
• 前端打包构建工具 Gulp、Rollup、Webpack、Webpack-stream
• whistle--前端调试利器
• AlloyDesigner - 前端开发工具
• Git多项目管理
• Web调试工具Charles
• 一键部署工具

HTML 与 CSS

从 CSS 动画、布局、离线页面、滚动效果和 iframe 交互等角度寻找灵感。视觉技巧需要兼顾减少动态效果偏好、键盘可用性、触屏操作和低端设备性能。

• Dirty Tricks From The Dark Corners Of Front-End
• 断网离线也能看的页面
• CSS技巧：逐帧动画抖动解决方案
• 不可思议的纯 CSS 滚动进度条效果
• css黑魔法之鼠标微交互
• 前端开发中的一些黑魔法Pt2 + css3
• 前端黑魔法之css3以及h5
• css实现气泡框效果
• iframe黑魔法
• CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

Go、PHP、Python 与其他语言

这组提供不同语言和 CTF 语境下的类型转换、函数行为与性能话题入口。跨语言阅读时要区分语言规范、运行时版本与特定题目环境，不要把竞赛技巧当作安全编码建议。

• CTF之PHP黑魔法总结
• php黑魔法-moctf
• python黑魔法
• PHP 弱类型与黑魔法
• php黑魔法
• PHP函数黑魔法小总结
• php黑魔法【CTF中php总结】
• Go语言黑魔法
• Golang 黑魔法之 4 倍性能提升
• Go黑技巧

来源与范围

本页保留原目录中的 90 个条目和各自标题，按主题重新编排；其中重复出现的条目也按原样保留。链接目标可能迁移、失效或更新，页面不镜像其正文，也不为第三方内容背书。若链接失效，可按标题搜索作者或站点的原始发布页，并优先选择作者维护的版本。

原始资源仓库（目录快照提交：daafb0cb318cbaeec8e50f71710d4eb504810d05）：tnfe/awesome-blackmagic