资源说明：Playground & Live

![Tags](https://raw.githubusercontent.com/lefter/blog/master/img/tags.jpg)

- 更新时间：2019-07-03
- 难度等级：☆ 为初级，☆☆ 为中级，☆☆☆ 为高级。
- 标签体系：[开发工具](#开发工具)、[HMTL5](#html5)、[CSS](#css)、[JS](#js)、[主流框架](#主流框架)、[优化](#优化)、[Web服务器端](#web-服务器端)、[源码学习](#源码学习)、[前端类库](#前端类库)、[移动端](#移动端)、[PWA](#pwa)、[WebAssembly](#webassembly)、[小程序](#小程序)、[Canvas](#canvas)、[WebGL](#webgl)、[SVG](#svg)、[Graphql](#graphql)、[模块化编程](#模块化编程)、[算法](#算法)、[排序](#排序)、[加密](#加密)、[数据结构](#数据结构)、[数据库](#数据库)、[包管理](#包管理)、[Python](#python)、[设计模式](#设计模式)、[网络协议](#网络协议)、[函数式编程](#函数式编程)、[DOM](#dom)、[跨域](#跨域)、[事件模型](#事件模型)、[安全](#安全)、[Git](#git)、[前端规范](#前端规范)、[Nginx](#nginx)、[DNS](#dns)、[CDN](#cdn)、[V8 引擎](#v8-引擎)、[Linux](#linux)、[Electron](#electron)、[抓包工具](#抓包工具)、[Hadoop](#Hadoop)、[测试](#测试)、[部署](#部署)、[监控](#监控)、[浏览器](#浏览器)、[数据可视化](#数据可视化)、[前端工程化](#前端工程化)、[物联网](#物联网)、[消息队列](#消息队列)、[开发模式](#开发模式)、[架构](#架构)、[面试](#面试)、[ECMAScript标准](#ecmascript标准)、[前端组织](#前端组织)、[学习网站](#学习网站)、[技术杂谈](#技术杂谈)

### 开发工具
- [Sublime Text](https://www.sublimetext.com/3) ☆☆
- [VS Code](https://code.visualstudio.com/Download/) ☆☆☆
- [Atom](https://atom.io/) ☆☆
- [WebStorm](https://www.jetbrains.com/webstorm/download/#section=windows) ☆☆☆

### HTML5
- 初级 ☆
  - 语义化
  - Audio 和 Video
  - Web Storage
  - [HTML5 MDN](https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5)
  - [HTML5 Tricks](https://www.html5tricks.com/category/html5-tutorials)
- 中级 ☆☆
  - 离线存储
  - [HTML5 摄像头](http://jartto.wang/2017/11/28/h5-user-media/)
  - [HTML5 全屏](http://jartto.wang/2017/06/25/h5-fullscreen-api/)
  - [HTML5 拖放实现](http://jartto.wang/2017/10/23/html5-drag/)
  - [HTML5 全屏滑动组件](http://kele527.github.io/iSlider/)
  - [HTML5 之地理定位（Geolocation）](http://jartto.wang/2018/11/16/html5-geolocation/)
  - [HTML5 之消息通知（Web Notification）](http://jartto.wang/2018/10/30/html5-notification/)
  - [HTML5 之音频合成（SpeechSynthesis）](http://jartto.wang/2018/10/31/h5-SpeechSynthesis/)
  - [WebSocket](https://github.com/Pines-Cheng/blog/issues/37)
- 高级 ☆☆☆
  - Communication
  - Web Workder
    - [Web Worker](https://juejin.im/entry/5bcec53f6fb9a05cda77a347?utm_source=gold_browser_extension)
    - [Web Workers + 5 cases](https://blog.sessionstack.com/how-javascript-works-the-building-blocks-of-web-workers-5-cases-when-you-should-use-them-a547c0757f6a)
    - [Speedy Introduction to Web Workers](https://auth0.com/blog/speedy-introduction-to-web-workers/)
  - requestAnimationFrame
  - requestIdleCallback
- 扩展
  - [HTML5 API 大盘点](http://jartto.wang/2016/07/25/make-an-inventory-of-html5-api/) ☆☆
  - [H5 页面滚动阻尼效果实现](https://juejin.im/post/5b24ffe3f265da59934b33f4?utm_source=gold_browser_extension)

### CSS
- 初级 ☆
  - [CSS 3 简介](https://www.html.cn/doc/css3/what/)
  - [CSS 实用概要](http://jartto.wang/2018/03/06/outline-of-css/)
  - [CSS 实用 Tips](http://jartto.wang/2017/11/12/f2e-tips/)
  - [CSS 三大特性](http://jartto.wang/2017/02/08/css-features/)
  - 盒模型
  - box-sizing
  - IconFont
  - [CSS 实现水平垂直居中的 10 种方式](https://juejin.im/post/5b9a4477f265da0ad82bf921?utm_source=gold_browser_extension)
- 中级 ☆☆
  - [BFC](https://zhuanlan.zhihu.com/p/25321647)
  - [Flex](http://www.runoob.com/w3cnote/flex-grammar.html)
  - [Grid layout](https://www.jianshu.com/p/441d60be7d8a)
  - [Flexbox vs Grid：基本概念](https://www.w3cplus.com/css/flexbox-vs-grid-basic-concepts-and-related-attributes.html)
  - [PostCSS](https://blog.csdn.net/beverley__/article/details/72963369)
  - 预编译
    - [SASS](http://sass.bootcss.com/docs/sass-reference/)
    - [LESS](http://lesscss.cn/)
    - [Stylus](http://stylus-lang.com/)
  - CSS3 动画   
    - [Animate CSS](https://daneden.github.io/animate.css/?)
    - [All Animation CSS3](http://all-animation.github.io/)
    - [Transform](http://www.w3school.com.cn/cssref/pr_transform.asp)
    - [Translate](http://www.w3school.com.cn/cssref/pr_transform.asp)
  - [如何检测页面滚动并执行动画](http://jartto.wang/2016/08/18/detect-page-scroll-and-execute-animation/)
  - [移动端无缝滚动动画实现](https://juejin.im/post/5b2b4e3fe51d4558e15b97ed?utm_source=gold_browser_extension)
- 高级 ☆☆☆
  - [CSS4](https://www.jianshu.com/p/a37ed9487a32)
  - [CSS3 动画原理](http://web.jobbole.com/83549/)
  - [探究 CSS 解析原理](http://jartto.wang/2017/11/13/Exploring-the-principle-of-CSS-parsing/) 
  - [详谈层合成（composite）](http://jartto.wang/2017/09/29/expand-on-performance-composite/)
  - [CSS Modules 使用详解](https://blog.csdn.net/xiangzhihong8/article/details/53195926)
- 扩展
  - [30s CSS](https://atomiks.github.io/30-seconds-of-css/) ☆
  - [新手引导动画的 4 种实现方式](https://juejin.im/post/5bac9bd0e51d450e516296d0)

### JS
- 初级 ☆
  - [JS 标准参考教程](https://www.kancloud.cn/kancloud/javascript-standards-reference/46466)
  - [原型与原型链](https://github.com/mqyqingfeng/Blog/issues/2)
  - [作用域](https://github.com/mqyqingfeng/Blog/issues/3)与[作用域链](https://github.com/mqyqingfeng/Blog/issues/6)
  - [Event Loop](https://juejin.im/post/59e85eebf265da430d571f89)
  - 闭包
    - [反思闭包](http://jartto.wang/2017/12/18/reflective-closure/)
    - [深入浅出 Javascript 闭包](https://juejin.im/post/5beee511e51d453b8e543ed6)
  - [call 和 apply](http://jartto.wang/2016/06/28/appreciation-of-the-call-and-apply/)
  - [正则表达式](http://jartto.wang/2016/07/03/js-regular-expression/)
    - [正则表达式真的很骚，可惜你不会写](https://juejin.im/post/5b96a8e2e51d450e6a2de115)
  - [XHR or Fetch API ?](http://jartto.wang/2017/01/17/xhr-or-fetch-api/)
  - [Understanding ECMAScript 6](https://oshotokill.gitbooks.io/understandinges6-simplified-chinese/content/chapter_1.html)
  - [为什么要有 ES6](https://github.com/jeyvie/thoughts/blob/master/docs/why_es6.md)
  - [introduction to ES6 by example](http://coenraets.org/present/es6/#0)
  - [ES6 标准入门](http://www.waibo.wang/bible/es6/)
  - [ECMAScript 6 - 阮一峰](http://javascript.ruanyifeng.com/advanced/ecmascript6.html#)
  - [浏览器同源政策及其规避方法](http://www.138dish.cn/web/same-origin-policy.html)
- 中级 ☆☆
  - [JS 模板引擎](http://jartto.wang/2016/09/15/grasp-a-js-template-engine/)
  - [前端路由跳转基本原理](https://juejin.im/post/5c52da9ee51d45221f242804?utm_source=gold_browser_extension)
  - 垃圾回收
  - JS 内存
    - [JS 内存管理](https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec)
    - [内存管理速成教程](https://hacks.mozilla.org/2017/06/a-crash-course-in-memory-management/)
  - 堆和栈
  - 继承
  - [掌握 JS Stack Trace](http://jartto.wang/2017/12/09/grasp-js-stack-trace/)
  - [ES6](http://es6.ruanyifeng.com)
    - [Generator](https://github.com/jeyvie/understanding-ES6/blob/master/docs/8.1_iterator_generator_base.md)
      - [ES6-Generator 函数](https://juejin.im/post/5b1751d551882513756f0bdc)
    - [Promise](https://github.com/jeyvie/understanding-ES6/blob/master/docs/11.Promise.md)
      - [How do Promises work under the hood?](https://blog.safia.rocks/post/170154422915/how-do-promises-work-under-the-hood)
      - [JavaScript Promise迷你书](http://liubin.org/promises-book/)
    - [Module](https://github.com/jeyvie/understanding-ES6/blob/master/docs/13.module.md)
    - [Class](https://github.com/jeyvie/understanding-ES6/blob/master/docs/9.class.md)
  - [JavaScript 引擎基础：Shapes 和 Inline Caches](https://juejin.im/entry/5b27a175e51d4558c23231dc?utm_source=gold_browser_extension)
  - [33 Concepts Every JavaScript Developer Should Know](https://github.com/leonardomso/33-js-concepts?utm_source=gold_browser_extension)
- 高级 ☆☆☆
  - TypeScript
    - [TypeScript 官网](https://www.tslang.cn)
    - [深入 TypeScript 的类型系统](https://zhuanlan.zhihu.com/p/38081852)
    - [TypeScript 总体架构](https://github.com/Microsoft/TypeScript/wiki/Architectural-Overview)
  - You-Dont-Know-JS
    - [Up & Going](https://github.com/getify/You-Dont-Know-JS/blob/master/up%20&%20going/README.md#you-dont-know-js-up--going)
    - [Scope & Closures](https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20&%20closures/README.md#you-dont-know-js-scope--closures)
    - [this & Object Prototypes](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes)
    - [Types & Grammar](https://github.com/getify/You-Dont-Know-JS/blob/master/types%20&%20grammar/README.md#you-dont-know-js-types--grammar)
    - [Async & Performance](https://github.com/getify/You-Dont-Know-JS/blob/master/async%20&%20performance/README.md#you-dont-know-js-async--performance)
    - [ES6 & Beyond](https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20&%20beyond/README.md#you-dont-know-js-es6--beyond)
  - [exploring ES6](http://exploringjs.com/es6/)
  - JavaScript 如何工作
    - [对引擎、运行时、调用堆栈的概述](https://juejin.im/post/5a05b4576fb9a04519690d42)
    - [在 V8 引擎里 5 个优化代码的技巧](https://github.com/xitu/gold-miner/blob/master/TODO/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized-code.md)
    - [内存管理 + 处理常见的4种内存泄漏](https://github.com/xitu/gold-miner/blob/master/TODO/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks.md)
    - [内存管理速成教程](https://mp.weixin.qq.com/s/sVcGRUZqILCVgfhzRyODTg)
    - [事件循环和异步编程的崛起 + 5个如何更好的使用 async/await 编码的技巧](https://github.com/xitu/gold-miner/blob/master/TODO/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with.md)
    - [深入剖析 WebSockets 和拥有 SSE 技术 的 HTTP/2，以及如何在二者中做出正确的选择](https://github.com/xitu/gold-miner/blob/master/TODO/how-javascript-works-deep-dive-into-websockets-and-http-2-with-sse-how-to-pick-the-right-path.md)
    - [对比 WebAssembly + 为什么在某些场景下它比 JavaScript 更合适](https://github.com/xitu/gold-miner/blob/master/TODO1/how-javascript-works-a-comparison-with-webassembly-why-in-certain-cases-its-better-to-use-it.md)
    - [Web Worker 的内部构造以及 5 种你应当使用它的场景](https://github.com/xitu/gold-miner/blob/master/TODO/how-javascript-works-the-building-blocks-of-web-workers-5-cases-when-you-should-use-them.md)
- 扩展
  - [何谓 JS 挖矿](http://jartto.wang/2017/11/08/js-dig-ore/) ☆
  - [30S JS](https://github.com/Chalarangelo/30-seconds-of-code) ☆☆
  - [33 Concepts Every JavaScript Developer Should Know ](https://github.com/leonardomso/33-js-concepts?utm_source=gold_browser_extension#1-call-stack)
  - [ES6 语法侦测](https://github.com/ruanyf/es-checker) ☆
  - [初探 performance – 监控网页与程序性能](https://www.cnblogs.com/zhuyang/p/4789020.html)
  - [新手引导动画的4种实现方式](https://juejin.im/post/5bac9bd0e51d450e516296d0) ☆

### 主流框架
- Angular
  - [依赖注入](http://jartto.wang/2014/04/24/angularjs-part-7/) ☆
  - [指令 Directive](http://jartto.wang/2014/04/28/angularjs-part-9/) ☆☆
  - [剖析 Angularjs 语法](http://jartto.wang/2018/02/01/analysis-of-angularjs/) ☆☆
  - [build-your-own-angularjs](https://github.com/teropa/build-your-own-angularjs)
- [Vue](https://cn.vuejs.org/)
  - [Mint-UI](http://mint-ui.github.io/#!/zh-cn) ☆
  - [Element.UI](http://element.eleme.io/#/zh-CN/guide/design) ☆
  - [VUE2](https://cn.vuejs.org/v2/guide/) ☆☆
  - [VUEX](https://vuex.vuejs.org/) ☆☆
  - [Nuxtjs](https://www.sitepoint.com/nuxt-js-universal-vue-js/) ☆
    - [Nuxtjs 2.0 升级爬坑](http://jartto.wang/2019/04/23/update-nuxt2-0/) ☆
  - [Axios](https://www.jianshu.com/p/df464b26ae58) ☆
  - Vue-Router
    - [Vue-Router 实现原理](https://juejin.im/post/5b10b46df265da6e2a08a724?utm_source=gold_browser_extension) ☆☆☆
  - Vue-Loader ☆☆
  - [Vue.js 技术揭秘](https://ustbhuangyi.github.io/vue-analysis/) ☆☆☆
- React
  - 脚手架 ☆
    - Create React App
    - Codesandbox
    - Rekit
  - [30 seconds of React](https://github.com/30-seconds/30-seconds-of-react) ☆☆
  - [How Does React Tell a Class from a Function?](https://overreacted.io/how-does-react-tell-a-class-from-a-function/) ☆☆
  - [Ant Design](http://jartto.wang/2016/12/14/together-to-learn-ant-design-of-react/) ☆☆
  - 虚拟 Dom ☆☆
  - Diff 算法 ☆☆☆
  - [react-app-rewired](https://github.com/timarney/react-app-rewired)
  - Dva ☆☆
  - [探路 Roadhog](http://jartto.wang/2017/04/25/gating-roadhog/) ☆☆
  - Redux
    - [深入理解 Redux 中间件](https://juejin.im/post/5b237569f265da59bf79f3e9?utm_source=gold_browser_extension) ☆☆☆
    - [Redux 中文文档](https://github.com/camsong/redux-in-chinese) ☆☆
  - [Redux-Saga](https://github.com/superRaytin/redux-saga-in-chinese) ☆☆☆
  - TakeLatest ☆☆☆
  - [React 16 新特性](https://baijiahao.baidu.com/s?id=1582848543674223747&wfr=spider&for=pc) ☆☆
  - React-Router@4 ☆☆
  - [React 性能优化](http://www.css88.com/react/docs/optimizing-performance.html) ☆☆☆
  - React Hooks
    - [30分钟精通 React Hooks](https://juejin.im/post/5be3ea136fb9a049f9121014) ☆☆
    - [React Hooks-概览](https://juejin.im/post/5c31ccc8f265da6170074785?utm_source=gold_browser_extension) ☆☆
  - [UmiJS](http://jartto.wang/2018/05/24/taste-of-umi/) ☆☆
  - Next.js ☆☆
    - [Next.js 使用指南1－基本规则](http://jartto.wang/2018/05/27/nextjs-1/)
    - [Next.js 使用指南2－路由与加载](http://jartto.wang/2018/06/01/nextjs-2/)
    - [Next.js 使用指南3－高级配置](http://jartto.wang/2018/06/08/nextjs-3/)
  - [Ts + React + Mobx 实现移动端浏览器控制台](https://juejin.im/post/5bf278295188252e89668ed2?utm_source=gold_browser_extension#comment)
  - [阿里飞冰组件库](https://alibaba.github.io/ice/) ☆☆

### 优化
- 初级 ☆
  - 合并
  - 压缩
  - 混淆
  - Css sprits
  - 减少 HTTP 请求
  - Gzip
    - [GZIP 的压缩原理与日常应用](https://juejin.im/post/5b793126f265da43351d5125) ☆☆☆
  - Keep-Alive
  - DNS
- 中级 ☆☆
  - [图像优化原理](https://mp.weixin.qq.com/s/7aK6D0InyJs-BXUcaormKA)
  - [高性能网站建设的 14 个原则](http://www.cnblogs.com/mdyang/archive/2011/07/12/high-performance-web-sites.html)
  - [Web 优化之 Request](http://jartto.wang/2018/02/09/optimise-for-web-request/)
  - [如何优化高德地图（AMap）Marker 动画](http://jartto.wang/2017/08/28/how-to-optimize-marker-of-AMap/)
  - [Web前端优化及工具集锦](https://www.csdn.net/article/2013-09-23/2817020-web-performance-optimization)
  - [搜索引擎优化 SEO](https://juejin.im/post/5b163fab5188257d571f1d17?utm_source=gold_browser_extension)
- 高级 ☆☆☆
  - [彻底弄懂 HTTP 机制及原理](https://www.cnblogs.com/chenqf/p/6386163.html) 
  - 缓存
    - [HTML5 离线存储](http://jartto.wang/2016/07/25/make-an-inventory-of-html5-api/)
    - HTML 和 HTTP 头文件设置
      - [HTTP 缓存](https://juejin.im/post/5b3c87386fb9a04f9a5cb037#comment)
      - [Meta](http://laoono.com/2016-05/html-meta-cache.html)
      - Expires
      - Cache-Control
      - Last-Modified / If-Modified-Since
      - Etag / If-None-Match
    - Nginx 缓存
    - [关键路径渲染优化](https://juejin.im/entry/5b16a05fe51d4506b01106d9)
    - [关键渲染路径](https://juejin.im/post/5c3333036fb9a049f1545d27)
    - [前端性能优化——关键渲染路径](https://segmentfault.com/a/1190000013767948) 

联系我们：verysource_com

CopyRight © 2008-2022 verySource.Com All Rights reserved.　京ICP备17048824号-1　京公网安备：11010502034788