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的兼容性的问题，需要加上浏览器前缀
/* transform */ transform:r rotate(45deg); -moz-transform: rotate(45deg); /*Firefox*/ -webkit-transform: rotate(45deg); /*safari chrome*/ -o-transform: rotate(45deg); /*opera*/ -ms-transform: rotate(45deg); /*IE/Edge*/手机的浏览器是基于什么内核的呢？
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: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
- 便于开发和维护
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>前端培训</title> </head> <body> <article> <header> <h1>前端培训</h1> <p><time pubdate datetime="2011-03-15"></time></p> </header> <p>17级种子班</p> </article> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 你的浏览器不支持 video 标签。 </video> </body> </html>新特性
- 新增语义化元素与表单控件
- 用于媒介回放的 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因此而诞生。
链接：https://www.jianshu.com/p/332c15fd7c7d
JS一些用法
对HTML流进行写入和改变（操作DOM）
document.write("<h1>这是一个标题</h1>"); x=document.getElementById("demo"); //查找元素 x.innerHTML="Hello JavaScript"; //改变内容 //改变CSS样式 y=document.getElementById("demo") //找到元素 y.style.color="#ff0000"; //改变样式处理事件（与用户进行交互）
<button type="button" onclick="alert('欢迎加入种子班!')">点我!</button> <!-- 事件触发函数 --> <button type="button" onclick="onChange()">点我!</button>function onChange(){ //do something }JS是面向对象的
var data = { name: '123' }; Object.defineProperty(data,'name',{ get: function(){ console.log('get方法被执行'); return '456'; }, set: function(v){ console.log('set方法被执行中, 新值为：',v); } });JS的单线程与异步
浏览器的内核是多线程的，JS是单线程的，每一个Tap是一个进程。
为什么把JS设计成为单线程？
若以多线程的方式操作这些 DOM，则可能出现操作的冲突，设计时为了简单没有引入“锁”的机制。
为什么又要实现异步？
因为 JavaScript 是单线程的，在某一时刻内只能执行特定的一个任务，并且会阻塞其它任务执行，阻塞的过程会不响应任何事件，这样会非常卡顿，导致很差的用户体验。
单线程怎么实现异步？
事件循环（Event Loop）
同步任务PK异步任务
- 首先判断JS是同步还是异步,同步就进入主线程,异步就进入event table
- 异步任务在event table中注册函数,当满足触发条件后,被推入event queue
- 同步任务进入主线程后一直执行,直到主线程空闲时,才会去event queue中查看是否有可执行的异步任务,如果有就推入主线程中
以上三步循环执行,这就是event loop
//demo 1 console.log(1) setTimeout(function(){ console.log(2) },0) console.log(3) //demo2 var counter = 0; var initTime = new Date().getTime(); var timer = setInterval(function() { if(counter===2) { clearInterval(timer); } // if(counter === 0) { // for(var i = 0; i < 1990000000; i++) { // ; // } // } console.log("第"+counter+"次：" + (new Date().getTime() - initTime) + " ms"); counter++; },1000);
