web前端学习资源清单（持续更新）

1.推荐团队博客
推荐团队
w3school
w3cplus
前端观察
腾讯Web前端Alloy团队
qq前端月报
淘宝前端团队fed
推荐博客
汤姆大叔博客
张鑫旭博客
阮一峰博客
廖雪峰官网
牧云云博客
前端小智
小胡子哥的个人网站
Jerry Qu
fouber github
木易杨 github（前端进阶系列）
xiaozhi github （小智GitHub博客）
境枫博客（语雀）
2.推荐文章教程
资源清单
守候：个人分享–web前端学习资源分享
前端学习笔记总结清单，应有尽有
前端最实用书签【看完可以提涨薪啦】
Wscats github 学习笔记与文章
前端进击的巨人(内容包括：前端进击的巨人系列、JavaScript设计模式系列、读书笔记系列)
JS秘密花园 【书籍总结】
《JavaScript权威指南》JavaScript核心概念归纳整理 【书籍总结】
前端资源系列（4）-前端学习资源分享&前端面试资源汇总
程序员练级攻略（2018）：前端基础和底层原理 （css、js、浏览器原理、网络协议文章总结）
web前端最全各类资源
JavaScript
阮一峰：Javascript 面向对象编程系列（内容包括：封装、构造函数封装、非构造函数封装）
腾讯全端 AlloyTeam 团队 Blog JavaScript设计模式（设计模式）
龙恩：Javascript常用的设计模式详解（设计模式）
汤姆大叔：深入理解JavaScript系列（设计模式）
老姚：《JavaScript 正则表达式迷你书》（正则表达式全攻略）
编写自己的代码库（javascript常用实例的实现与封装）
一行能装逼的JavaScript代码（主要考察JS的类型转换，如：(!(+[])+{})[–[+""][+[]][~+[]] + ~~!+[]]+({}+[])[[!+[]]+[]]）
前端大文件上传(主要包括：文件编码上传、文件切片、断点续传等方式)
探索怎样让 JS - API 具有更好的实用性
探索怎么样的参数能让 JS - API 更灵活
重构 - 设计API的扩展机制
字符编码ASCII、Unicode 、UTF-8 及实例汉字与Unicode码的相互转化（编码）
Unicode与JavaScript详解（编码）
执行上下文详细图解
这一次，彻底弄懂 JavaScript 执行机制
前端10个灵魂拷问 吃透这些你就能摆脱初级前端工程师！
web前端图片懒加载实现原理
JavaScript学习总结（五）原型和原型链详解（原型、原型链知识）
原型及原型链
JS中的new()到底做了些什么？
从ES6重新认识JavaScript设计模式(一): 单例模式(设计模式)
深拷贝的终极探索（99%的人都不知道）
微信小程序，监听用户登录事件 （微信小程序）
小tips: 纯前端JS读取与解析本地文本类文件
ArrayBuffer：类型化数组
ECMAScript 位运算符
JavaScript 内存泄漏教程
探寻 JavaScript 精度问题以及解决方案
JavaScript 中的数据格式转换一例：reduce的应用
Promise原理讲解 && 实现一个Promise对象 (遵循Promise/A+规范)
可能是最详细的UMD模块入门指南
为什么是 JSONP
Javascript Lazyload延迟加载特效
浅析 JavaScript 中的 函数 uncurrying 反柯里化
前后分离模型之封装 Api 调用（对jquery ajax的再次封装→更换API调用接口，使用axios封装→去除jquery,使用 Promise 接口改善设计）
JavaScript字符串操作方法大全，包含ES6方法（记住了split()方法可以传递第二个参数）
axios 中文文档 翻译（比较完整的中文翻译，axios的github地址）
TypeScript
了不起的 TypeScript 入门教程（1.2W字）
ES6、ES7、ES8
30分钟掌握ES6/ES2015核心内容（上）
30分钟掌握ES6/ES2015核心内容（下）
ES6之常用开发知识点：入门（一）
【async/await】用 async/await 来处理异步
如何在 JS 循环中正确使用 async 与 await
vue
Vue2 几种常见开局方式
Vue.js——60分钟组件快速入门
揭密 Vue 的双向绑定(自定义v-model)
vuex最简单、最直白、最全的入门文档
Vue源码解析(五)-vuex
Vue 折腾记 - (10) 给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示)
手摸手，带你用vue撸后台 系列(花裤衩-系列文章包括基础篇、登录权限、实战、webpack4配置等内容)
Vue.js写一个SPA登录页面的过程 （该实现就是登录成功后在cookie中添加一个登录状态）
vue后端管理系统模板vue-admin-template（后台模板）
vue-manage-system 后台管理系统开发总结（后台模板）
处理 Vue 单页面 Meta SEO的另一种思路: vue-meta-info
Vue 基于 Genesis + TS + Vuex 实现的 SSR demo
vue非父子组件怎么进行通信
关于Vue实例的生命周期created和mounted的区别
vue-cli + webpack 多页面实例配置优化方法(多页面应用配置，动态设置多入口文件JS)
vue-cli4 全面配置(持续更新)
参考ElementUI的文档实现方案，实现自己组件库的说明文档 （vue-cli2实现markdown预览）
vue-cli3项目展示本地Markdown文件的方法（vue-cli3实现markdown预览）
vue-worker的使用（github地址）
手把手教你如何在生产环境检查 Vue 应用程序
基于Vue的前端架构，我做了这15点
面试题：你能写一个Vue的双向数据绑定吗？
160行代码仿Vue实现极简双向绑定[详细注释]
vue实现右键菜单vue-contextmenu、js实现自定义contextmenu （右键菜单）
插件：vue-tooltip（提示）、vue-lazyload（图片懒加载）、vue-calendar（日期插件）
Vue利用canvas实现简易移动端手写板
基于vue的下拉刷新&滚动刷新指令
Vue.js写一个音乐播放器
vue的源码解析（passive特性，感觉是面试加分项） （Chrome提出的一个新的浏览器特性,检查浏览器是否可以使用该特性,提升滚动流畅度,其中addEventListener第三个参数可以接受一个对象，参考MDN:EventTarget.addEventListener()）
html(5)
文件各种上传，离不开的表单
[HTML5] Blob对象及扩展分片上传文件
H5图片压缩与上传
HTML5 postMessage 和 onmessage API 详细应用
MessageChannel 消息通道
视频H5 video最佳实践
移动端开启摄像头、视屏录制：MediaDevices.getUserMedia() 、MediaRecorder() 、HTML5调用手机前置摄像头或后置摄像头拍照，canvas显示,经过Android测试
css(3)
纯css 实现footer sticker (实现footer一直在页面底部)
从网易与淘宝的font-size思考前端设计稿与工作流
不得不收藏的——IE中CSS-filter滤镜小知识大全
CSS实现水平垂直居中的1010种方式（史上最全）
个人总结（css3新特性）
为什么很多web项目还是使用 px，而不是 rem？
极速适配 iPhone X 秘笈 (针对新出的iphone X手机进行的适配方案)
【布局】图解CSS3 Flexbox属性
【布局】阮一峰之Flex 布局教程：实例篇
【CSS进阶】CSS 颜色体系详解
如何用纯CSS创作一张纪念卓别林的卡片
如何用自己喜欢的 CSS 风格重置网站的样式
jquery
一个小时学会jQuery（jQuery入门经典总结）
jQuery中的extend方法源码
细说 jQuery 事件篇（五） - 事件的移除和重绑定
webpack
教你一步步从零构建webpack开发多页面环境 (webpack1.x)
vue-cli的webpack模板项目配置文件分析 (脚手架：vuecli2)
入门 Webpack，看这篇就够了 (webpack3及以前版本配置，webpack入门)
webpack从此不再是我们的痛点 — 核心基础 (webpack3)
webpack3插件CommonChunkPlugin分离ElementUI和Echarts
详解webpack-CommonsChunkPlugin的配置和用法（webpack3.x对应的提取公共模块CommonsChunkPlugin插件的使用）
webpack中的externals应该怎么使用？
webpack4核心模块tapable源码解析
如何编写一个WebPack的插件原理及实践
webpack-缓存
了解babel：polyfill、loader、 preset-env及 core之间的关系
详解babel8.X版本用法填坑（babel-loader ， @babel/core , @babel/plugin-stransform-runtime, @babel/preset-env）
babel-preset-env与stage-x的使用指南
深入浅出的webpack构建工具–webpack4+vue搭建环境 (十三)
webpack 中那些最易混淆的 5 个知识点
git
手把手教如何将本地项目上传到Github（包会）
一个小时学会Git
每天99%的时间在使用的Git命令
nodejs
阮一峰：npm scripts 使用指南
Node模块–chalk (chalk 包的作用是修改控制台中字符串的样式)
Node portfinder (获取当前可用的port)
阮一峰：CommonJS规范
深入浅出 Node.js（三）：深入 Node.js 的模块机制
优化、技巧
4个错误使用JavaScript数组方法的案例
高效遍历匹配Json数据，避免嵌套循环[转]
挑战月薪30K | 前端性能优化的12 条建议（干货收藏）
前端性能优化设计12问 （思否课程）
前端性能优化 24 条建议（2020）
前端装逼技巧 108 式（一）—— 打工人
前端微服务
qiankun(qiankun 是一个基于 single-spa 的微前端实现库)【官网】
基于 qiankun 的微前端最佳实践（万字长文） - 从 0 到 1 篇
记一次 微前端 qiankun 项目 实践 !!! 防踩坑指南
目标是最完善的微前端解决方案 - qiankun 2.0
网络协议、安全
HTTP Keep-Alive模式 [需细读]
看完这篇文章，我奶奶都懂了https的原理
你真的会使用XMLHttpRequest吗？
预测最近面试会考 Cookie 的 SameSite 属性
前端开发如何独立解决跨域问题（代理与反向代理）
通讯相关：STOMP Over WebSocket
反向代理和正向代理区别
Tomcat的HTTP与AJP协议
基于Token的WEB后台认证机制 (基JSON Web Token（JWT）的Token认证机制实现、Token认证的安全问题)
基于 Token 的身份验证
HTML a标签打开新标签页避免出现安全漏洞，请使用“noopener”(a标签中使rel="noopener"避免把window变量带到新窗口而出现的安全漏洞)
99%的人都理解错了HTTP中GET与POST的区别(重大区别：GET产生一个TCP数据包；POST产生两个TCP数据包)
测试框架
阮一峰：测试框架 Mocha 实例教程
契约测试框架Pact：中文参考指南 Pact.js之github地址
xml
XML to HTML(w3c教程：xml转为html)
XSL 语言(XML 样式表)
JavaScript实现将xml转换成html table表格的方法
问题探索
解决input[type=file]打开时慢、卡顿问题
“无限加载更多”带来的移动端性能瓶颈
为什么element ui 的export default 可以 import 解构赋值？
前后端分离，前端如何判断登录状态？（由该问题可引申出token认证、Cookie认证相关优缺点，哪种方式更适合前后端分离的场景）
面试汇总
蚂蚁、字节、滴滴面试经历总结
104道 CSS 面试题，助你查漏补缺
关于JS作用域的问题
备战面试/笔试 —— 前端程序员不可不知的HTTP知识
JavaScript：面试频繁出现的几个易错点
腾讯web前端开发工程师笔试题及答案
世界各地程序员共同总结的前端面试题
从一道百度面试题到分析输入url到页面返回的过程（或者查询返回过程）
Vue面试中，经常会被问到的面试题/Vue知识点整理
css&html面试知识点
web前端面试题一（从需求：一个输入框，用户输入时有联想搜索，每次用户输入都会触发请求，过多的请求会造成服务器的压力，如何去解决这个问题？由浅入深提问面试者并不断优化实现方式）
插件效果
jQuery超级简单的绿色拖动验证码功能
jQuery打印插件jqprint
jQuery瀑布流插件 Masonry 、 jquery瀑布流布局(masonry.js) （瀑布流效果）
利用jqueryRotare实现抽奖转盘
jQuery左右箭头和鼠标控制的板块滚动
jquery图片层叠旋转木马切换
jQuery鼠标悬停导航底部动画效果、导航线运动效果 （导航线效果）
基于Framework7实现的H5手机移动端三级联动城市选择器-01 （根据px计算）（省级联动效果）
LArea移动端省市区城市三级联动选择控件-02 （基于em计算）（省级联动效果）
移动端网页轻量级日期控件LCalenda （根据em计算）（日期控件）
jQuery日历插件(也适用于手机上下滑动选择时间) 、Jquery滑动日期输入控件 （日历控件）
jQuery/CSS3实现拼图效果的相册插件
jquery.roundabout.js图片叠加3D旋转插件多功能图片翻转切换效果
jQuery和CSS3简单的背景图片3D视觉差特效 、Sequence.js – 视差滚动特效图片滑块、上下互动视觉差特效 （视觉差效果）
iOS百度外卖的头像波浪效果实现
使用Move.js创建CSS3动画
jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法、模拟滚动条例子（模拟滚动条）
particles.js （鼠标移动画折线效果）
jQuery全屏滚动插件fullPage.js演示
Swiper中文网 （Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架，Swiper从3.0开始不再全面支持PC端。因此，如需在PC上兼容更多的浏览器，可以选择Swiper2.x（甚至支持IE7））
jquery.SuperSlide.js官网 、案例效果地址 （网站上常用的效果SuperSlide基本都有！也有移动端的TouchSlide.js）
Velocity.js（不依赖jquery的轻量级JS动画库，包含了.animate() 的全部功能）
layui弹出层组件（layer是一款近年来备受青睐的web弹层组件，截至到2017年9月13日，已运用在超过 30万 家 Web 平台）
360度全景 krpano 、krpano HTML5全景漫游（全景效果）
HTML5 canvas signature_pad手写签名 （手绘签名源码）
html2canvas（网页保存为canvas）
网易云-滑动拼图 体验地址：https://id.163yun.com/login?referrer=https://dun.163.com/dashboard&h=yd
表单异步校验：async-validator
SpreadJS-HTML5纯前端表格控件
游戏开发
泡泡龙游戏HTML5
html游戏引擎，createJs框架介绍
实现2048慕课学习网站
原生JS+Canvas实现五子棋游戏
“倔驴”一个h5小游戏的实现和思考（码易直播）——总结与整理
canvas开发玉兔吃月饼
createjs 使用记录
createjs开发入门
100行JS实现HTML5的3D贪吃蛇游戏
js开发实现简单贪吃蛇游戏（20行代码）
js实现贪吃蛇小游戏（容易理解）
JavaScript版—贪吃蛇小组件
3.推荐技术社区
极客时间
掘金（活跃社区，里面有很好的技术文章、小册）
慕课网
SegmentFault（活跃的一个社区，有问答、文章、讲堂，质量也很不错）
stackoverflow（一个问答社区，基本上各种问题都能在上面获得解答）
泰课在线
瓢城Web俱乐部
风变编程
网易云课堂（(网易公司（163.com）旗下专注职业技能提升的在线学习平台)）
知乎（虽然不是单纯的IT社区，但是里面有很多大牛和高质量的专栏！）
github
PHP之道
html5trick （html5资源教程网站）
蓝桥云课（原名：实验楼-WEB，提供web开发、nodeJS等上千门培训课程）

4.开发杂谈
个人建议-怎样写出一篇好文章
天天写业务代码，如何成为技术大牛？
如何高效的学习技术-编码砖家
大公司里怎样开发和部署前端代码？
从破解某设计网站谈前端水印(详细教程)
不能说的秘密——前端也能玩的图片隐写术
饿了么基于Vue2.0的通用组件开发之路（分享会记录）
如何解决web大流量、高并发的问题
前端网老姚浅谈：怎么学JavaScript？
浏览器的工作原理：新式网络浏览器幕后揭秘
编辑框用 Ctrl+V 粘贴图片是如何实现的？
IT技术人员的自我修养
Tomcat配置
前后分离架构的探索之路 (探索前后分离的过程和心得感想,要记住：你是一个工程师，你不是一个页面仔！)
Vue作者尤雨溪的深度访谈，你不得不看
5.推荐书籍
《JavaScript高级程序设计》：红皮书，非常适合系统性的学习 JavaScript
《JavaScript权威指南》：犀牛书，JS经典书籍
《JavaScript 语言精髓与编程实践》：作者-周爱民，绿宝书，本书不建议新手阅读
《JavaScript DOM编程艺术》：快速上手 DOM 操作书籍
《JavaScript 忍者秘籍》：作者是jQuery库的创建者，第2版涵盖了 ES6、7 的内容
《你不知道的 JavaScript（上卷）》： Github 开源书籍，目前已有 132k 个 Star ，作者将其学习 JavaScript 以来的经验记录为笔记并开源，适合中级及以上程序员阅读
《你不知道的 JavaScript（中卷）》：略
《你不知道的 JavaScript（下卷）》：略
《JavaScript 语言精粹》：蝴蝶书，普及JavaScript开发思维的一本书籍
《JavaScript 设计模式与开发实践》：腾讯员工曾琛写的一本书，讲常用的14中设计模式
《javascript框架设计》：作者-司徒正美
《编写可维护的JavaScript》：乌龟书
《ES6标准入门》：作者-阮一峰，这本书已开源（ES6标准入门）
《锋利的jquery》：jQuery入门书籍，比较经典
《HTML5与CSS3权威指南》：略
《HTML5 Canvas核心技术》：内容主要讲解图形、动画与游戏开发
《深入浅出Node.js》：作者-朴灵
《Webpack实战 入门、进阶与调优》：作者-居玉皓
6.常用工具
apiDoc文档生成工具（开发文档生成器，支持Java, JavaScript, PHP, …CoffeeScript,Elixir,Erlang,Perl,Python,Ruby,Lua）
jsdoc文档生成器（jsdoc一个根据javascript文件中注释信息，生成JavaScript应用程序或库、模块的API文档 的工具）
W3Cschool在线各种工具（包括代码工具、格式化美化工具、站长辅助工具、CSS在线工具、编码转码工具）
windows:RegexBuddy；Mac：Expressions(正则表达式生成工具)
Node.js ES2015/ES6, ES2016 and ES2017 support（查询node版本对JS的支持程度）
carbon- 一个能生成漂亮的代码分享图的在线工具
关于uni-app的ui库、ui框架、ui组件 (uniapp)
mcg-helper代码生成工具（简单总结了一篇前端入门使用的随笔：web前端使用mcg-helper代码生成工具学习笔记）
Gitbook简易教程
gitbook实现编写API文档生成html、pdf格式
7.其它资源
神州英才卓越领导力培训总结
【工具】在线生成电子印章
【网址】天眼查（查公司，查老板，查关系）
ppt免费模板-第一PPT （免费ppt模板下载）

原文链接：https://www.cnblogs.com/moqiutao/p/6561717.html