Web 开发应用技术导图（未完，待续···）

Web开发技术-思维导图.png

Web 后端知识体系

API 服务

• Restful API

网络传输协议

• http
• https

Web服务框架(Java / NodeJs)

数据缓存

数据库

• 基础sql

• 关系型数据库

  • SqlServer
  • MySQL
  • Oracle

• 非关系型数据库(NoSQL)

  • Mongodb
  • Redis

服务器

• Tomcat
• Jetty
• Nginx
• Apache

---

---

前端开发知识体系

Web开发中，前端开发从狭义上讲，是前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都是前端开发的专业领域。

核心技术.png

HTML

HTML的英文全称是 Hypertext Marked Language，即超文本标记语言。HTML 使用标记标签来描述网页。

• HTML
  行内元素：a span img input select
  块级元素：div ul ol li dl dt dd h1 p
  空元素：br hr link meta

• HTML5
  • 标签语义化 (nav/section/artical/...):
    标签 “见名知意”，可以通过标签名称直接鉴别标签的用途和内部内容；同时极大的增加了SEO识别效率，而且减少了开发成员之间的沟通。
• Canvas

• video & radio
• svg

---

CSS 样式

CSS...

• CSS(2)
  • 选择器
• CSS3
  • 新增样式选择器
  • 新增样式属性
  • flex
  • 动画
• CSS 预处理语言
  • Sass
  • Less

---

JavaScript

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。

• JS基础
  • 数据类型
    • 基础数据类型
    • 引用数据类型
  • this关键字
  • JS原型
  • 继承
  • Event
    • 事件监听
    • 自定义事件
  • ES6

MV*框架

目前最流行的三大前端框架 Vue、React、Angular

• Angular(泛指)

Vue目前最活跃的前端框架，渐进式前端框架。
+ AngularJS(1.^)
+ Angular(2.^)

• React

Vue目前最活跃的前端框架，渐进式前端框架。
+ React
+ React hocks 生命周期
+ React Redux
+ React Native

Vue

Vue目前最活跃的前端框架，渐进式前端框架。

Vue 插件

• vue-router
• vuex
• axios

---

浏览器缓存

• Cookie
• localStorage
• sessionStorage
• IndexDB

---

自动化构建工具

• Webpack
• Gulp
• Grunt

---

主流浏览器

主流浏览器及其内核，下图是来自statcounter统计 2018/11 ～ 2019/11 的世界浏览器市场份额占比。除图中所示之外，当然还有大家熟知的IE和Edge，分别占比1.66%，2.11%。

浏览器市场份额.png

浏览器	内核	下载地址
Chrome	Blink / prev. WebKit (Chrome)	www.google.cn/intl/zh-CN/chrome/
Safari	WebKit (Safari)	www.apple.com.cn/cn/safari/
Firefox	Gecko	www.firefox.com.cn/
Opera	Blink / prev. Presto (Opera)	www.opera.com/zh-cn/download
Edge	EdgeHTML	microsoft-edge
IE	Trident	internet-explorer-downloads

• 组成架构
  参考
  

  image.png

• 浏览器渲染过程

  
  
  浏览器渲染过程.png

工作原理

EvenLoop

UI

PS(photoshop)

切图

配色

简单页面UI修改

代码管理

Git

管理平台: gitlab、github