前端学习大汇总

前端技术学习收货总结整理，学习资源，职业规划，面试题，学习计划大汇总。

会一直更新,如果觉得有帮助,就去github上 star一下吧：

https://github.com/chenhaoact/chenhaoact-fe-learn/blob/master/SUMMARY.md

目录

• 简介
• 前端相关技术学习总结整理
  • 前端基础
    • Html
      • html重点
        • table
        • html文档流
        • 行内元素/块级元素
        • 特殊字符
      • html5重点与新特性整理
        • html5与html4的对比
        • Web Worker与Service Worker
          • Web Worker
          • Service Worker
        • HTML5自定义标签
        • Page Visibility
        • canvas（重点）
          • canvas相关类库
            • pixi.js
            • three.js
            • fabric.js
            • CreateJS
            • paper.js
            • d3.js
            • p5.js
            • 其他类库
        • svg（重点）
          • svg相关类库
            • velocity
            • Snap.svg
            • vivus
            • svg.js
            • raphael
            • progressbar.js
            • two.js
            • 其他类库
        • 拖拽、点击、手势处理等API与应用
      • html开发中遇到问题的解决整理与技巧方法总结（包含html5）
    • CSS
      • CSS基础
        • 选择器
        • 定位与浮动
        • 元素层叠显示优先级与z-index
        • CSS性能优化
      • CSS3重点整理
        • 文本，字体
        • 按钮
        • 过渡与动画
      • css常用布局写法整理
        • 单列布局
        • 两栏布局（左固定-右自适应）
        • 三栏布局（左固定-中自适应-右固定）
        • 卡片式布局与瀑布流
        • flex 布局（弹性布局）
        • grid布局（网格布局）
        • 垂直居中
        • BFC和IFC
        • 移动端布局与兼容适配（重点）
          • viewport设置
          • rem
          • 媒体查询
          • 最好统一使用flex布局
          • 响应式布局
          • 可以使用的一些移动端适配类库
          • 开发中遇到的问题及解决方法
        • 自适应布局
      • css常用技巧写法整理
        • 定宽文字（超出通过css自动打省略号）
        • css属性百分比
        • 画斜三角形和斜线
      • css属性大全（包含css3）
        • box-shadow
        • overflow
        • clac()
        • white-space-设置如何处理元素内的空白（比如设置不换行）
        • CSS border（边框）
      • css开发中遇到问题的解决整理与技巧方法总结（包含css3）
      • CSS预处理及其他技术
        • Sass/Scss
          • 变量与模块引用
          • Sass函数
          • Mixin-可以重用的代码块
          • 控制语句（if，循环等）
          • 相关工具
          • Sass和Scss的异同
        • compass
        • less
          • 项目中常用less整理
          • less常用函数
          • 相关工具
        • Stylus
        • 各种css预处理技术的比较
        • postcss
        • css-modules
    • JavaScript
      • js重点整理
        • js 基本数据类型及操作
        • js dom
          • dom概述
          • document属性与方法
          • 重点！dom元素（Element）对象属性与方法整理
          • dom变动的监听
          • js dom 常用方法与属性整理
        • js bom（包括Web API）
          • window对象
          • history对象（也属于window下的）
          • location对象（url信息及路径控制（跳转，重载等））
          • URL的编码/解码及参数查询
          • js 计时器 setTimeout和setInterval
          • 移动设备API
          • 其他
            • requestAnimationFrame
        • js 事件
          • js事件机制与事件模型
          • 重点！js事件类型整理
        • js字符串
        • js Number
        • 布尔型与表达式
        • js Array
        • js 对象
        • js原型、原型继承与非ES6的面向对象编程
        • js JSON对象
        • js闭包与作用域
        • js异常捕获与处理
        • js内存管理
        • js文件与二进制数据处理API
          • Blob
          • File
        • js模块化规范（重点！）
          • CommonJS规范
            • CommonJS module对象
          • AMD规范
            • require.js的用法
          • CMD
          • UMD规范
          • 各个模块化方案的对比（模块化的要点看这里就够了）
        • 严格模式
      • js设计模式
        • 什么是设计模式
        • 设计原则
        • 常用设计模式（重点）
          • 单体（Singleton）模式（单例模式）
          • 工厂模式
          • 桥接模式
          • 装饰者（Decorator）模式
          • 组合（Composite）模式
          • 门面（facade）模式
      • ES6重点整理
        • let和const
        • 变量的解构赋值
        • ES6 对象新特性
        • ES6 Array 新特性
        • ES6 函数新特性
        • ES6 RegExp（正则表达式）包括ES5部分
        • ES6 字符串新特性
        • Symbol数据类型
        • Set与Map
        • Proxy对象和Reflect对象
        • Iterator 和 for...of 循环及js各种遍历的比较
        • js异步编程(包含promise)
        • Generator 函数
        • async 函数
        • Class与面向对象编程
          • ES6 class基本语法
          • ES6 class继承
        • Decorator（修饰器）
        • 模块Module
          • Module 的语法及使用
          • Module 的加载实现
        • 编程风格规范（重要）
        • ArrayBuffer-以数组语法处理二进制数据
        • 变量的解构赋值
        • 浏览器兼容性查询
        • 如何用es5实现es6的常用方法？（重要）
      • coffeescript
      • typescript总结
      • 重！js问题及故障的解决与技巧方法整理（包含es6）
        • 数组类
        • 对象类
        • 函数类
        • 其他数据类型类
      • js经典权威教程（重要，全部过完一遍）
    • 其他基础
      • W3C标准
      • 计算机网络相关
        • HTTP
          • HTTP1和HTTP2
          • HTTPS
          • WebSocket
        • Ajax与Fetch
          • Ajax
          • Fetch API
        • json和jsonp
      • 浏览器
        • 浏览器环境及浏览器引擎
      • WebAssembly 字节码技术
  • 前端技术，框架与类库
    • 前端框架
      • jQuery
      • Angular
        • Angular4
      • React
        • React重点整理
          • 关于jsx
          • react方法及属性整理（以便用时快速查找）
          • 关于组件
            • 组件生命周期
            • 组件的props
            • 组件的state
            • 组件间的通信
            • 组件的继承扩展与多态
            • Mixins （混合）
          • 事件（合成事件系统）
          • 虚拟dom与访问dom
          • 数据流
          • react性能优化
          • Context
          • react插件与开发常用工具类库
          • React Fiber
          • React16的新特性
        • react升级
          • React 16
        • 深入React-React源代码详细解读分析
          • React （v16.0.0）源码阅读
            • 一 React整体目录分析
            • 二 src目录文件分析
              • isomorphic目录
              • renderers目录
              • shared目录
              • test目录
            • 三 通过具体代码分析几个React关键点的具体实现原理（重点！）
              • React组件是如何创建的？
              • React组件是如何在dom中渲染的？
              • React组件的生命周期是如何进行的？
              • 合成事件系统是如何实现的？
            • 四 React构建过程分析
            • 五 读源码总结
        • 好的React项目
          • create-react-app
          • react-starter-kit
          • react-boilerplate
        • 好的react组件库使用、研究与参与代码贡献
          • ant-design
            • 源代码分析
            • 如何扩展或改写ant-d组件
            • 参与组件代码贡献
        • 在React中使用jQuery及其他类似的类库
        • React开发中问题的解法与技巧总结
        • Redux-状态管理方案
          • 适用场景-什么时候选用Redux，什么时候不需要用（用了反而增加复杂度）
        • mobx-更简单，可扩展的状态管理
          • 基础要点
          • 相关工具插件资源
          • 使用注意点与问题解决
          • 参考资料
        • React-router-路由管理
          • 路由相关数据获取
          • react-router-redux-保持状态和路由的同步
          • 版本升级使用（重点）
            • react-router 4.0实践
        • dva
        • preact-更轻量的react
        • React服务器端渲染
      • Vue
        • Vue2
    • 跨平台移动端原生应用开发
      • React Native
        • React Native
        • 好的React Native项目脚手架
          • create-react-native-app
      • Weex
      • Rax
      • 移动端原生应用调试
        • ios模拟器调试
        • android模拟器调试
    • 移动端H5页面技术
      • 移动端页面基础
      • zepto-移动端的jquery
      • vConsole-针对移动端网页的前端console调试面板
      • 移动端页面性能优化（重要）
    • Hybrid
      • 参考资源
      • 相关框架
    • 小程序
      • 支付宝小程序
      • 微信小程序
    • PWA
      • 简介与使用场景
      • 添加到主屏幕与manifest.json
      • 浏览器支持情况
      • 一些支持了PWA的大型应用
    • 跨平台桌面客户端技术
      • NW
      • electron-跨平台PC桌面客户端开发
    • Nodejs
      • Nodejs简介、优缺点及与其他技术的对比
      • 原生Nodejs
        • nodejs常用核心模块（重要）
          • (File System 文件系统模块)
          • 用"fs-extra"模块代替fs使用
          • path （文件路径模块）
          • child_process（子进程，执行shell命令等）
          • os-系统操作模块
        • node重大版本迭代
        • 资源与参考
      • 常用node插件、类库与中间件
        • forever-让nodejs应用在后台永久执行
        • pm2-比forever更强大而且支持可视化界面监控管理
        • async-强大的异步流程控制库
        • cross-env（解决node在不同操作系统上的兼容问题）
        • n与nvm-node版本控制与切换
      • Koa
        • Koa2
        • Koa和其他框架的对比
        • 资源与参考
      • 其他nodejs框架
        • egg
      • Node同构与服务端渲染
    • 前端工程化
      • 包管理工具
        • npm
        • Yarn
      • 打包构建与编译技术
        • Webpack
          • 基本概念
          • Webpack1
          • Webpack2
          • webpack3
          • webpack常用插件中间件（重要）
          • webpack性能优化
            • 代码拆分-按需加载
            • 构建性能优化
            • 用happypack-加快webpack的构建速度
            • 利用 DllPlugin 和 DllReferencePlugin 预编译资源模块
            • webpack-uglify-parallel（多线程压缩）
            • 开发与生产环境构建配置区分
        • browserify
        • babel
          • babel使用总结
          • 常用的babel插件
        • Parcel
        • 云构建
          • Jenkins
          • Travis CI
      • 脚手架资源
        • yeoman
      • 命令行脚手架开发
        • commander
        • Inquirer.js学习与实践
        • chalk
        • download-git-repo
        • git hook
        • ora
        • 相关资源参考与整理
        • mac和unix系统自带命令
      • 代码校验
        • eslint
          • eslint使用实践
        • JsLint和JsHint
        • stylelint-css样式代码校验
      • 代码格式化
        • Prettier
      • js优化
        • prepack——优化js源代码的工具提高js代码的效率
      • 配置文件语言
        • json
        • YAML
    • 前端组件化
      • web组件
    • 前端性能优化
      • 各个前端框架性能数据对比
      • 大流量/高并发下的优化与容灾方案
    • 前端调试技术
      • chrome浏览器调试技巧整理
        • 断点调试
        • 页面dom调试
        • 性能测试
        • 浏览器快捷键整理
      • 页面远程调试与演示
    • 前端测试技术
      • jest-令人愉快的 JavaScript 测试
      • phantomjs-页面自动化测试
      • AVA-面向未来的测试运行器
      • 前端自动化测试
      • Mocha
      • enzyme
      • Travis CI-开源持续集成构建
      • Codecov-开源的测试结果展示平台，将测试结果可视化
    • 页面自动化搭建技术
      • Ant Motion-快速在 React 框架中搭建和使用动画
      • Webflow
      • Wix
    • 浏览器相关技术
      • puppeteer
      • 浏览器原理（重要！包括渲染原理）
      • 浏览器内核（渲染引擎）
      • 浏览器js引擎
      • 浏览器兼容
    • 数据图表与可视化
      • highcharts
      • echarts
      • antv(蚂蚁金服可视化解决方案)
      • DataV数据可视化-阿里云
      • BizCharts-AntV G2的React封装
    • 通用组件与常见UI效果实现
      • UI组件库
      • 页面应用搭建技术
      • 动画效果（重要）
      • 整屏滚动切换
      • Tab切换
      • 滑动切换与轮播
      • 鼠标覆盖时小三角旋转效果
      • 日期选择器组件
      • 滚动效果与自定义滚动条
      • 移动端-图片滑动切换组件
      • 移动端-Dialog对话框组件
      • 首页搭建
      • 文章页搭建
      • 拖拽与吸附
      • 移动端手势控制
      • 富文本编辑器实现（前端难点之一）
      • 视频播放器
      • 文件处理
        • pdf处理
    • 其他常用类库
      • 时间类库
        • moment.js
        • 其他时间类库
      • 数据类型与算法类库
        • lodash
          • 简介使用及资源
          • loadsh常用方法整理（版本4.17.4）
            • 一 数组（Array）
            • 对象
            • 语言类（Lang），各种数据类型的判断与通用操作
          • lodash源码阅读
        • ramda
        • undersercore
        • You-Dont-Need-Lodash-Underscore（用原生js的方法解决很多问题）
      • 同步异步编程处理类库
        • q.js-A promise library for JavaScript
        • RxJS
      • dom控制
        • 复制到粘贴板
      • 网络请求库
        • request
        • axios-一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端
      • 接口模拟
        • RAP
        • Mock.js
        • json-server
  • 后端，服务端，数据端基础（需要掌握到一定程度，有助于前端开发与全栈）
    • java
      • java语言基础
      • java与js的详细区别与对比
    • python
      • python语言学习整理
        • 简介与用途
        • python优点详细分析-为什么它能成为AI的第一编程语言
        • 基础语法
          • 输入与输出
        • 资源与参考
      • python相关类库
        • pytorch
    • C
      • C语言学习重点整理
    • C++
    • C#
    • 各种语言的对比
    • 数据库
      • mongoDB
    • 服务器
  • 前沿技术探索研究与实践
    • AR
      • EasyAR引擎
      • 用Unity3d开发类似Pokemon Go的AR游戏
      • AR.js
    • VR
      • a-frame
    • webGL
      • webGL基础学习整理
      • webGL相关类库
        • three.js-Javascript 3D library
    • 3D建模
      • 照片3D建模
        • Agisoft PhotoScan-基于照片生成高精度三维模型
        • Autodesk Remake-支持云端解算的照片3D建模软件
    • 人工智能
      • 深度学习、机器学习
        • TensorFlow
        • keras
        • 简介及资源
      • 前端、浏览器端人工智能技术
        • deeplearn.js-浏览器端机器智能框架
        • keras-js
        • tensorfire-利用 GPU 加速的浏览器端深度学习框架
    • 大数据
      • 大数据分析
      • 数据挖掘
    • 云计算
      • openstack-开源云计算平台
      • hadoop-分布式系统基础架构
    • 物联网(loT)
      • 树莓派
      • 物联网相关技术资源
    • 图形学、图像识别、计算机视觉相关
      • 人脸识别
      • OCR
      • 计算机视觉
  • 工具使用
    • git-版本控制
      • 项目下.gitignore文件写法与作用
      • sourcetree-git可视化工具
      • gitbook——写自己的书
      • github使用技巧
      • gitlab-团队代码协同与版本控制
      • git常用技能整理
    • 开发者协同与项目管理
      • Gitter-开发者及时通讯交流应用
      • Slack-开发者团队协作通讯工具
    • 代码编辑器使用技巧
      • webstorm
        • 提升开发效率与工程质量的技巧
        • 常用快捷键
        • 常用设置
      • 项目下.editorconfig文件写法与作用
      • VSCode
        • 提升开发效率与工程质量的技巧
        • 好用的插件收集
        • 常用快捷键
      • markdown
      • xcode
      • Android studio
    • 设计工具
      • sketch
      • iconfont-图标管理
    • 图表制作技巧大总结——用图表把自己的文章，ppt变得更专业
      • Excel使用技巧
    • 图像视频等多媒体处理与制作
      • 图片压缩
      • 屏幕录制（录视频，gif等）
    • 项目管理学习与能力培养
    • 数据接口模拟与管理
      • RAP-Web接口管理工具，开源免费，接口自动化，MOCK数据自动生成，自动化测试，企业级管理
      • Mock.js
    • 代码效果线上预览与调试
      • codepen
      • jsfiddle
      • jsbin
    • 命令行工具与操作
      • iTerm
      • bash
    • 操作系统快捷键与快捷工具
      • Mac
  • 用户体验提升与优化（重要）
    • 网络接口异常的处理与兼容及友好提示
    • 性能优化
    • 交互体验提升与优化
  • 前端技术方案与技术栈
    • 技术栈选择
    • 如何更好的技术选型？
    • 如何处理好技术升级？
  • 项目管理
    • 稳定性与故障预防及处理（重要）
    • 前端可用性保障
  • 技术学习总结模板
• 前端学习资源整理（内附超多前端福利）
  • （每周必过一遍的）优质前端资源学习平台
  • 知名 IT 公司前端团队
  • 其他不错的前端资源整理项目
• 工程师的职业规划和自我修养
  • 技术学习与职业能力提升
    • 为什么你的前端工作经验为什么不值钱-（学东西一定要扎实深入和不断优化）
    • 你和年薪百万的距离，仅仅是这6点
    • 为什么你输掉了人生长跑？一场毕业20年的同学聚会，一目了然
    • 傅盛最新干货：年轻人必须知道的4个关键词
    • 帮助应届生、年轻程序员快速成长的12个锦囊
  • 晋升
    • 晋升评审的套路（转自bang的博文）
    • 阿里面试官：什么样的人能在阿里晋升？
  • 职业规划/定位/转型
    • 工作三年后，我选择离开腾讯
  • 技术学习与提升方法
    • 读源码
• 前端笔试面试与应聘
  • js常考面试题
  • css常考面试题
  • html常考面试题
  • React常考面试题
  • Vue常考面试题
  • Webpack常考面试题
  • NodeJS常考面试题
  • 计算机网络常考面试题
  • 面试题资源整理
• 学习计划与待学习内容