前端学习

技术路线图

一、JavaScript 基础知识

• 1. 读书笔记：你不知道的 Javascript 上
• 2. 读书笔记：你不知道的 Javascript 中
• 3. new A()和 A()的区别
• 4. Javascript 的变量提升和函数提升
• 5. Javascript 对闭包的理解
• 6. 对 Object.create 和类式继承的理解
• 7. Object.create()和 New 的区别
• 8. Javascript 柯里化和偏函数实现
• 9. Javascript 中 this 绑定详解
• 10. Javascript 中改变 this 指向有几种方式
• 11. Javascript 的 call 和 apply 和 bind 方法
• 12. Javascript 的 bind 的 polyfill 的理解
• 13. Javascript 模块化发展 AMD,CMD,CommonJS,UMD,ES6
• 14. Javascript 寄生式组合继承详解
• 15. Javascript 常见 ployfill
  推荐 👍
• 16. Promise 手写
• 17. 前端 offset,scroll,client 相关属性详解
• 18. 再聊 Cookie CSRF 和 XSS
  推荐 👍
• 19. HTTP1.X 的管线化 h2 的多路复用以及 TCP 对头阻塞
• 20. HTTP2.0 还需要做请求合并吗?用数据证明
  推荐 👍
• 21. TypeScript 常见的高级类型
  推荐 👍

二、JavaScript 进阶及方案

• 1. JavaScript 算法与数据结构 (opens new window)
• 2. Immutable.js 了解一下 (opens new window)
• 3. WebSocket：5 分钟从入门到精通 (opens new window)
• 4. 1px 问题解决方案
• 5. 常用前端跨域方案
• 6. Web 前端页面劫持和反劫持
  推荐 👍
• 7. Http 缓存详解
• 8. 如何动态修改 keyframes
• 9. eslint 如何根据文件不同使用不通过规则
• 10. 前端动画播放方案对比及多帧图片播放动画方案
  推荐 👍
• 11. 一种生成随机地图的方式
  推荐 👍
• 12. 常见的捕获页面错误的方式
• 13. GPT微信登录接入

三、前端深入系列

• 1. 前端工程能力思考
• 2. 企业级微服务方案
• 3. 前端性能优化度量
• 4. 大前端架构

四、前端工程化

• 1. lerna 项目管理
• 2. 一步一步的了解 webpack4 的 splitChunk 插件 (opens new window)
• 3. chunk-hash,hash 和 content-hash 的区别
• 4. webpack-chain 常用配置
• 5. webpack 模块异步加载原理解析
  推荐 👍
• 6. 使用 webpack 的 require.context 按需打包
• 7. babel 用户手册 (opens new window)
• 8. babel 插件开发
• 9. typescript 配置说明
• 10. AST 查看器 (opens new window)
• 11. vscode 插件编写
• 12. webpack 常用的插件及 loader
• 13. CDN访问流程及刷新预热
• 14. webpack4迁移vite2实践：基础+插件 (opens new window)
  推荐 👍
• 15. webpack,gulp,rollup,vite的区别
  • gulp (opens new window)
  • webpack (opens new window)
  • rollup (opens new window)
  • vite (opens new window)

五、前端性能优化

• 1. 代码层面性能优化
  推荐 👍
• 2. 前端性能优化清单
• 3. webpack-优化构建速度
  推荐 👍
• 4. 优化输出质量-压缩文件体积
  推荐 👍
• 5. 优化输出质量-加速网络请求
  推荐 👍
• 6. 优化结果分析
• 7. 前端性能优化度量
• 8. Vue 多入口打包性能优化
• 9. 图片资源懒加载实现原理 (opens new window)

六、好文推荐(其他同学写的)

推荐 👍

• 深入了解Nodejs模块机制 (opens new window)
• require() 源码解读 (opens new window)
• qiankun 2.x 运行时沙箱 源码分析 (opens new window)
• HTML Entry 源码分析 (opens new window)
• 一文搞懂前后端常见登录方案 (opens new window)
• 二十张图片彻底讲明白Webpack设计理念，以看懂为目的 (opens new window)
• webpack tapable 分类及使用 (opens new window)

常用工具/网站

• 1. 各类算法图示 (opens new window)
• 2. 常用开发工具集合
• 3. 将json序列化为代码 (opens new window)
• 4. 网站/APP配色 (opens new window)
• 5. 手绘流程图工具 excalidraw (opens new window)