关于html5:分享web前端学习资源清单持续更新

1. 举荐团队博客

举荐团队

• w3cplus
• w3school
• 前端察看
• 腾讯 Web 前端 Alloy 团队
• qq 前端月报
• 淘宝前端团队 fed

举荐博客

• 汤姆大叔博客
• 张鑫旭博客
• 阮一峰博客
• 廖雪峰官网
• 牧云云博客
• 前端小智
• 小胡子哥的集体网站
• Jerry Qu
• fouber github
• 木易杨 github（前端进阶系列）
• xiaozhi github（小智 GitHub 博客）

2. 举荐文章教程

资源清单

• 守候：集体分享 –web 前端学习资源分享
• 前端学习笔记总结清单，包罗万象
• 前端最实用书签【看完能够提涨薪啦】
• Wscats github 学习笔记与文章
• 前端进击的伟人 (内容包含：前端进击的伟人系列、JavaScript 设计模式系列、读书笔记系列)
• JavaScript 机密花园【书籍总结】
• 《JavaScript 权威指南》JavaScript 外围概念演绎整顿【书籍总结】
• 前端资源系列（4）- 前端学习资源分享 & 前端面试资源汇总
• 程序员练级攻略（2018）：前端根底和底层原理（css、js、浏览器原理、网络协议文章总结）

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() 办法能够传递第二个参数）

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 的区别
• 在多页面我的项目下应用 Webpack+Vue(多页面利用配置)
• vue-cli + webpack 多页面实例利用 (多页面利用配置)
• vue-cli + webpack 多页面实例配置优化办法 (多页面利用配置)
• vue-cli4 全面配置 (继续更新)
• 参考 ElementUI 的文档实现计划，实现本人组件库的阐明文档（vue-cli2 实现 markdown 预览）
• vue-cli3 我的项目展现本地 Markdown 文件的办法（vue-cli3 实现 markdown 预览）
• vue-worker 的应用（github 地址）
• 手把手教你如何在生产环境查看 Vue 应用程序
• 基于 Vue 的前端架构，我做了这 15 点
• 面试题：你能写一个 Vue 的双向数据绑定吗？
• [160 行代码仿 Vue 实现极简双向绑定 [ 具体正文]](https://segmentfault.com/a/11…
• 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 对象及扩大分片上传文件 ](https://www.cnblogs.com/hhhya…
• 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 办法源码

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 搭建环境 (十三)(webpack4)
• 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 认证相干优缺点，哪种形式更适宜前后端拆散的场景）

插件成果

• 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?r…://dun.163.com/dashboard&h=yd
• 表单异步校验：async-validator
• SpreadJS-HTML5 纯前端表格控件

面试汇总

• 蚂蚁、字节、滴滴面试经验总结
• 104 道 CSS 面试题，助你查漏补缺
• 对于 JS 作用域的问题
• 备战面试 / 口试 —— 前端程序员不可不知的 HTTP 常识
• JavaScript：面试频繁呈现的几个易错点
• 腾讯 web 前端开发工程师口试题及答案
• 世界各地程序员独特总结的前端面试题
• 从一道百度面试题到剖析输出 url 到页面返回的过程（或者查问返回过程）
• Vue 面试中，常常会被问到的面试题 /Vue 知识点整顿
• css&html 面试知识点
• web 前端面试题一（从需要：一个输入框，用户输出时有联想搜寻，每次用户输出都会触发申请，过多的申请会造成服务器的压力，如何去解决这个问题？由浅入深发问面试者并一直优化实现形式）

游戏开发

• 泡泡龙游戏 HTML5
• createjs：html 游戏引擎，createJs 框架介绍、createjs 应用记录、createjs 开发入门
• 实现 2048 慕课学习网站
• 原生 JS+Canvas 实现五子棋游戏
• “倔驴”一个 h5 小游戏的实现和思考（码易直播）——总结与整顿
• canvas 开发玉兔吃月饼
• 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 配置
• 前后拆散架构的摸索之路 (摸索前后拆散的过程和心得感想, 要记住：你是一个工程师，你不是一个页面仔！)

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 模板下载）
• 【综合】录制屏幕 gif 动画小软件：Screen to Gif
• 【综合】前端疾速查问语句：linq.js
• 【学习】XSLT 教程（ofd 须要）
• 博客园皮肤款式一（博客园皮肤参考）
• ofd.js 相干 (跟 pdf.js 相似来解析 pdf 文件) 演示地址

• Phantomjs 联合 nodejs 下载网页及相干资源文件

  • 参考地址
  • PhantomJS 下载地址
  • Phantomjs 应用阐明

• webAssembly 相干 [重点查看]

  • 几张图让你看懂 WebAssembly
  • 字节码联盟成立 以欠缺 WebAssembly 在浏览器之外生态性