sin7777(willa)

前端培训

作者:Adiana 发布于: 2019-06-25

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）

网页渲染的过程

浏览器内核

浏览器内核的家谱

浏览器内核负责对网页语法的解释（如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

标准盒模型 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）

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>

1
2
3

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);