前端面试题的简单整理，都只是大概回答，具体某些问题的具体理解后续会补上。

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

结构层：主要指DOM节点，html

表现层：主要指页面渲染，css

行为层：主要指页面的动画效果，js

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

Doctype在文档的第一行，处于html标签之前。告诉我们的浏览器用什么文档标准来解析文档。Doctype不存在或格式不正确会导致文档以兼容模式呈现。标准模式：标准模式下的排版和js的运作模式都是按照该浏览器支持的最高标准来执行的。兼容模式下，页面以宽松的，向后兼容的方式显示，模拟老式浏览器的行为以防站点无法工作。

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

新特性：

语义化更好的标签：header，footer,nav,aside,article,section

对本地离线存储更好的支持：localStorage长期存储数据，浏览器关闭后数据不丢失。sessionStorage浏览器关闭后自动删除。

画布canvas，音频audio，视频video，地理Geolocation

新的表单控件：calendar，date，time，email，URL，search

新的表单元素：atalist 元素规定输入域的选项列表。 keygen 元素的作用是提供一种验证用户的可靠方法。 output 元素用于不同类型的输出

webworker:当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口postMessage，onmessage。

JavaScript是单线程的，在执行过程中会阻塞页面的渲染和其他脚本的执行。因此webworker可以在主线程当中开启一个新的线程，起到互不阻塞执行的效果。通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker，同时返回一个worker实例。通过worker.postMessage( data ) 方法来向worker发送数据。绑定worker.onmessage方法来接收worker发送过来的数据。

websocket:webscoket是HTML5提供的传输协议。它可以将服务器的更新及时主动的发给客户端

移除了纯表现的元素：big,center,font,strike等等。对可用性产生负面影响的元素：frame，frameset，noframes；

如何区分：DOCTYPE声明\新增的结构元素\功能元素

iframe的优缺点？

优点：

1  解决加载缓慢的第三方内容如图标和广告等的加载问题

2  Security sandbox

3  并行加载脚本

缺点：

1  iframe会阻塞主页面的Onload事件；

2  即时内容为空，加载也需要时间

3  没有语意

div+css的布局较table布局有什么优点？

1  改版的时候更方便 只要改css文件。

2  页面加载速度更快、结构化清晰、页面显示简洁。

3  表现与结构相分离。

4  易于优化（seo）搜索引擎更友好，排名更容易靠前。

页面导入样式时，使用link和@import有什么区别？

1 就标签的分类来说，link属于HTML标签，而@import是CSS提供的。而且link的权重大于@import。

2 加载顺序来说，link引用的css文件，页面载入的时候同时加载。而@import是等到页面加载完成后再加载。

3 兼容性来说，link没有兼容性问题，@import在IE5以上才可识别

4 使用DOM控制样式时，link支持js操作DOM改变样式。@import不行。

CSS放在顶部/底部有什么区别

CSS放在顶部时，页面会逐步呈现出来。因为浏览器在页面载入的时候同时加载css。浏览器会根据html生成DOM树，根据css生成渲染树。

但是放在底部页面会出现白屏或者闪跳的情况。因为放在底部时，css是等页面下载完后再被下载。浏览器为了弥补样式比较靠后的加载，为了逐步呈现从而延迟呈现，因此出现白屏的情况。

什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

就是@import引起的。@import是等到页面加载完成后再加载。因此会出现闪烁的感觉。解决办法是link引用css文件

CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？以及这些选择器的使用场景？

选择器：（按优先级）

通配符*   （*， > ,+ 选择器的权重都是0）

id选择器 #myid （权重100）

class选择器 .class  （10）

属性选择器 input[type="button"]（10）

伪类选择器 a:link a:visited a:hover a:visited（10）

标签选择器 p div （1）

伪元素选择器 a:before a:after :first-child（1）

相邻+，子>,后代选择器

优先级算法：同权重下以最近者为准

！important>行内样式(权重1000)>id选择器(权重100)>id选择器 |属性选择器|伪类选择器 (权重10)>标签选择器|伪元素选择器(权重1)

可继承的样式：font的样式，color,visiblity

不可继承的：关于盒模型的：width height margin padding border

新增伪类：first-child last-child nth-child（n）

介绍一下CSS的盒子模型？box-sizing常用的属性有哪些？分别有什么作用？

W3C标准盒模型：content，padding，border，margin。其中width指的是内容content的宽度

IE盒模型：content，padding，border，margin。其中width指的是content的宽度+padding+border的宽度

box-sizing是CSS3中提供的属性。主要控制盒模型的解析方式。每种盒模型计算元素宽高的方式不同：

它的默认值是content-box，也就是width的宽度指的是内容content的宽度。是W3C标准盒模型。

border-box的width是content+padding+border。也就是IE盒模型

还有padding-box：width指的是content+padding的宽度。

display的值:

规定元素生成框的类型：

block:块类型元素

inline:行内元素

inline-block：行内块级元素

list-item：块类型元素，并添加样式列表标记

none：元素脱离文档流，不会显示

display:none与visibility:hidden的区别是什么？

他们都可以隐藏对应的元素。

display：none：使元素脱离文档流，不占用空间。其他元素会靠拢，就当他不存在一样。

visibility：hidden：不会脱离文档流。

position的值， relative和absolute分别是相对于谁进行定位的？

relative：相对于其在普通流中的位置定位

absolute：相对于离其最近的已定位的父元素定位，如果没有就相对于窗口。

fixed:相对于浏览器窗口定位。

static：元素在正常流当中，并且忽略其top,bottom,left,right值

inherit：从父元素继承position的值

浮动原理，浮动产生的问题，CSS清除浮动的几种方法（至少两种）

浮动的元素脱离文档流，不占用空间。可以向左和向右浮动，直到它的外边缘碰到包含框或者另外一个浮动框的边缘为止。

浮动产生的问题：

因为浮动的元素脱离文档流，同级非浮动的元素会表现的他不存在一样。

如果父元素没有设置宽高，其子元素都浮动的话，会导致父元素的高度无法撑开。影响与父元素同级的元素。

解决办法：

同级的元素被覆盖，可以浮动同级元素，但是不推荐这种做法，因为后面的布局会受到影响。也可以给非浮动元素添加clear:both;

可以在浮动元素的后面加上空标签清除浮动

可以给父元素添加一个after伪元素。也可以让父元素overflow：hidden/auto；*zoom:1;

CSS隐藏元素的几种方法（至少说出三种）

display:none;不占用空间

height:0;overflow:hidden

visibility：hidden；占用空间，不影响点击事件

opacity：0；

css hack原理和分类，利弊

原理：由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。

分类：

CSS属性前缀法 ：IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，IE6~IE10都认识"\9"，但firefox前述三个都不能认识

选择器前缀法：IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}

IE条件注释法（即HTML头部引用if IE）针对所有IE(注：IE10+已经不再支持条件注释)： IE浏览器显示的内容 ，针对IE6及以下版本： 只在IE6-显示的内容 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

利弊：使用hack虽然对页面表现的一致性有好处，但过多的滥用会造成html文档混乱不堪，增加管理和维护的负担。

解释下 CSS sprites，以及你要如何在页面或网站中使用它。

把网页中一些背景图片整合到一张图片文件中。利用CSS的background-image,background-position组合进行定位。减少HTTP请求次数。

对BFC规范的理解？

块级格式化上下文，是CSS2.1提出的一个概念：它决定了元素如何对其内容进行布局，以及和其他元素的关系和相互作用。一个创建了BFC的盒子是独立布局的，盒子里面的元素的样式不会影响到外面的元素。

在网页中的应该使用奇数还是偶数的字体？为什么呢？

偶数字号相对更容易和 web 设计的其他部分构成比例关系

为了迁就ie6，ie6会把定义为13px的字渲染成14px

偶数宽的汉字显得均衡

iconfont矢量图标优点和缺点

Iconfont 就是指用字体文件取代图片文件，来展示图标、特殊字体等元素的一种方法。

优点：

加载文件体积小。

可以直接通过css的font-size，color修改它的大小和颜色，对于需要缩放多个尺寸的图标，是个很好的解决方案。

支持一些css3对文字的效果，例如：阴影、旋转、透明度。

兼容低版本浏览器。

缺点：

矢量图只能是纯色的。

制作门槛高，耗时长，维护成本也很高。

gba()和opacity的透明效果有什么不同？

都能实现透明效果。opacity会作用于元素的背景和内容，rgba只会作用于背景。

关于letter-spacing的妙用知道有哪些么？

以用于消除inline-block元素间的换行符空格间隙问题。

Sass、LESS是什么？大家为什么要使用他们？

他们是CSS预处理器，他们是一种特殊的语法/语言编译成CSS。例如LESS是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)

为什么要使用它们？

结构清晰，便于扩展。

可以方便地屏蔽浏览器私有语法差异。

可以轻松实现多重继承。

完全兼容 CSS 代码，可以方便地应用到老项目中。

Css实现动画效果Animation还有哪些其他属性。

CSS3动画的属性主要分为三类：

transform

元素顺时针旋转的角度rotate

设置元素放大或缩小的倍数scale

设置元素的位移translate

设置元素倾斜的角度skew

transition过渡：可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

animation：@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果

事件委托是什么？事件委托的缺点

事件委托：是 JavaScript 中绑定事件的常用技巧，利用事件模型中的冒泡原理，将事件绑定在更上层的父元素时，通过检查事件的目标对象来判断并获取事件源。使用事件代理的好处是可以提高性能。

使用场景：

给许多子元素绑定相同的事件，比如ul的li元素，或者table的td元素。可以大量节省内存，减少事件注册。

可以实现当新增子对象时无需再次绑定事件，对于动态内容及其合适

缺点：事件代理的常用应用应该仅限于上述需求，如果把所有事件都用事件代理，可能会出现本不该被触发的事件被绑定上了事件的情况。

事件模型

在各种浏览器中存在3种事件模型：

1.DOM0(所有浏览器都支持)：

DOM0中事件一旦发生就直接调用事件句柄，无传播过程

一个DOM对象注册多个类型相同的事件时，DOM0级中会发生事件的覆盖

DOM0级事件的注册是直接将事件处理程序作为js对象的属性，或者是将js代码作为HTML元素的性质值。

2.DOM2(除了IE意外都支持)

在DOM2中有一个事件的传播过程。包括事件捕获，目标元素的事件处理程序运行，事件冒泡。

DOM2级中一个DOM对象注册多个类型相同的事件时，则会依次执行各个事件函数。

在DOM2中，事件的注册可以使用addEventListener("click",fn,false)的方法。事件删除用removeEventListener()

event对象是事件处理函数的参数，事件源是e.target

3.IE事件模型：

IE的事件传播过程只有DOM0级和DOM2级中第二第三阶段，也就是只冒泡，不捕捉。

ie中也可以在一个对象上添加多个事件处理函数

事件的注册用attachEvent("onclik",fn);事件删除用detachEvent();

IE中的event对象不是事件处理函数的参数，而是window，并且事件源是srcElement

js延迟加载的方式有哪些？

延迟javascript代码的加载是为了加快网页的访问速度

1.把延迟脚本放在页面底部（body标签里）：如果把script标签放在head中，那么js加载完后才会加载页面,因为js会阻塞后面的代码的运行。这时候可以放在页面的底部，文档会按照从上到下的顺序加载。

2.动态创建DOM的方式：在文档都加载完后，创建script标签，插入到DOM中

functiondownloadJSAtOnload() {varelement = document.createElement("script");

3.defer:在script标签里设置这个属性，脚本会被延迟到整个页面都解析完毕后再运行，就是相当于告诉浏览器立即下载但延迟执行。

4.async：它的作用和defer类似，但是不能控制加载的顺序。

什么是 “use strict”; ? 使用它的好处和坏处分别是什么？

它是JavaScript另外的一种运行模式，在这种模式下，JavaScript在更严格的条件下执行。

好处：

消除JavaScript一些不合理不严谨之处，消除一些怪异行为。

保证代码安全运行

提高编译器效率，增加运行速度。

为未来版本的JavaScript做好铺垫。

坏处：

现在网站的js都会进行压缩，一些文件用了严格模式，一些文件没有，压缩后本来是严格模式的文件，不仅没有指示严格模式，反而在压缩后浪费了字节。（可以写在立即执行函数当中）

说说严格模式的限制

变量必须先声明后使用

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

对象不能有同名的属性

不能对只读属性赋值

不能删除不可删除的属性

eval和arguments不能被重新赋值

arguments不会自动追踪函数参数的变化，传进来是几就是几

不能使用arguments.callee和arguments.caller

禁止设置原始类型的属性

禁止八进制表示法

新增保留字，不能讲保留字作为变量名 let const static private public yield package

判断类型的方法

原始类型使用typeof操作符(string,number,undefined,object,boolean,function,symbol)

引用类型使用 x instanceof class(Array,Object)

还有所以类型通用的Object.prototypr.toString.call(o) //String,Number,Boolean,Object,Array,Null,Undefined,Function

javascript的typeof返回哪些数据类型？

返回字符串：string,number,undefined,object,boolean,function,symbol

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

强制：有三个函数可以将非数值转化为数值：parseInt,parseFloat,（将字符串转化为数值）number（适用于任何数据类型）

隐式：==

null和undefined的区别？

null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

当声明的变量还未被初始化时，变量的默认值为undefined。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：

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

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

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

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

null表示"没有对象"，即该处不应该有值。典型用法是：

作为函数的参数，表示该函数的参数不是对象。

作为对象原型链的终点。

数组

数组方法有哪些？

能改变原数组的：

pop()  返回被删除的最后一个元素

push(item1,item2) 在后面添加元素，返回新的长度

shift()  返回被删除的第一个元素

unshift(item1,item2) 在前面添加元素，返回新的长度

sort(function(a,b){return b-a(倒序)|a-b(升序)})排序，字母按照开头字母顺序，如果排列数字大写必须写比较函数否则有bug

reverse()  颠倒顺序

splice(index,howmany,newitem1,newitem2(加到被删除的位置))返回被删除元素组成的数组

不能改变原数组的

slice(start,end)返回数组中的成员数组,包括end

concat(newarr)返回连接后的新数组

join(str)把数组值用指定字符串连起来,如果没有就默认是逗号

toString()把数组中的每一项用逗号连接起来转化为字符串（和没参数的join一样）

ES5中的数组方法：

arr.forEach(function(e,index,arr){}):给每个元素调用指定的函数，不能中止遍历

arr.map(function(e,index,arr){return e*e})：每个元素调用函数，有返回值，返回新的数组，不改变原数组,会处理稀疏数组，返回稀疏

arr.filter(function(e){return e<3})返回满足条件的子数组，不会处理稀疏数组

arr.every(function(e){return e<3}),看数组所有元素是否满足某条件,返回T/F

arr.some(function(e){return e<3}),判断数组的某些元素是否满足某条件，返回T/F

arr.reduce(function(x,y){return x+y},0(初始值))：用指定的函数组合数组元素，返回单个值，初始值不提供的话将数组第一个和第二个作为函数的参数

数组遍历：

常规for循环(按照顺序，会处理稀疏数组不存在的元素，也会处理null和undefined)

for-in语句（不一定按顺序,不会处理稀疏数组不存在的元素，保证兼容性使用前判断null或者undefined）

forEach()

Javascript垃圾回收方法?

标记清除：这是所有浏览器最常用的一种垃圾回收方式，当变量进入环境（在函数在声明一个变量）时，将其标记为“进入环境”，当变量离开环境（函数执行结束）时，将其标记为离开环境。垃圾收集器会按照固定的时间间隔周期性的释放内存。

引用计数：当声明了一个变量并将一个引用类型的值赋给该变量时这个值得引用次数+1，当去掉这个引用时，引用次数-1，当引用次数为0时表明可将其内存回收

内存泄漏是什么？

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

在低版本的IE中经常会出现内存泄漏，是因为IE中DOM/BOM对象都是通过引用计数回收的，因为存在循环引用的问题，所以他们的引用次数永远不会为0，假如这个函数被重复多次调用，就会导致内存泄漏（大量内存得不到回收）

解决办法：要想破坏循环引用，引用DOM元素的对象或DOM对象的引用需要被赋值为null。

哪些操作会造成内存泄漏？

闭包：闭包中的变量不会被垃圾回收机制回收。

setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

循环引用：循环（在IE中两个DOM/BOM对象彼此引用时，就会产生一个循环）

谈谈This对象的理解。

this总是指函数运行时所在的对象。在不同的场景中，this的身份不同：

DOM的事件处理函数中，this指触发这个事件的DOM对象；

全局函数调用中，this指window；

作为对象的方法调用时，this指调用这个函数的那个对象；

用new实例化对象，作为构造函数调用时，this指新创建的那个对象

ES6中，箭头函数当中的this指的的是定义时所在的对象而不是使用时所在的对象。这样我们在使用的时候就不会产生很多歧义了。

JavaScript有块作用域吗？

没有。在JavaScript中，if/for语句中初始化变量的表达式中所定义的变量，在循环结束后也依旧会存在于循环外部的执行环境当中。

JavaScript的作用域和作用域链?

作用域：只有函数才会产生作用域的概念，它指变量的作用范围，内部作用域由局部变量，函数，形参，实参组成

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

说说函数表达式和函数声明的区别

执行代码时，JavaScript引擎在第一遍会声明函数并将它们提升到顶部。所以函数声明语句可以它定义之前出现的代码所调用。

函数表达式定义的函数，是将其赋值给一个变量，虽然变量的声明提前了，但给变量赋值是不会提前的，因此调用这个函数之前必须先定义才行。

函数声明提升：

执行代码时，JavaScript引擎在第一遍会声明函数并将它们提升到顶部。函数声明语句可以它定义之前出现的代码所调用。

js中上下文是什么,js有哪些函数能改变上下文

上下文就是this关键字的值，比如当函数作为对象的方法来调用时，该对象就是此次调用的上下文，也就是该函数的this值;当函数作为全局函数调用时，上下文指的时window。

作用域和上下文之间最大的区别是： 上下文在运行时确定，随时可能改变；作用域在定义时确定，永远不会改变。

JavaScript中call和apply可以改变上下文

call和apply的区别和作用？

区别：

call()的第一个参数是上下文，第二个参数是参数序列

apply()的第一个参数是上下文，第二个参数是参数组成的数组

作用：改变函数的上下文，它是以某个对象的方法来调用函数，函数的this指的是第一个参数。如果没有传递参数是null/undefined，this指window

谈谈你对闭包的理解，为什么使用闭包，使用场景，它会有什么影响？

闭包：就是访问函数内部变量的函数，创建闭包的方式就是函数嵌套函数

作用：当在函数内部嵌套一个函数时，就创建了闭包，闭包可以访问它被定义时所处的作用域中的任何变量，并且参数和变量不会被垃圾回收机制回收。闭包还可以避免全局变量的污染。

使用场景：在大型项目当中，为了防止命名冲突，一般会把相应的代码用闭包的形式包裹起来，避免暴露在全局作用域下

缺点：如果闭包引用外部变量，变量会常驻内存，这样会增大内存使用量，从而降低性能，使用不当很容易造成内存泄露

new操作符具体做了什么？

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

属性和方法加入到this引用的对象

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

正则：

匹配模式：i (忽略大小写)，g(全局：匹配所有字符串，而不是发现第一个就停止)，m（多行模式：忽略文本的末尾）

regexp的方法：

test() : pattern.test(str)   返回T/F

exec(): pattern.exec(str)  返回数组，第一个是匹配的字符串，后面都是括号里的子表达式的字符串

字符串方法:

search(pattern):返回第一个匹配字符串的起始位置

replace(pattern，str/fn):先找，然后替换，如果有g替换所以匹配字符串，没有就替换第一个匹配的，函数可以动态改变字符串(不改变原字符串)

match(pattern):返回数组，如果有g返回所有匹配结果，如果没有数组第一个是字符串，剩下都是括号里的子表达式

常用的正则：

\s空格,\d数字,\w(字母和数字)，[^..]不在里面的任意字符，+ 一个或多个，* 0个或多个， ？0或1个，{n}n个，{n,m} n<=x个

字符类：中括号匹配一个所包含的任意字符 比如[ab]就是a或b，比如[3457]匹配3或者4或者5或者7，而(3457)只匹配3457

检验网址的正则:

var str="visit my personal information at http://www.t1amo.com/about.html"

var pattern=/(\w+):\/\/([\w.]+)\/(\S*)/

var result=str.match(pattern);

result[0] // http://www.t1amo.com/about.html

result[1] //http 协议

result[2] //www.t1amo.com域名

result[3] //about.html路径

怎么去除字符串前后的空格:

var str=" hello world ";

str.replace(/^\s+|\s+$/,'') //"hello world"

str.trim(）

web storage和cookie的区别?Cookie、sessionStorage 和 localStrorage?

它们都是为了实现本地存储而设计的。

存储空间：cookie数据大小不能超过4K，webstorage虽然也有存储大小的限制，但是比cookie大得多，有5M

数据是否传递：cookie是每请求一个页面都会发送到服务器，webstorage仅用于本地存储数据，不会与服务器进行交互。

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

Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie

cookie 和session 的区别?

cookie的数据存放在浏览器上，session的数据存放在服务器上

cookie不是很安全，别人会分析本地cookie而进行cookie欺骗，因此考虑到安全性应该使用session。

session的数据在一定时间内会存放在服务器上，当访问增多，会影响服务器性能，因此考虑到服务器性能应该使用cookie。

单个cookie保存的数据不能超过4k,很多浏览器都限制一个站点最多保存20个cookie。

所以一般来说，将重要信息存放在session，不重要的需要保存的数据存放在cookie。

请你谈谈Cookie的弊端?

cookie虽然在持久保存客户端数据提供了方便，减轻了服务器的负担，但是还有很多局限性：

缺点：

数量和长度的限制：单个cookie保存的数据不能超过4k（1024*4=4096字节，为了兼容性一般不能超过4095kb）,很多浏览器都限制一个站点最多保存20个cookie。

安全性问题：如果cookie被人拦截了，那么他将获得所有的session信息

有些状态不能保存在客户端。比如为了防止重复提交表单，需要在服务器端保存一个计数器。如果放在客户端不会起作用。

优点：极高的扩展性和可用性

使用cookie需要注意的问题：

可以通过良好的编程来控制保存在cookie中的session对象的大小

通过加密和安全传输技术减小cookie被破解的可能性

不在cookie中存放重要信息。

控制cookie的有效期，偷盗者可能拿到一个过期的cookie

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

用户发送一个url请求

浏览器通过DNS获取网站的IP地址：客户端先检查本地是否有对应的IP地址，若找到则返回，若没有则请求上级DNS服务器，直到找到或找到根节点。

浏览器和服务器通过TCP三次握手来建立TCP连接。

一旦连接建立，浏览器会通过该连接向服务器端发送HTTP请求

远程服务器找到资源并返回响应报文，响应报文中包含状态码。（200表示请求成功）

请求成功后服务器返回相应的资源，客户端下载资源

释放TCP连接。

接下来就是页面渲染阶段了。首先解析HTML生成DOM树，再解析CSS文件生产渲染树。 javascript又可以根据 DOM API 操作 DOM

说说TCP传输的三次握手四次挥手策略

1、三次握手：为了将数据准确无误的送达目标处，TCP协议采用三次握手策略。

三次握手的过程是：

发送端先发送一个带有SYN标志的数据包给接收端

接收端收到数据包后，传回一个带有SYN/ACK标志的数据包以示传达确认信息

发送端再发送一个带有ACK表示的数据包以示握手成功。

在这个过程当中，如果发送方在规定的延迟时间内没有收到回复则默认接收方没有收到请求，TCP协议会再次发送数据包。直到收到回复为止。

2、断开一个TCP连接需要四次握手：

主动关闭方发送一个FIN，用来关闭主动方到被动方的数据传送。（但是在fin包之前发送出去的数据，如果没有收到ack确认报文，主动关闭方还是会再次发送这些数据。此时主动关闭方还可以接受数据）

被动关闭方收到fin包后，发送一个ack给对方。确认序号为收到序号+1。

被动关闭方发送一个fin，用来关闭被动关闭方到主动关闭方的数据传送。

主动关闭方收到fin后，发送一个ack给对方，确认序号为收到序号+1，至此，完成四次握手。

其他 HTTP 请求方法

在请求头的第一行包含了请求的方法，它包括OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE

GET：从指定资源请求数据

POST：向指定的资源发送数据

HEAD：和GET相同，但是只返回HTTP报头，不返回文档主体

DELETE：删除指定资源

OPTIONS：返回服务器支持的HTTP方法

CONNECT:把请求的连接转换到透明的TCP/IP通信

PUT：上传指定的URL表示

TCP和UDP的区别

TCP（Transmission Control Protocol,传输控制协议）：是基于连接的协议。也就是说在发送数据前，必须和对方建立可靠的连接。一个TCP连接必须通过三次握手才能建立起来。

UDP（User Data Protocol,用户数据报协议）：是于TCP相对应的协议。它是面向非连接的协议。也就是说他不与对方建立连接，而是直接把数据包发送过去。UDP适用于一次只传少量的数据、并且对可靠性要求不高的应用环境

HTTP状态码

200 OK 请求成功

201 Created 请求成功并且服务器创建了新的资源

202 Accepted 请求接受但尚未处理

301 Move Permanently 永久性重定向，请求的网页已被永久性的移到了新的位置。请求的报文中会附带重定向的URL。

302 Found 临时性重定向

304 Not Modified 自从上次请求后，请求的网页未修改过。可直接使用缓存

400  Bad Request 服务器无法理解请求的格式

401 Unauthorized 请求未授权。

402 Forbidden 禁止访问。

404 Not Found 找不到如何与 URI 相匹配的资源。

500 Internal Server Error 最常见的服务器端错误。

503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

webscoket会用吗？webSocket如何兼容低浏览器,websocket原理，应用场景

1、webscoket是HTML5提供的传输协议。websocket是应用层第七层上的一个应用层协议，它必须依赖 HTTP 协议进行一次握手 ，握手成功后，数据就直接从 TCP 通道传输，与 HTTP 无关了。它可以将服务器的更新及时主动的发给客户端,而不需要客户端以一定时间间隔去轮询。

2、目前主流的浏览器都支持这个协议，IE还不支持。如何兼容呢？

Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR

3、原理：Websocket的数据传输是frame形式传输的，比如会将一条消息分为几个frame，按照先后顺序传输出去。这样做会有几个好处：

大数据的传输可以分片传输，不用考虑到数据大小导致的长度标志位不足够的情况。

和http的chunk一样，可以边生成数据边传递消息，即提高传输效率。

4、应用场景：社交聊天、弹幕、多玩家游戏、协同编辑、基于位置的应用、体育实况更新、视频会议/聊天等需要高实时的场景

说说网络分层里七层模型是哪七层(从上到下)

应用层:允许访问OSI环境的手段

表示层:对数据进行翻译、加密和压缩

会话层:建立、管理和终止会话

传输层(TCP和UDP)：提供端到端的可靠报文传递和错误恢复

网络层(IP)：负责数据包从源到宿的传递和网际互连

数据链路层：将比特组装成帧和点到点的传递

物理层：通过媒介传输比特,确定机械及电气规范

各种协议

ICMP协议： 因特网控制报文协议。它是TCP/IP协议族的一个子协议，用于在IP主机、路由器之间传递控制消息。

TFTP协议： 是TCP/IP协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议，提供不复杂、开销不大的文件传输服务。

HTTP协议： 超文本传输协议，是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。

DHCP协议： 动态主机配置协议，是一种让系统得以连接到网络上，并获取所需要的配置参数手段。

线程与进程的区别

一个程序至少有一个进程,一个进程至少有一个线程

线程的划分尺度小于进程，使得多线程程序的并发性高

另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率

线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制

从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别

你有哪些性能优化的方法？

代码层面：避免使用css表达式，避免使用高级选择器，通配选择器，避免写行内样式。少用全局变量，用innerHTML代替DOM操作，减少DOM操作次数，缓存DOM节点查找的结果，避免全局查询，多个变量声明合并，避免图片和iFrame等的空Src。空Src会重新加载当前页面，影响速度和效率，

缓存利用：缓存Ajax，多个域名缓存，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag等等

减小请求数量：合并样式和脚本，使用css sprite，图片按需加载，静态资源延迟加载。

减少带宽：压缩文件，开启GZIP

为什么利用多个域名来存储网站资源会更有效？

网站资源指网站的图片、视频、js、css。服务器直接把相应文件发送到客户端的文件都是静态资源。（动态资源一般指数据库资源）。

使CDN缓存更方便：静态资源和动态资源分服务器存放，使用不同的服务器处理请求。

突破浏览器的并发限制。比较老的浏览器（IE6）只有两个并发，现代浏览器是6个并发。并发请求只针对同一个域名的，即同一时间针对同一域名下的请求数量有限制，超过限制的资源会阻塞。

节省cookie带宽：每请求一个页面都会发送一次主域名下的cookie,请求头的cookie不能压缩，如果cookie较多时，会造成发送的数据过大，导致速度变慢。使用其他域名来保存cookie

节约主域名的连接数，优化页面响应速度

防止不必要的安全问题。（上传js窃取主站cookie）

关于多域名，也不是越多越好，浏览器做dns解释也是耗时间的，所以控制在2~4个之间。

移动端性能优化

尽量使用css3动画，开启硬件加速。

适当使用touch事件代替click事件。

避免使用css3渐变阴影效果。

可以用transform: translateZ(0)来开启硬件加速。

不滥用Float。Float在渲染时计算量比较大，尽量减少使用

不滥用Web字体。Web字体需要下载，解析，重绘当前页面，尽量减少使用。

合理使用requestAnimationFrame动画代替setTimeout

CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加

PC端的在移动端同样适用

谈谈你对重构的理解

网站重构也就是说是在不改变UI的情况下，对网站进行优化，简化结构、添加可读性。

对于传统的网站来说重构通常是：

表格(table)布局改为DIV+CSS

使网站前端兼容于现代浏览器

对于移动平台的优化

针对于SEO进行优化

深层次的网站重构应该考虑的方面：

减少代码间的耦合

让代码保持弹性

严格按规范编写代码

设计可扩展的API

代替旧有的框架、语言(如VB)

增强用户体验

通常来说对于速度的优化也包含在重构中:

压缩JS、CSS、image等前端资源

程序的性能优化(如数据读写)

采用CDN来加速资源加载

对于JS DOM的优化

HTTP服务器的文件缓存

怎样减少http请求次数

CSS Sprites

合并js,css文件

js,css,images等资源的压缩

CDN托管

缓存的使用

你如何对网站的文件和资源进行优化？

文件合并

文件压缩

使用CDN托管

使用多个域名来缓存资源

你都使用哪些工具来测试代码的性能？

Profiler

JSPerf

Dromaeo

一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

图片懒加载，在页面的未可视区域添加一个滚动条事件，判断图片位置和浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。

如果为幻灯片，相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载

如果图片为css图片，可以使用css sprite ,iconfont等技术

如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

如果图片展示区域小于图片的真实大小，则因在服务器端先进行图片压缩，图片压缩后大小与展示一致。

reflow和repaint（重排和重绘）

1.repaint(重绘)：改变DOM元素的视觉效果时会触发，使浏览器变慢，因为改变某个元素的视觉效果会check这个DOM元素内的所有节点，会重新对DOM渲染。

比如：opacity、background-color、visibility、outline

2.reflow（回流）:改变DOM元素的位置时会触发，比repaint开销更大，因为他会重新计算所有元素的位置和占用的面积，这样会引起整个页面的重新渲染，他也会触发repaint。（display：none的元素不会引发重排和重绘）

比如：js添加删除元素，用js改变DOM的可见性（display:none-block）,添加删除或改变CSS样式，增加或移除样式表，css3的动画和过渡，使用offsetwidth和offsetheight。还有用户的一些操作：拖动窗口大小，表单输入值 ，改变字体大小，更换样式表等等