哈喽大家好，又见面了！好久没写东西了，今天开始每天更新一点前端基础，帮小白快速进入这个行业，增加一份技能、增长拿饭碗的能力！
一个页面的组成包括：
HTML（5）：搭建DOM结构
CSS（3）：样式处理及动画处理
JavaScript（JS）：人机交互效果、数据交互和渲染等
PC端或者移动端都是如此处理的
前端技术的发展历史
1994年，W3C（万维网）成立，制定HTML/CSS标准，被称为“前端历史的起点”「静态页面」
2011年 CSS3
2014年 HTML5（移动端的崛起）
1997年6月，ECMA（欧洲计算机联合制造会）统一了JavaScript标准 “ECMA-262” 「人机交互/数据交互」
ECMAScript（ES）：代指定的就是JS标准
ES3/ES5：JS老语法规范 1999年 ->ES3 2011->ES5
ES6（ES2015）~ES2010：JS新语法规范 2015->ES2015（ES6前身），每年6月份都会在ES6这个语法版本基础上不断的“修补牛蹄子”
浏览器的发展史
1995年，网景公司推出的Navigator浏览器
1996年，微软推出的Internet Explore浏览器（IE浏览器）
2002年，IE浏览器完胜，占据96%的市场份额（一家独大，浏览器没有完全按照W3C/ECMA的标准去解析HTML/CSS/JS代码，导致了IE中有很多的兼容问题，IE6~8）
2004年，Firefox火狐浏览器诞生
2008年，Chrome谷歌浏览器（webkit内核，特色：V8引擎处理性能优越，缺点吃内存）
这个年代诞生了很多浏览器：
自主技术研发的：欧朋浏览器（Opera）
基于别人技术套一层壳子的（早期套的IE壳子的）：国产浏览器（360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器、世界之窗、傲游、腾讯TT……）
「浏览器内核/渲染引擎」
内核：按照W3C/ECMA等标准实现HTML/CSS/JS代码解析的以及绘制页面的
IE内核： Trident（IE6~11）
Microsoft edge：chromium
Firefox火狐：Gecko
Opear：Presto >=v14时，也采用了Webkit内核
Safari：Webkit（V8）
Chrome谷歌：Webkit（V8）/Blink
2014年，随着HTML5的发布，移动端（WebApp）的崛起
IOS操作系统：内置浏览器Safari：Webkit内核
安卓操作系统：谷歌研发的操作系统，Webkit内核
伴随着移动端的崛起，Webkit成为最主要的内核
同时，国产浏览器再套壳子，套的也是Webkit内核（极速版本）、但是兼容版本还是Trident内核
移动端浏览器基本上都是Webkit内核：UC、QQ浏览器、百度浏览器……
现在的浏览器都是以Webkit内核（V8引擎）为主
项目的技术架构发展
从服务器渲染到客户端渲染，从前后端不分离，到前后端分离（2014年）
当下的主流趋势，大部分项目是客户端渲染（前后端分离），个别项目还是服务器渲染（为了SEO优化）;尤其是移动端开发;
前端侧重于页面、样式、交互、数据渲染等方面
后台侧重于操作数据库和一些业务逻辑的处理（对数据结构和算法要求很高）
对于web服务器部署两者都可以做，很多公司还是后台去做
ajax/Fetch/跨域……
数据绑定
……
从NativeApp（源生App）到ＷebＡpp，再到Hybrid混合App
NativeApp（源生App）
IOS系统：object-c
安卓系统：java-native
源生app（NativAapp）优势：
直接运行在操作系统当中
性能更加流畅
调取手机软硬件信息（授权）
实现更多复杂的功能
源生APP（NativeApp）劣势：
不能跨平台开发
一款App需要IOS团队和安卓团队才能搞定，增加了企业成本
两款App不能及时同步
内容板块升级（App重新发版）
需要用户自主安装
导致信息不能及时同步
……
WebApp（HTML5页面）（目前移动端主流开发方式）
用到的是HTML5+CSS3+JavaScript
特点：直接在手机的浏览器中输入网址，HTML5页面运行在浏览器当中，浏览器运行在操作系统当中；
WebApp优势：
可以跨平台开发
不论IOS/安卓系统，都是前端开发的技术内容，一套代码适配各种端（都是Webkit内核），节约企业成本；
每一次访问都是重新预览页面（重新从服务器获取页面信息），这样，只要服务器对页面板块内容更新了，客户端看到的都是最新的！
WebApp劣势：
运行在浏览器端，而不是运行在操作系统中
性能体验不如NativeApp
不能直接调取手机的软硬件信息，需要调取信息时，则需要浏览器的支持。
很多复杂的功能实现不了，或者实现之后，性能体验也差一些
……
Hybrid混合App（目前移动端主流开发方式1）
把NativeApp和WebApp组合到一起
NativeApp => 搭建App壳子以及实现一些特殊功能，例如：调取手机软硬件的功能、追求极致体验的……
WebApp => 主要是呈现的内容
原理：WebApp运行在NativeApp提供的webview当中
WebApp和NativeApp通信
JSBridge（适用于IOS和安卓）
伪URL协议（仅适用于IOS）
其他移动端产品形态：
小程序开发（技术形态不是Hybrid，单独的技术形态）「 前端独立完成」
纯NativeApp开发，现在也不一定基于IOS/安卓完成了「 前端也可以做」
uni-app 语法类似vue框架
react-native 语法类似react框架
flutter Dart语言
……
基于前端框架开发，最后生成NativeApp。
从前端走向全栈
技术栈：
HTML/CSS3/JS/ajax
Webpack工程化
vue/react框架开发 antd/element-ui/vant/cube……
工程化的崛起
技术栈：
语言 java/php/python/go/C#……Node.js
数据库 mysql/sqlserver/oracle…… Mongodb
JS即可以完成客户端开发，也可以完成服务器端开发 =>“全栈语言”
Node.js作为主后台开发
Node.js作为中间层开发
未来探索
webGL -> VR/VI
游戏开发领域
……