面试题整理

时间 2019-11-08

标签面试整理栏目快乐工作繁體版

原文原文链接

html

什么是语义化的HTML?javascript

选择合适的标签。搜索引擎的爬虫也依赖于标记来肯定上下文和各个关键字的权重。这对搜索引擎的抓取有好处。
符合内容的结构化：在没有CSS的状况下，让页面展示出清晰地结构。
有利于开发和维护：可以使阅读源代码的人更容易明白网页的结构。

说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 如下）php

行内元素特性：css

和相邻的内联元素在同一行
宽度、高度，padding-top/bottom、margin-top/bottom都不可设置

块级元素特性：html

老是独占一行
宽度，高度，内边距，外边距均可以设置

div {
    display： inline-block；//先用display:inline-block属性触发块元素
    *zoom： 1；//经过zoom:1触发块元素的layout
    *display： inline；//让块元素呈x现为内联对象
}

XHTML和HTML有什么区别前端

XHTML是更严格的HTML标准，主要表如今：XHTML元素必须正确的嵌套和关闭，标签名必须用小写字母，文档必需要有根元素vue

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

结构层：主要指DOM节点，html
表现层：主要指页面渲染，css
行为层：主要指页面的动画效果，js

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

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

你知道多少种Doctype文档类型？node

对于标准模式，有严格型。对于准标准模式，有过渡型，框架集型。这两种模式的差别几乎能够忽略不计。mysql

HTML5 为何只须要写 <!DOCTYPE HTML>？

HTML5不基于SGML（标准通用标记语言）的子集，所以不须要对DTD（文档类型定义规则）进行引用。可是须要Doctype来规范浏览器的行为。

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；

浏览器兼容问题：IE8/IE7/IE6支持经过document.createElement方法产生的标签，能够利用这一特性让这些浏览器支持HTML5新标签。固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

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

iframe的优缺点？

优势：

解决加载缓慢的第三方内容如图标和广告等的加载问题
Security sandbox
并行加载脚本

缺点：

iframe会阻塞主页面的Onload事件；
即时内容为空，加载也须要时间
没有语意

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

改版的时候更方便只要改css文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化（seo）搜索引擎更友好，排名更容易靠前。

<meta>文档编码格式

http-equivcontent-type值能够设计文档的编码格式。把 content 属性关联到 HTTP 头部。

CSS

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

就标签的分类来讲，link属于HTML标签，而@import是CSS提供的。并且link的权重大于@import。
加载顺序来讲，link引用的css文件，页面载入的时候同时加载。而@import是等到页面加载完成后再加载。
兼容性来讲，link没有兼容性问题，@import在IE5以上才可识别
使用DOM控制样式时，link支持js操做DOM改变样式。@import不行。

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

CSS放在顶部时，页面会逐步呈现出来。由于浏览器在页面载入的时候同时加载css。浏览器会根据html生成DOM树，根据css生成渲染树。
可是放在底部页面会出现白屏或者闪跳的状况。由于放在底部时，css是等页面下载完后再被下载。浏览器为了弥补样式比较靠后的加载，为了逐步呈现从而延迟呈现，所以出现白屏的状况。

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

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

简要说一下CSS的元素分类

块级元素：div p ul ol li form

行内元素：span a input img strong em label

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选择器，nth-chlid(n)和nth-of-type(n)区别

ele:nth-of-type(n)是指父元素下第n个ele元素，而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败

介绍一下CSS的盒子模型？

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样式？

由于浏览器的兼容问题，不一样浏览器对某些标签的默认值不一样。若是没有初始化，会致使页面在不一样浏览器中存在差别。

垂直居中设置（已知大小和未知大小，图片）多行文本居中

已知大小：

块元素：绝对定位后margin左上都设置为负的1/2宽高。

.center{
        position: absolute;
        width: 200px;
        height: 200px;
        left:50%;
        top:50;
        margin-top:-100px;
        margin-left: -100px;
    }

文本：将文本text-align：center；line-height设置为父容器的高；

  .text{
        height:100px;
        text-align: center;
        line-height: 100px;
    }

多行文本居中：width，height必须使用px单位，再配合vertial-align:middle和display:table-cell属性，且div不能浮动，若是浮动就在里面再添加一个div

.parent{
     display: table-cell;
     vertical-align: middle;
}

未知大小元素居中：

方法一：使用CSS3的flex-box

.wrap {
        display: flex;
        align-items: center;
        justify-content: center;
    }

方法2：父元素相对定位，子元素绝对定位，左右为50%，再使用transform：translate上下移动自身的-50%;

.parent{
   position: relative；
}
.child{
    position: absolute;
    left: 50%;
    top: 50%; 
    -webkit-transform: translate(-50%,-50%);
}

方法4：给子元素加上table标签，让table的margin:0 auto;height:100%;

<table style="margin: 0 auto;height: 100%;">
            <tbody>
                <tr>
                    <td>
                        <ul ><!-- ul居中-->
                            <li>8888888888</li>
                            <li>8888888888</li>
                            <li>8888888888</li>
                            <li>8888888888</li>
                            <li>8888888888</li>
                        </ul>
                    </td>
                </tr>
            </tbody>
</table>

居中图片：

.parent{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

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

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

浮动产生的问题：

由于浮动的元素脱离文档流，同级非浮动的元素会表现的他不存在同样。
若是父元素没有设置宽高，其子元素都浮动的话，会致使父元素的高度没法撑开。影响与父元素同级的元素。

解决办法：

同级的元素被覆盖，能够浮动同级元素，可是不推荐这种作法，由于后面的布局会受到影响。也能够给非浮动元素添加clear:both;
能够在浮动元素的后面加上空标签清除浮动
能够给父元素添加一个after伪元素。也可让父元素overflow：hidden/auto；*zoom:1;

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

display:none;不占用空间
height:0;overflow:hidden
visibility：hidden；占用空间，不影响点击事件
opacity：0；

<strong>，<em>和<b>，<i>标签

strong：逻辑标记，粗体强调标签表示内容的重要性
em:斜体强调标签，更强烈强调，表示内容的强调点
b:物理标记，只是单纯的加粗
i:物理标记，单纯的斜体

img的alt与title有何异同？

alt:用于图片的替代文字，当不能显示图片时显示。
title:用于提供元素的信息，鼠标悬停时显示（在IE浏览器下会在没有title时显示alt）

px,em的区别

它们都是长度单位，px的值是固定的，指定多少就是多少，em的值是不固定的，他会继承父级元素的大小。浏览器默认字体高都是16排序，因此未经调整的话1em=16px;

怎么实现三角形？

宽高设为0，border设置很大的宽度，再根据所须要的三角形方向设置border-left/right等。

#triangle-left {    
            width: 0px;    
            height: 0px;   
            border: 100px solid transparent;   
            border-right:  100px solid red;   
         }

怎么实现一个圆形可点区域？

1.border-radius设置成50%；

.circle {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        cursor: pointer;
    }

2.map+area

<img src="t.jpg" width="1366" height="768" border="0" usemap="#Map" />  
    <map name="Map" id="Map">  
    <area shape="circle" coords="821,289,68" href="www.baidu.com" target="_blank" />  
</map>

<area shape="circle" coords="x1, y1,r" href=url>表示设定热点的形状为圆形，圆心坐标为（X1,y1），半径为r。

3.JS实现，获取鼠标点击位置坐标，判断其到圆点的距离是否不大于圆的半径，来判断点击位置是否在圆内

document.onclick = function(e) {    
    var r = 50;   
    var x1 = 100;  
    var y1 = 100;  
    var x2= e.clientX;  
    var y2= e.clientY;    
    var distance = Math.abs(Math.sqrt(Math.pow(x2 - x1, 2) +      Math.pow(y2 - y1, 2)));    
    if (distance <= 50)  alert("Yes!");    
}

css一个冒号和两个冒号区别？

一个冒号用于CSS伪类，两个冒号用于CSS伪元素。它是CSS3中引入的，为了区分伪类和伪元素。为了兼容IE，仍是用一个比较好。

两栏分布，左边定宽右边自适应。

左侧固定宽度，让他绝对定位。右侧margin-left设为左侧宽度

.left{
           width:200px;
           height: 800px；
           position: absolute;
           left:0;
           top:0;
        }
.right{
       height: 800px;
       margin-left: 200px;
       background-color: green;
    }

三栏分布

左侧右侧固定宽度而且绝对定位。中间设置marginleft和right。

        .left{
            width: 200px;
            position: absolute;
            left: 0;
            top: 0;
            height: 800px;
        }
        .right{
            width: 300px;
            position: absolute;
            right: 0;
            top: 0;
            height: 800px;
        }
         .main{ 
         /*     position: absolute; 
                      left: 200px;
                     right: 300px;  */
             margin-left: 200px;
             margin-right: 300px;
        }

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+已经再也不支持条件注释)： ，针对IE6及如下版本： 。这类Hack不只对CSS生效，对写在判断语句里面的全部代码都会生效。

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

浏览器前缀

如今写css3代码的时候，为了实现兼容性，须要在前面加前缀以便兼容对应的浏览器。

-webkit  //Webkit 谷歌和Safari浏览器
-moz  //Gecko内核，火狐浏览器
-o     //Presto内核，Opera浏览器
-ms  //Trident内核，IE浏览器

什么是Css Hack？ie6,7,8的hack分别是什么？

对不一样的浏览器写不一样的CSS的过程，就是CSS hack

 background-color:red\9;      /*all ie*/
 background-color:yellow\0;    /*ie8*/
+background-color:pink;        /*ie7*/
 _background-color:orange;       /*ie6*/

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

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

对BFC规范的理解？

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

Css渲染机制

在网页中的应该使用奇数仍是偶数的字体？为何呢？

偶数字号相对更容易和 web 设计的其余部分构成比例关系
为了迁就ie6，ie6会把定义为13px的字渲染成14px
偶数宽的汉字显得均衡

iconfont矢量图标优势和缺点

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

优势：

加载文件体积小。
能够直接经过css的font-size，color修改它的大小和颜色，对于须要缩放多个尺寸的图标，是个很好的解决方案。
支持一些css3对文字的效果，例如：阴影、旋转、透明度。
兼容低版本浏览器。

缺点：

矢量图只能是纯色的。
制做门槛高，耗时长，维护成本也很高。

知道的网页制做会用到的图片格式有哪些？

png-8，png-24，jpeg，gif，svg，Webp,Apng
Webp:谷歌开发的为了加快图片下载速度的图片格式。它的图片大小只有JPEG的2/3.
Apng:能够实现png格式的动态图片效果

canvas为何会出现，用来作什么的；

canvas 元素使用 JavaScript 在网页上绘制图像，适合像素处理，动态渲染和大数据量绘制

简述一下src与href的区别。

src用于替换当前元素，指向外部资源的位置，指向的内容会嵌入到文档当中，它会阻塞其余资源的下载。直到该资源下载执行完毕。好比js脚本，image图片等
href指向网络资源所在的位置，它会并行下载资源而且不会中止对当前文档的处理，好比link方式引入css文件。

什么是外边距重叠？重叠的结果是什么？

CSS中相邻两个盒子的外边距会结合成一个单独的外边距，这种合并的方式称为折叠。两个浮动的块元素不存在margin折叠的状况

折叠结果遵循如下原则：

两个相邻的外边距都是正数时，折叠结果是它们二者之间较大的值
两个相邻的外边距都是负数时，折叠结果是二者绝对值的较大值
两个外边距一正一负时，折叠结果是二者的相加的和

两个块状元素上下的margin-top和margin-bottom会重叠。啥缘由？怎么解决？

CSS中相邻两个盒子的外边距会结合成一个单独的外边距，这种合并的方式称为折叠。

而对于标准浏览器来讲：两个浮动的块元素不存在margin折叠的状况，可是此时加浮动后会形成IE6的双边距bug，可让其设置为_diplay:inline;

rgba()和opacity的透明效果有什么不一样？

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

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

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

Sass、LESS是什么？你们为何要使用他们？

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

为何要使用它们？

结构清晰，便于扩展。
能够方便地屏蔽浏览器私有语法差别。
能够轻松实现多重继承。
彻底兼容 CSS 代码，能够方便地应用到老项目中。

知道css有个content属性吗？有什么做用？有什么应用？

用在before和after伪元素上，用来插入生成内容。

最多见的应用就是清除浮动：

.parent:after{
    content:'.';
    height:0;
    visiblity:hidden;
    display:block;
    clear:both;
    *zoom:1;   // for IE6
}

去除inline-block间隙的方法

去除标签内的空格和换行符（代码可读性变差，中间能够加注释分开）
inline-clock的元素设一个负的margin值：3px；margin负值的大小与上下文的字体和文字大小相关
父元素设置font-size:0;-webkit-text-size-adjust:none;
使用letter-spacing字符间距：父元素letter-spacing: -3px;inline-clock的元素设letter-spacing: 0px;
使用word-spacing单词间距：父元素word-spacing: -6px;inline-clock的元素设letter-spacing: 0px;word-spacing的负值只要大到必定程度，其兼容性上的差别就能够被忽略

媒体查询

使用@media能够针对不一样的媒体类型或者不一样屏幕大小来定义不一样的样式

@media screen and/not/only (min-width:365px,max-width:667px;)//iphone6
@media screen and/not/only (min-width:768px,max-width:1024px;)//ipad
@media screen and/not/only (min-width:1024px)//sm-screen

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

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

transform

元素顺时针旋转的角度rotate
设置元素放大或缩小的倍数scale
设置元素的位移translate
设置元素倾斜的角度skew

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

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

怎么在页面里放置一个很简单的图标，不能用img和background-img

canvas,icon库

谈一谈flexbox，讲一讲哪些浏览器已经支持。

弹性布局。把复杂的网站布局变得简易和快速。

若是咱们把Flexbox新语法、旧语法混合在一块儿使用，在现代浏览器（Chrome、Firefox、Safari、Opera Presto 12.1+，IE10+，IOS和Android）能够获得很好的支持。在这里新旧语法的顺序显得很是重要。须要确保老语法不要覆盖新语法。写的时候对于不一样的浏览器加上不一样的前缀。

任何一个容器均可以指定为Flex布局，它有以下属性（主轴排列方向flex-direction，是否换行flex-wrap，主轴对齐方式justify-content，与主轴垂直的对其方式align-content）：

.flex-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
   /*主轴方向：项目排列方向水平*/
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  /*超出容器后是否换行：换行*/
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  /*主轴对齐方向：水平居中*/
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  /*垂直方向的对齐方式:垂直居中*/
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    }

你了解哪些布局？你平时有使用过什么布局实现？

浮动布局
弹性盒模型布局：主要解决移动端屏幕宽度不定的问题。
定位布局

DOM

DOM操做——怎样添加、移除、移动、复制、建立和查找节点。

createAttribute() 建立属性节点。
createElement() 建立元素节点。
createTextNode() 建立文本节点。
parent.removeChild(child);
parent.replaceChild(new,old);
parent.appendChild(child)
parent.insertBefore(before,old)
getElementById("id")
getElementsByClassName("class")
getElementsByTagName("p")

NodeList和Array的区别

NodeList是DOM操取出来的集合，是集合而不是普通的数组，所以不能使用数组元素的方法来操做nodelist

NodeList具备length，下标索引这些数组的属性特征

NodeList最大的特色就是时效性（live），这个集合是“动态的”：每当文档结构发生变化时，它会获得更新，所以在迭代nodelist的时候，应该将其length缓存到变量值，不然有可能会形成无限循环的问题，并且应该尽可能减小访问nodelist的次数，由于每次访问nodelist都会进行一次基于文档的查询，咱们应该将nodelist中取得的值缓存起来。

另外，咱们能够把NodeList转化为数组，方便操做

在IE8+和其余浏览器当中能够使用

Array.prototype.slice.call(nodelist,0)

在IE中必须手动枚举成员

使用try-catch

另外ES6当中提供了Array.from()将类数组对象转化为数组var brr=Array.from(nodelist);

function converToArray(nodelist) {
        var arr = [];
        var len = nodelist.length;
        try {
            arr = Array.prototype.slice.call(nodelist, 0)); //针对非IE浏览器
            } catch (error) {

              for (var i = 0; i < len; i++) {
                  arr.push(nodelist[i])
                 }
        }
        return arr;
    }

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

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

使用场景：

给许多子元素绑定相同的事件，好比ul的li元素，或者table的td元素。能够大量节省内存，减小事件注册。
能够实现当新增子对象时无需再次绑定事件，对于动态内容及其合适

缺点：事件代理的经常使用应用应该仅限于上述需求，若是把全部事件都用事件代理，可能会出现本不应被触发的事件被绑定上了事件的状况。

DOM0和DOM2的区别

DOM0中事件一旦发生就直接调用事件句柄，无传播过程。在DOM2中有一个事件的传播过程。包括事件捕获，目标元素的事件处理程序运行，事件冒泡。
一个DOM对象注册多个类型相同的事件时，DOM0级中会发生事件的覆盖，而DOM2级中则会依次执行各个事件函数。
DOM0级事件的注册是直接将事件处理程序做为js对象的属性，或者是将js代码做为HTML元素的性质值。在DOM2中，事件的注册能够使用addEventListener("click",fn,false)的方法。事件删除用removeEventListener()

冒泡和捕捉

事件捕捉：事件由document对象一直向下传播到目标元素
事件冒泡：事件从目标元素上升一直打到document

如何阻止事件冒泡和默认事件

IE:window.event.cancelBuble=true;
DOM2:ev.stopPropogation();
阻止默认行为：return false；

事件模型

在各类浏览器中存在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

document.write()用法，和innerHTML区别？

document.write()方法能够用在两个方面：

页面载入过程当中用实时脚本建立页面内容
用延时脚本建立本窗口或新窗口的内容。

document.write只能重绘整个页面。innerHTML能够重绘页面的一部分

window.onload和$(document).ready区别？用原生实现

window.onload()方法是必须等到页面内包括图片的全部元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行，没必要等到加载完毕。

function ready(fn){
    if(document.addEventListener) {        //标准浏览器
        document.addEventListener('DOMContentLoaded', function() {
            //注销事件, 避免反复触发
            document.removeEventListener('DOMContentLoaded',arguments.callee, false);
            fn();            //执行函数
        }, false);
    }else if(document.attachEvent) {        //IE
        document.attachEvent('onreadystatechange', function() {
            if(document.readyState == 'complete') {
                document.detachEvent('onreadystatechange', arguments.callee);
                fn();        //函数执行
            }
        });
    }
};

attribute和property的区别是什么？

attribute是dom元素在文档中做为html标签拥有的属性；
property就是dom元素在js中做为对象拥有的属性。

因此：

对于html的标准属性来讲，attribute和property是同步的，是会自动更新的，
可是对于自定义的属性来讲，他们是不一样步的，

dom3新增长了哪些特性，哪些已经被彻底接受了

事件循环

如何在页面中插入一些数据

原生js添加class怎么添加，若是自己已经有class了，会不会覆盖，怎么保留？

document.getElementById("flag").className = "mycalss"

JavaScript

eval是作什么的？

做用：把对应的字符串解析成js代码并运行，返回执行的结果。
缺点：应该避免使用eval,由于不安全，很是耗性能（两次，一次解析成js语句，一次执行）
应用场景：把json字符串转化为json对象。

js有哪些内置对象？

Object,Array
Boolean,Number,String
Math,Date,Function,RegExp,Error,Argument,Global

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

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

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

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

//这些代码应被放置在</body>标签前(接近HTML文件底部)
<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "defer.js";
        document.body.appendChild(element);
    }
    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
</script>

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

4.async：它的做用和defer相似，可是不能控制加载的顺序。

<script src="" async="true"/>

5.使用在文档加载完后使用setTimeout()方法延迟加载js:

window.onload=function(){
    setTimeout(function(){
        var head=document.getElementsByTagName("head")[0];
        var script=document.createElement("script");
        script.src="defer.js";
           head.appendChild("script")
    },1000)
}

六、使用jQuery的$.getScript( "src",callback )方法

$.getScript("defer.js",function(){
    console.log("回调函数执行")； })

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

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

好处：

消除JavaScript一些不合理不严谨之处，消除一些怪异行为。
保证代码安全运行
提升编译器效率，增长运行速度。
为将来版本的JavaScript作好铺垫。

坏处：

如今网站的js都会进行压缩，一些文件用了严格模式，一些文件没有，压缩后原本是严格模式的文件，不只没有指示严格模式，反而在压缩后浪费了字节。（能够写在当即执行函数当中）

说说严格模式的限制

变量必须先声明后使用
函数的参数不能有同名属性，不然报错
对象不能有同名的属性
不能对只读属性赋值
不能删除不可删除的属性
eval和arguments不能被从新赋值
arguments不会自动追踪函数参数的变化，传进来是几就是几
不能使用arguments.callee和arguments.caller
禁止设置原始类型的属性
禁止八进制表示法
新增保留字，不能讲保留字做为变量名 let const static private public yield package

JavaScript 运行机制详解

写一个链式调用；

链式调用就是一行代码就实现了对一个或多个节点的两个或两个以上的操做。好比jquery里面就实现了链式操做：对一个节点进行屡次的操做

实现链式操做的核心思想是在每一个对象的方法里面都返回这个对象：

/*建立对象的方式：组合使用构造函数模式和原型模式：构造函数模式定义属性，
原型模式定义对象的方法，用原型模式能够实现全部对象的实例共享它的方法，
这样能够最大限度的节省内存*/
function Base(){
    // 把返回的节点保存在一个数组里头
    this.elements=[];
    /*获取id*/
    this.getId=function(id){
        //获取到对象后放在数组里面
          this.elements.push(document.getElementById(id));
            //在对象的方法中返回这个对象
          return this;
     };
    this.getClass=function(className){
          this.elements.push(document.getElementsByClassName(className));
          return this;
     };
    this.getTag=function(tag){
          this.elements.push(document.getElementsByTagName(tag));
          return this;
     };
    this.getName=function(name){
          this.elements.push(document.getElementsByName(name));
          return this;
     };

}
//给原型对象添加方法，全部实例共享这些方法
Base.prototype.css=function(attr,value){
    for (var i = 0; i < this.elements.length; i++) {
        this.elements[i].style[attr]=value;
    }
    return this;
}

Base.prototype.html=function(str){
    for (var i = 0; i < this.elements.length; i++) {
        this.elements[i].innerHTML=str;
    }
    return this;
}

Base.prototype.click=function(fn){
    for (var i = 0; i < this.elements.length; i++) {
        this.elements[i].onclick=fn;
    }
    return this;
}
//避免在前台new一个对象
var $=function(){
    return new Base();
}

//在前台就能够使用库当中的代码了
window.onload=function(){
    console.log($().getId("id").css("color","red").html("hello world"));
}

了解设计模式吗（我说了单例和观察者模式，并写了下代码，介绍有啥做用）

js异步的方法（promise，generator，async）

在浏览器端，异步编程很是重要，耗时很长的操做都应该异步执行，避免浏览器失去响应。

在ES6以前，异步编程的方法大概有如下几种

回调函数：将回调函数做为异步函数的参数传入，至关于先执行程序的主要逻辑，将耗时的操做推迟执行，这种方法不利于代码的维护，代码高度耦合

发布订阅模式：假设存在一个信号中心，某个任务执行完成后向信号中心发布一个信号，其余任务能够向信号中心订阅这个信号，从而知道本身何时能够执行，这样去除了代码之间的耦合，并且咱们能够经过查看消息中心能够知道有多少个信号，每一个信号有多少个订阅者

这个模式有多种实现，咱们能够用jquery的插件

Promises对象是CommonJS工做组提出的一种规范，目的是为异步编程提供统一接口，使得控制异步操做更加的容易。promise优势在于避免层层嵌套的回调函数，回调函数变成了链式写法，程序的流程能够看得很清楚。并且若是一个任务已经完成，再添加回调函数，该回调函数会当即执行。因此，你不用担忧是否错过了某个事件或信号。

generator函数：多个线程相互合做，完成异步任务

async函数：generator函数的改进

类型，值和变量

判断类型的方法

原始类型使用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表示"没有对象"，即该处不该该有值。典型用法是：

做为函数的参数，表示该函数的参数不是对象。
做为对象原型链的终点。

JavaScript中的变量声明提高？

在一个函数体内，不管在哪声明的变量，都会被提高到函数的顶部，再依次从上到下执行和赋值。

数组

数组方法有哪些？

能改变原数组的：

1. pop() 返回被删除的最后一个元素
2. push(item1,item2) 在后面添加元素，返回新的长度
3. shift() 返回被删除的第一个元素
4. unshift(item1,item2) 在前面添加元素，返回新的长度
5. sort(function(a,b){return b-a(倒序)|a-b(升序)})排序，字母按照开头字母顺序，若是排列数字大写必须写比较函数不然有bug
6. reverse() 颠倒顺序
7. splice(index,howmany,newitem1,newitem2(加到被删除的位置))返回被删除元素组成的数组

不能改变原数组的

1. slice(start,end)返回数组中的成员数组,包括end
2. concat(newarr)返回链接后的新数组
3. join(str)把数组值用指定字符串连起来,若是没有就默认是逗号
4. toString()把数组中的每一项用逗号链接起来转化为字符串（和没参数的join同样）

ES5中的数组方法：

1. arr.forEach(function(e,index,arr){}):给每一个元素调用指定的函数，不能停止遍历
2. arr.map(function(e,index,arr){return e*e})：每一个元素调用函数，有返回值，返回新的数组，不改变原数组,会处理稀疏数组，返回稀疏
3. arr.filter(function(e){return e<3})返回知足条件的子数组，不会处理稀疏数组
4. arr.every(function(e){return e<3}),看数组全部元素是否知足某条件,返回T/F
5. arr.some(function(e){return e<3}),判断数组的某些元素是否知足某条件，返回T/F
6. arr.reduce(function(x,y){return x+y},0(初始值))：用指定的函数组合数组元素，返回单个值，初始值不提供的话将数组第一个和第二个做为函数的参数

数组遍历：

常规for循环(按照顺序，会处理稀疏数组不存在的元素，也会处理null和undefined)
for-in语句（不必定按顺序,不会处理稀疏数组不存在的元素，保证兼容性使用前判断null或者undefined）
forEach()

写出2个以上数组去重的方法：

1.建立一个新的数组存放结果，遍历数组元素，判断新数组在是否存在该元素，不存在就存入

function delSame(arr) {
                var result = [];
                var len = arr.length;
                for (var i = 0; i < len; i++) {
                    if (result.indexOf(arr[i]) == -1) {
                        result.push(arr[i])
                    };
                };
                return result;
            }

2.先将原数组排序，建立新数组并将第一个元素存入新数组，从第二项遍历数组元素，判断每一项和新数组最后一项是否相同，不相同存入该数组

function delSame2(arr) {
                var arr=arr.sort();
                var result=[arr[0]];
                var len = arr.length;
                for (var i = 1; i < len; i++) {
                    if (arr[i]!==result[result.length-1]) {
                        result.push(arr[i])
                    };
                };
                return result;
            }

3，建立一个新的结果数组和空对象，遍历数组元素，判断对象中属性为数组元素的值是否为空，若是为空，将元素存入结果数组，并将对象的属性赋值为1

function delSame3(arr) {
    var result=[];
    var obj={};
    var len=arr.length;
    for (var i = 0; i < len; i++) {
        var key=arr[i];
        if (!obj[key]) {
            result.push(arr[i]);
            obj[key]=1;
        };
    };
    return result;
}

快速排序的思想并实现一个快排？

 function quickSort(arr){
        if(arr.length<=1){
            return arr;//若是数组只有一个数，就直接返回；
        }

        var num = Math.floor(arr.length/2);//找到中间数的索引值，若是是浮点数，则向下取整
        var numValue = arr.splice(num,1);//找到中间数的值,并从原数组删除
        var left = [];
        var right = [];

        for(var i=0;i<arr.length;i++){
            if(arr[i]<numValue){
                left.push(arr[i]);//基准点的左边的数传到左边数组
            }
            else{
                right.push(arr[i]);//基准点的右边的数传到右边数组
            }
        }
        return arguments.callee(left).concat(numValue,arguments.callee(right));//递归不断重复比较
    }
    alert(quickSort([32,45,37,16,2,87]));//弹出“2,16,32,37,45,87”

判断数组的方法：

Array.isArray([]) //true
[] instanceof Array //ture(但这个方法在多个窗口中有可能会形成混淆，由于一个窗口中的对象有可能不是另外一个窗体中的构造函数的实例)
Object.prototype.toString.call(arr)=='[object Array]' //检查对象的类属性（最通用的）

函数

Javascript垃圾回收方法?

标记清除：这是全部浏览器最经常使用的一种垃圾回收方式，当变量进入环境（在函数在声明一个变量）时，将其标记为“进入环境”，当变量离开环境（函数执行结束）时，将其标记为离开环境。垃圾收集器会按照固定的时间间隔周期性的释放内存。
引用计数：当声明了一个变量并将一个引用类型的值赋给该变量时这个值得引用次数+1，当去掉这个引用时，引用次数-1，当引用次数为0时代表可将其内存回收

内存泄漏是什么？

内存泄漏指任何对象在您再也不拥有或须要它以后仍然存在。
在低版本的IE中常常会出现内存泄漏，是由于IE中DOM/BOM对象都是经过引用计数回收的，由于存在循环引用的问题，因此他们的引用次数永远不会为0，假如这个函数被重复屡次调用，就会致使内存泄漏（大量内存得不到回收）
解决办法：要想破坏循环引用，引用DOM元素的对象或DOM对象的引用须要被赋值为null。

哪些操做会形成内存泄漏？

闭包：闭包中的变量不会被垃圾回收机制回收。
setTimeout 的第一个参数使用字符串而非函数的话，会引起内存泄漏。
循环引用：循环（在IE中两个DOM/BOM对象彼此引用时，就会产生一个循环）

谈谈This对象的理解。

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

1. DOM的事件处理函数中，this指触发这个事件的DOM对象；
2. 全局函数调用中，this指window；
3. 做为对象的方法调用时，this指调用这个函数的那个对象；
4. 用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

f.call(o)  //以对象o的方法来调用函数f
代码的功能：
o.m=f; //将f存储为o的临时方法
o.m(); //调用它，没有参数
delete o.m //将临时方法删除

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

闭包：就是访问函数内部变量的函数，建立闭包的方式就是函数嵌套函数
做用：当在函数内部嵌套一个函数时，就建立了闭包，闭包能够访问它被定义时所处的做用域中的任何变量，而且参数和变量不会被垃圾回收机制回收。闭包还能够避免全局变量的污染。
使用场景：在大型项目当中，为了防止命名冲突，通常会把相应的代码用闭包的形式包裹起来，避免暴露在全局做用域下
缺点：若是闭包引用外部变量，变量会常驻内存，这样会增大内存使用量，从而下降性能，使用不当很容易形成内存泄露。

手写一个闭包

function fn(){
    var n=0; function fn1(){ n++; console.log(n); } return fn1; } var foo=fn(); foo(); //1 foo(); //2 foo(); //3

new操做符具体作了什么？

建立了一个空对象，而且this变量引用该对象，同时继承了该函数的原型
属性和方法加入到this引用的对象
新建立的对象由this引用，而且最后隐式的返回this

var o={};
o.__proto__=Base.prototype;
Base.call(o);

给你一个空函数，加new和不加new的区别

加new时，会把这个函数看成是一个构造函数，返回一个对象。
不加new时，就是调用一个普通的函数，结果视函数返回值而定。

for函数里面setTimeout异步问题

setTimeout()是将一段代码延迟必定时间并异步执行。好比想要在for循环里面使变量i每隔1秒输出，若是这样写：

for (var i = 1; i <= 2; i++) {
    setTimeout(function() { alert(i) }, 1000);
}

结果是两次都弹出了3。由于setTimeout是异步的，那么在调用它以前，其实3次循环都已经结束了。每一个定时器处理函数就会共享同一做用域里的同一变量"i"。怎么样才能达到预期效果？你要为每一个定时器处理函数建立不一样的“i”变量副本。

在函数内建立一个当即执行函数，函数引用了变量i,做为实参将其传递给形参，从而建立了变量的值的副本。因为setTimeout()是在该副本的上下文中调用的，因此它每次都有本身的私有的"i"以供使用。

for (var i = 1; i <= 2; i++) {
    (function(i) {
        setTimeout(function() { alert(i) }, 1000);
    })(i);
}

对象

定义不可修改属性？

Object.defineProperty(obj,propertyName,{
     writable:false,  //表示可否修改属性的值,默认是true
     configurable:false,  //表示不能从对象中删除属性,默认是true
     value："valueOfProperty"， //属性的值,默认是undefined
     Enumerable:"true"          //可以经过for-in循环 ，默认是true
    })

对象属性的遍历

1.for-in循环能够遍历对象全部可枚举的(对象继承的方法不可枚举) ，包括自有的和继承的属性。

var o = {
    name: "lifurong",
    age: 24
}
for (var key in o) { 
    console.log(o[key])
};

//lifurong
//24

二、Object.keys()方法

返回一个由对象中可枚举的自有的属性组成的数组。

三、Object.getOwnPropertyNames()

返回一个由对象中全部的（包括不可枚举的）自有属性组成的数组。

Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

obj.hasOwnProperty(propertyName);这个方法返回一个布尔值。用来检测一个属性是存在于实例中仍是存在于原型中。

object和array的区别

数组表示带有编号的有序数据的集合，而对象表示无序数据的集合。若是数据的顺序很重要，就用数组，不然就用对象。

如何判断对象的类型

用instanceof操做符来测试实例与原型链中出现的构造函数：b1 instanceof Box //true
使用原型的isPrototypeOf()方法：Box.prototype.isPrototypeOf(b1) //true

instanceof原理

instanceof操做符是来测试实例与原型链中出现的构造函数。若是实例的原型链中有这个构造函数，返回true.

对象中key-value的value怎么再放一个对象。

经过对象字面量的方法

var book={
   edition:2,
   author:{
         firstname:"David",
         lastname:"li"
    }
}

静态属性怎么继承?

静态属性：无需实例化就能够调用的方法就叫静态方法

静态属性不能被继承

function Father() {
    //公有属性
    this.lastname = "li";
    //私有属性
    var mood="good";
}
     //静态属性
   Father.staticPro="staticPro";

function Child() {
    this.age = 20;
}
Child.prototype = new Father();

正则：

匹配模式：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个<m
字符类：中括号匹配一个所包含的任意字符好比[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()

手机号码正则:手机号1开头，第二位是[3,4,5,7,8],再后面9位（总共11位）

function checkPhone(){ 
    var phone = document.getElementById('phone').value;
    if(!(/^1[34578]\d{9}$/.test(phone))){ 
        alert("手机号码有误，请重填");  
        return false; 
    } 
}

客户端存储

浏览器本地存储?

在较高版本的浏览器中，js提供了sessionstorage和globalstorage
在HTML5中，提供了localstorage来取代globalstorage

sessionStorage：用于存储一个会话中的数据，这些数据只有在同一个标签页或窗口中才能够访问，而且浏览器关闭后数据自动删除。

localStorage：用于持久化的本地存储数据。浏览器关闭后数据不丢失除非主动删除数据；

区别：

二者都有同源限制：不一样站点没法读取对方存储的数据
localstorage同一站点的不一样页面能够共享数据，而sessionStorage不能够。

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

为何选择Web Storage而不是Cookie？

Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie须要前端开发者本身封装setCookie，getCookie，在不支持web存储的浏览器中，能够使用cookie和IE userData来解决兼容性

/*识别出是哪类存储机制*/
var memory=window.localStorage||
           (window.UserDataStorage&& new UserDataStorage())||
           new cookieStorage();
/*而后在对应的机制中查询数据*/
var value=memory.getItem("name");

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

cookie的读取，set,以及删除?

cookie有名值对组成，以分号和空格隔开。document.cookie="name=value; max-age=xx; path=xx; "
cookie的名值对不容许包含分号，逗号和空白符，要采用全局函数encodeURIComponent()对值进行编码，读取的时候用dncodeURIComponent()解码

cookie属性：有效期和做用域

有效期：cookie的默认有效期很短，一旦浏览器关闭，数据丢失，若是想延长cookie的有效期，能够经过设置cookie的max-age属性（单位是s）
做用域：cookie的做用域是经过文档源和文档路径肯定的，能够经过path和domain属性来配置。cookie是对建立cookie的那个web页面和该web页面同目录或者同目录的子目录是可见的。对其余目录的页面是不可见的。

一、cookie设置

function setCookie(name,value,daystoLive,path,domain,secure){
    var cookie=name+"="+encodeURIComponent(value);
    if (typeof daystoLive === "number") cookie+="; max-age="+(daystoLive*24*60*60);
    if (path) cookie+="; ="+path;
    if (domain) cookie+="; domain="+domain;
    document.cookie=cookie;

}

二、cookie的获取：

function getCookie(){
    var cookie={};
    var all=document.cookie;
    if (all===null) return cookie;
    var list=all.split("; ");
    for (var i = 0; i < list.length; i++) {
        var p=list[i].indexOf("=")；
        var name=list[i].substring(0,p);
        var value=list[i].substring(p+1);
        value=decodeURIComponent(value);
        cookie[name]=value;
    }
    return cookie;//返回的是对象的方式
}

三、cookie删除：

function delCookie(name,path,domain,secure){
    //必需要设置成相同的域和路径才能够
    var cval=getCookie().name;
    if (cval!=null) {
        document.cookie=name+"="+cval+ "; max-age=0";
    };
}

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

调用localStorage，cookie等本地存储方式

localstorage怎么使用

localStorage仅仅支持存储字符串类型的数据，它和JavaScript对象的使用没什么区别。须要注意的是，当存储一个数字时，会把它自动转化成字符串。当获取该值时应该使用parseInt()转换成数字类型

localStorage.x=10;
var x=parseInt(localStorage.x);

localStorage具备setItem("name","value")方法和getItem("name")方法。分别实现数据存储和获取数据，调用removeItem("name")方法能够删除数据。

localStorage.setItem("x",10);
localStorage.getItem("x");  //"10"
localStorage.removeItem("x")

调用clear()方法能够删除全部存储的数据。

使用length属性和key()方法，枚举存入数据的名字；

for (var i = 1; i < localStorage.length; i++) {
    var name=localStorage.key(i);
        console.log(name);
    var value=localStorage.getItem(name);
        console.log(value);
};

如何保持登陆状态？

把登陆信息如帐号、密码等保存在Cookie中，并控制Cookie的有效期，下次访问时再验证Cookie中的登陆信息便可。
保存登陆信息有多种方案。最直接的是把用户名与密码都保持到Cookie中，下次访问时检查Cookie中的用户名与密码，与数据库比较。这是一种比较危险的选择，通常不把密码等重要信息保存到Cookie中。
还有一种方案是把密码加密后保存到Cookie中，下次访问时解密并与数据库比较。这种方案略微安全一些。若是不但愿保存密码，还能够把登陆的时间戳保存到Cookie与数据库中，到时只验证用户名与登陆时间戳就能够了。

若是页面初始载入的时候把ajax请求返回的数据存在localStorage里面，而后每次调用的时候去localStorage里面取数，是否可行。

不能保证数据的实时性，请求和实时性必然会有一方有所牺牲

前端路由的实现原理

大型框架例如Angular的路由就是经过hash实现的。一个url里的#号叫hash，也就是所谓的锚点。当咱们点击一个a标签时，将href属性设置为相应的path，就能够在不用更新网页状况下局部的刷新页面。

hash的运行机制是：

将路由更新时须要执行的回调函数存储在对象中。
点击a标签触发hash改变
监听浏览器的hashchange事件，执行当前url对应的回调函数，利用DOM操做更新页面。

具体的代码以下：

<ul>
        <li><a href="#/">首页</a></li>
        <li><a href="#/product">产品页</a></li>
        <li><a href="#/service">服务页</a></li>
</ul>
<div id="refreshBox"></div>

<script type="text/javascript">
    function Route() {
        /*存储hash更新时的回调函数到routes里*/
        this.routes = {};
        this.curUrl = "";
        /*存储路由更新时的回调到routes中*/
        this.route = function(path, callback) {
                this.routes[path] = callback;
            }
            /*执行当前的回调函数更新页面*/
        this.refresh = function() {
                this.curUrl = location.hash.slice(1) || '/'; //获取当前hash
                this.routes[this.curUrl](); //根据对应的hash执行回调函数
            }
            //监听浏览器 url hash 更新事件。
        this.init = function() {
            window.addEventListener("load", this.refresh.bind(this), false);
            window.addEventListener("hashchange", this.refresh.bind(this), false);
        }
    }
    var box = document.getElementById('refreshBox');
    var R = new Route();
    R.init();
    R.route('/', function() {
        box.style.background = "blue";
        box.innerHTML = "这是首页";
    });

    R.route('/product', function() {
        box.style.background = "red";
        box.innerHTML = "这是产品页";
    });

    R.route('/service', function() {
        box.style.background = "yellow";
        box.innerHTML = "这是服务页";
    });
    </script>

如何实现跨浏览存储

跨域

说一下什么是javascript的同源策略？

它是一种安全协议。指一段脚本只能读取来自同一来源的窗口和文档的属性，同一来源指的是端口，域名，协议相同。

为何要有同源限制？

好比一个黑客将真正的银行登陆的页面嵌入到他的页面，当用户登陆时它就能够经过js读取到你表单的内容。

如何解决跨域问题

一、JSONP/ Jsonp的原理。怎么去读取一个script里面的数据。

因为同源策略的限制，在js中不能够使用AJAX跨域请求，但能够在页面上引入不一样域的脚本。jsonp正是利用这个特性来实现的。

JSONP又叫填充式json，它由回调函数和传入回调函数的json数据组成。

原理是动态插入script标签，经过script标签引入一个js文件，这个文件载入成功后会执行咱们在url中指定的函数，而且会把服务器端输出的json数据做为参数传入。

<script type="text/javascript">
        function jsonpCallback(result) {
            alert(result.msg);
        }
    </script>
    <script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script>

其中jsonCallback是客户端注册的，获取跨域服务器上的JSON数据后，回调的函数。http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback 这个url是跨域服务器取JSON数据的接口，参数为回调函数的名字，返回的格式为：jsonpCallback({msg:'this is json data'}) 。如此就生成了一段js语法的文档, 传回客户端就能够调用jsonpCallBack函数了.

优势：简单易用，兼容性好

缺点：

只支持get请求，不支持POST请求。
不容易调试：若是回调函数没有调入成功没法检测出具体缘由
有可能会出现安全问题：远程服务器可能注入任何内容，因此必须确保对方安全

二、CORS(跨域资源共享)

它定义了浏览器和服务器是如何经过可控的方式来进行跨域通讯的，CORS经过一些列特殊的HTTP头还实现的，经过HTTP头信息能够容许双方判断请求应该是成功仍是失败。

三、经过修改document.domain来跨子域

将主域和子域的document.domain设置成同一个主域。前提条件：这两个域名必须属于同一个基础域名，并且所用的协议，端口都要一致，不然没法利用document.domain进行跨域

四、使用window.name跨域

一个窗口内全部的页面共享一个window.name属性，能够读写。

五、使用HTML5提供的window.postMessage()来跨域传递数据。IE8+都支持

我的认为window.name方法既不复杂也能兼容几乎全部浏览器，因此比较好用。

iframe实现跨越的具体方法？

应用页面建立iframe，src指向数据页面；数据页面把数据附加到window.name上；应用界面监听iframe的onload事件，在此事件中设置这个iframe的src指向本地域的代理文件；获取数据后销毁iframe

AJAX

ajax的内部原理

其核心有JavaScript、XMLHTTPRequest、DOM对象组成，经过XmlHttpRequest对象来向服务器发异步请求，从服务器得到数据，而后用JavaScript来操做DOM而更新页面。

建立ajax过程

建立一个新的xhr对象
使用open方法建立一个新的HTTP请求，包含了请求的方法（GET/POST）,URL，是否异步
建立一个响应http请求变化的函数onreadystatechange函数，每当 readyState 属性改变时，就会调用该函数。当 readyState 等于 4 且http状态status为 200 时，表示响应已就绪
使用send方法发送http请求。
获取异步调用返回的数据, 它是xhr对象的 responseText 或 responseXML 属性
使用JavaScript和DOM局部刷新页面

readyState几个状态的含义

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0：请求未初始化
1：服务器链接已创建
2：请求已接收
3：请求处理中
4：请求已完成，且响应已就绪

原生jquery的ajax实现，具体思路

原生：

//首先检查浏览器是否支持XMLHttpRequest对象。
var xhr;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP")
};
var xhr = new XMLHttpRequest();
//能够向URL添加须要发送的数据
//为了不获得缓存的结果能够向URL添加一个惟一的id
//xhr.open("GET","demo_get.asp?t=" + Math.random(),true);
xhr.open("GET", "test.php?key1=value1&key2=value2", true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var result = xhr.responseText;
    };
}
xhr.send();

jquery：

$.ajax()是最底层的AJAX实现。它包含一个对象参数，以键值对的方式提供该方法的请求设置和回调函数。

$.ajax({
    /*发送请求的地址*/
    url: "url",
    /*请求的方式*/
    type: "POST/GET",
    /*是否异步*/
    async: true,
    发送到服务器的数据
    data: {
        name: "furong",
        age: 20
    },
    /*服务器返回数据类型*/
    dataType: "json/html/xml/text/jsonp/script",
    /*请求成功后的回调函数*/
    success: function(data, status, xhr) {
        //..callback
    },
    /*请求失败时的回调函数*/
    error: function() {
        //error
    }
});

同步和异步的区别

同步：js代码加载到当前AJAX的时候，页面里全部的代码都会中止加载，当AJAX执行完毕后才会执行ajax后面的代码，页面会出现假死状态。

异步：当ajax发送请求，等待服务器端返回数据的这个过程中，前台会继续执行ajax后面的代码，也就是说这时候是两个线程（ajax发送的线程和ajax块后的线程）

ie各版本和chrome能够并行下载多少个资源

IE6 两个并发，iE7升级以后的6个并发，以后版本也是6个 Firefox，chrome也是6个

ajax的优缺点和在IE下的问题？

优势：

不须要插件支持，能够被大多数浏览器支持
能在不刷新整个页面的前提下更新数据，提高用户体验
A减轻服务器和带宽的负担

缺点：

不支持后退按钮
对搜索引擎不友好
开发和调试工具匮乏
安全问题，AJAX暴露了与服务器交互的细节。

IE缓存问题：在IE下，若是是GET请求，而且URL不变，这个结果会被缓存

解决办法：能够向URL添加一个惟一的id

xhr.open("GET","demo_get.asp?t=" + Math.random(),true);

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

GET从服务器获取数据，POST向服务器发送数据
GET使用url传递参数，对传递数据的类型（ASCII编码）和长度（2kb）有限制,POST没有限制。
GET安全性较差，由于发送的数据在url中，是可见的。POST更加安全，由于它是经过http post机制传值，是不可见的。

什么状况下分别使用GET和POST？

POST：

没法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

GET：

请求是为了查找资源，HTML表单数据仅用来帮助搜索。
请求的数据不超过2kb

Post一个file的时候file放在哪的？

请求实体

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

原生js的AJAX：

eval( '('+jsonstr+')' ) :这种方法不推荐，这种方法解析的时候不会去判断字符串是否合法，并且json对象中的js方法也会被执行，这是很是危险的。
JSON.parse(jsonstr):解析JSON格式的字符串,返回一个js值，若是字符串不合法会报错。

Jquery的AJAX:

jquery异步请求将type设为“json”，若是不添加该条属性，则返回来的为字符串。或者利用$.getJSON()方法得到服务器返回json数据，这时候返回的就是json对象了

$.each()是用来在回调函数中解析JSON数据的方法

$.each( collection, callback(indexInArray, valueOfElement) )

success : function(data) {
      $.each(data.list,function(index,item){
       alert(item.id);
      })
     }

多个ajax怎么处理

Ajax 同时处理多个异步请求，可能出现这样的错误：只有最后一个异步请求有效，其余的都没效果。因此当咱们执行完一次异步请求就应该把此次建立出来的 XMLHttpRequest 对象删除，而后再执行下一次异步请求。删除使用 delete 便可:delete xhr;

<body>
    <p>Input1:<input type="text" id="first" /> <span id="firstSpan"></span></p>
    <p>Input2:<input type="text" id="second" /> <span id="secondSpan"></span></p>
    <p>Input3:<input type="text" id="three" /> <span id="threeSpan"></span></p>
    <p><input type="button" value="发送" onclick="test();" /></p>
</body>
</html>
<script language="javascript">
    function getData(url, input, label) {
        var xhr;
        if (window.ActiveXObject) {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        } else if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        }
        var val = document.getElementById(input).value;
        var realUrl = url + "?time=" + new Date().getTime() + "&text=" + val;
           //GET请求查询字符串必须进行编码。并且全部的键值对必须&分割
        realUrl = encodeURI(encodeURI(realUrl));
        xhr.onreadystatechange = function() {
            if (xhr.readyState==4 && xmlHttp.status==200) {
                var labelSpan = document.getElementById(label);
                labelSpan.innerHTML = decodeURI(xhr.responseText);
                delete xhr;     // 手动删除
                xhr = null
            }
        }
        xmlHttp.open('GET', realUrl);
        xmlHttp.send(null);
        
    }
    function test() {
        getData('index.php', 'first', 'firstSpan');
        getData('index.php', 'second', 'secondSpan');
        getData('index.php', 'three', 'threeSpan');
    }
</script>

<?php
    header('Content-Type:text/html;Charset=utf-8');
    echo $_GET['text'];
?>

JSON

JSON 的了解？

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小，是先后台数据交互最多见的一种形式。
格式采用键值对的方式，{'age':'12', 'name':'back'}

XML和JSON的区别？

数据体积方面：json比xml数据体积小
数据交互方面：json与JavaScript的交互更加方便，更容易解析处理
数据描述方面：json比xml要差
传输速度方面：json比xml快的多

JSON字符串转换为JSON对象（互转）

eval( '('+jsonstr+')' ) :这种方法不推荐，该方法解析的时候不会去判断字符串是否合法。eval会执行json串中的表达式，这种方式不安全
JSON.parse(jsonstr):解析JSON格式的字符串,返回一个js值，若是字符串不合法会报错。
jQuery支持的转换方式：$.parseJSON( jsonstr );
JSON.stringify(jsonobj); //能够将json对象转换成json字符串

浏览器、http

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

用户发送一个url请求
浏览器经过DNS获取网站的IP地址：客户端先检查本地是否有对应的IP地址，若找到则返回，若没有则请求上级DNS服务器，直到找到或找到根节点。
浏览器和服务器经过TCP三次握手来创建TCP链接。
一旦链接创建，浏览器会经过该链接向服务器端发送HTTP请求
远程服务器找到资源并返回响应报文，响应报文中包含状态码。（200表示请求成功）
请求成功后服务器返回相应的资源，客户端下载资源
释放TCP链接。
接下来就是页面渲染阶段了。首先解析HTML生成DOM树，再解析CSS文件生产渲染树。 javascript又能够根据 DOM API 操做 DOM

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

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

三次握手的过程是：

发送端先发送一个带有SYN标志的数据包给接收端
接收端收到数据包后，传回一个带有SYN/ACK标志的数据包以示传达确认信息
发送端再发送一个带有ACK表示的数据包以示握手成功。

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

二、断开一个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 服务器端暂时没法处理请求（多是过载或维护）。

HTTP最多见的响应头

Allow 服务器支持哪些请求方法（如GET、POST等）；
Content-Encoding 数据的压缩格式
Content-Length 表示内容长度
Content-Type 数据的类型.
Cache-controll 它是一个相对时间，表示从请求时间到过时时间的秒数。
Date：当前的GMT时间。
ETag：Last-Modified相似, 不过他发送的是一个字符串来标识url的版本
Expires 它是一个绝对时间，表示在指定时间后缓存失效。-1或0则是不缓存.
Last-Modified 当前资源的最后修改时间，客户能够经过If-Modified-Since请求头提供一个日期，只有改动时间迟于指定时间的文档才会返回，不然返回一个304状态
Location 配合302状态码（临时性重定向）使用, 用于告诉客户找谁
Server 服务器的类型

http请求头有哪些字段

请求行：请求的方法，url,http协议版本（ url在请求行, cookie在请求头）
Accept-Encoding 客户端支持的数据压缩格式
Accept-Language 客户端的语言环境
Connection:处理完此次请求后是否断开链接仍是继续保持链接
Cache-Control 指定请求和响应遵循的缓存机制
pragma:no-cache表示禁用缓存，必须返回一个刷新后的文档

HTTP和HTTPS

HTTP协议一般在TCP协议之上
在HTTP和TCP之间添加一个安全协议层，这个时候就成了HTTPS
http端口号80，https是443。http更加安全

http的端口号，ftp的端口号

HTTP默认的端口号为80
FTP默认的端口号为21
HTTPS默认的端口号为443

为何HTTPS安全

由于网络请求须要中间有不少的服务器路由器的转发。中间的节点均可能篡改信息
而使用HTTPS，密钥只有在你和终点站才有。
之因此比较安全是由于它利用SSL/TSL协议传输，保证了数据传输过程的安全。

关于Http 2.0 你知道多少？、http1和http2的区别

http2采用二进制格式而非文本格式
http2使用爆头压缩，下降了开销
让服务器能够将响应主动推送到客户端的缓存中
http2是彻底的多路复用，非有序并阻塞的。只须要一个链接便可实现并行。

什么是Etag？应用

服务器使用它来判断页面是否被修改过。
当浏览器请求一个页面，服务器返回页面而且给页面加上一个Etag，浏览器缓存页面和Etag，再次请求该页面时将Etag发送给服务器，服务器检查Etag判断未修改，返回304和空的响应体。浏览器收到304的状态码后使用缓存文件。

web缓存,浏览器怎么知道要从缓存获取；

当浏览器请求一个页面，服务器返回页面而且给页面加上一个Etag，浏览器缓存页面和Etag，再次请求该页面时将Etag发送给服务器，服务器检查Etag判断未修改，返回304和空的响应体。浏览器收到304的状态码后使用缓存文件。

有没有方法不请求不通过服务器直接使用缓存。（强缓存和协商缓存的命中和管理）、浏览器缓存的区别

浏览器在加载资源时，首先浏览器会根据第一次请求资源时缓存的响应头里的Expires和Cache-Control信息来判断是否命中强缓存，若是命中，浏览器直接从缓存中读取资源，不会发送请求到服务器。
当强缓存没有命中的时候，浏览器发送一个请求到服务器。服务器根据响应头的Last-Modified和Etag信息来判断是否命中协商缓存，若是命中，服务器返回一个304的状态码和空的响应体，浏览器收到304的状态码后使用缓存文件。
当协商缓存没有命中的时候，浏览器直接从服务器加载资源。

Expires和Cache-Control

Expires和Cache-Control是http响应头信息，都用来表示资源在客户端缓存的有效期。浏览器强缓存就是利用它们来实现的。

Expires是较老的强缓存管理header，它是服务器返回的一个绝对时间。用GMT格式的字符串表示。它的缓存原理是：

当浏览器第一次请求一个资源时，服务器返回资源的同时，会在响应头里加上Expires的header。
浏览器收到这个资源后，会把资源和响应头都缓存下来。
当浏览器再次请求这个资源时，先在本身的缓存里寻找，找到后判断当前请求时间是否在Expires以前。若是是就命中强缓存，浏览器直接从缓存中读取资源，不会发送请求到服务器。
若是缓存都没有命中，浏览器直接从服务器加载资源时，Expires会被更新。

Cache-Control是比较新的缓存管理header，它是一个相对时间，单位是秒，它的缓存原理是：

当浏览器第一次请求一个资源时，服务器返回资源的同时，会在响应头里加上Cache-Control的header。
浏览器收到这个资源后，会把资源和响应头都缓存下来。
当浏览器再次请求这个资源时，先在本身的缓存里寻找，找到后根据第一次请求时间和Cache-Control设定的有效期，计算出一个资源过时时间。若是当前请求事情在过时时间以前。若是是就命中强缓存，浏览器直接从缓存中读取资源，不会发送请求到服务器。
若是缓存都没有命中，浏览器直接从服务器加载资源时，Cache-Contro会被更新。

304与200读取缓存的区别？讲讲304缓存的原理

当浏览器对某个资源的请求命中了强缓存时，返回的http状态为200
当浏览器对某个资源的请求没有命中强缓存，就会发一个请求到服务器，验证协商缓存是否命中，若是协商缓存命中，请求响应返回的http状态为304，浏览器收到304的状态码后使用缓存文件。

禁止缓存，期限，修改/请列举三种禁止浏览器缓存的头字段, 并写出相应的设置值

1.加载文件的时候在文件末尾给一个时间戳做为版本参数以强制刷新

<script>
    var js = document.createElement("script");
    js.src = "test.js?random" + Math.random(); document.body.appendChild(js); </script>

2.meta方法:在meta标签里设置http-equiv属性，它是用来在HTML文档中模拟HTTP响应头报文的东西。

expires：告诉浏览器把回送的资源缓存多长时间 -1或0则是不缓存
Cache-Control: no-cache 描述的是相对时间。　　
Pragma: no-cache 设定禁止浏览器从本地获取缓存。

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">

在css/js代码上线以后开发人员常常会优化性能，从用户刷新网页开始，一次js请求通常状况下有哪些地方会有缓存处理？

dns缓存，cdn缓存，浏览器缓存，服务器缓存。

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

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

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

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

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

大数据的传输能够分片传输，不用考虑到数据大小致使的长度标志位不足够的状况。
和http的chunk同样，能够边生成数据边传递消息，即提升传输效率。

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

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

应用层:容许访问OSI环境的手段
表示层:对数据进行翻译、加密和压缩
会话层:创建、管理和终止会话
传输层(TCP和UDP)：提供端到端的可靠报文传递和错误恢复
网络层(IP)：负责数据包从源到宿的传递和网际互连
数据链路层：将比特组装成帧和点到点的传递
物理层：经过媒介传输比特,肯定机械及电气规范

各类协议

ICMP协议：因特网控制报文协议。它是TCP/IP协议族的一个子协议，用于在IP主机、路由器之间传递控制消息。
TFTP协议：是TCP/IP协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议，提供不复杂、开销不大的文件传输服务。
HTTP协议：超文本传输协议，是一个属于应用层的面向对象的协议，因为其简捷、快速的方式，适用于分布式超媒体信息系统。
DHCP协议：动态主机配置协议，是一种让系统得以链接到网络上，并获取所须要的配置参数手段。

介绍一下你对浏览器内核的理解？

主要分为渲染引擎和JS引擎，浏览器内核不一样致使渲染的效果不一样。

渲染引擎：负责取得网页的内容（HTML、图片,css等），以及计算网页的显示方式，再输出到显示器或打印机
JS引擎：解析和执行JavaScript来实现网页的动态效果。

介绍经常使用的几种浏览器和内核

IE：Trident
Firefox:Gecko
Opera:之前是presto内核，Opera现已改用Google Chrome的Blink内核
chrome:Blink(基于webkit，Google与Opera Software共同开发)
safari:WebKit

WEB应用从服务器主动推送Data到客户端有那些方式？

基于 AJAX 的长轮询（long-polling）方式，服务器Hold一段时间后再返回信息；
HTTP Streaming，经过iframe和<script>标签完成数据的传输；
TCP 长链接
HTML5新引入的WebSocket，能够实现服务器主动发送数据至网页端

上述的1和2统称为comet技术

线程与进程的区别

一个程序至少有一个进程,一个进程至少有一个线程
线程的划分尺度小于进程，使得多线程程序的并发性高
另外，进程在执行过程当中拥有独立的内存单元，而多个线程共享内存，从而极大地提升了程序的运行效率
线程在执行过程当中与进程仍是有区别的。每一个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。可是线程不可以独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制
从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分能够同时执行。但操做系统并无将多个线程看作多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别

性能优化

渐进加强和优雅降级

渐进加强：先针对低版本的浏览器构建页面，保证最基本的功能后咋针对高版本的浏览器进行效果、交互等方面的改进，以提高用户体验。
优雅降级：一开始就构建完整的功能，而后在针对低版本的浏览器进行兼容。

网站打开比较卡，你怎么优化；

优化网站代码，对网站进行重构。

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

代码层面：避免使用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服务器的文件缓存

什么样的前端代码是好的

高复用低耦合，这样文件小，好维护，并且好扩展。

CDN,为何cdn比较快；

CDN：内容分发网络，由于他让用户就近取得所需内容，能够使内容传输的更快，提升用户访问网站的速度。

怎样减小http请求次数

CSS Sprites
合并js,css文件
js,css,images等资源的压缩
CDN托管
缓存的使用

上线后，如何监控网站

能够使用一些监控工具，好比监控宝等等，若是访问不了，监控工具就会按照你设置的方式给你提醒。这个时候你就能够立刻知道问题并想办法解决。不用本身常常去手动访问尝试了。

打不开网站，什么缘由形成的，解决办法

服务器/空间不稳定：找个稳定的服务器很重要
IP被限制了：换个ip访问；或者使用代理服务器假装访问
通讯异常：重启电脑，或者路由设备
本地DNS缓存：更新DNS。能够选择电脑自动更新，也能够手动清空缓存：ipconfig /displaydns ,ipconfig /flushdns，清空DNS缓存
网站的域名或者空间到期：及时续费

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

文件合并
文件压缩
使用CDN托管
使用多个域名来缓存资源

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

Profiler
JSPerf
Dromaeo

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

图片懒加载，在页面的未可视区域添加一个滚动条事件，判断图片位置和浏览器顶端的距离与页面的距离，若是前者小于后者，优先加载。
若是为幻灯片，相册等，能够使用图片预加载技术，将当前展现图片的前一张和后一张优先下载
若是图片为css图片，能够使用css sprite ,iconfont等技术
若是图片过大，能够使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提升用户体验。
若是图片展现区域小于图片的真实大小，则因在服务器端先进行图片压缩，图片压缩后大小与展现一致。

谈谈之前端角度出发作好SEO须要考虑什么？

了解搜索引擎如何抓取网页和如何索引网页:须要知道一些搜索引擎的基本工做原理，各个搜索引擎之间的区别，搜索机器人如何进行工做，搜索引擎如何对搜索结果进行排序等等
Meta标签优化:主要包括主题，网站描述，和关键词。还有一些其它的隐藏文字好比Author（做者），Category（目录），Language（编码语种）等
如何选取关键词并在网页中放置关键词:首先要给网站肯定主关键词（通常在5个上下），而后针对这些关键词进行优化，包括关键词密度，相关度，突出性等等
了解主要的搜索引擎:虽然搜索引擎有不少，可是对网站流量起决定做用的就那么几个。好比英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不一样的搜索引擎对页面的抓取和索引、排序的规则都不同。还要了解各搜索门户和搜索引擎之间的关系
主要的互联网目录:网站目录和搜索引擎的主要区别是网站内容的收集方式不一样。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了主页外还抓取大量的内容页面。
按点击付费的搜索引擎:能够经过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，学会用最少的广告投入得到最多的点击。
搜索引擎登陆：网站作完了之后，要让别人找到你，最简单的办法就是将网站提交到搜索引擎。
连接交换和连接普遍度：其它网站到你的网站的连接越多，你也就会得到更多的访问量。更重要的是，你的网站的外部连接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。
合理的标签使用

你日常写CSS的时候有考虑过CSS的性能么

避免使用css表达式，表达式会进行繁琐的求值，当改变页面（滚动，改变窗口大小）都会进行求值，影响浏览器的性能。
避免使用统配选择器*，由于它将全部的标签都初始化了，很占用资源。
尽可能不要使用太小的图片作背景的平铺，假如须要1*1px平铺100*100px须要10000次，也很占用资源。
尽可能合写css,能够减小css的字节
避免使用高级选择器，使用单一的或者尽可能少的class来解决。
学会利用继承，在css里不少属性能够继承，好比visibility，font-family等等

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。还有用户的一些操做：拖动窗口大小，表单输入值，改变字体大小，更换样式表等等

常见web安全及防御原理

1.CSRF（Cross-site request forgery）：跨站请求伪造：攻击者盗用了你的身份，以你的名义发送恶意请求。

CSRF可以作的事情包括：以你名义发送邮件，发消息，盗取你的帐号，甚至于购买商品，虚拟货币转帐......形成的问题包括：我的隐私泄露以及财产安全。

检查报头中的Referer参数确保请求发自正确的网站（但XHR请求可调用setRequestHeader方法来修改Referer报头）；
对于任何重要的请求都须要从新验证用户的身份；
建立一个惟一的令牌（Token），将其存在服务端的session中及客户端的cookie中，对任何请求，都检查两者是否一致。

2.xss (Cross Site Scripting)：跨站脚本攻击：经过插入恶意脚本，实现对用户游览器的控制

浏览器自身能够识别简单的XSS攻击字符串，从而阻止简单的XSS攻击；
从根本上说，解决办法是消除网站的XSS漏洞，这就须要网站开发者运用转义安全字符等手段，始终把安全放在心上；
对于普通网民，须要注意尽可能抵挡诱惑，别去点击非知名网站的连接。

3.sql注入：以SQL语句做为用户输入，从而达到查询/修改/删除数据的目的

永远不要信任用户的输入，要对用户的输入进行校验，能够经过正则表达式，或限制长度，对单引号和双"-"进行转换等。
永远不要使用动态拼装SQL，能够使用参数化的SQL或者直接使用存储过程进行数据查询存取。
永远不要使用管理员权限的数据库链接，为每一个应用使用单独的权限有限的数据库链接。
不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息。

哪些地方会出现css阻塞，哪些地方会出现js阻塞？

CSS 原本是能够并行下载的，当 CSS 后面跟着嵌入的 JS 的时候，该 CSS 就会出现阻塞后面资源下载的状况。由于浏览器会维持 html 中 css 和 js 的顺序，样式表必须在嵌入的 JS 执行前先加载、解析完。而嵌入的 JS 会阻塞后面的资源加载，因此就会出现上面 CSS 阻塞下载的状况。

全部浏览器在下载 JS 的时候，会阻止一切其余活动，好比其余资源的下载，内容的呈现等等。直到 JS 下载、解析、执行完毕后才开始继续并行下载其余资源并呈现内容。

Javascript无阻塞加载具体方式

把延迟脚本放在页面底部（body标签里）
defer:在script标签里设置这个属性，具备这个属性的脚本会被延迟到整个页面都解析完毕后再运行，就是至关于告诉浏览器当即下载但延迟执行。
async：它的做用和defer相似，可是脚本不必定会按照前后顺序执行。
动态建立DOM的方式：建立script标签，插入到DOM中，加载完毕后callBack
使用jQuery的getScript()方法

兼容性

写出几种IE6 BUG的解决方法

常见兼容性问题？

列举IE 与其余浏览器不同的特性？

超连接访问事后hover样式就不出现的问题是什么？如何解决？

Node.JS

了解Node么？Node的使用场景都有哪些？

对Node的优势和缺点提出了本身的见解？

.如何判断当前脚本运行在浏览器仍是node环境中？

框架/项目

你都用过哪些前端框架？为何选择这个框架？

博客主要经过Angular这个框架搭建的。

Angualr是一款基于MVC的框架，MVC是模型，视图，控制器的缩写。模型负责数据保存，视图负责用户界面，控制器负责业务逻辑。

主要应用于单页面的WEB应用。提供了许多功能，例如双向数据绑定，AJAX服务，路由，模块化等。

博客大体过程就是经过视图,路由等功能搭建了页面，在控制器里经过点击不一样的连接向AJAX请求服务器端的数据。经过php操做数据库进行数据库的查询，再将返回的数据显示在视图上。

在这个过程中也出现了许多问题，例如：在数据传递过程中会出现各类各样的错误，这时候就要调试清楚究竟是哪一个环节出了问题。

AngularJS：

它拓展了HTML,提供了丰富的指令。例如

ng-repeat用于每遍历数组中的一项，就会克隆一次HTML
ng-model把元素值绑定到应用程序
ng-app初始化一个应用程序。

每个ng-controller都有一个做用域，$scope对象拥有属性和方法，当把scope对象加到控制器时，视图就能够获取这些属性。

每个应用都有一个rootscope根做用域，也就是说它的属性和方法能够做用在app的全部元素当中

Angular还具备http服务，用于读取远程服务器上的数据

 $http.get("data/clickRate.php").success(function(response) {
            $scope.clickRate = response;
        });

Angular还提供路由。它主要经过#号来实现，由于url中#号后面的内容会被忽略掉，点击连接时向服务器请求的地址是相同的。每当点击链接时就会显示不一样的内容。

Angular优势缺点

Angular JS (Angular.JS) 是一组用来开发Web页面的框架

优势：

是一个比较完善的MVC框架，包含了模板，双向数据绑定，路由功能。双向数据绑定多是AngularJS最酷最实用的特性,将MVC的原理展示地淋漓尽致.

自带丰富的angular指令，无需进行手工DOM操做。

AngularJS很小，只有60K，兼容主流浏览器，与 jQuery 配合良好

缺点：

ng-view只能有一个，不能嵌套多个视图。
对于特别复杂的应用场景，性能可能会出现问题。

angular的双向绑定原理

Angular实现了双向绑定机制。所谓的双向绑定，无非是从界面的操做能实时反映到数据，数据的变动能实时展示到界面。

Bootstrap了解程度

对于SASS或是Less的了解程度？喜欢那个？

你以为jQuery或zepto源码有哪些写的好的地方

react native是怎么作到用js调用原生API的？怎么把js代码和java或者OC链接起来的？介绍底层的实现

如何评价AngularJS和BackboneJS

jquery绑定click的方法有几种

vue.js双向绑定的原理，讲一讲MVVM

jQuery源码有看过吗？请说出你印象最深入部分的原理。

请说出jQuery内部判断数据类型的巧妙方式。

针对 jQuery 的优化方法？

你从jQuery学到了什么？

Jquery与jQuery UI 有啥区别？在jquery方法和原型上面添加方法的区别和实现（$.extend,$.fn.extend），以及jquery对象的实现（return new jQuery.fn.init）

jquery 中如何将数组转化为json字符串，而后再转化回来？

react虚拟DOM为何有优点，我用原生的为啥就慢，是什么缘由；

vuejs与angularjs的区别

vuex是用来作什么的

看过哪些框架的源码

要是让你本身写一个js框架你会用到哪些设计模式,日常在项目中用到过哪些设计模式,说说看

你在项目中创新性地解决了哪些难题？

工具

对于前端自动化构建工具备了解吗？简单介绍一下

你经常使用的开发工具是什么，为何？

用过哪些自动化构建工具，怎么用的

谈谈你对webpack的见解,webpack底层实现原理,webpack是用来干吗的

平时如何管理你的项目？

gulp底层实现原理

gulp与webpack区别

新技术

说说最近最流行的一些东西吧？常去哪些网站？

对前端模块化的认识

ES6的了解,es6哪些特性比较吸引你,ES6里头的箭头函数的this对象与其余的有啥区别

requireJS的原理是什么? requirejs怎么防止重复加载

说说你对Promise的理解，构造一个 Promise，用promise手写ajax

babel是如何将es6代码编译成es5的

说说你对AMD和Commonjs的理解

说说你对MVC和MVVM的理解

AMD和CMD 规范的区别

模块化怎么作？

如何将项目里面的全部的require的模块语法换成import的ES6的语法？

看过那些书（高级程序设计看了几遍，有啥收获）

对数据库的了解,mysql与 MongoDB的区别

分别说说同步和异步模块化的应用场景，说下AMD异步模块化实现的原理？

一个静态资源要上线，里面有各类资源依赖，你如何平稳上线

若是要你去实现一个前端模板引擎，你会怎么作

手指点击能够触控的屏幕时，是什么事件？

编程

编写一个b继承a的方法;

function A(name){
    this.name = name;
    this.sayHello = function(){alert(this.name+" say Hello!");};
}
function B(name,id){
    A.call(this,name); //在子类型的构造函数内部调用父类型的构造函数      
     this.id = id;  
}
var b=new B("furong",1)
b;//B {name: "furong", id: 1, sayHello: function}

实现一个函数clone，能够对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制

原始类型和引用类型克隆的时候有很大区别，由于原始类型存储的是简单的数据段，引用类型存储的是对象在内存当中的地址。

浅克隆：原始类型值传递，引用类型引用传递。

深克隆：对新对象的修改不会影响到原来的对象。

tips:咱们直接经过普通赋值的方式，就实现了函数的克隆,由于函数的克隆会在内存单独开辟一块空间，互不影响。

function isClass(obj){
      return Object.prototype.toString.call(obj).slice(8,-1);
}

function deepClone(obj){
    var type=isClass(obj);
    var result;
    if (type==="Array") {
          result=[];
    }else if(type==="Object"){
          result={};
    }else{
        //除了数组和对象，其余类型的数据均可以经过简单赋值进行克隆。
        return obj;
    };
    //对象属性的遍历
    for (var key in obj) {
        //继续判断属性的数据类型
        if (isClass(obj[key])=="Object" || isClass(obj[key])=="Array") {
             //若是属性值的对象,递归调用
             result[key]=deepClone(obj[key]);
        } else{
            //若是属性都是简单的数据段，直接赋值
           result[key]=obj[key];
        }
    }
    return result;
}

编写一个方法求一个字符串的字节长度

英文字母字节数=length，一个中文占两个字节，因此咱们须要把中文的个数计算出来

ASCII 字符集的码值从 0 到 255，表明了字母、数字、标点符号和其余字符

能够经过charCodeAt(i)获取每一个位置的Unicode编码判断是否为中文字符

function getBytes(str){
    var len=str.length;
    var result=len;
    for (var i = 0; i < len; i++) {
        if (str.charCodeAt(i)>255) {
            result++;
        };
    };
    return result;
}

获取url后面的参数并变为对象

function getSearchObj(){
    var qs=location.search.length>0?location.search.subString(1):'',
        obj={},
        items=qs.length>0?qs.split('&') : [],
        item=null;
        name='',
        value='',
        i=0;
        len=items.length;
    for (var i = 0; i < len; i++) {
        item=items[i].split('=');
        name=decodeURIComponent(item[0]);
        value=decodeURIComponent(item[1]);
        obj[key]=value? value : undefined;
    }
    return obj;

}

三级菜单的实现，简单描述下你的实现过程；不用框架

第一级菜单的ul li标签
一级li标签里包含文字和第二级ul li标签
二级li标签里包含文字和第三级ul li标签

 <ul class="menu">
            <li class="level1">一级菜单
                <ul class="level2">
                    <li class="level2-2">二级菜单1
                        <ul class="level3">
                            <li>1-2-3</li>
                            <li>1-2-3</li>
                            <li>1-2-3</li>
                        </ul>
                    </li>
                    <li class="level2-2">二级菜单1
                        <ul class="level3">
                            <li>2-2-3</li>
                            <li>2-2-3</li>
                            <li>2-2-3</li>
                        </ul>
                    </li>
                    <li class="level2-2">二级菜单1
                        <ul class="level3">
                            <li>3-2-3</li>
                            <li>3-2-3</li>
                            <li>3-2-3</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="level1">一级菜单
                <ul class="level2">
                    <li>二级菜单2</li>
                    <li>二级菜单2</li>
                    <li>二级菜单2</li>
                </ul>
            </li>
            <li class="level1">一级菜单
                <ul class="level2">
                    <li>二级菜单3</li>
                    <li>二级菜单3</li>
                    <li>二级菜单3</li>
                </ul>
            </li>
        </ul>

使二级菜单level2和三级菜单level3的display设置为none;绝对定位，left设置为宽度的值；高度为32px;

在js里，

获取一级菜单的nodelist,二级菜单的nodelist,二级菜单li标签的list
给每个一级菜单的li绑定mouseover和out事件，使用闭包，获取每次的下表，over时对应下标的level2[i]显示，而且top设置为i*32px;
给每一个二级菜单中的li绑定事件，over时对应的level3[i]显示

window.onload = function() {
        var level1 = document.getElementsByClassName("level1");
        var level2 = document.getElementsByClassName("level2");
        var level20Li = document.getElementsByClassName("level2-2");
        var level30 = document.getElementsByClassName("level3");

        for (var i = 0; i < level1.length; i++) {
            level1[i].onmouseover = (function(i) {
                return function() {

                    level2[i].style.display = "block";
                    level2[i].style.top = (i * 32 + "px");
                }
            })(i);
            level1[i].onmouseout = (function(i) {
                return function() {

                    level2[i].style.display = "none";
                }
            })(i);

        }

        for (var i = 0; i < level20Li.length; i++) {
            level20Li[i].onmouseover = (function(i) {
                return function() {
                   console.log(i);
                    level30[i].style.display = "block";
                    level30[i].style.top = (i * 32 + "px");
                }
            })(i);
            level20Li[i].onmouseout = (function(i) {
                return function() {

                    level30[i].style.display = "none";
                }
            })(i);
        }
    }

    (function() {
        var menu = document.getElementById("menu");

        var level1 = menu.getElementsByClassName("level1");
        var level2 = menu.getElementsByClassName("level2");

        addEvent(level1);
        addEvent(level2);

        function addEvent(objects) {
            var len=objects.length;
            for (var i = 0; i < len; i++) {
                objects[i].onmouseover = function() {
                    var children = this.childNodes;
                    for (var j = 0; j < children.length; j++) {
                        if (children[j].nodeName == "UL") {
                            children[j].style.display = "block";
                        }
                    }
                }
                objects[i].onmouseout = function() {
                    var children = this.childNodes;
                    for (var j = 0; j < children.length; j++) {
                        if (children[j].nodeName == "UL") {
                            children[j].style.display = "none";
                        }
                    }
                }
            }
        }    
    })();

一个table，点击按钮，实现某一列的刷新，不能采用框架，简单描述下实现过程

<body>
    <table id="tb" border="1" style="border-collapse: collapse;">
        <thead>
            <tr>
                <th>name</th>
                <th onclick="update(this)">age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>A</td>
                <td>12</td>
            </tr>
            <tr>
                <td>b</td>
                <td>18</td>
            </tr>
            <tr>
                <td>c</td>
                <td>30</td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript">
    function update(btn) {
        
            var table = document.getElementById("tb");

            var tbody=table.tBodies[0];

            var getObj = function(table) {
                var arr = [],
                    rows = table.tBodies[0].rows,
                    len = rows.length;
                for (var i = 0; i < len; i++) {
                    var key = rows[i].cells[0].innerHTML;
                    var value=rows[i].cells[1].innerHTML;
                    arr[i]={
                        name:key,
                        age:value
                    }
                }
                return arr;
            }

            var arr=getObj(table);
            arr.sort(function(a,b){
                return b.age-a.age;
            })
             
            tbody.innerHTML="";

            for (var i = 0,len=arr.length; i < len; i++) {
                tbody.insertRow(i);
                tbody.rows[i].innerHTML="<td>"+arr[i].name+"</td><td>"+arr[i].age+"</td>";
            }       
    }
    </script>
</body>

点击按钮后把数据存在数组里，数组元素是对象存放name和age,而后按照age排序，清空tbody后把内容逐次加到列表当中

    window.onload = function() {
        var btn = document.getElementById('age');//获取要刷新那一行的按钮
        var tbody = document.getElementsByTagName('tbody')[0];
        var tr = tbody.getElementsByTagName('tr');
        var age = [],//保存哪一行的数据
            result = [];//保存刷新后的值
        for (var i = 0; i < tr.length; i++) {
            var msg = parseInt(tr[i].getElementsByTagName('td')[2].innerHTML);
            var brr = [msg, i]
            age.push(brr);//将每一行的数据和对应的行数保存在二维数组中
        };
        flag = true;//只能点击一次
        btn.onclick = function() {
            if (flag) {
                age = age.sort();//从小到大排序
                for (var i = 0; i < age.length; i++) {
                    var key = age[i][1];
                    result.push(tr[key]);//将排序后的tr保存起来
                };
                tbody.innerHTML = "";
                for (var i = 0; i < result.length; i++) {
                    tbody.appendChild(result[i]);//更新整个table
                };
                flag = false;
            };
        }

    }

实现一个可拖动的div(要考虑到浏览器兼容性)

/*盒子设置宽高，而且相对定位*/
 #box {
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative; 
    }

//肯定窗口大小
var screenheight=document.body.clientHeight   /*混杂模式*/
                 ||document.documentElement.clientHeight /*标准模式*/
                 ||window.innerHeight;  /*移动设备*/
var screenwidth=  document.body.clientWidth   /*混杂模式*/
                  ||document.documentElement.clientWidth /*标准模式*/
                   ||window.innerWidth;

/*  a) 给须要拖拽的节点绑定mousedown, mousemove, mouseup事件
    b) mousedown事件触发后， 开始拖拽
    c) mousemove时， 须要经过event.clientX和clientY获取拖拽位置， 并实时更新位置
    d) mouseup时， 拖拽结束
    e) 须要注意浏览器边界的状况*/

<body>
    <div id="div" style="width: 100px;height: 100px;background: red;position: absolute;">
    </div>
    <script>
    var div = document.getElementById("div");
    var pageWidth = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
    var pageHeight = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;
    div.onmousedown = function(e) {
        var e = e || window.event;
        var a = e.clientX - div.offsetLeft;
        var b = e.clientY - div.offsetTop;

        div.onmousemove = function(e) {
            console.log(this.offsetHeight)
            var c = e.clientX - a;
            var d = e.clientY - b;
            if (c < 0) c = 0;
            if (d < 0) d = 0;
            if (c > pageWidth - this.offsetWidth) c = pageWidth - this.offsetWidth;
            if (d > pageHeight - this.offsetHeight) d = pageHeight - this.offsetHeight;

            this.style.left = c + 'px';
            this.style.top = d + 'px';
        }
        this.onmouseup = function() {
            div.onmousemove = null;
        }
    }

让写个从几个li中取下标的闭包代码

<body>
    <ul>
        <li>0</li>
        <li>1</li>
        <li>2</li>
    </ul>
    <script type="text/javascript">
      window.onload=function(){
          /*方法一：循环：闭包*/
         /*var li=document.getElementsByTagName("li");
         for (var i = 0; i < li.length; i++) {
             li[i].onclick=(function(i){
                 return function(){
                     alert(i);
                 }
             })(i)
         };*/

         //方法二：事件代理
         var ul=document.getElementsByTagName("ul")[0];
         ul.onclick=function(e){
            console.log(e.target.innerHTML)
         }
      }

    </script>
</body>

手写闭包，继承,

//闭包内的变量不会被垃圾回收机制回收
function fn(){
    var n=0;
    return function(){
        n++;
        console.log(n);
    }
}
var foo=fn();
foo();//1
foo();//2
foo();//3

手写事件绑定

var EventUtil={
            addEvent:function(item,type,fn){
               if (item.addEventListener) {
                     item.addEventListener(type,fn,false);
               }else if (item.attachEvent) {
                     item.attachEvent('on'+type,fn)  //IE
               }else{
                     item['on'+type]=fn;
               }
            },
            removeEvent:function(item,type,fn){
                if (item.removeEventListener) {
                     item.removeEventListener(type,fn,false);
               }else if (item.detachEvent) {
                     item.detachEvent('ob'+type,fn)  //IE
               }else{
                     item['on'+type]=null;
               }
            },
            getEvent:function(e){
               return e || window.event;
            },
            getTarget: function(e) {
                var e = this.getEvent(e);
                var target = e.target || e.srcElement;
                if (target.nodeType === 3) {//空白节点
                    target = target.parentNode;
                }
                return target;
            }
        }

手写一个原生ajax

<body>
    <button id="btn" type="button">AJAX局部刷新</button>
    <div id="result"></div>
    <script type="text/javascript">
        var btn=document.getElementById("btn");
        var result=document.getElementById("result");
        btn.onclick=function(){
            var xhr=null;
            if (window.XMLHttpRequest) {
                xhr=new XMLHttpRequest();
            }else{
                xhr=new ActiveXObject("Microsoft.XMLHTTP")
            }
            xhr.open("GET","url",true);
            xhr.onreadystatechange=function(){//建立一个响应HTTP请求变化的函数
                if (xhr.readyState===4 && xhr.status===200) {
                    //使用JavaScript和DOM局部刷新页面
                    result.innerHTML=xhr.responseText;
                }
            }
            xhr.send(null);
        }
    </script>

手写实现jquery里面的insertAfter（结合nextSibling和insertBefore来实现）

    <script type="text/javascript">
    window.onload = function() {
        var one = document.getElementById("one");
        var two = document.createElement("div");
        two.innerHTML = "2";
        function insertAfter(two, one) {
            var parent = one.parentNode;
            // 看子元素里有几个属性节点
            var child = parent.childNodes;
            var count = 0;
            for (var i = 0; i < child.length; i++) {
                if (child[i].nodeType === 1) {
                    count++;
                };
            };
            /*若是只有一个*/
            if (count == 1) {
                parent.appendChild(two);
            } else {
                //判断下一个节点是元素节点，nodeType=1
                var three = one.nextSibling;
                while (three.nodeType != 1) {
                    three = three.nextSibling;
                };
                parent.insertBefore(two, three);
            }
        }
        insertAfter(two, one);
    }

toggleClass实现

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>toggle</title>
    <style>
    #test {
        width: 400px;
        height: 300px;
        margin: 50px auto;
    }
    .red {
        border: 5px solid red;
    }
    
    .opacity {
        opacity: 0.2;
    }
    
    .yellow {
        background-color: yellow;
    }
    </style>
</head>
<body>
    <div id="test" class="yellow"></div>
    <br/>
    <div style="text-align:center;margin:0 auto">
        <button type="button" onclick="toggleClass('red')">红色边框</button>
        <button type="button" onclick="toggleClass('opacity')">内填充</button>
    </div>
    <script type="text/javascript">
    var ele = document.getElementById('test'); //获得元素
    function toggleClass(newClass) {
        var currentClass = ele.className;//获取当前样式
        var arr = [];
        var exist = false;//用变量来标识类是否存在
        if (!currentClass) {//若是当前样式不存在，直接添加
            ele.className = newClass;
        } else {//若是存在
            arr = currentClass.split(' ');//将样式存放在数组里方便判断里面是否存在新的样式
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == newClass) {//若是发现存在
                    exist = true;//标记为当前样式中存在新的样式
                    ele.className = currentClass.replace(newClass, '').trim();//经过字符串的replace方法去除样式，在赋值给元素的className                
                    break;//退出循环
                }
            }
            if (!exist) {//若是当前样式中都不存在新的样式
                ele.className=currentClass+' '+newClass;//将样式添加到当前样式当中
            };
        }
    }
    </script>
</body>
</html>

写一个通用的事件侦听器函数?

    window.onload = function() {
        var Event = {
            /*视能力分别使用dom2||IE||dom0方式 来绑定事件*/
            addEvent: function(ele, type, fn) {
                if (ele.addEventListener) {
                    ele.addEventListener(type, fn, false);
                } else if (ele.attachEvent) {
                    ele.attachEvent('on' + type, function() {
                        fn.call(ele);
                    });
                } else {
                    ele['on' + type] = fn;
                }
            },
            removeEvent: function(ele, type, fn) {
                if (ele.removeEventListener) {
                    ele.removeEventListener(type, fn, false);
                } else if (ele.detachEvent) {
                    ele.detachEvent('on' + type, fn);
                } else {
                    ele['on' + type] = null;
                }
            },
            stopProrpgation: function(e) {

                e = this.getEvent(e);
                console.log(e);
                if (e.stopProrpgation) {
                    e.stopProrpgation();
                } else {
                    e.cancleBubble = true;
                }
            },
            preventDefault: function(e) {
                e = this.getEvent(e);
                if (e.preventDefault) {
                    e.preventDefault();
                } else {
                    e.returnValue = false;
                }
            },
            getEvent: function(e) {

                return e || window.event;
            },
            getTarget: function(e) {
                var e = this.getEvent(e);
                var target = e.target || e.srcElement;
                if (target.nodeTypr === 3) {
                    target = target.parentNode;
                }
                return target;
            }
        }
        var btn = document.getElementById('btn');

        function handler() {
            /*alert(this.id);*/
            Event.getEvent();
            Event.stopProrpgation();
            Event.preventDefault();
        }
        Event.addEvent(btn, 'click', handler);
        /* Event.removeEvent(btn, 'click', handler);*/
    }

如何获取UA

用来代表用户的浏览器名称和版本，操做系统等信息。在每一次HTTP请求中，响应头部都会包含UA字符串，用于浏览器识别和数据统计。在js中能够用navigator.userAgent属性来获取本浏览器的UA字符串。UA可让网页开发者可以根据不一样的浏览器发送不一样的显示内容，为了不浏览器不支持的功能，以得到更好的用户体验。例如“Mozilla/1.0 (Windows NT 6.1; rv:2.0.1) Gecko/20100101Firefox/4.0.1”,此字符串代表这是一个 Windows 版的使用 Gecko 引擎(火狐浏览器内核)的火狐浏览器。

<form name="Browser">
    浏览器名称：<input type="text" name="appCodeName" ><br>
    完整的浏览器名称：<input type="text" name="appName" ><br>
    浏览器版本：<input type="text" name="appVersion" ><br>
    浏览器的用户代理字符串：<input type="text" name="userAgent" ><br>
    <button type="button" onclick="getUA()">点击获取浏览器信息</button>
</form>
<script>
    function getUA(){
        document["Browser"][0].value=navigator.appCodeName;
        document["Browser"][1].value=navigator.appName;
        document["Browser"][2].value=navigator.appVersion;
        document["Browser"][3].value=navigator.userAgent;
    }
</script>

字符串匹配，一个字符串子在另外一个字符串中出现的次数

function getStrNum(subStr,str){
    //RegExp构造函数动态建立正则表达式，RegExp构造函数第一个参数是正则表达式主题部分，
    //第二个参数可选，是正则的修饰符，g表示全局搜索
    var pattern=new RegExp(subStr,'g');//全局匹配的正则对象
    //
    return str.match(pattern).length;
}

将一篇文章的每一个单词首字母大写；不改变原有的格式

function tooUpperLetter(str) {
    return str.replace(/\b\w+\b/g, function(word) {
        return word.substring(0, 1).toUpperCase() + word.substring(1);
    })
}

快排实现的原理

function quickSort(arr){
    if (arr.length<=1) return arr;
    var left=[],right=[];
    var num=Math.floor(arr.length/2);//取得中间的数值，将它从数组中删除
    var value=arr.splice(num,1);
    for (var i = 0; i < arr.length; i++) {
        if (arr[i]<value) {
           left.push(arr[i])；
        }else{
            right.push(arr[i]);
        }
    }
 return arguments.callee(left).concat(numValue,arguments.callee(right));
}

请用Css写一个简单的幻灯片效果页面

百度搜索框

手机某一行均分为四个，不知道尺寸的状况下

如何本身实现一个alert

三个tab页面，实现代码

有没有写过插件，用js写过什么（而后就是具体描述怎么实现的）

给你一个url,判断是不是同一个域名(qq.com)下的

图片预加载

.js：写一个递归。就是每隔5秒调用一个自身，一共100次。

js轮播实现思路

使用js画一个抛物线,抛物线上有个小球随着抛物线运动,有两个按钮能使小球继续运动中止运动

实现两个大整数的相加,怎么实现两个大整数的相乘说下思路

说下选择排序,冒泡排序的实现思路

url去参数的题

手写一个盒子模型中，获取盒子内子节点的class样式

深度遍历DOM节点

复杂的酒店预订table

手写jsonp的实现

手写链表倒数第K个查找

手写一个jQuery插件

手写一个简单遍历算法

手写归并排

实现两个数组的排序合并，我一开始先合并再排序，他不乐意，而后我用了相似插入排序的方法

手写实现一个promise（不会）

手写实现requireJS模块实现（想了半天才想到createElement("script"），配合异步来加载，闭包导出）

JS配合DOM实现EChart柱状图

移动端

有移动端的经验么？

移动端适配问题

1) <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

//width=device-width ：强制让文档的宽度与设备的宽度保持1:1

// initial-scale=1.0：文档初始化缩放比例是1:

//user-scalable=0：不容许用户点击屏幕放大浏览，

//maximum-scale=1.0：容许用户缩放到的最大比例，

注意：content里多个属性的设置必定要用逗号+空格来隔开，若是不规范将不会起做用。

其余属性有：width;height; initial-scale; minimum-scale; maximum-scale; user-scalable;

2) <meta name="apple-mobile-web-app-capable" content="yes" />

//iPhone私有标签，它表示：容许全屏模式浏览

3) <meta name="apple-mobile-web-app-status-bar-style" content="black" />

//iPhone私有标签，它指定的iPhone中safari顶端的状态条的样式

4) <meta name="format-detection" content="telephone=no; email=no" /> //不识别邮件和不把数字识别为电话号码

你用了移动端的什么库类和框架？

移动端要注意哪些
适配有去考虑么，retina屏幕啊？

关于前端

你以为哪些站点前端技术比较好的？或者说你平时怎么学前端的？看过哪些前端的书

你有什么规划？

你所了解的前端技术栈有哪些

你有什么问题要问的么？前端妹子的发展路线都有哪些？前端技术多而杂，好的学习方法?

移动端和pc差异

自学经历

数据结构

解释平衡二叉树，以及在数据结构中的应用

平衡二叉树相关知识

图论最短路径算法

数组和链表的区别，空间和时间上的优劣，查找和删除的选择

快排的时间复杂度和空间复杂度。

常见排序算法的时间复杂度

数据集A、数据集B大小500GB，电脑内存很小，如何求得AB的差集。

数组和链表的区别

后序遍历的实现代码

排序算法总结

栈和队列

冒泡快排算法思路，复杂度

整型数组全排列问题

virtual dom的实现，diff算法

对模块化了解吗？说说有哪些模块化的库，有了解过模块化的发展的历史吗？（commonJS，RequireJS，SeaJS）

分别说说同步和异步模块化的应用场景，说下AMD异步模块化实现的原理？（看JS设计模式的时候看过同步模块模式，因此我只答了同步模块化的实现，可是AMD异步的不会）

如何将项目里面的全部的require的模块语法换成import的ES6的语法？

复习数据结构排序算法从新写一遍，二分，链表的算法，BFS，DFS，图论最短路径等算法，之前基础不错写了大量博客，因此看看本身的博客，复习起来很快

刷前端面经 bind，debounce，once，深浅拷贝等的ployfill

事件委托，JQ链式调用实现，原生ajax，函数式，柯里化

常见的跨域方式和原理（主要是jsonp和CORS，记得CORS必定要动手本身写后端才能理解深入）

前端安全之XSS和CSRF，以及如何防护

ES6部分，let暂时性死区，箭头函数（this指针，arguments的坑），generator/iterator，promise，阮一峰老师的那本电子书

模块化历史以及同步异步原理

webpack 2.0 慕课网上看一个大神的视频，讲的很好

360奇舞团瓜瓜老师的性能优化的视频，关键渲染路径，网页渲染过程，资源对渲染的阻塞

根据前几轮面试暴露的缺点，作了下面的实践

80行代码的类工厂，原型链继承面向对象的一个实践

100行简单实现AMD异步模块加载器（JS设计模式这本书上有样例代码）

看Vue文档练手，而后阅读Vue.js早期源码，简单实现MVVM双向绑定，数组监听，简单指令实现

看gayhub上的仓库的代码，模仿virtual-dom的实现，diff算法

padding百分比是相对于父级宽度仍是自身的宽度