个人前端自学之路

最近找工做，顺便缕一缕本身是怎么自学前端的，当复习了。个人学习方法不太好，习惯了应试教育，上来就花大量时间看理论，一边看一边疑惑这个到底能够用来干什么？但仍是习惯性的把一个知识点先所有看完，固然看完也忘的差很少了。而后开始实践，又发现不会的东西依然不少不少，各类预处理器，各类框架，各类方言，看的头昏脑胀，逐渐失去信心。

结论：代码写得少了……加油写吧，写就完事儿了_(°:з」∠)_

只简单的归纳，记录可在线学习的网站，看过和想看的文章和书籍。

目录

• 1、web
• 2、HTML和CSS基础
• 3、CSS进阶
• 4、HTML5
• 5、JavaScript
• 6、Ajax
• 7、前端工程化
• 8、MVVM框架
• 9、后端node
• 10、前端动效

1、web

输入URL到页面加载完成都发生了什么？

1. DNS解析
2. 创建TCP链接
3. 发送http请求

• http
• https

4. 服务端处理请求并发送http报文
5. 浏览器解析渲染页面

• reflow 和 repaint（很是消耗性能）
  • 减小重绘和重排
• js解析机制：参考

6. 链接结束

参考
《Webkit技术内幕》

web缓存

web缓存
网站性能优化实战
雅虎34条军规
CDN 与 缓存
浏览器与CDN

2、HTML和CSS基础

• 文档类型声明
  • 浏览器的标准模式和混杂模式
• 语义化

学习网站：w3school
模板引擎：pug

3、CSS进阶

• 盒模型
• 选择器、优先级算法
• 绝对定位，相对定位
• 清除浮动
• 响应式设计：px、em、rem、vw、vh

CSS3

• 弹性布局
• 动画、过渡

预处理器：scss，stylus，less
框架：bootstrap
《精通CSS高级Web标准解决方案》
《CSS权威指南》
《CSS3实用指南》
大漠老师

ps：CSS，emmmm

4、HTML5

• 新的语义化标签
• 音视频标签
• canvas
• web存储
• 应用缓存

《HTML5 Canvas核心技术 图形、动画与游戏开发》
《HTML5触摸界面设计与开发》

ps：这里的知识不太熟，目前没有用过。

5、JavaScript

1. ECMAScript

• 数据类型、引用类型、基本包装类型
• 变量和函数声明提高
• 做用域链，执行环境
• this，call，apply，bind
• 原型链，建立对象，继承，闭包

es6

• let和const
• 解构赋值
• 扩展运算符
• Promise
• set和map
• class

2. DOM

• 节点
• 事件冒泡，事件捕获

3. BOM

• window、location、navigator、screen、history

《JS高级程序设计》
《JavaScript DOM编程艺术》
《Js语言精粹》
《JavaScript设计模式与开发实践 (曾探) 》
ECMAScript 6 入门
阮一峰老师博客

6、Ajax

• axios、fetch

7、前端工程化

• 模块
• CommonJS和AMD和CMD
• 先后端分离—SPA，SEC和SSR
• 打包工具：webpack、gulp

参考1
参考2
web组件规范
Webpack 4 Tutorial: from 0 Conf to Production Mode

8、MVVM框架

• vue双向绑定原理
• diff算法

9、后端node

嘿嘿，这回我没看理论，跟着写了些demo
node + mongoDB
koa
koa和数据库

10、前端动效

svg

快速入门

• GSAP、anime.js

pixiJS

超酷的网站
超酷的网站分解

three.js

Three.js入门指南