学习是让知识经过你的脑子而不是经过你的眼睛。

学习一个新知识，要弄明白这个知识的概念是什么，这个知识解决了什么问题。

前端技术发展

• 前端科普系列-Web：一路前行一路忘川 zhuanlan.zhihu.com/p/91842778
• 前端科普系列-Node.js: 换个角度看世界 zhuanlan.zhihu.com/p/91844181
• 前端科普系列-CommonJS：不是前端却革命了前端 zhuanlan.zhihu.com/p/113009496
• 前端科普系列-Babel：把 ES6 送上天的通天塔 zhuanlan.zhihu.com/p/129089156

javascript

• 悟透JavaScript（理解JS面向对象的好文章-有哲学超经典超喜欢） www.cnblogs.com/zhangshiwen…
• 冴羽的博客（深入学习js的好地方） github.com/mqyqingfeng…
• 如何使用JavaScript实现纯前端读取和导出excel文件 www.cnblogs.com/liuxianan/p…
• JavaScript 中写好条件语句的五个技巧 juejin.im/post/684490…
• JavaScript工具函数大全 juejin.im/post/684490…
• JavaScript运行机制:事件驱动编程详解 zhuanlan.zhihu.com/p/30894022
• JavaScript 标准参考教程（alpha）阮一峰 javascript.ruanyifeng.com 新 wangdoc.com/javascript/
• 函数=》构造函数=》对象=》原型与原型链=》类 juejin.im/post/684490…

程序员思想

• 老码农的技术理想 www.ituring.com.cn/article/177…
• 自我、价值、未来与LuLu UI（张鑫旭大佬的理想）juejin.im/post/684490…
• 哇哦！高级前端技术专家的职业规划长这样儿 juejin.im/post/684490…

git

• 强烈推荐 Learn Git Branching 闯关式交互学习 learngitbranching.js.org/?demo=&loca…
• git - 简明指南 www.runoob.com/manual/git-…
• 解决.gitignore文件忽略规则无效git依然跟踪修改的问题 shiyousan.com/post/636470…
• 这才是真正的Git——Git内部原理揭秘！ zhuanlan.zhihu.com/p/96631135
• Git分支管理策略 www.ruanyifeng.com/blog/2012/0…
• Git Commit message编写指南www.ruanyifeng.com/blog/2016/0…
• Git 约定式提交规范 www.conventionalcommits.org/zh-hans/v1.…
• Gitflow 工作流 www.atlassian.com/git/tutoria…

css

• 如何让长大于宽，宽大于长的图片能正常显示在一个区块内 www.zhangxinxu.com/wordpress/2…
• 居中到底有多少种方法 juejin.im/post/684490…
• 大屏常用的css样式 juejin.im/post/684490…
• 灵活运用CSS开发技巧(各种场景) juejin.im/post/684490…
• css命名规则-BEM getbem.com/naming/

vue

• Vue封装Axios请求和拦截器及封装API接口统一管理 www.wenyuanblog.com/blogs/vue-a…
• 重读vue2.0风格指南，我整理了这些关键规则 juejin.im/post/684490…

react

• umi学习使用 www.yuque.com/umijs/umi/h…
• umi+dva实践指南 hksite.cn/%E5%89%8D%E…
• 关于Vue和React的一些对比及个人思考 juejin.im/post/684490…
• React和Vue特性和书写差异对比 ecfexorg.github.io/difference-…
• React读取Excel——js-xlsx 插件的使用 www.cnblogs.com/wx1993/p/97…
• React Hooks 异步操作问题 juejin.im/post/684490…
• 5个技巧助你编写更好的React代码 juejin.im/post/684490…
• React 16.6 懒加载(与预加载)组件 juejin.im/post/684490…

preact

• Preact原理分析 zhuanlan.zhihu.com/p/98420077
• preact源码解析，从preact中理解react原理 zhuanlan.zhihu.com/p/100076938
• 用200行代码实现一个超小的react zhuanlan.zhihu.com/p/408340406

React Native

• 分享 50 个完整的 React Native 项目 juejin.im/post/684490…
• React Native 性能优化之可取消的异步操作 github.com/crazycodebo…

手机端

• 移动端双指缩放图片JS事件的实践心得 www.zhangxinxu.com/wordpress/2…

HTM

• htm是纯JavaScript中类似JSX的语法-无需编译器。 github.com/developit/h…

taro

• 使用 Taro 开发微信小程序的实践 + 踩坑合集 songkeys.github.io/posts/taro-…

node

• nodejs入门 juejin.im/post/684490…

flatBuffer协议

• flatBuffer在前端的实际应用 juejin.im/post/684490…

正则

• 正则 单词全字匹配查找 reg 边界查找 精确匹配 只匹配字符 不含连续的字符 www.cnblogs.com/xe2011/p/12…

图形学（THREE）

• OpenGL学习 learnopengl-cn.github.io/
• Three.js学习 www.yanhuangxueyuan.com/Three.js/
• Three.js-start sogrey.top/Three.js-st…
• 如何选择 WebGL 框架和引擎 zhuanlan.zhihu.com/p/162878354
• Fabric.js中文教程 github.com/Rookie-Bird…
• THREE射线拾取、缓冲区拾取原理 juejin.cn/post/698801…

webGL

• webGL1 webglfundamentals.org/webgl/lesso…
• webGL2 webgl2fundamentals.org/webgl/lesso…
• OSG.js cedricpinson.github.io/osgjs-websi…
• Unity中使用ComputeShader做视锥剔除（View Frustum Culling）zhuanlan.zhihu.com/p/376801370
• 向量运算与应用 zhuanlan.zhihu.com/p/362035810

webGPU

• WebGPU Samples github.com/austinEng/w…
• WebGPU 目前的进展

GIS相关网站

• Drawsee从底层自研，专注性能和渲染效果 www.drawsee.com/index.aspx
• gpuweb github.com/gpuweb

优化

• WebP图片格式给图片优化提供了另一种可能 aotu.io/notes/2016/…

chrome

• 前端效能提升之不可忽略的 Chrome 插件 juejin.im/post/684490…
• 极简插件网址 chrome.zzzmh.cn/index#ext
• Chrome开发工具指南 www.w3cschool.cn/chromedevto…

浏览器

• 浏览器的工作原理：新式网络浏览器幕后揭秘 www.html5rocks.com/zh/tutorial…
• 理解浏览器跳转到前端框架的路由实现 juejin.im/post/684490…
• JavaScript运行机制:事件驱动编程详解 zhuanlan.zhihu.com/p/30894022
• 如何监听用户点击浏览器后退按钮 github.com/luokuning/b…
• 深入理解浏览器原理 zhuanlan.zhihu.com/p/96986818
• 详细判断浏览器运行环境 juejin.im/post/684490…

前端webApp离线

• HTML5-离线缓存（Application Cache） mp.weixin.qq.com/s/Q-Z8kYWSU…
• H5 离线缓存及 Nginx 服务器配置 blog.csdn.net/qq_27127385…
• 借助Service Worker和cacheStorage缓存及离线开发 www.zhangxinxu.com/wordpress/2…
• 使用 Service Workers developer.mozilla.org/zh-CN/docs/…
• 网易云课堂 Service Worker 运用与实践 mp.weixin.qq.com/s/3Ep5pJULv…
• 【PWA学习与实践】(3) 让你的WebApp离线可用 segmentfault.com/a/119000001…
• Webpack实战-构建离线应用 segmentfault.com/a/119000001…
• 神奇的 Workbox 3.0 让你的 Web 站点轻松做到离线可访问 zoumiaojiang.com/article/ama…
• service-workers-101 github.com/delapuente/…
• WKWebView离线化方案——实现Service Worker API zhuanlan.zhihu.com/p/148931732

Web Worker

• 前端魔法堂：可能是你见过最详细的WebWorker实用指南 www.bbsmax.com/A/VGzl4QAYz…

跨域

• 一个关于image访问图片跨域的问题 www.jianshu.com/p/8fa0fb53c…

微前端

• 什么是微前端 micro-frontends.org/
• 前端微服务化 alili.tech/archive/ea5…
• 你知道什么是微前端吗？微前端和微服务有什么关系？ blog.csdn.net/qq_21793443…
• 全面解析微前端框架 qiankun 源码 juejin.im/post/684490…
• 一个面向大型系统的微前端解决方案 icestark ice.work/docs/icesta…
• qiankun 微前端方案实践及总结 juejin.im/post/684490…
• 体验微前端（qiankun） juejin.im/post/684490…
• Vue + qiankun 快速实现前端微服务 segmentfault.com/a/119000002…
• 微前端qiankun从搭建到部署的实践 juejin.cn/post/687546…

vsCode编辑器

• 动图演示23个鲜为人知的VSCode快捷键 juejin.im/post/684490…

项目工程

• 前端工程化指南 www.kancloud.cn/csnikey/fep…
• 使用verdaccio搭建npm私有仓库 liaolongdong.com/2019/01/24/…
• 教你如何阅读框架源码 juejin.im/post/684490…
• 版本格式 semver.org/lang/zh-CN/

Rollup打包

• Rollup打包工具的使用（超详细，超基础，附代码截图超简单） juejin.im/post/684490…
• 10分钟快速精通rollup.js——Vue.js源码打包原理深度分析 juejin.im/post/684490…

前端下载

• 以流的形式下载一个前端生成的大文件（StreamSaver.js） juejin.cn/post/684490…
• 下载保存文件（FileSaver.js）github.com/eligrey/Fil…
• 前端下载生成压缩包（jszip.js） stuk.github.io/jszip/

前端上传

• 实现一个大文件上传和断点续传 juejin.cn/post/684490…
• 超大文件上传之计算文件MD5值 www.helloweba.net/javascript/…

Docker

• 基于 Docker 打造前端持续集成开发环境 zhuanlan.zhihu.com/p/37961402

模块化

• 模块加载系统（requirejs）www.cnblogs.com/ahthw/p/454…
• 前端模块化IIFE，commonjs，AMD，UMD，ES6 Module规范超详细讲解 blog.csdn.net/jianghao201…

持续更新