HTML&CSS： 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级、 HTML5、CSS3、Flexbox

JavaScript： 数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、

DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript 6、Nodejs

其他：移动端、响应式、自动化构建、HTTP、离线存储、WEB安全、优化、重构、团队协作、可维护、易用性、SEO、UED、架构、职业生涯、快速学习能力

Doctype作用？标准模式与兼容模式各有什么区别?

[if !supportLists]（1）[endif]声明位于位于HTML文档中的第一行，处于标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。   

[if !supportLists]（2）[endif]标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。   

HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；

而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。 （1）行内元素有：a b span img input select strong（强调的语气）

(2)块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）常见的空元素：br  hr  img link

对浏览器内核的理解

主要分为两部分，渲染引擎和JS引擎，渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则：解析和执行javascript来实现网页的动态效果。 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

常见的浏览器内核有哪些？

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]

Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]

Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和HTML5？

新元素有绘画canvas，用于媒介回放的video和audio元素，本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage的数据在浏览器关闭后自动删除；语义化更好的元素比如：artical footer header nav section

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。 离线的情况下，浏览器就直接使用离线存储的资源。

什么是语义化标签，常见的语义化标签有哪些

语义化标签结构清晰，方便阅读，有利于团队合作开发，方便其他设备解析以语义的方式来渲染网页，有利于搜索引擎优化（SEO）。

常见的语义化标签有： <hn> <ul> <li> <nav> <main> <artical>

<footer> <small> <strong> <em>等

 cookies，sessionStorage 和 localStorage 的区别

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。 cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。 sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：cookie数据大小不能超过4k。 sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有期时间：localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； sessionStorage 数据在当前浏览器窗口关闭后自动删除。 cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

iframe有那些缺点？

*iframe会阻塞主页面的Onload事件； *搜索引擎的检索程序无法解读这种页面，不利于SEO;

*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript 动态给iframe添加src属性值，这样可以绕开以上两个问题。

如何实现浏览器内多个标签页之间的通信?

WebSocket、SharedWorker； 也可以调用localstorge、cookies等本地存储方式； localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件， 我们通过监听事件，控制它的值来进行页面信息通信；注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常；

webSocket如何兼容低浏览器？

Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、

基于multipart 编码发送 XHR 、 基于长轮询的 XHR

title与h1的区别、b与strong的区别、i与em的区别？

title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响； strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：会重读，而是展示强调内容。i内容展示为斜体，em表示强调的文本； Physical Style Elements -- 自然样式标签 b, i, u, s, pre Semantic Style Elements -- 语义样式标签 strong, em, ins, del, code 应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。

标准的CSS的盒子模型？低版本IE的盒子模型有什么不同

[if !supportLists]（1）[endif]有两种，IE 盒子模型、W3C 盒子模型； （2）盒模型： 内容(content)、内边距(padding)、外边距(margin)、 边框(border)； （3）区 别： IE的content部分把 border 和 padding计算了进去;padding和border被包含在定义的width和height之内，对象的实际宽度等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度。

CSS选择符有哪些？哪些属性可以继承

[if !supportLists]1. [endif]id选择器（ # myid） 2.类选择器（.myclassname） 3.标签选择器（div, h1, p） 4.相邻选择器（h1 + p） 5.子选择器（ul > li） 6.后代选择器（li a） 7.通配符选择器（ * ） 8.属性选择器（a[rel = "external"]） 9.伪类选择器（a:hover, li:nth-child）

* 可继承的样式： font-size font-family color, UL LI DL DD DT;

* 不可继承的样式：border padding margin width height ;

CSS优先级算法如何计算

优先级就近原则，同权重情况下样式定义最近者为准; * 载入样式以最后载入的定位为准;

优先级为: !important > id > class > tag important 比 内联优先级高

何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

div{

    width:200px;

    margin:0 auto;

 }

居中浮动一个元素

确定容器的宽高宽500 高 300 的层 设置层的外边距

.div {

width:500px ; height:300px;//高度可以不设

margin: -150px 0 0 -250px;

position:relative; //相对定位

background-color:pink; //方便看效果 left:50%; top:50%;

}

绝对定位的div居中

position:absolute;

width:120px;

background:none;

margin: 0 auto;

top:0;

left:0;

bottom:0;

right:0;

display有哪些值？说明他们的作用。

block 象块类型元素一样显示。

none 缺省值。象行内元素类型一样显示。

inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。

list-item 象块类型元素一样显示，并添加样式列表标记。

table 此元素会作为块级表格来显示

inherit 规定应该从父元素继承 display 属性的值

CSS3有哪些新特性？

新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）

圆角（border-radius:8px）

多列布局（multi-column layout）

阴影和反射（Shadow\Reflect）

文字特效（text-shadow、） 文字渲染 （Text-decoration）

线性渐变（gradient） 旋转 （transform）

增加了旋转,缩放,定位,倾斜,动画，多背景 transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

用纯CSS创建一个三角形的原理是什么？

把上、左、右三条边隐藏掉（颜色设为transparent）

 #demo {

width: 0;

height: 0;

border-width: 20px;

border-style: solid;

border-color: transparent transparent red transparent;

}

CSS垂直居中和水平居中的方法

flex垂直居中：让居中元素的父元素为flex属性，让它在交叉轴上center（align-items:center）就可以达到居中效果

水平居中：align-items:center;justify-content:center;

position+transform实现垂直居中：

position：relative;transform:translateY(-50%)

position+transform实现水平居中：

position：relative;transform:translate(-50%,-50%)

什么是Cookie 隔离？

如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量， 所以不如隔离开。因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。同时这种方式不会将cookie传入Web Server，也减少了Web Server对cookie的处理分析环节， 提高了webserver的http请求的解析速度。

style标签写在body后与body前有什么区别

标准一直是规定style元素不应出现在body元素中。（除非style处于template元素中，因为template中的内容是不直接在dom树中的。另外曾经这一特殊用法是可以在body元素中的。网页浏览器一直有容错设计。如果style元素出现在body元素，最终效果和style元素出现在head里是一样的。但是可能引起FOUC、重绘或重新布局。

什么是CSS 预处理器 / 后处理器？

预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性， 还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。 - 后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的 是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

js的基本数据类型

Undefined、Null、Boolean、Number、String

js有哪些内置对象

Object 是 JavaScript 中所有对象的父对象

数据封装类对象：Object、Array、Boolean、Number 和 String

其他对象：Function、Arguments、Math、Date、RegExp、Error

JavaScript原型，原型链 ? 有什么特点？

所有对象都有__proto__属性，函数这个特殊对象除了具有__proto__属性，还有特有的原型属性prototype。prototype对象默认有两个属性，constructor属性和__proto__属性。prototype属性可以给函数和对象添加可共享（继承）的方法、属性，而__proto__是查找某函数或对象的原型链方式。constructor，这个属性包含了一个指针，指回原构造函数。

构造函数：

function Word()

JavaScript有几种类型的值？

栈：原始数据类型（Undefined，Null，Boolean，Number、String） 堆：引用数据类型（对象、数组和函数） 两种类型的区别是：存储位置不同； 原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储； 引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体

Javascript如何实现继承

[if !supportLists]1、[endif]构造继承2、原型继承 3、实例继承 4、拷贝继承

原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式。

function Parent(){ this.name = 'wang'; }

function Child(){ this.age = 28; }

Child.prototype = new Parent();//继承了Parent，通过原型

var demo = new Child();

alert(demo.age);

alert(demo.name);//得到被继承的属性 }、

javascript创建对象的几种方式

javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象，当然还可以用JSON；但写法有很多种，也能混合使用。

[if !supportLists]1、[endif]对象字面量的方式person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"}; 2、用function来模拟无参的构造函数 function Person(){} var person=new Person();//定义一个function，如果使用new"实例化",该function可以看作是一个

Class person.name="Mark";

person.age="25";

person.work=function(){ alert(person.name+" hello..."); }

person.work();

全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节。当需要从局部函数查找某一属性或方法时，如果当前作用域没有找到，就会上溯到上层作用域查找，直至全局函数，这种组织形式就是作用域链。

谈谈This对象的理解

this总是指向函数的直接调用者（而非间接调用者）；

以函数的形式调用this时，this指向window，以方法的形式调用时，this就是调用方法的那个对象。

如果有new关键字，this指向new出来的那个对象；

在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window；

eval是做什么的

它的功能是把对应的字符串解析成JS代码并运行；

应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。

由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval('('+ str +')');

什么是闭包（closure），为什么要用它

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。 闭包的特性： 1.函数内再嵌套函数 2.内部函数可以引用外层的参数和变量 3.参数和变量不会被垃圾回收机制回收

new操作符具体干了什么呢

[if !supportLists]1、[endif]创建一个空对象，并且this 变量引用该对象，同时还继承了该函数的原型。 2、属性和方法被加入到 this 引用的对象中。 3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

call()和apply()的区别

apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。

call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。

function add(a,b){

  return a+b;  

}

function sub(a,b){

  return a-b;  

}

var a1 = add.apply(sub,[4,2]);　　//sub调用add的方法

var a2 = sub.apply(add,[4,2]);

alert(a1);  //6     

alert(a2);  //2

/*call的用法*/

var a1 = add.call(sub,4,2);

Function.prototype.bind()方法

bind()方法主要就是将函数绑定到某个对象，bind()会创建一个函数，函数体内的this对象的值会被绑定到传入bind()第一个参数的值，例如，f.bind(obj)，实际上可以理解为obj.f()，这时，f函数体内的this自然指向的是obj

可以用bind的方式预定义参数，例子

function list(){

return Array.prototype.slice.call(arguments);

}

var list1 = list(1, 2, 3);

//[1, 2, 3]

//预定义参数

var a = list.bind(undefined, 10);

var list2 = a();

//[10]

var list3 = a(1, 2, 3);

从输入一个url到浏览器页面展示都经历了哪些过程

输入网址--缓存解析--域名解析--TCP连接，三次握手--页面渲染

数组的常用方法

数组转字符串，join（）实现重复字符串，push()、pop(),shift()[用于把数组的第一个元素从其中删除，并返回第一个元素的值]和unshift()[向数组的开头添加一个或更多元素，并返回新的长度]，sort（）排序【按字符编码的顺序进行排序】，reverse（）反转数组，contact（）连接两个或多个数组，slice()数组截取，splice（）数组更新，ES5新增数组方法，indexOf()和lastIndexOf()，

5个迭代方法：

forEach(),map(),filter(),some(),every()

2个归并方法

reduce(),reduceRight()

这两个方法都会迭代数组中的所有项，然后生成一个最终返回值。他们都接收两个参数，第一个参数是每一项调用的函数，函数接受四个参数分别是初始值，当前值，索引值，和当前数组，函数需要返回一个值，这个值会在下一次迭代中作为初始值。第二个参数是迭代初始值，参数可选，如果缺省，初始值为数组第一项，从数组第一个项开始叠加，缺省参数要比正常传值少一次运算。

reduce()方法从数组的第一项开始，逐个遍历到最后。而reduceRight()则从数组的最后一项开始，向前遍历到第一项。

reduce()语法：arr.reduce(function(total , cur , index , arr){//do something}, initialValue)

reduceRight()语法：arr.reduceRight(function(total , cur , index , arr){//do something}, initialValue)

ES6新增数组方法

Array.from()用于类似数组的对象（即有length属性的对象）和可遍历对象转为真正的数组

Array.of()将一组值转变为数组，参数不分类型，只分数量，数量为0返回空数组。

find（）

findIndex()

array.fill(value,start,end)

遍历数组方法

keys(),values(),entries()

includes(),copyWithin()

HTML5的新增元素

hgroup元素：用于对整个页面或页面中一个内容区块的标题进行组合。

figure元素：表示一段独立的流内容，一般表示文档主题流内容中的一个独立单元。

video元素：定义视频，比如电影片段或其他视频流。

audio元素：定义音频，比如音乐或其他音频流。

embed元素：用来插入各种多媒体，格式可以是MIDI、WAV、AIFF、AU、MP3等。

mark元素：主要用来在视觉上向用户呈现需要突出显示或高亮显示的文字。

time元素：表示日期或时间，也可以同时表示两者。

canvas元素：表示图形，如图表和其他图像。

output元素：表示不同类型的输出，比如脚本的输出。

source元素：为媒介元素定义媒介资源。

menu元素：表示菜单列表。当希望列出表单控制时使用该标签。

ruby元素：表示ruby注释。

rt元素：表示字符的解释或发音。

rp元素：在ruby解释中使用，以定义不支持ruby元素的浏览器所显示的内容。

wbr元素：表示软换行。

command元素：表示命令按钮，如单选按钮、复选框或按钮。

details元素：表示用户要求得到并且可以得到的细节信息，可与summary 元素配合使用。

datalist元素：可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表。

datagrid元素：表示可选数据的列表，它以树形列表的形式来显示。

keygen元素：表示生成密钥。

progress元素：表示运行中的进程，可以使用progress来显示JavaScript中耗费时间的函数的进程。

email：表示必须输入E-mail地址的文本输入框。

url：表示必须输入URL地址的文本输入框。

number：表示必须输入数值的文本输入框。

range：表示必须输入一定范围内数字值的文本输入框。

Date Pickers：HTML5拥有多个可供选取日期和时间的新型输入文本框。

HTML5全局属性

contentEditable属性的主要功能是允许用户在线编辑元素中的内容。

designMode属性用来指定整个页面是否可编辑，只能在JavaScript脚本里被编辑修改，该属性有两个值：on与off。

hidden属性功能是通知浏览器不渲染该元素，使该元素处于不可见状态。hidden属性是一个布尔值的属性，设为true时，元素处于不可见状态；设为false时，元素处于可见状态。

spellcheck属性是针对input元素与textarea这两个文本输入框提供的一个新属性，它的功能为对用户输入的文本内容进行拼写和语法检查。spellcheck属性是一个布尔值的属性。

tabindex属性当不断按Tab键让窗口或页面中的控件获得焦点，对窗口或页面中的所有控件进行遍历的时候，每一个控件的tabindex表示该控件是第几个被访问到的

ES6中箭头函数的this有啥不同

箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply，bind。普通函数的this指向调用它的那个对象。

tcp和udp

TCP/IP协议是一个协议簇。里面包括很多协议的，UDP只是其中的一个， 之所以命名为TCP/IP协议，因为TCP、IP协议是两个很重要的协议，就用他两命名了。

TCP/IP协议集包括应用层，传输层，网络层，网络访问层。http为应用层的协议。域名系统（DNS）用于在Internet中将域名及其公共广播的网络节点转换成IP地址。

TCP（Transmission Control Protocol，传输控制协议）是面向连接的协议，也就是说，在收发数据前，必须和对方建立可靠的连接。 一个TCP连接必须要经过三次“对话”才能建立起来

TCP三次握手过程

第一次握手：主机A通过向主机B 发送一个含有同步序列号的标志位的数据段给主机B，向主机B 请求建立连接，通过这个数据段， 主机A告诉主机B 两件事：我想要和你通信；你可以用哪个序列号作为起始数据段来回应我。

第二次握手：主机B 收到主机A的请求后，用一个带有确认应答（ACK）和同步序列号（SYN）标志位的数据段响应主机A，也告诉主机A两件事：我已经收到你的请求了，你可以传输数据了；你要用那个序列号作为起始数据段来回应我

第三次握手：主机A收到这个数据段后，再发送一个确认应答，确认已收到主机B 的数据段："我已收到回复，我现在要开始传输实际数据了，这样3次握手就完成了，主机A和主机B 就可以传输数据了。

UDP用户数据报协议：是一个非连接的协议，传输数据之前源端和终端不建立连接，在发送端，UDP传送数据的速度仅仅是受应用程序生成数据的速度，计算机的能力和传输带宽的限制，在接收端，UDP把每个消息段放在队列中，应用程序每次从队列中读一个消息段。

小结TCP与UDP的区别：

1、基于连接与无连接；

2、对系统资源的要求（TCP较多，UDP少）；

3、UDP程序结构较简单；

4、流模式与数据报模式 ；

5、TCP保证数据正确性，UDP可能丢包；

6、TCP保证数据顺序，UDP不保证。

防抖和节流

在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。通常这种情况下防抖和节流是比较好的解决方案。

所谓防抖，就是指触发事件后在n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

所谓节流，就是指连续触发事件但是在n 秒中只执行一次函数。节流会稀释函数的执行频率。对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。

http2.0：是基于1999年发布的http1.0之后的首次更新

相比于http1.0提升了访问速度，允许多路复用，改善了http1.1中浏览器用户端在同一时间针对同域名下的请求有一定数量限制，超过闲置会被阻塞。http2.0会将所有的传输信息分割为更小的信息或帧，并对他们进行二进制编码。

400：请求无效产生原因：前端提交数据的字段类型和后台的实体没有保持一致。401状态码：当前请求需要用户验证。403：服务器已经得到请求，但是拒绝执行。

fetch发送两次请求的原因：

用fetch的post请求的时候，导致fetch第一次发送了一个options请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的请求。

CSS选择器的优先级

id选择器，class选择器，标签选择器，伪元素选择器，伪类选择器。带有！important标签的优先级最高。样式表的来源不同时，优先级顺序为：内联样式>内部样式>外部样式>浏览器用户自定义样式>浏览器默认样式

背景颜色的填充区域：

background-color设置的背景颜色会填充元素的content、padding、border区域，

盒子模型

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，包括边距，边框，填充和实际内容；

标准盒子模型：一个块的总宽度=width+margin（左右）+padding（左右）+border（左右）

怪异盒模型：块的总宽度=width+margin（左右）（width包括padding和border的值）。如何设置：box-sizing:border-box

相对定位和绝对定位

relative：可以通过设置垂直或者水平位置，让这个元素相对于它的起点进行移动，移动元素时会导致它覆盖其他框

absolute：元素的位置与文档流无关，不占据空间，absolute定位的元素和其他元素重叠。

bind apply call的区别

通过apply和call改变函数的this指向，函数的第一个参数都是一样的表示要改变指向的那个对象，第二个参数apply是数组，而call是arg1,arg2..这种形式。通过bind改变this作用域会返回一个新的函数，这个函数不会马上执行。

清除浮动的几种方式：1、父级div手动定义height，解决了父级div无法自动获取到高度的问题

[if !supportLists]2、[endif]父级div定义overflow:hidden

[if !supportLists]3、[endif]结尾出加空div标签clear:both;让父级div能自动获取到高度

JavaScript中的定时器有哪些种，他们的用法和区别是什么

setTimeout只执行一次

setInterval会一直重复执行

document.write和innerHTML的区别

document.write是直接写道页面的内容流，如果在写之前没有调用dodocument.open，浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。innerHTML则是DOM页面元素的一个属性，代表该元素的html内容，可以精确到某一个具体的元素内容来更改，innerHTML将内容写入某个DOM节点，不会导致页面全部重绘。很多情况下innerHTML都优于document.write。

什么是ajax

ajax(异步JavaScript xml)能够刷新局部网页数据而不是重新加载整个网页。

如何使用ajax：第一步创建xmlhttprequest对象，第二步，使用xmlhttprequest对象的open（）和send（）方法发送资源请求给服务器；第三步，使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。第四步，当发送请求到服务器，想要服务器执行一些功能就需要使用onreadystatechange函数，每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数。

xml和json的区别

JSON相对于XML来讲，数据的体积小，传递的速度更快

JSON和JavaScript的交互更加方便，更容易解析处理，更好的数据交互

XML对数据描述性比较好

JSON的速度远快于XML

常见HTTP状态码

2开头：请求成功，

3开头：请求被重定向，表示要完成请求需要进一步操作，通常这些状态码用来重定向

4开头：表示请求可能出错，妨碍了服务器的处理

5开头：服务器错误，表示在尝试处理请求时发生内部错误，是服务器本身的错误，而不是请求出错。

如何进行网站性能优化

页面优化：HTTP请求数，脚本的无阻塞加载，内联脚本的位置优化

代码级别的优化：JavaScript中的DOM操作优化，CSS选择符优化，图片优化以及HTML结构优化

JavaScript压缩和模块打包，按需加载资源，在使用DOM操作库时用上array-ids，缓存，启用HTTP/2，应用性能分析，使用负载均衡方案，使用索引加速数据库查询。

JS哪些操作会引起内存泄漏

1、意外的全局变量引起内存泄漏

2、闭包引起的内存泄漏

3、没有清理的DOM元素引用

4、被遗忘的定时器或回调

5、子元素存在引起的泄漏

事件冒泡

事件就是文档或浏览器窗口发生的一些特定的交互瞬间。JavaScript与HTML之间的交互就是用过事件实现的。代表性的事件有：点击某元素，将鼠标移动到某元素上，按下键盘某个键等。

当一个子元素的事件被触发的时候（例如onclick事件），该事件会从事件源开始逐级向上传播，触发父级元素的点击事件。

事件委托：将子元素的事件通过冒泡的形式交由父元素来执行。