前端面试题总结

面试题：

Part1

1.HTML+CSS中有几种布局方式？分别是什么？

三种

默认布局（静态布局）

浮动布局

定位布局

 

2.什么是盒模型？盒模型具备哪些属性？

盒模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

内容(content)、内边距(padding)、边框(border)、外边距(margin)

 

3.说出CSS中五种选择器，及其选择/定义方式：

全局选择器 定义：页面自动定义完成； 选择：*

标签选择器 定义：页面自动定义完成； 选择：标签名

类选择器   定义：class = "类名"；   选择：.类名

ID选择器   定义: id = "ID名"；      选择：#ID名

集群选择器 定义：基于已定义好的标签  选择：选择器1，选择器2

后代选择器 定义：基于已定义好的标签  选择：父级选择器 子级/后代选择器

子代选择器 定义：基于已定义好的标签  选择：父级选择器>子级选择器

兄弟选择器 定义：基于已定义好的标签  选择：选择器1+同级选择器2

伪类选择器 定义：基于已定义好的标签  选择：选择器:伪类（如hover）

属性选择器 定义：基于已定义好的标签  选择：[属性][属性=属性值][属性^=属性值][属性$=属性值]。。。。

 

4.绝对定位和相对定位的区别

绝对定位：页面中不占位，针对父级位置为原点定位

相对定位：页面中占位，针对自己原始位置为原点定位

 

5.什么是变量？

变量是程序在内存中开辟的一个空间

 

 

7.面向对象的三大特性是什么？具体说明分别是什么，在JS中是如何表现的？

封装 创建一个对象，集中存储一个事物的属性和功能

继承 父对象中的成员，子对象无需重复创建，就可直接使用

多态 同一事物，在不同情况下，表现出不同的状态

 

9.什么是作用域链？有什么特点？

由各级函数向上访问局部变量形成的链式关系

只允许从内向外访问，不允许从外向内访问（向上访问）

 

10.call和apply以及bind的区别

call 强行调用函数并替换this 每个参数必须单独传入

apply 强行调用函数并替换this 将所有参数包装成一个数组传入

bind 创建一个新函数并绑定现有函数 在新函数中绑定this

 

 

11.document.write和 innerHTML的区别

document.write只能重绘整个页面

innerHTML可以重绘页面的一部分

 

12.JavaScript有哪几种数据类型？

简单，Number，Boolean，String，Null，Undefined

复合，Object，Array，Function

 

13.JavaScript中有哪些内置对象？

String

Number

Boolean

Array

Date

Math

Function

Error

Object

Global

 

 

15.如何遍历关联数组？

用for in循环

 

 

17.JS中的对象可以看做是什么？

JS中对象其实就是个关联数组

 

 

18.JS数组中的栈和队列分别用什么方式实现？

从后入栈/出栈

入 push()

出 pop()

从前入栈/出栈

入 unshift()

出 shift()

队列即是将从后入栈配合从前出栈以及从前入栈从后出栈

 

19.数组中join()方法的作用是什么？

将数组中的每个元素拼接在一起转换为字符串 并定义分隔符

 

20.如何获取字符串中指定位置的字符？

str.charAt()

 

21.正则表达式中^ $分别表示什么？

^表示以XXX开头

$表示以XXX结尾

 

22.=、==与===的区别

=   赋值运算

==  判断前后的式子是否相等

=== 全等 解决undefined和null在==情况下相等的问题

 

 

24.HTML5的特点是什么？

HTML标签语义化

 

25.什么是HTML标签语义化？并说明其优点

使用结构化的标签使我们直观的认识标签和属性的作用，便于浏览器和搜索引擎解析，并提高代码的可维护性

 

 

2.说说get和post请求的区别。

1.参数形式不同；2.发送数据大小限制不同；3.在后台转码时不同，post可以简单地修改编码方式来避免乱码，get不可以。

 

3.说说事件绑定。

W3C是addEventListener，IE是attachEvent。

 

4.说说事件冒泡的机制。

事件从DOM数底层层层往上传递直至传递到DOM的根节点

 

5.HTML的几种触发都是什么?

onblur 事件会在对象失去焦点时发生。

onchange 事件会在域的内容改变时发生。

onclick 事件会在对象被点击时发生。

onfocus 事件在对象获得焦点时发生。

onkeydown 事件会在用户按下一个键盘按键时发生。

onkeypress 事件会在键盘按键被按下并释放一个键时发生。

onkeyup 事件会在键盘按键被松开时发生。

onmousedown 事件会在鼠标按键被按下时发生。

onmousemove 事件会在鼠标指针移动时发生。

onmouseout 事件会在鼠标指针移出指定的对象时发生。

onmouseup 事件会在鼠标按键被松开时发生。

 

6.innerHTML和appendChild（）之间的区别

他们都能将新元素添加到制定父元素下

appendChild可以重新layout(布局)实现实时更新的效果

 

7.核心DOM和HTMLDOM的区别

HTML DOM不会将属性当做节点看待所以无法获得属性节点，都是直接获得属性值

访问自定义属性时只能用核心DOM访问

HTMLDOM简化了一些核心DOM的操作

 

8.列出几种取随机整数的方法

Math.round(Math.random()*n);

Math.floor(Math.random()*n);

~~(Math.random()*n);

parseInt(Math.random()*n);

 

9.什么是JSON，JSON的书写格式是什么

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式

书写格式是：名称/值对  （键值对）

 

10.什么是栅格化布局

栅格化布局将一个板式视为网格，每行分为12列

 

11.如何实现响应式布局

媒体查询

将宽高设为百分比

 

12.什么是ajax，为什么要使用Ajax

AJAX是“Asynchronous JavaScript and XML”的缩写。异步请求

? 通过异步模式，提升了用户体验

? 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

? Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

 

13.AJAX请求总共有多少种CALLBACK

Ajax请求总共有八种Callback

? onSuccess

? onFailure

? onUninitialized

? onLoading

? onLoaded

? onInteractive

? onComplete

? onException

 

14.前端页面有哪三层构成，分别是什么?作用是什么?

结构层 Html 表示层 CSS 行为层 js

 

15.ajax请求时，如何解释json数据

使用eval parse 鉴于安全性考虑 使用parse更靠谱

 

16.事件委托是什么

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

 

17.undefined和null的区别

undefined 表示一个变量声明过但是未赋值 在内存中指向undefined对象

null      表示一个对象在内存中没有指向任何东西

 

18.什么是盒模型？盒模型具备哪些属性？

盒模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

内容(content)、内边距(padding)、边框(border)、外边距(margin)

 

19.HTML5新特性

表单新特性

视频/音频

Canvas

SVG

拖拽API

地理定位

Web Storage

Web Worker

Web Socket

 

20 什么是MVC

MVC是一种设计模式，模型-视图-控制器 有效的分离的前后端的开发

 

Part3

Q：ng-if 跟 ng-show/hide 的区别有哪些？

A：第一点区别是， ng-if 在后面表达式为 true 的时候才创建这个 dom 节点， ng-show 是初始时就创建了，用 display:block 和 display:none 来控制显示和不显示。

第二点区别是， ng-if 会（隐式地）产生新作用域， ng-switch 、 ng-include 等会动态创建一块界面的也是如此。这样会导致，在 ng-if 中用基本变量绑定 ng-model ，并在外层 div 中把此 model 绑定给另一个显示区域，内层改变时，外层不会同步改变，因为此时已经是两个变量了。ng-show 不存在此问题，因为它不自带一级作用域。避免这类问题出现的办法是，始终将页面中的元素绑定到对象的属性（data.x）而不是直接绑定到基本变量（x）上。

 

Q：ng-repeat迭代数组的时候，如果数组中有相同值，会有什么问题，如何解决？

A：会提示 Duplicates in a repeater are not allowed. 加 track by $index 可解决。当然，也可以 trace by 任何一个普通的值，只要能唯一性标识数组中的每一项即

可（建立 dom 和数据之间的关联）。

 

Q：ng-click 中写的表达式，能使用 JS 原生对象上的方法吗？

A：不止是 ng-click 中的表达式，只要是在页面中，都不能直接调用原生的 JS 方法，因为这些并不存在于与页面对应的 Controller 的 $scope 中。

 

Q:factory、service 和 provider 是什么关系？

A：

factory  把 service 的方法和数据放在一个对象里，并返回这个对象

service  通过构造函数方式创建 service，返回一个实例化对象

provider  创建一个可通过 config 配置的 service，$get 中返回的，就是用 factory 创建 service 的内容

从底层实现上来看，service 调用了 factory，返回其实例；factory 调用了 provider，返回其 $get 中定义的内容。factory 和 service 功能类似，只不过 factory 是普通 function，可以返回任何东西（return 的都可以被访问，所以那些私有变量怎么写，你懂的）；service 是构造器，可以不返回（绑定到 this 的都可以被访问）；provider 是加强版 factory，返回一个可配置的 factory。

 

Q：angular 的数据绑定采用什么机制？详述原理

A：脏检查机制。双向数据绑定是 AngularJS 的核心机制之一。当 view 中有任何数据变化时，会更新到 model ，当 model 中数据有变化时，view 也会同步更新，显然，这需要一个监控。原理就是，Angular 在 scope 模型上设置了一个 监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS 就会往 $watch 队列里插入一条 $watch ，用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时， $digest 循环就会触发，遍历所有的 $watch ，最后更新 dom。

 

Q：什么是MVC

A：MVC是一种设计模式，模型-视图-控制器 有效的分离的前后端的开发

js面试

一、 this的指向

1.当函数作为对象的方法被调用时，this就会指向该对象。

2.作为普通函数，this指向window。

3.构造器调用，this指向返回的这个对象。

4.箭头函数  箭头函数的this绑定看的是this所在函数定义在哪个对象下，就绑定哪个对象

           如果有嵌套的情况，则this绑定到最近的一层对象上

 

this指向的固定化，并不是因为箭头函数内部有绑定this的

机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外

层代码块的this。正是因为它没有this，所以也就不能用作构造函数。

 

怎么改变this的指向呢？ 1.使用es6的箭头函数；2.在函数内部使用that = this；3.使用apply，call，bind； 4.new实例化一个对象

 

二、什么是闭包和原型链

内部函数可以访问定义他们外部函数的参数和变量。（作用域链的向上查找，把外围的作用域中的变量值存储在内存中而不是在函数调用完毕后销毁）设计私有的方法和变量，避免全局变量的污染

函数嵌套函数

本质是将函数内部和外部连接起来。优点是可以读取函数内部的变量，让这些变量的值始终保存在内存中，不会在函数被调用之后自动清除

   闭包的缺陷：

1.闭包的缺点就是常驻内存会增大内存使用量，并且使用不当容易造成内存泄漏

2.如果不是因为某些特殊任务而需要闭包，在没有必要的情况下，在其它函数中创建函数是不明智的，因为闭包对脚本性能具有负面影响，包括处理速度和内存消耗。   

 

 

   内存溢出和内存泄漏（给的不够用| 用了不归还）

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

内存泄漏：在程序申请内存后，无法释放已申请的内存空间，一次内存泄漏危害可以忽略，但内存泄漏堆积后果很严重，无论多少内存，迟到会被占光

 

   举列子：闭包中的this,对象函数。匿名函数返回函数return function

 

   作用域：(由当前环境与上层环境一系列的变量对象组成！！！保证 当先执行环境里，有权访问的变量和函数是有序的，作用域链变量只能被向上访问)

定义：由当前环境与上层环境的一系列变量对象组成(函数嵌套函数，内部一级级往上有序访问变量或对象)

作用是：保证当前执行环境里，有权访问的变量和函数时有序的，作用域链的变量只能被向上访问

变量访问到window对象及被终止，作用域链向下访问是不允许的

1.改变作用域有 with try..中的catch，

2.所有为定义的直接赋值的变量自动声明为全局作用域

 

作用域：一套规则，管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称

查找变量（标识符就是变量或者函数名）（只用全局作用域和局部作用域）（作用域在它创建的时候就存在了）

 

代码执行分为两个阶段：

1.代码编译阶段：有编译器完成，将代码翻译可执行的代码，这个阶段会被确定

2.代码执行阶段：有js引擎完成，主要执行可执行的大妈，这个阶段执行上下文被创建（对象被创建）

 

执行上下文：一个看不见得对象，存在若干个属性和变量，它被调用的时候创建的。函数被调用查看的this指向的object，object就是上下文（只有被调用的时候创建）

 

   作用域链: https://blog.csdn.net/yooungt13/article/details/20581635

    · 当代码在一个环境中执行时，会创建变量对象的一个作用域链,

举例子：var name ="Tom"

function sayHi () {

    alert('Hi,'+name)

}

sayHi()  //Hi, Tom

函数sayHi()的执行环境为全局环境，所以它的变量对象为window。当函数执行到name时，先查找局部环境，找到则换回，否则顺着作用域查找，在全局环境中，

找到name返回，这一查找变量的有序过程的依据就是作用域。

 

    · 作用域链是保证执行环境有权访问的所有变量和函数的有序访问

 

   原型链：函数的原型链对象constructor默认指向函数本身，原型对象除了有原型属性外，为了实现继承，还有一个原型链指针_proto_,

   该指针是指向上一层的原型对象，而上一层的原型对象的结构依然类似。因此可以利用_proto_一直指向Object的原型对象上，而Object

   原型对象用Object.prototype._proto_  = null表示原型链顶端。如此形成了js的原型链继承。同时所有的js对象都有Object的基本防范

 

三、类的创建和继承

（es5）new 一个function，在这个function的prototype里增加属性和方法, 类里面有方法和属性

 (es6)中class, extends

继承：

  原型链继承： function Cat(){ } Cat.prototype = new Animal(); Cat.prototype.name = 'cat'; 无法实现多继承

构造继承：   使用父类的构造函数来增强子类实例。function Cat(name){Animal.call(this);this.name = name || 'Tom';} 无法继承父类原型链上的属性跟方法  installof去检验

实例继承：  为父类实例添加新特性，作为子类实例的返回

拷贝继承： 拷贝父类元素上的属性跟方法

组合继承：构造继承 + 原型继承的组合体

寄生组合继承：通过寄生方式，在构造继承上加一个Super函数(没有实例和方法) 让他的原型链指向父类的原型链

      砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性

如何判断是那种类型

 

四、异步回调（如何解决回调地狱）

promise、generator、async/await

 

promise： 1.是一个对象，用来传递异步操作的信息。代表着某个未来才会知道结果的时间，并未这个事件提供统一的api，供进异步处理

  2.有了这个对象，就可以让异步操作以同步的操作的流程来表达出来，避免层层嵌套的回调地狱

  3.promise代表一个异步状态，有三个状态pending（进行中），Resolve(以完成），Reject（失败）

  4.一旦状态改变，就不会在变。任何时候都可以得到结果。从进行中变为以完成或者失败

promise.all() 里面状态都改变，那就会输出，得到一个数组

promise.race() 里面只有一个状态变为rejected或者fulfilled即输出

promis.finally()不管指定不管Promise对象最后状态如何，都会执行的操作（本质上还是then方法的特例）

 

五、前端事件流

事件流描述的是从页面中接受事件的顺序，事件 捕获阶段 处于目标阶段 事件冒泡阶段 addeventListener 最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

  1、事件捕获阶段：实际目标div在捕获阶段不会接受事件，也就是在捕获阶段，事件从document到<html>再到<body>就停止了。

          2、处于目标阶段：事件在div发生并处理，但是事件处理会被看成是冒泡阶段的一部分。

          3、冒泡阶段：事件又传播回文档

       阻止冒泡事件event.stopPropagation()

    function stopBubble(e) {

         if (e && e.stopPropagation) { // 如果提供了事件对象event 这说明不是IE浏览器

           e.stopPropagation()

         } else {

           window.event.cancelBubble = true //IE方式阻止冒泡

               }

          }

       阻止默认行为event.preventDefault()

 function stopDefault(e) {

        if (e && e.preventDefault) {

          e.preventDefault()

        } else {

          // IE浏览器阻止函数器默认动作的行为

 

 

          window.event.returnValue = false

        }

      }

事件如何先捕获后冒泡？

  在DOM标准事件模型中，是先捕获后冒泡。但是如果要实现先冒泡后捕获的效果，

对于同一个事件，监听捕获和冒泡，分别对应相应的处理函数，监听到捕获事件，先暂缓执行，直到冒泡事件被捕获后再执行捕获事件。

 

哪些事件不支持冒泡事件：鼠标事件：mouserleave  mouseenter

焦点事件：blur focus

UI事件：scroll resize

 

 

六、事件委托（提高性能）

简介：事件委托指的是，不在事件的（直接dom）上设置监听函数，而是在其父元素上设置监听函数。通过事件冒泡，父元素可以监听到子元素上事件的触发

      通过判断事件发生元素DOM的类型，来做出不同的响应。

举例子： 最经典的就是ui和li标签的事件监听，比如我们在添加事件的时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加

好处：可以比较合适动态元素的绑定，新添加的子元素也会监听函数，也可以有事件触发机制

 

 

七、js的new操作符做了什么？

new操作符创建了一个空对象，这个对象原型指向构造函数的prototype，执行构造函数后返回这个对象（return this）。

如果不要父类的属性跟方法，在函数的prototype上去new这个父类。

 

八、改变函数内部this指针的指向函数(bind,apply,call)

通过apply和call改变函数的this指向，他们两个函数的第一个参数都是一样的表示要改变指向的那个对象，第二个参数，apply是数组，而call则是arg1,arg2...这种形式。

 

 

 

bind 一个是返回一个函数，并不会立即执行 第二个是带参数（第一个参数要指向的this，后面的的参数用来传递

 

九、深拷贝和浅拷贝 https://juejin.im/post/5b00e85af265da0b7d0ba63f 从堆和栈都是内存中划分出来用来存储的区域开始讲起

基本类型：undefined,null,Boolean,String,Number,Symbol 在内存中占据固定大小，保存在栈内存中

引用类型：Object,Array,Date,Function,RegExp等 引用类型的值是对象 保存在堆内存中，栈内存存储的是对象的变量标识符以及对象在堆内存中的存储地址。

 基本类型的复制: 其实就是创建了一个新的副本给将这个值赋值给新变量， 改变值旧对象不会改变

 引用类型的复制： 其实就是复制了指针，这个最终都将指向同一个对象，改变其值新对象也会改变

基本类型的比较 == 会进行类型转换

 

浅拷贝：仅仅就是复制了引用，彼此操作不影响，slice() concat()  object.assign

深拷贝：在堆中重新分配内存，不同的地址，相同的值,互不影响的 JSON.parse()将一个js对象序列化为一个json字符串  JSON.stringify()将json字符串反序列化为一个js对象  es6的展开 {...}

深拷贝和浅拷贝的主要区别是：在内存中的存储类型不同

浅拷贝：重新在堆栈中创建内存，拷贝前后对象的基本类型互不影响。只拷贝一层，不能对对象进行子对象进行拷贝

深拷贝：对对象中的子对象进行递归拷贝，拷贝前后两个对象互不影响

 

十、跨域

同源策略（协议+端口号+域名要相同）

1、jsonp跨域(只能解决get）

原理：动态创建一个script标签。利用script标签的src属性不受同源策略限制，因为所有的src属性和href属性都不受同源策略的限制，可以请求第三方服务器资源内容

步骤：1.去创建一个script标签

      2.script的src属性设置接口地址

      3.接口参数，必须要带一个自定义函数名，要不然后台无法返回数据

      4.通过定义函数名去接受返回的数据    

 

2、document.domain 基础域名相同 子域名不同

     3、window.name 利用在一个浏览器窗口内，载入所有的域名都是共享一个window.name

     4、服务器设置对CORS的支持

原理：服务器设置Access-Control-Allow-Origin HTTP响应头之后，浏览器将会允许跨域请求

    5、利用h5新特性window.postMessage()

 

iframe元素创建包含另外一个文档的内联框架（行内框架）(setTimeout进行异步加载)

      解释：浏览器中的浏览器！用于设置文本或者图形的浮动图文框或容器

      它和跨域

        1、document.domain 实现主域名相同，子域名不同的网页通信

          都设置为超域：document.domain = 'demo.com'

        2、window.postMessageht(data, url)，h5的API，启动跨域通信

 

 

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

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

  为什么要使用预加载：在网页加载之前，对一些主要内容进行加载，以提供用户更好的体验，减少等待时间。

      否则，如果一个页面的内容过于庞大，会出现留白。

解决页面留白的方案：1.预加载  2.使用svg站位图片，将一些结构快速搭建起来，等待请求的数据来了之后，替换当前的占位符

实现预加载的方法：

  1.使用html标签

2.使用Image对象

3.使用XMLHTTPRequest对像，但会精细控制预加载过程

 

 

 

懒加载（lazyload）：客户端优化，减少请求数和延迟请求数

提升用户体验，

减少无效资源的加载

防止并发加载的资源过多会阻塞js的加载，影响网站的正常使用

  原理：首先将页面上的图片的src属性设置为空字符串，而图片的真是路经则设置带data-original属性中，

当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入到可视区域

，如果图片在可视区域将图片的src属性设置为data-original的值，这样就可以实现延迟加载。

 

十二、函数节流防抖

什么是防抖：短时间内多次触发同一个事件，只执行最后一次，或者在开始时执行，中间不执行。比如公交车上车，要等待最后一个乘客上车

        什么是节流：节流是连续触发事件的过程中以一定时间间隔执行函数。节流会稀释你的执行频率，比如每间隔1秒钟，只会执行一次函数，无论这1秒钟内触发了多少次事件

都为解决高频事件而来， scroll mousewhell mousemover touchmove onresize

 

十三、将arguments类数组转化为数组的方法

Array.apply(null, arguments)

Array.prototype.slice.apply(arguments)

Array.from(arguments)

 

十四、高阶函数

一、函数作为参数传递 抽离出一部分容易变化的业务逻辑，把这部分业务逻辑放在函数参数中。这样一来可以分离业务代码中变化与不变的部分

回调函数

二、函数作为返回值传递

 

十五、如何判断一个变量是对象还是数组（prototype.toString.call()）。

千万不要使用typeof来判断对象和数组，因为这种类型都会返回object。

typeOf()是判断基本类型的Boolean,Number，symbol, undefined, String。

对于引用类型：除function，都返回object   null返回object。

installOf() 用来判断A是否是B的实例，installof检查的是原型。

toString() 是Object的原型方法，对于 Object 对象，直接调用 toString()  就能返回 [object Object] 。而对于其他对象，则需要通过 call / apply 来调用才能返回正确的类型信息。

 

hasOwnProperty()方法返回一个布尔值，指示对象自身属性中是否具有指定的属性，该方法会忽略掉那些从原型链上继承到的属性。

 

isProperty()方法测试一个对象是否存在另一个对象的原型链上。

 

 

十六、setTimeout 和 setInterval的机制

因为js是单线程的。浏览器遇到etTimeout 和 setInterval会先执行完当前的代码块，在此之前会把定时器推入浏览器的

待执行时间队列里面，等到浏览器执行完当前代码之后会看下事件队列里有没有任务，有的话才执行定时器里的代码

 

十七、var let const

const：定义的变量不可修改，必须初始化 ，

var：定义的变量可以修改，如果不初始化输出undefined，不会报错

let：块级作用域，函数内部使用let定义后，会函数外部无影响

let const 不会造成变量的提升

 

十八、js垃圾回收机制

1.JS具有自动垃圾收集的机制

2.JS的内存生命周期（变量的生命）

1.分配你所需要的空间 var a = 20

2.使用分配带的内存（读写） alert（a + 10）

3.不适用的时候，释放内存空间 a = null

3.JS的垃圾收集器每隔固定的时间就执行一次释放操作，通用的是通过标记清除的算法

4.在局部作用域中，垃圾回收器很容易做出判断并回收，全局比较难，因此应避免全局变量

 

   标记清除算法：js最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将他标记为'进入环境'，

 当变量离开（函数执行完后），就其标记为'离开环境'。垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，

 然后去掉环境中的变量以及被环境中该变量所引用的变量（闭包）。在这些完成之后仍存在标记的就是要删除的变量了

 

十九、渐进增强和优雅降级

1.渐进增强就是针对低版本浏览器进行构建页面，保证最基本的功能，然后对高级浏览器进行效果、交互等改进和最佳功能达到更好的用户体验

2.优雅降级：一开始构建完整的功能，然后对低版本的进行兼容

 

二十、undefined 和 null

1.undefined类型只要一个，即undefined，当声明变量还未被初始化时就是undefined

2.null类型也只有一个值，即null。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象

3.NaN 与任何值都是相比较的结果都是false

 

二十一、valueof和tostring

valueof：所有对象都有valueof，如果存在任意原始值，他就默认将对象转化为表示它的原始值。

      如果对象是复合值，而却大部分对象无法真正表示一个原始值，因此默认的valueof()方法简单的返回对象本身，而不是返回原始值。

      数组、函数和正则表达式简单的继承了这个more方法，返回对象本身

 

二十二、输入框的change和input事件

onchange事件：要在input失去焦点的时候才触发

oninput事件：要在用户输入的时触发，他是元素值发生变化时立即触发

 

二十三、同步和异步

同步：由于js单线程，同步任务都在主线程上排队执行，前面任务没有执行完成，后面的任务会一直等待

异步：不进入主线程，进入任务队列，等待主线程任务执行完成，开始执行。最基本的异步操作SetTimemot和SetInterval,等待主线程任务执行完，在开始执行里面的函数

 

 

二十四、函数的柯里化

 概念：一个函数接受函数A作为参数，运行后返回return function一个新的函数，并且可以处理A中的参数（只接受单一参数的函数）

 意义：将函数完全变成了接受一个参数，返回一个参数的固定形式，便于讨论和优化

 

二十五、while

while循环会在指定条件为真时循环执行代码

 

二十六、TypeScript的优点：

      1、编译时的强类型，变成了强类型语言，还是编译成js 编译的时候就可以检验

      2、更好的模块化

      3、更好的是实现面向对象的编程，类、接口、模块

 

二十七、js的阻塞特性：所有浏览器在下载JS的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。

      直到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。

      为了提高用户体验，新一代浏览器都支持并行下载JS，但是JS下载仍然会阻塞其它资源的下载（例如.图片，css文件等）。

css阻塞：因为浏览器会维持html中css和js的顺序，样式表必须在嵌入的JS执行前先加载、解析完。

 而嵌入的JS会阻塞后面的资源加载，所以就会出现上面CSS阻塞下载的情况。

 

二十八、meta元素可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词

二十九、对jquery的看法：

1. 什么是jQuery:

 第三方的  执行DOM操作的  极简化的 函数库

 第三方: 下载

 执行DOM操作: 学jQuery还是在学DOM

 极简化:  jQuery是DOM操作的终极简化！

 函数库: jQuery中一切都用函数来解决问题

 

2.为什么: 2个原因: 

  1）. DOM操作的终极简化: 4个方面

    1. 增删改查

    2. 事件绑定

    3. 动画

    4.  ajax

  2）. 几乎解决所有兼容性问题:

    凡是jQuery让用的，都没有兼容性问题！

 

 何时: 几乎所有的框架和项目都是用jQuery开发的

 

3. 如何使用jQuery:

 3步: 

  1. 上官网,看是什么: 

  2. 上官网,看快速入门案例: 

  3. 查手册

三十、对Bootstrap的看法

1.简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

2.栅格布局系统-重点

 优点：简单，容易控制，渲染效率高（div+css），支持响应式

 不足：网站很复杂时不适合

3.什么是响应式布局

Responsive web page:响应式/自适应式网页，可以根据浏览器的不同（pc/pad/phone），而自动更改布局，图片，文字效果，不会影响用户的浏览体验。

4.响应式网页必须做到

    1.布局：不能固定宽度，必须是流式布局

    2.文字和图片大小随着容器大小而改变

    3.媒体查询

      响应式布局网页存在问题：

      代码的复杂度极大，只适合做内容不太多的页面。（小型网站，门户网站，技术介绍网站等）