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

    标准盒模型 content-box

    布局

    文档流布局、浮动布局、定位布局、flex布局(弹性布局)、网格布局、圣杯布局等

    常见布局方式

    兼容性

    对不同浏览器内核的兼容性

    CSS动画

    太阳系

    颜色变化

    方块地图

    H5动画

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

 

Copyright © 2018 bbs.dian.org.cn All rights reserved.

Looks like your connection to Dian was lost, please wait while we try to reconnect.