前端问题总结

前端问题总结

 

 

js重难点

Javascript是弱类型语言，单线程

淡入淡出轮播图时，在变化前吧当前的下标记录下来

 

Https的默认端口号是443

http的默认端口号是80/8080

 

1.多行文本省略号的设置

span{

      width: 520px;

   word-break: break-all;

   text-overflow: ellipsis;

   display: -webkit-box;

   -webkit-box-orient: vertical;

   -webkit-line-clamp: 2;

   overflow: hidden;

}

 

2. 前端开发
3. --save  -dev  开发依赖

ES5新增的方法

 

1.let定义的变量只在代码块中有效（块级作用域）

2.let声明的变量不会提前(前置)

3.在同一个作用域中不能声明同名的变量

一、let和var的区别

1、let声明的变量是块级作用域（所在花括号里），var是函数作用域和全局作用域

     注意：let是可以定义全局变量，局部变量，块级作用域的变量。（和写代码的位置有关）

2、let声明的变量不会声明提升，var会声明提升

3、从代码的写法上，let不能声明同名的变量，var可以。

4.用const来修饰一个变量，就意味着该变量里的数据只能被访问，而不能被修改，也就是意味着const“只读”（readonly）

5.const修饰的是直接指向(修饰)的内存

     引用类型有两块内存区域

     引用类型代表的是保存地址的内存区域，数组元素表示的是数据

二、=>函数

      x=>x*5相当于function（x）{ return x*5 }

      调用:

      let temp=(x=>x*5)(8)；

      console.log(temp);

 

三、什么是ajax和json，它们的优缺点？

JSON.parse();   将字符串转换为json对象

JSON.stringify();    将json转换为字符串

 

四、ajax

全称：Asynchronous Javascript And XML    异步传输+js+xml。

注：所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。

 

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象

let xhr = new XMLHttpRequest();

 

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息

xhr.open("get","news.php?pageIndex="+pageIndex,true);

 

(3)设置响应HTTP请求状态变化的函数

xhr.onreadystatechange=function(){};

 

(4)发送HTTP请求

xhr.send();

(5)获取异步调用返回的数据

 

(6)使用JavaScript和DOM实现局部刷新

注：如果是post方式，必须设置请求头        

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

 

五、Js面向对象的几种方式

（1）、对象的字面量 var obj = {}

（2）、创建实例对象 var obj = new Object();

（3）、构造函数模式 function fn(){} , new fn();

（4）、工厂模式：用一个函数，通过传递参数返回对象。function fn(params){var obj =new Object();obj.params = params; return obj;},fn(params);

（5）、原型模式：function clock(hour){} fn.prototype.hour = 0; new clock();

首先，每个函数都有一个prototype(原型)属性，这个指针指向的就是clock.prototype对象。而这个原型对象在默认的时候有一个属性constructor，指向clock，这个属性可读可写。而当我们在实例化一个对象的时候，实例newClock除了具有构造函数定义的属性和方法外（注意，只是构造函数中的）,还有一个指向构造函数的原型的指针，ECMAScript管他叫[[prototype]]，这样实例化对象的时候，原型对象的方法并没有在某个具体的实例中，因为原型没有被实例

 

六、Html5中本地存储概念是什么，有什么优点

cookie(会话跟踪技术)是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。

cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：

    cookie数据大小不能超过4k。

    sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有期时间：

    localStorage    存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

    sessionStorage  数据在当前浏览器窗口关闭后自动删除。

    cookie          设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

七、ECMAscript6的新特性

1.增加块作用域

2.增加let const

3.解构赋值

    let [v1,[v2,v3],[v4,v5]] = [12,[23,34],[56,67],[5,6]]；

    console.log(v1);

    console.log(v2);

    console.log(v3);

    console.log(v4);

    console.log(v5);

    let {name,age} = {name:"dahuang",age:18};

    console.log(name,age)

4.函数参数扩展 （函数参数可以使用默认值、不定参数以及拓展参数）

5.增加class类的支持

6.增加箭头函数

7.增加模块和模块加载（ES6中开始支持原生模块化）

注：以前写的js代码，靠HTML引用需要考虑顺序问题

模块化

①就是把不同类型的功能分类放在不同的js里

 

//ES6的模块

a：定义模块（写一个js模块），用export导出（导出的对象和函数等）才能被外部使用

b：引用模块，import

8.math, number, string, array, object增加新的API

 

七、面向对象是设计思想

1.面向对象的三大特性：封装、继承、多态

 

辩证法：

1.类是摸板、没有类就没有对象

2.对象是依据类而产生、对象的属性的值的改变，引起对象的改变，但是影响不到类（非生物界）

ooA：面向对象的分析

ooD：面向对象的设计

ooP：面向对象的编程

 

1. javascript的typeof返回哪些数据类型.

答案：string,boolean,number,undefined,function,object

 

2. 例举3种强制类型转换和2种隐式类型转换?

答案：强制（parseInt,parseFloat,number）

隐式（==  ===）

 

3. split() join() 的区别

答案：前者是将字符串切割成数组的形式，后者是将数组转换成字符串

 

4. 数组方法pop() push() unshift() shift()

答案：push()尾部添加 pop()尾部删除

unshift()头部添加 shift()头部删除

 

5. IE和标准下有哪些兼容性的写法

答案：

var ev = ev || window.event

 

document.documentElement.clientWidth || document.body.clientWidth

Var target = ev.srcElement||ev.target

 

6. ajax请求的时候get 和post方式的区别

 

答案：

一个在url后面 ，一个放在虚拟载体里面

get有大小限制(只能提交少量参数)

安全问题

应用不同 ，请求数据和提交数据

 

7. call和apply的区别

答案：

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

   call与aplly的异同：

1,第一个参数this都一样,指当前对象

2,第二个参数不一样：call的是一个个的参数列表；apply的是一个数组（arguments也可以）

call和apply能够调用函数，也能够改变函数内部的this

 

call和apply继承的缺点

只能继承父类的构造函数

实例化子对象时，属于父对象的属性，没法传值。

 

8. ajax请求时，如何解析json数据

答案：使用JSON.parse

 

9. 事件委托是什么

答案: 利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

注：Jquery中的on，bind，live，delegate的区别：

    bind:能够完成基本的绑定事件处理函数的功能，比起click(),mouseover()等的好处是，可以一次绑定多种事件类型

    live:有事件委托，把事件处理函数委托给DOM根元素，效率比delegate低，所以新版jQuery去掉了live。

    delegate:有事件委托，把事件处理函数委托给指定的祖先元素，delegate比live的执行效率高，灵活

    on:涵盖了以上所有的功能(基本事件绑定和事件委托)。

 

10. 闭包是什么，有什么特性，对页面有什么影响

答案：闭包就是能够读取其他函数内部变量的函数,使得函数不被GC回收，如果过多使用闭包，容易导致内存泄露

 

11. 如何阻止事件冒泡

答案：ie:阻止冒泡ev.cancelBubble = true;非IE ev.stopPropagation();  

 

12. 如何阻止默认事件

答案：(1)return false；(2) ev.preventDefault();

 

八、CDN加速服务

CDN的全称是Content Delivery Network，即内容分发网络。

CDN加速主要是加速静态资源，如网站上面上传的图片、媒体，以及引入的一些Js、css等文件。

CDN加速需要依靠各个网络节点，例如100台CDN服务器分布在全国范围，从上海访问，会从最近的节点返回资源，这是核心。

CDN服务器通过缓存或者主动抓取主服务器的内容来实现资源储备。

 

九、localStorage

     HTML5的对象(window对象的属性) 

     这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

1）纯粹的浏览器端保存数据不会在每次请求时都带着。节约了网络流量

2）localStorage提供了现成的函数来保存和获取数据

3）localStorage没有失效日期，即永久保存

localStorage和cookie的对比

//保存数据

//localStorage.setItem(键，值);

//获取数据

//localStorage.getItem(键);

//删除数据

//localStorage.removeItem(键);

 

cookie的作用

1)、cookie是浏览器端本地存储数据（设置失效时间后，是保存在硬盘里的）

2)、cookie和后端的session结合起来，识别用户的身份（客户端的身份），服务器端会产生一个sessionId,来唯一区分一个客户端，sessionId在每次请求和响应时都会带着，包括带着所有cookie保存的数据

注：http协议是无状态的

3）cookie需要服务器的支持（Google浏览器）

//保存

$("btnSave).onclick = function(){

    localStorage.setItem('username','jzm');

}

//获取

$("btnGet).onclick = function(){

    console.log(localStorage.setItem('username'));

}

//删除

$("btnRemove").onclick = function(){

    localStorage.RemoveItem('username','jzm');

}

localStorage的局限

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

5、localStorage不能被爬虫抓取到

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

十、设计模式

总体原则：开闭原则(对扩展开放，对修改关闭)

a.单例模式

某个类只允许创建一个实例，这就是单例模式

var Singleton = (function(){ 

      function Map(width,height){   

           this.width = width;  

           this.height = height;  

       }  

       var instance;  

       return {  

           getInstance:function(width,height){    

               if(instance==undefined){     

                     instance = new Map(width,height);   

               }else{ 

                     instance.width = width;     

                     instance.height = height;   

               }    return instance; 

            }   

       }

 })();

 var t1 = Singleton.getInstance(100,200);

 console.log(t1.width,t1.height);//100,200

 var t2 = Singleton.getInstance(250,350);

 console.log(t1.width,t1.height);//250,350

 console.log(t2.width,t2.height);//250,350

 //单例模式的t1和t2指向同一个内存空间

注：单例模式的优点

1.某些类创建比较频繁，对于一些大型的对象，这是一笔很大的系统开销 

2、省去了new操作符，降低了系统内存的使用频率，减轻GC压力。

3、有些类如交易所的核心交易引擎，控制着交易流程，如果该类可以创建 多个的话，系统完全乱了

b.代理模式

//人：需要有代理可以看门

function Person(name,delegate){

    this.name = name;//人的姓名

    //this.delegate = delegate;//人的代理

    this.delegate = null;

}

//绑定代理

Person.prototype.setDelegate= function(){

    this.delegate = delegate;//让人的代理开门

}

//人需要看门

Person.prototype.lookDoor = function(){

    this.delegate.lookDoor();//让人的代理开门

}

//狗：可以作为人的代理看门

function Dog(name){

    this.name= name;

}

Dog.prototype.lookDoor = function(){

    alert(this.name+"在聚精会神地盯着大门口");

}

//var p = new Person("老王",new Dog("小黑"));

//p.lookDoor();

var p = new Person("老王");

var d = new Dog("小黑");

 

p.setDelegate(d);

p.lookDoor();

c.结构模式 --

 

 

f:观察者模式

观察者模式又叫做发布订阅模式，他定义了一种一对多的关系

观察者模式的好处：

1.支持简单的广播通信

 

g:策略模式

十一.IE和DOM事件流的区别

1.执行顺序不一样、

2.参数不一样

3.事件加不加on

4.this指向问题

十二：用户输入按下www.baidu.com，并按下回车的时候，浏览器做了哪些事情？

 

www.baidu.com------------------------>找到对应的服务器 (域名的解析)----------------------->TCP的三次握手----------------------------->找到资源路径----------------->返回对象的页面-------------------------------->页面进行解析（html,css,img）------------------->tcp的四次挥手-------------->www.baidu.com

 

十三、图片的懒加载和预加载

 

懒加载也叫延迟加载： 延迟加载图片或符合某些条件时才加载某些图片。

预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

十四、伪数组和标准数组

 

伪数组是一个含有length属性的json对象，

它是按照索引的方式存储数据，

它并不具有数组的一些方法，只能能通过Array.prototype.slice转换为真正的数组，并且带有length属性的对象。

十五、md5和sha256的加密算法

md5能加密也能解密

sha256只能加密不能解密

十六、postman：接口的校验

请求方式有哪些？  

get 

post 

delete 

put 

head 

connect 

options 

trace

十七、token

目的：做用户的验证

 

十八、generator

1.普通函数使用function声明，而生成器函数使用function*声明。 

2.在生成器函数内部，有一种类似return的语法：关键字yield。二者的区别是，普通 函数只可以return一次，而生成器函数可以yield多次（当然也可以只yield一次）。 在生成器的执行过程中，遇到yield表达式立即暂停，后续可恢复执行状态。 

3.生成器函数的返回值是 Iterator（迭代器），注意，调用生成器函数，并不会执行函数的代码，而是会返回一个Iterator（迭代器）。 

4.生成器函数内部代码的真正执行是从Iterator的next()方法开始的，每调用一次next 方法，函数的代码会运行到下一个yield之前或者结束

十九、undefined和null

  undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

  null表示”没有对象”，即该处不应该有值。

二十、原型继承

 

二十一、window.onload和ready的区别

 (1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。

 (2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。

二十二、prototype

    我们创建的每一个函数都有一个prototype属性，这个属性是一个指向对象的指针.

    构建对象中有一种模式叫做原型模式，意思是将对象实例所不可共享的属性及方法定义在构造函数中，而将可共享的属性及方法放在原型对象中，也就是prototype指向的对象中。

 

二十三、什么是函数的防抖和节流

函数防抖

    定义：多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行。

    原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。

函数节流

    定义：触发函数事件后，短时间间隔内无法连续调用，只有上一次函数执行后，过了规定的时间间隔，才能进行下一次的函数调用。

    原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。

二十四、数组的方法(ES5,ES6)

foreach 

map 

filter

reduce

some

every

二十五、严格模式的限制

变量必须声明后再使用

函数的参数不能有同名属性，否则报错

不能使用with语句

不能对只读属性赋值，否则报错

不能使用前缀0表示八进制数，否则报错

不能删除不可删除的属性，否则报错

二十六、map和forEach的区别

forEach ------  参数1:当前正在遍历的元素

                        参数2:当前正在遍历元素的索引

                        参数3：当前正在遍历的数组

map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。map方法不会对空数组进行检测，map方法不会改变原始数组

二十七、this和$(this)的区别

$(this) 返回一个 jQuery 对象，你可以对它调用多个 jQuery 方法，比如用 text() 获取文本，用val() 获取值等等

而 this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法，直到它被 $() 函数包裹，例如 $(this)。

二十八、处理异步的方法

callback

promise

事件监听

发布订阅模式

二十九、模块化

     模块化就是为了减少系统耦合度，提高高内聚，减少资源循环依赖，增强系统框架设计。让开发者便于维护,同时也让逻辑相同的部分可复用

模块化开发：针对js、css，以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、api暴露、按需加载与执行、安全合并等问题，css方面解决依赖管理、组件内部样式管理等问题。

三十、 new操作符干了哪些事?

  1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

  2、属性和方法被加入到 this 引用的对象中。

  3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

三十一、promise

Promise 对象有以下两个特点

1.对象的状态不受外界影响。

2.一旦状态改变，就不会再变，任何时候都可以得到这个结果.      

      Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected

3.通过new来调用

promise，就是一个对象，用来传递异步操作的消息

Promise 有四种状态

pending: 初始状态, 非fulfilled 或 rejected.

fulfilled: 成功的操作.

rejected: 失败的操作.

三十二、判断一个数据类型？

instanceOf()

typeOf()

Object.prototype.toString.call

三十三、创建单例模式的方法

三十四、什么是跨域？跨域请求资源的方法有哪些？

    1、什么是跨域？

由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。存在跨域的情况：

网络协议不同，如http协议访问https协议。

端口不同，如80端口访问8080端口。

域名不同，如qianduanblog.com访问baidu.com。

子域名不同，如abc.qianduanblog.com访问def.qianduanblog.com。

域名和域名对应ip,如www.a.com访问20.205.28.90.

2、跨域请求资源的方法：

(1)、porxy代理

定义和用法：proxy代理用于将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。

实现方法：通过nginx代理；

注意点：1、如果你代理的是https协议的请求，那么你的proxy首先需要信任该证书（尤其是自定义证书）或者忽略证书检查，否则你的请求无法成功。

(2)、CORS 【Cross-Origin Resource Sharing】

定义和用法：是现代浏览器支持跨域资源请求的一种最常用的方式。

使用方法：一般需要后端人员在处理请求数据的时候，添加允许跨域的相关操作。如下：

res.writeHead(200, {

    "Content-Type": "text/html; charset=UTF-8",

    "Access-Control-Allow-Origin":'http://localhost',

    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',

    'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'

});

(3)、jsonp

定义和用法：通过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。

特点：通过情况下，通过动态创建script来读取他域的动态资源，获取的数据一般为json格式。 

实例如下：

<script>

    function testjsonp(data) {

       console.log(data.name); // 获取返回的结果

    }

</script>

<script>

    var _script = document.createElement('script');

    _script.type = "text/javascript";

    _script.src = "http://localhost:8888/jsonp?callback=testjsonp";

    document.head.appendChild(_script);

</script>

缺点：

　　1、这种方式无法发送post请求（这里）

　　2、另外要确定jsonp的请求是否失败并不容易，大多数框架的实现都是结合超时时间来判定。

三十五、深拷贝和浅拷贝

三十六、content-type的类型

text/plain   文本类型

text/css    css类型

text/html    HTML类型

image/png  gif jpg    图片类型

application/x-javascript    js类型

application/json    json类型

三十七、缓存

三十八、gulp的作用

为了规范前端发的流程，实现前后端分离、模块化开发、版本的控制，文件合并与压缩、mock数据等功能的一个前端自动化构建工具。

gulp是通过task对整个开发过程中进行构建

 

三十九、路由

根据用户请求的路径返回不同的页面或者数据

四十、watch和computed的区别 

    

四十一、GPU

 

四十二、浏览器的三种事件模型 

1.DOM0事件模型（原始事件模型）

通过元素属性来绑定事件

<button onclick="click()">点我</button>

先获取页面元素，然后以赋值的形式来绑定事件

const btn = document.getElementById('btn')

btn.onclick = function(){

//do something

}

//解除事件

btn.onclick = null

 

2.DOM2事件模型

    dom2新增冒泡和捕获的概念，并且支持一个元素节点绑定多个事件。

    事件捕获和事件冒泡

    事件捕获阶段：事件从 document 向下传播到目标元素，依次检查所有节点是否绑定了监听事件，如果有则执行。

    事件处理阶段：事件在达到目标元素时，触发监听事件。

    事件冒泡阶段：事件从目标元素冒泡到 document，并且一次检查各个节点是否绑定了监听函数，如果有则执行

     addEventListener有三个参数 事件名称、事件回调、捕获/冒泡

btn.addEventListener('click',function(){

    console.log('btn')

},true)

box.addEventListener('click',function(){

    console.log('box')

},false)

 

3.IE事件模型

      IE事件只支持冒泡，所以事件流有两个阶段

    1.事件处理阶段：事件在达到目标元素时，触发监听事件。

     2. 事件冒泡阶段：事件从目标元素冒泡到 document，并且一次检查各个节点是否绑定了监听函数，如果有则执行

 

// 绑定事件

el.attachEvent(eventType, handler)

// 移除事件

el.detachEvent(eventType, handler)

 

四十三、内存泄露

内存溢出 out of memory，是指程序在申请内存时，没有足够的内存空间供其使用，出现out of memory；比如申请了一个integer,但给它存了long才能存下的数，那就是内存溢出。

内存溢出的解决方案：

第一步，修改JVM启动参数，直接增加内存。(-Xms，-Xmx参数一定不要忘记加。)

第二步，检查错误日志，查看“OutOfMemory”错误前是否有其它异常或错误。

第三步，对代码进行走查和分析，找出可能发生内存溢出的位置。

内存泄露 memory leak，是指程序在申请内存后，无法释放已申请的内存空间，一次内存泄露危害可以忽略，但内存泄露堆积后果很严重，无论多少内存,迟早会被占光。

四十四、UML

四十五、fetch和axios

 

四十六、promise、generator

Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及该异步操作的结果值。

一个 Promise有以下几种状态:

pending: 初始状态，既不是成功，也不是失败状态。

fulfilled: 意味着操作成功完成。

rejected: 意味着操作失败。

 

Promise.reject(reason)

返回一个状态为失败的Promise对象，并将给定的失败信息传递给对应的处理方法

 

Promise.resolve(value)

返回一个状态由给定value决定的Promise对象。如果该值是thenable(即，带有then方法的对象)，返回的Promise对象的最终状态由then方法执行决定；否则的话(该value为空，基本类型或者不带then方法的对象),返回的Promise对象状态为fulfilled，并且将该value传递给对应的then方法。通常而言，如果你不知道一个值是否是Promise对象，使用Promise.resolve(value) 来返回一个Promise对象,这样就能将该value以Promise对象形式使用。

 

     

Generator的声明方式function* 函数名，一般可以在函数内看到yield关键字

 

 

四十八、arguments

arguments 是一个对应于传递给函数的参数的类数组对象。

arguments对象不是一个 Array 。它类似于Array，但除了length属性和索引元素之外没有任何Array属性。例如，它没有 pop 方法。但是它可以被转换为一个真正的Array。

 

四十九、作用域链

作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的。

五十、defer和async

    defer并行加载js文件，会按照页面上script标签的顺序执行

    async并行加载js文件，下载完成立即执行，不会按照页面上script标签的顺序  执行

 

五十一、项目的上线流程

1.项目开发

2.购买或者租用一台云服务器

3.购买并注册域名

4.申请域名ICP备案

5.公安网备案

6.搭建服务器环境

7.项目发布

8.运营维护

五十二、严格模式use strict为什么是一个字符串不是一个函数？

兼容下面的代码，若果是一个字符串，则在第一行会报错

五十三、jd访问m.jd会发生跨域吗？

会

解决办法

1.后端用同源策略

2.用script标签

五十四、高内聚、低耦合

五十五、diff

    五十六、什么是BFC、IFC、GFC和FFC

CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC。

FC的全称是：Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

BFC

BFC(Block Formatting Contexts)直译为"块级格式化上下文"。Block Formatting Contexts就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。如何产生BFC？

float的值不为none。

overflow的值不为visible。

position的值不为relative和static。

display的值为table-cell, table-caption, inline-block中的任何一个。

那BFC一般有什么用呢？比如常见的多栏布局，结合块级别元素浮动，里面的元素则是在一个相对隔离的环境里运行。

IFC

IFC(Inline Formatting Contexts)直译为"内联格式化上下文"，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)

IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。 同个ifc下的多个line box高度会不同。 IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。

那么IFC一般有什么用呢？

水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。

垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

GFC

GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文"，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。

那么GFC有什么用呢，和table又有什么区别呢？首先同样是一个二维的表格，但GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制。

FFC

FFC(Flex Formatting Contexts)直译为"自适应格式化上下文"，display值为flex或者inline-flex的元素将会生成自适应容器（flex container），可惜这个牛逼的属性只有谷歌和火狐支持，不过在移动端也足够了，至少safari和chrome还是OK的，毕竟这俩在移动端才是王道。

Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。

伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局。