17级种子班前端培训
目录
- 浏览器的分类、内核、引擎
- 前端基础术语介绍
- 前端发展过程(历史、现在、将来)
- HTML5(语法、标签、语义化)
- CSS3(盒模型、布局、兼容性)
- JS基础
前端和后台
- 前端:针对浏览器的开发,代码在浏览器运行
- 后端:针对服务器的开发,代码在服务器运行
浏览器
目前主流浏览器有:Mozilla,Opera,Safari,Chrome,IE/Edge
1994年第一个浏览器是网景通信公司推出了代号为“网景导航者”的网景浏览器1.0,之后由于与微软IE的竞争关系开源代码,最后演化成为Mozilla浏览器
2008年Chrome出现,界面简洁、加载快速、数据安全,动摇了基本无更新的IE,之后IE开始频繁更新,到2013年IE11之后被微软弃用(22W行代码),推出Edge
Google创建了一个开源浏览器引擎Chromium项目,使用Chromium开源代码(基于webkit内核)的浏览器有360极速浏览器、枫树浏览器、太阳花浏览器、世界之窗极速版、UC浏览器电脑版、搜狗高速浏览器和qq浏览器等。
渲染引擎&JS引擎
渲染引擎(Rendering Engine),渲染引擎是大家说的浏览器内核
JS引擎
网页渲染的过程
- 用户输入url
- 获取相应对应的资源
- 渲染引擎调用资源加载器加载相应资源
- HTML解析器生成DOM树
- JavaScript代码由JavaScript引擎处理
- CSS解析出Style Rules(生成CSSOM)
- DOM树建立后根据CSS样式进行构建内部绘图模型,生成RenderObject树
- 根据网页层次结构构建RenderLayer树,同时构建虚拟绘图上下文
- 依赖2D和3D图形库渲染成图像结果呈现在浏览器中(Painting)
浏览器内核
目前的浏览器内核主要分四种:
内核|浏览器|
—|—|
Gecko|Firefox|
Presto->blink|Opera|
webkit|Safari,Chrome|
EdgeHTML|IE/Edge|
浏览器内核负责对网页语法的解释(如HTML、JavaScript)并渲染(显示)网页,决定了浏览器如何显示网页的内容以及页面的格式信息。
不同的浏览器内核有什么区别?
不同的浏览器内核对网页编写语法的解释也有不同,同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同。具体来说可能是CSS文件解析时机的不同,是否和HTML文件一起解析?
编写代码时考虑最多的地方是CSS的兼容性的问题,需要加上浏览器前缀
1 | /* transform */ |
手机的浏览器是基于什么内核的呢?
Android原生浏览器、苹果的Safari、谷歌的Chrome(Android4.0使用)都是基于Webkit开源内核开发的。
JS引擎
JS引擎也叫JS解释器,单线程执行机制
JS引擎 | 浏览器 | |
---|---|---|
SpiderMonkey(1.0-3.0)/ TraceMonkey(3.5-3.6)/ JaegerMonkey(4.0-) | Firefox | |
Linear A(4.0-6.1)/ Linear B(7.0-9.2)/ Futhark(9.5-10.2)/ Carakan(10.5-) | Opera | |
JScript(IE3.0-IE8.0) / Chakra | IE / Edge | |
Nitro(4-) | Safari | |
V8 | Chrome |
V8引擎在性能上的表现最为突出,第一个版本随着Chrome的第一版发布,用C++编写
- 把js代码转换为高效的机器码
- 优化就隐藏类
- 内联缓存
- 垃圾回收机制——渐进式标记
前端的术语介绍
HTML、CSS、JS
W3C、ECMA
DOM、渲染树、Vdom、SPA、TypeScript、JSX、webSocket
XmlHttpRequest、Ajax、Router
commonjs、npm、webpack、babel、SASS、LESS
jQuery、Angular、Vue、React、Flutter、vuex、rudex
XSS、CSRF
前端发展过程
Web 1.0 时代(前后端不分离,静态网页)
后端采用MVC模式开发,前端只是后端MVC模式中的V
perl、php
Web 2.0 时代(前后端分离,动态网页)
前端可以获得数据,处理数据的需求导致前端MVC,MVVM框架的诞生
Ajax(2005年)
Web 1.0 时代到Web 2.0 时代的改变是由于 Ajax 诞生,对XmlHttpRequest等技术的包装,被Google宣传之后成为异步请求数据的web开发的标杆,对于改善用户的体验和页面性能很有帮助。
Node.js(2009年)
让前端可以快速用js写server,促进了前端的开发模式向传统编程语言靠近(工程化).
nodejs流行以后,基于commonjs的模块及npm的包部署和依赖管理成为主流(类似java的maven体系),并诞生了多种基于nodejs开发的cli工具辅助前端开发(如grunt、gulp),npm目前是全球最大的包管理仓库,并且成为前端项目的包依赖管理事实标准。而webpack的出现,又使得前端代码的部署更加简便,让前端可以以类似java jar包的形式发布应用(bundle),而不管项目中是何种类型的资源。
React(2015年)
让组件化以及函数式编程的观念深入人心。
- vdom虚拟节点
- UI是一个函数
react有一个重要的理念非常超前,即UI是一个函数(类),函数输入一个state,一定返回确定的视图,在此之前,大部分框架和库,都会把UI分离成一个html片段(通常支持模板写法以渲染数据),一个为该html片段绑定事件的js,尽管这样比较好理解,但是react对UI这种抽象却反映了UI的实际本质,并且这种函数式理念,在后面可以看到,将与faas及serverless技术产生美妙的碰撞。
serverless(无服务器架构)
由开发者实现的服务端逻辑运行在无状态的计算容器中,它由事件触发, 完全被第三方管理,其业务层面的状态则被开发者使用的数据库和存储资源所记录。
15年前端开始推广使用nodejs来部署应用,本意是更多的前端可以渗入后台的逻辑,但是server服务的长期运行会暴露很多问题,比如接口很慢,进程core,cpu飙升,内存泄漏等,另外负载均衡、扩缩容,高并低延等知识,大部分前端都是没有这些经验的
而serverless理念及相关技术,将使得开发人员不再需要关心应用及机器的问题,甚至连流量能不能撑住也不用关心
云服务,docker
HTML5
2014年,W3C 和 WHATWG发表最新的版本HTML5
语义化
- 代码结构: 使页面没有css的情况下,也能够呈现出很好的内容结构
- 有利于SEO: 爬虫依赖标签来确定关键字的权重,因此可以和搜索引擎建立良好的沟通,帮助爬虫抓取更多的有效信息
- 便于开发和维护
1 |
|
新特性
- 新增语义化元素与表单控件
- 用于媒介回放的 video 和 audio 元素
- 用于绘画的canvas:HTML动画
- 离线缓存
CSS3
W3C 制定标准,分模块,大部分模块标准化的 level 已经超过 3,所以被称作CSS3
行内元素与块状元素
盒模型
每个盒子都有:margin border padding element四个属性;
每个属性都包括四个部分:上、右、下、左;这四部分可同时设置,也可分别设置。
盒子的实际占位宽度=(margin-left)+(border-left)+(padding-left)+content+(padding-right)+(border-right)+(margin-right);
盒子的实际宽度=(border-left)+(padding-left)+content+(padding-right)+(border-right);
两种盒模型:box-sizing:border-box/content-box
布局
文档流布局、浮动布局、定位布局、flex布局(弹性布局)、网格布局、圣杯布局等
兼容性
对不同浏览器内核的兼容性
CSS动画
JS基础
1995年12月,Javascript诞生,次年11月,提交给国际标准化组织ECMA,1997年,ECMA发布第一版的标准文件,2015年6月,ECMAScript 6正式发布(ES6),并且更名为“ECMAScript 2015”,目前最新版本是ECMAScript 2020
JavaScript 是脚本语言
编译型语言和解释型语言的区别?
c++是编译型语言,在程序执行之前必须进行专门的编译过程,在生成本地代码的过程中,变量的地址和类型已经确定,运行本地代码时利用数组和位移就可以存取变量和方法的地址,不需要再进行额外的查找,几个机器指令即可完成,节省了确定类型和地址的时间,执行效率高
JavaScript是解释行语言,支持动态类型,弱类型,在程序运行的时候才进行编译,而编译前需要确定变量的类型,效率比较低,对不同系统平台有较大的兼容性(跨平台性好),需要快速地执行和解析JavaScript脚本来提高性能,V8因此而诞生。
JS一些用法
对HTML流进行写入和改变(操作DOM)
1 | document.write("<h1>这是一个标题</h1>"); |
处理事件(与用户进行交互)
1 | <button type="button" onclick="alert('欢迎加入种子班!')">点我!</button> |
1 | function onChange(){ |
JS是面向对象的
1 | var data = { |
JS的单线程与异步
浏览器的内核是多线程的,JS是单线程的,每一个Tap是一个进程。
为什么把JS设计成为单线程?
若以多线程的方式操作这些 DOM,则可能出现操作的冲突,设计时为了简单没有引入“锁”的机制。
为什么又要实现异步?
因为 JavaScript 是单线程的,在某一时刻内只能执行特定的一个任务,并且会阻塞其它任务执行,阻塞的过程会不响应任何事件,这样会非常卡顿,导致很差的用户体验。
单线程怎么实现异步?
事件循环(Event Loop)
同步任务PK异步任务
- 首先判断JS是同步还是异步,同步就进入主线程,异步就进入event table
- 异步任务在event table中注册函数,当满足触发条件后,被推入event queue
- 同步任务进入主线程后一直执行,直到主线程空闲时,才会去event queue中查看是否有可执行的异步任务,如果有就推入主线程中
以上三步循环执行,这就是event loop
1 | //demo 1 |