哈喽大家好,又见面了!好久没写东西了,今天开始每天更新一点前端基础,帮小白快速进入这个行业,增加一份技能、增长拿饭碗的能力!
一个页面的组成包括:
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)到WebApp,再到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
游戏开发领域
……