前端路线-其他

前言

• 前端进阶，那就是学，不停的学
• 我自己也想整理归总一下，看过的很多优秀文章（大部分都看过移动端的看的较少，书籍），所以它来了，因为努力所以看的见，文章比较长，注意头发，希望对你们有所帮助
• 划重点，资料多没有意义，重要的要去持续学习

es5/6/7/...

• 【译】理解 Javascript 执行上下文和执行栈 (opens new window)
• JavaScript中的这些骚操作，你都知道吗？ (opens new window)
• JS 高级之手写一个Promise,Generator,async和 await【近 1W字】 (opens new window)
• JS 原生面经从初级到高级【近1.5W字】 (opens new window)
• JS开发必须知道的41个技巧【持续更新】 (opens new window)
• 「中高级前端面试」JavaScript手写代码无敌秘籍 (opens new window)
• JavaScript 工具函数大全（新） (opens new window)
• 这应该是你见过的最全前端下载总结 (opens new window)
• 【建议👍】再来40道this面试题酸爽继续(1.2w字用手整理) (opens new window)
• ES9已经来了 Are you ready? (opens new window)
• 💦【何不三连】做完这48道题彻底弄懂JS继承(1.7w字含辛整理-返璞归真) (opens new window)
• ES6 完全使用手册 (opens new window)
• JavaScript专题系列20篇正式完结！ (opens new window)
• 正则表达式不要背 (opens new window)
• 前端大文件上传 (opens new window)
• 2万字 | 前端基础拾遗90问 (opens new window)
• 9k字 | Promise/async/Generator实现原理解析 (opens new window)
• 🎉喜大普奔，ES2019登场 (opens new window)
• Axios 如何取消重复请求？ (opens new window)
• 这些高阶的函数技术，你掌握了么 (opens new window)
• 你不知道的 Proxy (opens new window)
• JavaScript 那些写出来会被同事揍的骚操作 (opens new window)
• 书到用时方恨少，一大波JS开发工具函数来了 (opens new window)
• 这些一行 JS 实现功能的代码，让你看起来像一个前端专家 (opens new window)
• 【干货】js 数组详细操作方法及解析合集 (opens new window)
• js基础-面试官想知道你有多理解call,apply,bind？[不看后悔系列] (opens new window)
• 最详尽的 JS 原型与原型链终极详解，没有「可能是」。（一） (opens new window)
• JavaScript深入之作用域链 (opens new window)
• 深入理解 JavaScript Event Loop (opens new window)
• 一次弄懂Event Loop（彻底解决此类面试问题） (opens new window)
• 浏览器与Node的事件循环(Event Loop)有何区别? (opens new window)
• 从event loop规范探究javaScript异步及浏览器更新渲染时机 (opens new window)
• JavaScript 函数式编程到底是个啥 (opens new window)
• JavaScript 性能利器 —— Web Worker (opens new window)
• ES6、ES7、ES8特性一锅炖(ES6、ES7、ES8学习指南) (opens new window)
• 1.5万字概括ES6全部特性(已更新ES2020) (opens new window)
• 25个你不得不知道的数组reduce高级用法 (opens new window)
• 当 async/await 遇上 forEach (opens new window)
• BAT前端经典面试问题：史上最最最详细的手写Promise教程 (opens new window)
• 100 行代码实现 Promises/A+ 规范 (opens new window)
• 详解JS原型链与继承 JavaScript (opens new window)

css

• css加载会造成阻塞吗 (opens new window)
• CSS设置居中的方案总结-超全 (opens new window)
• rem布局解析 (opens new window)
• 彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index (opens new window)
• CSS 实现多行文本“展开收起” (opens new window)
• 不可思议，纯 css 都能图片滚动 (opens new window)
• Web开发者需要知道的CSS Tricks (opens new window)
• 十几个CSS高级常见技巧汇总（虚线框、三角形、优惠券卡券、滚动条、多行溢出...） (opens new window)
• 字节跳动最爱考的前端面试题：CSS 基础 (opens new window)
• 一种巧妙的使用 CSS 制作波浪效果的思路 (opens new window)
• 灵活运用CSS开发技巧 (opens new window)
• 45个值得收藏的 CSS 形状 (opens new window)
• 9个很棒的CSS边框技巧 (opens new window)
• 详解 CSS 七种三栏布局技巧 (opens new window)
• 【图片版】GRID，一起来学习CSS网格布局吧！ (opens new window)
• CSS 的预处理程序（Sass、LESS、Stylus 等）分别都有哪些优缺点？ (opens new window)
• 浏览器将rem转成px时有精度误差怎么办？ (opens new window)

ts

• 这些高阶ts内置泛型帮助类型，你用过几个 (opens new window)
• Vue3.0之前你必须知道的TypeScript实战技巧 (opens new window)
• 一份不可多得的 TS 学习指南（1.8W字） (opens new window)
• TypeScript安利指南 (opens new window)
• TS 常见问题整理（60多个，持续更新ing） (opens new window)
• Typescript+Vue大型后台管理系统实战 (opens new window)
• TypeScript 中高级应用与最佳实践 (opens new window)
• 三万字长文）类型即正义：TypeScript 从入门到实践系列，正式完结！ (opens new window)
• TypeScript - 一种思维方式 (opens new window)
• Vue3 跟着尤雨溪学 TypeScript 之 Ref 类型从零实现 (opens new window)
• 让人眼前一亮的 10 大 TS 项目 (opens new window)
• 三千字讲清TypeScript与React的实战技巧 (opens new window)
• 总结TypeScript在项目开发中的应用实践体会 (opens new window)
• TS 常见问题整理（60多个，持续更新ing） (opens new window)
• 可能是你需要的 React + TypeScript 50 条规范和经验 (opens new window)

vue2/3

• Vue3自定义指令-10个常见的实用指令，带详细讲解，快拿去收藏！！！ (opens new window)
• Vue3 究竟好在哪里？（和 React Hook 的详细对比） (opens new window)
• Vue 项目性能优化 — 实践指南（网上最全 / 详细） (opens new window)
• Vue 开发必须知道的 36 个技巧【近1W字】 (opens new window)
• Vue3.0 新特性以及使用经验总结 (opens new window)
• 阮一峰推荐】学习 vue3 源码的利器 (opens new window)
• Vue3 的响应式和以前有什么区别，Proxy 无敌？ (opens new window)
• Vue3.0 前的 TypeScript 最佳入门实践 (opens new window)
• 抄笔记：尤雨溪在Vue3.0 Beta直播里聊到了这些… (opens new window)
• Vue最全知识点，面试必备（基础到进阶，覆盖vue3.0，持续更新整理，欢迎补充讨论 (opens new window)
• 简单通俗的理解Vue3.0中的Proxy (opens new window)
• Vue3 DOM Diff 核心算法解析 (opens new window)
• 深入了解 Vue3 响应式原理 (opens new window)
• Webpack5 基础 & Vue3 项目搭建 (opens new window)
• Vue.js 升级踩坑小记 (opens new window)
• [Vue官方教程笔记]- 尤雨溪手写mini-vue (opens new window)
• Vue 3.0 自定义指令的这些知识你掌握了么？ (opens new window)
• Vue 应用性能优化指南 (opens new window)
• 性能优化之组件懒加载: Vue Lazy Component 介绍 (opens new window)
• VirtualDOM与diff(Vue实现) (opens new window)
• 聊聊 Vue.js 组件间通信 (opens new window)
• Vuex 源码解析 (opens new window)
• 聊聊Vue.js的template编译 (opens new window)
• 在vue项目中 如何定义全局变量 全局函数 (opens new window)
• Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子] (opens new window)
• Vue 组件间通信六种方式（完整版） (opens new window)
• 详解vue的diff算法 (opens new window)
• 面试官: 实现双向绑定Proxy比defineproperty优劣如何? (opens new window)
• 虚拟 DOM 到底是什么？(长文建议收藏) (opens new window)
• 生命周期 (opens new window)

react

• 将 React 应用优化到 60fps (opens new window)
• 如何提高你的 React 应用的性能 (opens new window)
• 如何评价React的新功能Time Slice 和Suspense？ (opens new window)
• 浅入浅出图解domDIff (opens new window)
• 你真的理解setState吗？ (opens new window)
• React 中的高阶组件及其应用场景 (opens new window)
• [译] 如何写出更好的 React 代码？ (opens new window)
• setState 之后发生了什么 —— 浅谈 React 中的 Transaction (opens new window)
• React 同构实践与思考 (opens new window)
• Immutable 详解及 React 中实践 (opens new window)
• 十五分钟读懂React 17 | 🏆 技术专题第六期征文 (opens new window)
• React v17.0 RC版本发布：无新特性（译） (opens new window)
• React Hooks 最佳实践 (opens new window)
• 这可能是最通俗的 React Fiber(时间分片) 打开方式 (opens new window)
• React 开发必须知道的 34 个技巧【近1W字】 (opens new window)
• 精读《useEffect 完全指南》 (opens new window)
• 一起学习造轮子（三）：从零开始写一个React-Redux (opens new window)
• React 中的五种组件形式 (opens new window)
• [实战] 为了学好 React Hooks, 我抄了 Vue Composition API, 真香 (opens new window)
• 1w字 | 从零开始的React服务端渲染 (opens new window)
• React Hooks 性能优化的正确姿势 (opens new window)
• 手把手带你用85行代码实现一个React.js（详细讲解） (opens new window)
• React 源码剖析系列 － 生命周期的管理艺术 (opens new window)
• React Hooks 详解 【近 1W 字】+ 项目实战 (opens new window)
• React SSR 详解【近 1W 字】+ 2个项目实战 (opens new window)
• 分析React.createRef和React.useRef (opens new window)

node

• 一个开箱即用，功能完善的 Express 项目 (opens new window)
• 《大前端进阶 Node.js》系列 P6必备脚手架/CI构建能力 (opens new window)
• 基于nodeJS从0到1实现一个CMS全栈项目（上） (opens new window)
• 浏览器与Node的事件循环(Event Loop)有何区别? (opens new window)
• 零基础实现node+express个性化聊天室 (opens new window)
• 深入理解 Node.js 进程与线程 (opens new window)

浏览器

• Chrome DevTools中的这些骚操作，你都知道吗？ (opens new window)
• 面试官: 你了解前端路由吗? (opens new window)
• 在浏览器中使用 ECMAScript Modules (opens new window)
• 前端开发的你应该知道的浏览器知识 (opens new window)
• (1.6w字)浏览器灵魂之问，请问你能接得住几个？ (opens new window)
• 反直觉！浏览器到底是如何下载资源的 (opens new window)
• 傻傻分不清之 Cookie、Session、Token、JWT (opens new window)

网络

• 设计一个无懈可击的浏览器缓存方案：关于思路，细节，ServiceWorker，以及HTTP/2 (opens new window)
• 关于三次握手与四次挥手面试官想考我们什么 (opens new window)
• 面试带你飞：这是一份全面的 计算机网络基础 总结攻略 (opens new window)
• 前端性能优化总结 (opens new window)
• 前端性能优化 24 条建议（2020） (opens new window)
• （建议精读）HTTP灵魂之问，巩固你的 HTTP 知识体系 (opens new window)
• 17K star 仓库，关于网络相关的前端面试题 90% 都有答案 (opens new window)
• 前端词典】进阶必备的网络基础（上） (opens new window)
• 浅谈 HTTP/2 Server Push (opens new window)
• 怎样把网站升级到http/2 (opens new window)
• 从实践出发理解HTTP2 (opens new window)
• 大部分流量皆已使用新协定QUIC和HTTP/3 (opens new window)
• Google、Facebook等均开始支持的HTTP3到底是个什么鬼？ (opens new window)
• 五千多字，图文并茂详解HTTP报文格式、请求响应头、cookie以及HTTPS加密方式 (opens new window)
• 看图学HTTPS (opens new window)

性能优化

• 移动spa商城优化记（一）---首屏优化篇 (opens new window)
• 前端黑科技：美团网页首帧优化实践 (opens new window)
• 项目不知道如何做性能优化？不妨试一下代码分割 (opens new window)
• 揭秘 Vue.js 九个性能优化技巧 (opens new window)
• 前端性能优化之加载技术 (opens new window)
• 当面试官问你如何进行性能优化时，你该这么回答 (opens new window)
• 还在看那些老掉牙的性能优化文章么？这些最新性能指标了解下 (opens new window)
• 网站性能优化实战——从12.67s到1.06s的故事 (opens new window)
• 聊一聊前端性能优化 (opens new window)
• 工作中如何进行前端性能优化(21种优化+7种定位方式) (opens new window)
• CSS性能优化的8个技巧 (opens new window)
• 重构 - 改善代码的各方面问题 (opens new window)
• 前端优秀实践不完全指南 (opens new window)
• 滚动视差？CSS 不在话下 (opens new window)

工程化/架构/设计模式

• 不好意思！耽误你的十分钟，让MVVM原理还给你 (opens new window)
• 让虚拟DOM和DOM-diff不再成为你的绊脚石 (opens new window)
• 发布订阅模式，在工作中它的能量超乎你的想象 (opens new window)
• webpack4-用之初体验，一起敲它十一遍 (opens new window)
• Webpack5 上手测评 (opens new window)
• Webpack5 新特性业务落地实战 (opens new window)
• webpack教程：如何从头开始设置 webpack 5 (opens new window)
• Webpack 5模块联邦引发微前端的革命？ (opens new window)
• 玩转 webpack，使你的打包速度提升 90% (opens new window)
• 万字长文：关于sourcemap，这篇文章就够了 (opens new window)
• 做了一夜动画，让大家十分钟搞懂Webpack (opens new window)
• 「吐血整理」再来一打Webpack面试题 (opens new window)
• webpack4 的30个步骤打造优化到极致的 react 开发环境，如约而至 (opens new window)
• webpack详解 (opens new window)
• webpack打包原理 ? 看完这篇你就懂了 ! (opens new window)
• 备战2021：vite工程化实践，建议收藏 (opens new window)
• Vite 原理浅析 (opens new window)
• 面向未来的前端构建工具-vite (opens new window)
• 一个基于vue3+vite+ts的完整项目 (opens new window)
• 尤雨溪 3 天 10 更的 Vite 究竟有什么魔力？ (opens new window)
• Rollup打包工具的使用（超详细，超基础，附代码截图超简单） (opens new window)
• 一文带你快速上手Rollup (opens new window)
• 携手Rollup与TS造轮子 (opens new window)
• 无用代码去哪了？项目减重之 rollup 的 Tree-shaking (opens new window)
• 从0到1教你搭建前端团队的组件系统（高级进阶必备） (opens new window)
• Rollup 之插件机制浅析 (opens new window)
• 大型项目前端架构浅谈（8000字原创） (opens new window)
• 以前端架构师身份，从零开始搞事搞事搞事 (opens new window)
• 分享阿里前端p7架构图谱 (opens new window)
• 有赞权限系统 (opens new window)
• 每日优鲜供应链前端团队微前端改造 (opens new window)
• 分享狼叔关于《大前端工程化的实践与思考》 (opens new window)
• 深入浅出 Babel 上篇：架构和原理 + 实战 (opens new window)
• 在前端业务场景下的设计模式 (opens new window)
• 工作效率upup，一起来实现一个Node.js-CLI开发工具吧 (opens new window)
• 关于现代包管理器的深度思考——为什么现在我更推荐 pnpm 而不是 npm/yarn? (opens new window)
• npm 删除依赖包_npm 依赖管理中被忽略的那些细节 (opens new window)
• 绝了，没想到一个 source map 居然涉及到那么多知识盲区 (opens new window)
• 前端模块化详解(完整版) (opens new window)
• 三年 Git 使用心得 & 常见问题整 (opens new window)
• 体积减少80%！释放webpack tree-shaking的真正潜力 (opens new window)

flutter/rn/Electron

• 分享这半年的 Electron 应用开发和优化经验 (opens new window)
• Flutter 开发踩坑记录（干货总结 (opens new window)
• Flutter 面试知识点集锦 (opens new window)
• Flutter完整开发实战详解(一、Dart语言和Flutter基础) | 掘金技术征文 (opens new window)
• 国内大厂在移动端跨平台的框架接入分析 (opens new window)
• React Native 性能优化指南【全网最全，值得收藏】 (opens new window)
• 🎯【深入解析】跨端框架的核心技术到底是什么？ (opens new window)
• Flutter VS React Native VS Native，谁才是性能之王 (opens new window)
• React Native App应用架构设计 (opens new window)
• React Native 原理与实践 (opens new window)
• React Native学习资源汇总 (opens new window)
• 云音乐 React Native 优化实践之拆包与预热 (opens new window)
• 为什么国内的uniapp一直没人讨论呢？ (opens new window)
• React Native 持续部署实践— push 代码构建出新版的 Growth (opens new window)
• 如何利用 Electron 开发一个桌面 APP (opens new window)
• 想要试试Electron ，不如看看这篇爬坑总结 (opens new window)
• 用 Electron 和 React 撸了个功能超全 + 颜值极高的音乐客户端 (opens new window)
• Android 性能优化最佳实践 (opens new window)
• Android Webview H5 秒开方案实现 (opens new window)
• 近两万字小程序攻略发布了 (opens new window)
• Flutter 手势原理 (opens new window)
• Electron桌面端所见即所得-Electron练习生 (opens new window)
• 写给前端工程师的Flutter教程 (opens new window)
• 移动混合开发中的 JSBridge (opens new window)

面试经验

• 必须要会的 50 个 React 面试题 (opens new window)
• 30 道 Vue 面试题，内含详细讲解（涵盖入门到精通，自测 Vue 掌握程度） (opens new window)
• 2020最新：100道有答案的前端面试题（上） (opens new window)
• 世界顶级公司的前端面试都问些什么 (opens new window)
• 前端面试考点多？看这些文章就够了（2019年6月更新版） (opens new window)
• 面试官(6): 写过『通用前端组件』吗? (opens new window)
• 【1 月最新】前端 100 问：能搞懂 80% 的请把简历给我 (opens new window)
• 霖呆呆的中大厂面试记录及2年前端薪资对比(附赠学习方法) (opens new window)
• 阿里前端攻城狮们写了一份前端面试题答案，请查收 (opens new window)
• 前端，社招，面淘宝，指南 (opens new window)
• 聊聊前端面试 (opens new window)
• 最全的手写JS面试题 (opens new window)
• 最全的 Vue 面试题+详解答案 (opens new window)
• 10种跨域解决方案（附终极大招） (opens new window)
• 字节跳动最爱考的前端面试题：JavaScript 基础 (opens new window)
• 跳槽人速来，面经&资源分享 (opens new window)
• 字节跳动今日头条前端面经（4轮技术面+hr面） (opens new window)
• 看完跳槽少说涨 5 K，前端面试从准备到谈薪完全指南（近万字精华） (opens new window)
• 四月前端知识集锦（每月不可错过的文章集锦） (opens new window)
• 几道高级前端面试题解析 (opens new window)
• 前端笔试题面试题记录（上） (opens new window)

安全

• 前端安全系列（一）：如何防止XSS攻击？ (opens new window)
• 前端安全系列之二：如何防止CSRF攻击？ (opens new window)
• 8大前端安全问题（上） (opens new window)
• 《大前端进阶 安全》系列 HTTPS详解（通俗易懂） (opens new window)
• 前端安全问题汇总（实战） (opens new window)
• 当我们在谈论前端加密时，我们在谈些什么 (opens new window)
• 15 张精美动图全面讲解 CORS (opens new window)
• 【面试篇】寒冬求职之你必须要懂的Web安全 (opens new window)

开源项目

• 《吐血整理》系列 大厂前端组件库工具集合（PC端、移动端、JS、CSS等） (opens new window)
• 这些神仙代码库值得每一个前端开发者收藏 (opens new window)
• 9个项目助你在2020年成为前端大神！ (opens new window)
• 提高前端开发者效率的11个必备的网站 (opens new window)
• 这些开源项目，让你轻松应对十大工作场景 (opens new window)
• 前端进阶必备，github 优质资源整理分享！ (opens new window)

部署/监控

• 谁说前端不需要懂-Nginx反向代理与负载均衡 (opens new window)
• 【你应该了解的】详尽&全面的前端部署（从零起步，前端上线不用愁） (opens new window)
• 前端工程师不可不知的Nginx知识 (opens new window)
• 去大厂，你就应该了解前端监控和埋点! (opens new window)
• 前端一键自动部署工具🛠 (opens new window)
• 浅谈前端线上部署与运维 (opens new window)
• Docker+Nginx+Jenkins实现前端自动化部署 (opens new window)
• 一步一步搭建前端监控系统：如何记录用户行为？ (opens new window)
• 要进大厂？前端灰度发布必须要知道 (opens new window)
• 实战笔记：Jenkins打造强大的前端自动化工作流 (opens new window)
• 前端必备 Nginx 配置 (opens new window)
• 前端的Nginx知识梳理 (opens new window)

团队规则

• ESLint里的规则教会我，无规矩 不编程 (opens new window)
• 团队 React 代码规范制定 (opens new window)
• 前端团队代码评审 CheckList 清单 (opens new window)
• 有赞前端质量保障体系 (opens new window)
• 如何保障前端项目的代码质量 (opens new window)
• 在Typescript项目中，如何优雅的使用ESLint和Prettier (opens new window)

算法

• leetcode (opens new window)
• 写给前端的算法进阶指南，我是如何两个月零基础刷200题 (opens new window)
• 前端该如何准备数据结构和算法？ (opens new window)
• 一些提高前端代码健壮性的方法 (opens new window)
• 前端面试遇到的算法题 (opens new window)
• 字节跳动最爱考的 64 道算法题（JS版） (opens new window)

杂谈

• 精读《为什么专家不再关心技术细节》 (opens new window)
• 关于前端学习路线的一些建议（内含经典自测题） (opens new window)
• 还在迷茫于前端如何入门和进阶？万字指南让你不再迷茫！ (opens new window)
• 我如何零基础转行成为一个自信的前端 (opens new window)
• 技术栈：小菜前端的技术栈是如何规划和演进的 (opens new window)
• 今天聊：2~4 年前端走出离职困境与舒适区 (opens new window)
• 关于裸辞，关于前端面试 (opens new window)
• 你累死累活做业务，绩效还不怎么样，我只能帮你到这了…… (opens new window)
• 致2021届前端同学的一封信|砥砺前行，未来可期！ (opens new window)
• 解密初、中、高级程序员的进化之路（前端） (opens new window)
• 你必须『收藏』的Github技巧 (opens new window)
• 一个草根前端人的焦虑 (opens new window)
• 从破解某设计网站谈前端水印(详细教程) (opens new window)
• 看看这些被同事喷的JS代码风格你写过多少 (opens new window)
• Web 前端修仙指南：从小白到全栈 (opens new window)
• 如何成为公司独当一面的工程师 (opens new window)
• 神三元在抖音架构组的八个月，他经历了什么？ (opens new window)
• 聊一聊加班严重时要如何自我提升 (opens new window)

书籍推荐

css

• css世界
• css揭秘
• 深入解析CSS

js

• 红宝书系列
• 你不知道的js上中下
• js重难点实例精讲
• 深入理解es6
• js编程思想：从es5到es9
• js忍者秘籍（第二版）
• js编程精解（原书第二版）
• jsDOM编程艺术（第二版）
• js框架设计

ts

• 官方文档
• 深入理解ts
• TypeScript实战指南

框架

• vue

  • vue.js快跑
  • vue.js前端开发技术

• react

  • 深入理解react-Router
  • 深入浅出React和Redux
  • React+Redux前端开发实战
  • react进阶之路

工程化/架构

• 前端函数式演进
• Web性能实战
• 前端架构：从入门到微前端
• 大型网站技术架构
• webpack实战：入门与调优
• web前端测试与集成

node

• node10实战
• node权威指南
• Koa与Node.js开发实战

数据结构与算法

• js数据结构与算法
• 剑指offer
• 算法图解
• 大话数据结构

网络

• 图解HTTP
• 图解TCP,UDP
• HTTP/2 in Action中文版

可视化

• SVG动画
• 快学熟用D3

设计模式

• js设计模式与实战开发实践

面向未来

• PWA实战
• 深入浅出Serverless

混合APP

• Flutter 技术入门与实战

安全

• 白帽子讲web安全（纪念版）
• XSS跨站脚本攻击刨析与防御
• Web前端贺客技术揭秘

非技术书

• 如何阅读一本书
• 高效能人士的七个习惯
• 少有人走的路
• 如何高效学习：一年完成麻省理工4年课程
• 早起魔法
• 深度思考
• 时间思维
• 意志力
• 沉思录
• .......

结语

• 资源非常多，要能学完，不想进步都难，但是比较困难，愿大家涨薪涨薪再涨薪！
• 这个月底会早上6点起床直播学习，干完这些题；欢迎加入群聊6点起床俱乐部 (opens new window),一起努力学习！