前端开发面试集....

一、什么是前端？

网站内的信息可以直接和其他网站相关信息进行交互，能通过第三方信息平台同时对多家网站的信息进行整合使用；用户在互联网上拥有自己的数据，并能在不同网站上使用；完全基于Web，用浏览器即可实现复杂系统程序才能实现的系统功能；用户数据审计之后，同步于网络数据。

二、语义化的HTML

HTML代码，符合内容的结构化（内容语义化），选择合适的标签（代码语义化），能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
　　1.语义化有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。
　　2.在没有CSS的时候能够清晰的看出网页的结构，增强可读性。
　　3.便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。
　　4.支持多终端设备的浏览器渲染。

　　
三、同步与异步传输的区别

1,异步传输是面向字符的传输，而同步传输是面向比特的传输。 
2,异步传输的单位是字符而同步传输的单位是帧。 
3,异步传输通过字符起止的开始和停止码抓住再同步的机会，而同步传输则是以数据中抽取同步信息。 
4,异步传输对时序的要求较低，同步传输往往通过特定的时钟线路协调时序。 
5,异步传输相对于同步传输效率较低。

简单说

同步传输就是，数据没有被对方确认收到则调用传输的函数就不返回。 接收时，如果对方没有发送数据，则你的线程就一直等待，直到有数据了才返回，可以继续执行其他指令 
异步传输就是，你调用一个函数发送数据，马上返回，你可以继续处理其他事， 接收时，对方的有数据来，你会接收到一个消息，或者你的相关接收函数会被调用。

四、COOKIE和SESSION有什么区别？

cookie保存在客户端，session保存在服务器端，
cookie目的可以跟踪会话，也可以保存用户喜好或者保存用户名密码
session用来跟踪会话
1.cookies存储在浏览器中,可在浏览器控制台下查看.按照域名,路经,存储时间等分权限存储的.
2.session存储在服务器中,一般默认用文件方式存储在服务器,存储方式一般为类似json的方式.session存储原理很简单,即使服务器端语言不支持也可自己实现.
3.session的使用需要客户端来发送识别,也就是session_id.这个session_id可以用cookies存储并发送,也可以直接附在url中传送.由于url传送会不太友好,现在一般用cookies传送.所以禁用cookies会有影响,就只能用url方式传送了.但cookies不是唯一的方式.
3.现在一般使用cookies存储session_id和一些校验工作,主要数据都存储在session.这样容易控制和统计.但具体如何使用两者你可按照自己想法去做.
4.session除了用文件方式存储,还可以存储在各种数据库,或者内存数据库,比如redis等中.建议不要存在mysql等数据库,因为session的读取写入很频繁,对数据库压力很大.建议存储在内存数据库中.
后面衍生出session技术,session技术是要使用到cookie的，之所以出现session技术，主要是为了安全。

使用缓存的2个主要原因：
•   降低延迟：缓存离客户端更近，因此，从缓存请求内容比从源服务器所用时间更少，呈现速度更快，网站就显得更灵敏。
•   降低网络传输：副本被重复使用，大大降低了用户的带宽使用，其实也是一种变相的省钱（如果流量要付费的话），同时保证了带宽请求在一个低水平上，更容易维护了。

• Web缓存的类型
1. 浏览器缓存
2. 代理服务器缓存
3. 网关缓存

请简述 web storage 和 cookie 的区别。

1 、与服务器交互
Web Storage 中的数据仅在存在本地，不与服务器发生交互。
Cookie 中的数据会在浏览器和服务器中来回传递。
2 、存储空间
Web Storage 存储空间更大，可以达到 5M ；Cookie 数据大小不超过 4KB 。
3 、 接口
Web Storage 提供 setItem,getItem,removeItem ， clear 等方法
Cookie 需要自己封装 setCookie ， getCookie 方法
4 、跨域问题
cookie 需要指定作用域，不可以跨域调用，但 Web Storage 可以跨域调用
5、 存储时间
cookie 中的数据在过期时间之前均有效， Web Storage 则不同， sessionStorage 中的数据在当前浏览器窗口关闭后自动删除， localStorage 持久存储数据，除非主动删除数据

注： 但 Cookie 是不可以或缺的： Cookie 的作用是与服务器进行交互，作为 HTTP 规范的一部分而存在 ，而 Web Storage 仅仅是为了在本地 “ 存储 ” 更大容量数据而生。

五、如何理解面向对象？

面向对象是当今主流的一种程序设计理念和设计规范，它取代了早期的"结构化"过程设计开发技术，主张一切皆为对象，程序以人的思维模式去解决问题。面向对像的程序是由类组成的，每个类包含对用户公开的特定功能部分和隐藏的实现部分。传统的结构化程序设计通过设计一系列的过程（即算法）来求解问题。这一些过程一旦被确定，就要开始考考虑存储数据的方式，这就明确的表述了程序员的工作方式。但面相对像却调换了这个顺序，它不必关心数据对象的具体实现，只要能满足用户的需求即可。面向对象有三个最基本的特性，即：封装，继承，多态。

封装（Encapsulation）:使用方法把类的数据隐藏起来，一切皆为对象的基本概念和核心思想，达成对类的封装，让普通类型上升为对象级；封装控制用户对类的修改和访问数据的程度，增强了程序的可维护性。

继承（Implementation）:发生在类和类之间，可分为单继承和多层继承描述父子对象之间的血缘关系， 最终达到的目的是：一旦使用了继承，子类便获得了父类所有的成员（变量和方法），但是父类的私有的方法和属性不能被访问，父类的final成员不能被重写。 一旦使用了继承，父类的实例能指向派生类（子类）的引用。

多态（Multipart）:对象在运行期和编译期具有的两种状态，使代码具有灵活性和重用性。编译时多态，也就是函数重载，所谓函数重载就是指同一个函数名可以对应多个函数的实现,具体调用哪个按照由参数个数，参数类型等来决定。运行时多态：用一个基类的指针或引用来操纵多个派生类型的能力被称为多态性。

六、对怪异模式的理解

所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页进入怪异模式(quirks mode)。

七、JavaScript的数据类型

基本数据类型：Number，String，Boolean，Undefined，Null

复杂数据类型：Object，Array，Function，RegExp，Date，Error

全局数据类型：Math

八、原型链的解释

普通对象是没有prototype属性的,只有隐藏属性__proto__，而函数对象则两者兼有。prototype属性指向的是函数对象的原型对象，对象的__proto__属性是创建实例对象的时候对应的函数对象的原型对象。
在使用New方法初始化函数的时候，得到的新对象的__proto__属性会指向函数对象的原型对象，而函数对象的原型对象又继承至原始对象，数据继承的继承链

九、垂直居中，多行文本垂直居中

一、单行垂直居中： 设置它的实际高度height和所在行的高度line-height相等
二．多行 ：  display:table-cell text-align:center; vertical-align:middle;

十、对闭包的理解

实现一个暴露内部变量，而且外部可以访问修改的函数（get和set，闭包实现） 
定义在一个函数内部的函数，闭包就是将函数内部和函数外部连接起来的一座桥梁。
属性名若是右值则调用get方法，若为左值则调用set方法。左值和右值是C语言里的概念，简单理解为取值和赋值

    function a(x){
       var tem=3;
      function b(y){
          console.log(x+y+(++tem));
         }
         return b;
    }
    1).a函数中的b函数就是闭包了，b函数可以使用a函数的局部变量，参数，最典型的闭包应该是下面这样，将定义在函数中的函数作为返回值
    2).闭包的另一种作用是隔离作用域，请看下面这段代码
    for(var i=0;i<2;i++){
      setTimeout(function(){
              console.log(i);
        },0);
    }
上面这段代码的执行结果是2,2而不是0,1，因为等for循环出来后，执行setTimeout中的函数时，i的值已经变成了2，这就是没有隔离作用域所造成的，请看下面代码
for(var i=0;i<2;i++){
      (function(i){
             setTimeout(function(){
              console.log(i);
        },0)
    })(i);
}会输出0,1，我们的立即执行函数创建了一个作用域，隔离了外界的作用域，闭包的缺点是，因为内部闭包函数可以访问外部函数的变量，所以外部函数的变量不能被释放，如果闭包嵌套过多，会导致内存占用大，要合理使用闭包。

new 操作符到底做了什么
首先，new操作符为我们创建一个新的空对象，然后this变量指向该对象， 其次，空对象的原型执行函数的原型， 最后，改变构造函数内部的this的指向代码如下：

var obj={};
obj.proto=fn.prototype;
fn.call(obj);

1、 说下对this的理解
a) this是Javascript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。
b) 情况一：纯粹的函数调用这是函数的最通常用法，属于全局性调用，因此this就代表全局对象Global。
c) 情况二：作为对象方法的调用 ；函数还可以作为某个对象的方法调用，这时this就指这个上级对象。
d) 情况三 作为构造函数调用；所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象。
e) 情况四 apply调用；apply()是函数对象的一个方法，它的作用是改变函数的调用对象，它的第一个参数就表示改变后的调用这个函数的对象。因此，this指的就是这第一个参数。

2.JavaScript的作用域和作用域链

    JavaScript的作用域指的是变量的作用范围，内部作用域由函数的形参，实参，局部变量，函数构成，内部作用域和外部的作用域一层层的链接起来形成作用域链，当在在函数内部要访问一个变量的时候，首先查找自己的内部作用域有没有这个变量，如果没有就到这个对象的原型对象中去查找，还是没有的话，就到该作用域所在的作用域中找，直到到window所在的作用域，每个函数在声明的时候就默认有一个外部作用域的存在了

3.JavaScript的继承

function A(name){  this.name=name; }
A.prototype.sayName=function(){ console.log(this.name); }
function B(age){ this.age=age; }

原型继承

B.prototype=new A("mbj");  //被B的实例共享
var foo=new B(18);
foo.age;    //18,age是本身携带的属性
foo.name;   //mbj，等价于foo.__proto__.name
foo.sayName(); //mbj,等价于foo.__proto__.proto__.sayName()
foo.toString();  //"[object Object]",等价于foo.__proto__.__proto__.__proto__.toString();

这样B通过原型继承了A，在new B的时候，foo中有个隐藏的属性proto指向构造函数的prototype对象，在这里是A对象实例，A对象里面也有一个隐藏的属性proto,指向A构造函数的prototype对象，这个对象里面又有一个proto指向Object的prototype这种方式的缺第一个缺点是所有子类共享父类实例，如果某一个子类修改了父类，其他的子类在继承的时候，会造成意想不到的后果。第二个缺点是在构造子类实例的时候，不能给父类传递参数。

构造函数继承

function B(age,name){  
A.call(this,name); }
var foo=new B(18,"wmy");
foo.name;     //wmy
foo.age;      //18
foo.sayName();   //undefined

采用这种方式继承是把A中的属性加到this上面，这样name相当于就是B的属性，sayName不在A的构造函数中，所以访问不到sayName。这种方法的缺点是父类的prototype中的函数不能复用。

原型继承+构造函数继承

function B(age,name){  
this.age=age;
A.call(this,name); }
B.prototype=new A("mbj");
var foo=new B(18,"wmy");
foo.name;     //wmy
foo.age;      //18
foo.sayName();   //wmy

这样就可以成功访问sayName函数了，结合了上述两种方式的优点，但是这种方式也有缺点，那就是占用的空间更大了。

十一、基本的两列自适应布局

1 Float:left

2 绝对定位

.clearfix:after{
    content:".";
    display:block;
    clear:both;
    height:0;  
    overflow:hidden;
    }
.clearfix{
            Zoom:1;
}

3、display：inline-block

居中对齐：
display:flex;
align-items:center;//上下
justify-content: center;//水平

十二、OSI模型

HTTP中,TCP,UDP分别在哪些层 
第七层 应用层  DNS FTP
第六层 表示层 不用协议
第五层 会话层 不用协议
第四层 传输层 协议：TCP · UDP 
第三层 网络层 协议：IP (IPv4 · IPv6) 
第二层 数据链路层 协议： 802.11 · 802.16 · Wi-Fi以太网 
第一层 物理层  协议：  RS-443 、RS-232C、RS-485 、理-2593

十三、unix中常用的命令行

cd,pwd,mkdir,rmdir,ls,cp,rm,mv,cat,tac,nl,more,less,head,tail,touch,grep,df,ps,top

十四、解释，以及在数据结构中的应用（红黑树）

一种自平衡二叉查找树

红黑树是每个节点都带有颜色属性的二叉查找树，颜色或红色或黑色

性质1. 节点是红色或黑色。
性质2. 根节点是黑色。
性质3 每个叶节点（NIL节点，空节点）是黑色的。
性质4 每个红色节点的两个子节点都是黑色。(从每个叶子到根的所有路径上不能有两个连续的红色节点)
性质5. 从任一节点到其每个叶子的所有路径都包含相同数目的黑色节点。

把树中的节点定义为红黑两种颜色，并通过规则确保从根节点到叶节点的最长路径的长度不超过最短路径的两倍

十五、手写一个js递归函数（考察arguments.callee，以及arguments的解释）

    function factorial(n){
        if(n<=1){
            return 1;
        }else{
            return n*arguments.callee(n-1);
        }
      }  

arguments是JS的一个内置（隐藏）的对象，当在调用函数时，就会实例化出这个对象，而arguments.callee是一个指向正在执行的函数的指针，这样就可以通过arguments.callee来调用函数，尤其是在编写递归函数的时候

十六、对前端路由的理解？前后端路由的区别？

前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升；前端路由的实现由两种方式：一是通过改变hash值，监听onhashchange事件，这种方式的优点是可以兼容低版本浏览器；二是通过historyAPI,监听popState事件，用pushState和replaceState来实现

后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟

十七、解释一下vue和react，以及异同点

同：1、使用 Virtual DOM
2、提供了响应式（Reactive）和组件化（Composable）的视图组件。
3、将注意力集中保持在核心库，伴随于此，有配套的路由和负责处理全局状态管理的库。

异：1、react 后台是巨头 facebook，功能强大，社区也越来越火，资料文档、技术讨论等方面比 vue 要好些，上手难度比 vue 大不少。
2、vue 小巧灵活，上手比 react 要平滑许多，API 简单但功能并不弱，使用者也很多

十八、前后端分离的意义以及对前端工程化的理解

WEB 前后端分离三个最大的优点在于：
1：最大的好处就是前端JS可以做很大部分的数据处理工作，对服务器的压力减小到最小
2：后台错误不会直接反映到前台，错误接秒较为友好
3：由于后台是很难去探知前台页面的分布情况，而这又是JS的强项，而JS又是无法独立和服务器进行通讯的。所以单单用后台去控制整体页面，又或者只靠JS完成效果，都会难度加大，前后台各尽其职可以最大程度的减少开发难度。

十九、使用css实现一个三角形（盒模型border和css旋转两种方法，主要考察css3旋转）

div{ 
width:0px;
height:0px;
border-width:50px 50px 0 50px;
border-color:red transparent;
border-style:solid;
}

二十、解释一下call函数和apply函数的作用，以及用法

apply：应用某一对象的一个方法，用另一个对象替换当前对象。
call：调用一个对象的一个方法，以另一个对象替换当前对象。
对于apply和call两者在作用上是相同的，但两者在参数上有区别的。
对于第一个参数意义都一样，但对第二个参数：
apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。
如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])

二十一、window.onload和$(document).ready()的区别，浏览器加载转圈结束时哪个时间点？

1.执行时间 
    window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 
    $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 
2.编写个数不同 
     window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 
    $(document).ready()可以同时编写多个，并且都可以得到执行 
3.简化写法 
     window.onload没有简化写法 
     $(document).ready(function(){})可以简写成$(function(){}); 

二十二、setTimeout和setInterval区别，如何互相实现？

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。setTimeout() 只执行 code 一次。

二十三、伪类和伪元素区别

伪类用于向某些选择器添加特殊的效果。
伪元素用于将特殊的效果添加到某些选择器。
伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到
伪类有：:first-child ，:link:，vistited，:hover，:active，:focus，:lang 
伪元素有：:first-line，:first-letter，:before，:after  

二十四、数组去重

1.构建一个新的数组存放结果
2.for循环中每次从原数组中取出一个元素，用这个元素循环与结果数组对比
3.若结果数组中没有该元素，则存到结果数组中

---

1.先将原数组进行排序
2.检查原数组中的第i个元素 与 结果数组中的最后一个元素是否相同，因为已经排序，所以重复元素会在相邻位置
3.如果不相同，则将该元素存入结果数组中

---

1.创建一个新的数组存放结果  
2.创建一个空对象
3.for循环时，每次取出一个元素与对象进行对比，如果这个元素不重复，则把它存放到结果数组中，同时把这个元素的内容作为对象的一个属性，并赋值为1，存入到第2步建立的对象中。说明：至于如何对比，就是每次从原数组中取出一个元素，然后到对象中去访问这个属性，如果能访问到值，则说明重复。

二十五、对mvc的理解

MVC是一种流行的程序架构。MVC是 模型（Model) 、视图(View)、控制器(Control) 的英文首字母的缩写，核心思想是：视图和用户交互  通过事件导致控制器改变  控制器改变导致模型改变  或者控制器同时改变两者  模型改变 导致视图改变 或者视图改变 潜在的从模型里面获得参数 来改变自己。
MVC（Model-View-Controller），即把一个应用的输入、处理、输出流程按照Model、View、Controller的方式进行分离，这样一个应用被分成三个层——模型层、视图层、控制层。
视图(View)：代表用户交互界面，MVC设计模式对于视图的处理是限于视图上数据的采集和处理，以及用户的请求，而不包括在视图上的业务流程的处理。
模型(Model)：业务流程/状态的处理以及业务规则的制定。业务流程的处理过程对其它层来说是黑箱操作，模型接受视图请求的数据，并返回最终的处理结果。业务模型的设计可以说是MVC的核心。
控制(Controller)：可以理解为从用户接收请求, 将模型与视图匹配在一起，共同完成用户的请求，但是它却不做任何的数据处理。
它的优势在与：开发人员可以只关注整个结构中的其中某一层，可以很容易的用新的实现来替换原有层次的实现，可以降低层与层之间的依赖，有利于标准化，利于各层逻辑的复用

二十六、输入一个网址后，会发生什么事情?

第一步：当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。

第二步： 浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。

第三步：，一旦TCP/IP连接建立，浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。

第四步：此时，Web服务器提供资源服务，客户端开始下载资源。

简单来说，浏览器会解析HTML生成DOM Tree，其次会根据CSS生成CSS Rule Tree，而javascript又可以根据DOM API操作DOM

二十七、怎么样让网站反应更快?

1 压缩样式图片 
2启动gzip 压缩 PHP文件 CSS文件 
3 去除不必要的JS文件和图片 
4 压缩js代码 
5 CDN托管
6 网站中JS文件放在最后
7 预解析

---

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

期待的解决方案包括：
文件合并
文件最小化/文件压缩
使用 CDN 托管
缓存的使用（多个域名来提供缓存）

二十七、GET 和 POST区别！

 1. get是从服务器上获取数据，post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。 
建议：
1、get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；
2、在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；

二十八、what’s iframe?

 iframe标签是框架的一种形式，也比较常用到，iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容。iframe标签的最大作用就是让页面变得美观。

 <frame width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe>
框架的优点
•   重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)
•   方便制作导航栏
框架的缺点
•   会产生很多页面，不容易管理•  不容易打印•  浏览器的后退按钮无效
•   代码复杂,无法被一些搜索引擎索引到•  多数小型的移动设备（PDA 手机）无法完全显示框架•  多框架的页面会增加服务器的http请求
•   由于上面诸多缺点，因此不符合标准网页设计的理念,已经被标准网页设计抛弃
提示: 目前框架的所有优点完全可以使用Ajax实现，因此已经没有必要使用框架了。

二十九、什么是csrf?

跨站请求伪造 ：攻击者利用合法用户的身份信息进行信息窃取的行为
怎么阻止：在网页中设置一个增加伪随机数(token)，因为跨站请求伪造是不会经过网站进行访问的，所以对于不是来自网页访问的请求，都是非法的。

xss，概念:跨站脚本攻击;
原理是攻击者向有XSS漏洞的网站中输入(传入)恶意的HTML代码，当其它用户浏览该网站时，这段HTML代码会自动执行，从而达到攻击的目的。如，盗取用户Cookie、破坏页面结构、重定向到其它网站等。

防御措施
1.当恶意代码值被作为某一标签的内容显示：在不需要html输入的地方对html 标签及一些特殊字符( ” < > & 等等 )做过滤，将其转化为不被浏览器解释执行的字符。
2.当恶意代码被作为某一标签的属性显示，通过用 “将属性截断来开辟新的属性或恶意方法：属性本身存在的 单引号和双引号都需要进行转码；对用户输入的html 标签及标签属性做白名单过滤，也可以对一些存在漏洞的标签和属性进行专门过滤。

三十、了解hack吗，知道了说下你对hack的运用？

由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。

三十一、你对怪异模式的理解

所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页进入怪异模式(quirks mode)。

三十二、用了哪些前端框架

 Bootstrap

Boostrap绝对是目前最流行用得最广泛的一款框架。它是一套优美，直观并且给力的web设计工具包，可以用来开发跨浏览器兼容并且美观大气的页面。它提供了很多流行的样式简洁的UI组件，栅格系统以及一些常用的JavaScript插件。

Bootstrap是用动态语言LESS写的，主要包括四部分的内容：
脚手架——全局样式，响应式的12列栅格布局系统。记住Bootstrap在默认情况下并不包括响应式布局的功能。因此，如果你的设计需要实现响应式布局，那么你需要手动开启这项功能。
基础CSS——包括基础的HTML页面要素，比如表格(table)，表单(form)，按钮(button)，以及图片(image)，基础CSS为这些要素提供了优雅，一致的多种样式。
组件——收集了大量可以重用的组件，如下拉菜单（dropdowns），按钮组（button groups），导航面板（navigation control）——包括：tabs,pills,lists标签，面包屑导航（breadcrumbs）以及页码（pagination），缩略图(thumbnails)，进度条（progress bars），媒体对象（media objects）等等。
JavaScript——包括一系列jQuery的插件，这些插件可以实现组件的动态页面效果。插件主要包括模态窗口（modals），提示效果（tool tips），“泡芙”效果（popovers），滚动监控（scrollspy），旋转木马(carousel)，输入提示(typeahead)，等等。
Bootstrap已经足够强大，能够实现各种形式的 Web 界面。为了更加方便地利用Bootstrap进行开发，很多工具和资源可以用来配合使用，下面列举了其中的一部分工具和资源。

三十三、.创建对象的三种方式

　　a.工厂模式，使用简单的函数创建对象，为对象添加属性和方法，然后返回对象
　　b.构造函数模式，创建自定义引用类型，可以像创建内置对象实例一样使用new操作符，这种方法的缺点是，构造函数的每个成员都无法复用，每次创建出的对象都只有私有变量和私有方法，不能实现共用
　　c.原型模式，使用构造函数的prototype属性来指定共享的属性和方法，即使用构造函数定义实例属性，使用原型定义共享的属性和方法
　　d：混合的构造函数，原型方式（推荐）
　　组合式继承是比较常用的一种继承方法，其背后的思路是 使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又保证每个实例都有它自己的属性。
　　e：动态原型方式

三十四、跨域解决方案

js 跨域请求:一个域上加载的脚本获取或操作另一个域上的文档属性。
下面将列出四种实现 JavaScript 跨域方法:

第一种：基于 iframe 实现的跨域要求两个域具有 aa.xx.com,bb.xx.com 这种特点，也就是两个页面必须属于一个基础域（例如都是 xxx.com，或是 xxx.com.cn），使用同一协议（例如都是http）和同一端口（例如都是 80），这样在两个页面中同时添加document.domain，就可以实现父页面调用子页面的函数。

第二种：基于 script 标签实现跨域；script 标签本身就可以访问其它域的资源，不受浏览器同源策略的限制，可以通过在页面动态创建 script 标签。

第三种：后台代理方式;这种方式可以解决所有跨域问题，也就是将后台作为代理，每次对其它域的请求转交给本域的后台，本域的后台通过模拟 http 请求去访问其它域，再将返回的结果返回给前台，这样做的好处是，无论访问的是文档，还是 js 文件都可以实现跨域。

第四种：利用document.domain 实现跨域：
前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域

第五种：window.postMessage
但不是浏览器跟服务器之间交互，而是在两个客户端之间通信。

总结：代理服务器，jsonp(只支持get，不支持post),xhr2(不支持ie10以下，其他都可以) 

三十五、html5新标签

section标签
  <section>标签，定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。一般用于成节的内容，会在文档流中开始一个新的节。它用来表现普通的文档内容或应用区块，通常由内容及其标题组成。但section元素标签并非一个普通的容器元素，它表示一段专题性的内容，一般会带有标题。
article标签
  <article>是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。一般来说，article会有标题部分（通常包含在header内），有时也会包含footer。article可以嵌套，内层的article对外层的article标签有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论可以以article的形式嵌入其中。　　
nav标签
   nav标签代表页面的一个部分，是一个可以作为页面导航的链接组，其中的导航元素链接到其它页面或者当前页面的其它部分，使html代码在语义化方面更加精确，同时对于屏幕阅读器等设备的支持也更好。
aside标签
   aside标签用来装载非正文的内容，被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的，可以被删除，而不会影响到网页的内容、章节或是页面所要传达的信息。例如广告，成组的链接，侧边栏等等。
header标签
  <header>标签定义文档的页眉，通常是一些引导和导航信息。它不局限于写在网页头部，也可以写在网页内容里面。通常<header>标签至少包含（但不局限于）一个标题标记（<h1>-<h6>），还可以包括<hgroup>标签，还可以包括表格内容、标识、搜索表单、<nav>导航等。
footer标签
   footer标签定义section或document的页脚，包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或者日期。作为页面的页脚时，一般包含了版权、相关文件和链接。它和<header>标签使用基本一样，可以在一个页面中多次使用，如果在一个区段的后面加入footer，那么它就相当于该区段的页脚了。

三十六、canvas和svg的区别

SVG
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
Canvas
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

三十七、理解jsonp的作用

为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

jsonp是通过script可以跨域的原理，利用回调函数来执行处理数据的行为

json 是一种数据格式
jsonp 是一种数据调用的方式。
你可以简单的理解为 带callback的json就是jsonp.

三十八、HTML中引入CSS样式有几种形式

link有四种形式:

1.链入外部样式表,就是把样式表保存为一个样式表文件,然后在页面中用
<link rel="stylesheet" type="text/css" href="*.css">链接这个样式表文件.
2.内部样式表,就是把样式表放到页面的<head>区里.
3.导入外部样式表,用@import<!--@import "*.css"-->
4.内嵌样式,就是在标签内写入style="",比如:
<td style="border-left:#cccccc">设置表格左边框的颜色为灰色.

三十九、CSS position

•   分为fix absolute relative static 
•   absolute:绝对定位。参照父级对象，使用top,bottom,left,right定位，脱离文档流，可以使用z-index层次分级 
•   fix:固定定位。参照浏览器窗口，可以使用z-index层次分级 
•   relative:相对定位，不脱离文档流，参照自身静态位置，top,bottom,left,right定位，可以使用z-index层次分级 
•   static:静态，默认设置，不可以使用z-index作用域 

四十、src和href的区别

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。 
•   href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。 浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用link，而不采用@import加载css的原因。 
•   src是source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。当浏览器解析到该元素时，会暂停浏览器的渲染，知道该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。 

四十一、CSS盒子模型

1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;
2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border). 

四十二、CSS选择器优先级

important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承 

四十三、CSS link/import区别

(1) link属于HTML标签，而@import是CSS提供的;
(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
(4) link方式的样式的权重 高于@import的权重. 

四十四、 http状态码含义。

•   304 页面没有修改过 
•   404 找不到页面 
•   503 服务不可用 
•   100继续，200正常，300重定向，400客户端错误，500服务器端错误 

http状态码是表示服务器对请求的响应状态，主要分为以下几个部分
所有状态码汇总：

1xx（临时响应）
表示临时响应并需要请求者继续执行操作的状态代码。

代码 说明
100 （继续） 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。
101 （切换协议） 请求者已要求服务器切换协议，服务器已确认并准备切换。

2xx （成功）
表示成功处理了请求的状态代码。
代码 说明
200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。
201 （已创建） 请求成功并且服务器创建了新的资源。
202 （已接受） 服务器已接受请求，但尚未处理。
203 （非授权信息） 服务器已成功处理了请求，但返回的信息可能来自另一来源。
204 （无内容） 服务器成功处理了请求，但没有返回任何内容。
205 （重置内容） 服务器成功处理了请求，但没有返回任何内容。
206 （部分内容） 服务器成功处理了部分 GET 请求。

3xx （重定向）
表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。

代码 说明
300 （多种选择） 针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。
301 （永久移动） 请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
302 （临时移动） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
303 （查看其他位置） 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。
304 （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。
305 （使用代理） 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。
307 （临时重定向） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

4xx（请求错误）
这些状态代码表示请求可能出错，妨碍了服务器的处理。

代码 说明
400 （错误请求） 服务器不理解请求的语法。
401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
403 （禁止） 服务器拒绝请求。
404 （未找到） 服务器找不到请求的网页。
405 （方法禁用） 禁用请求中指定的方法。
406 （不接受） 无法使用请求的内容特性响应请求的网页。
407 （需要代理授权） 此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。
408 （请求超时） 服务器等候请求时发生超时。
409 （冲突） 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。
410 （已删除） 如果请求的资源已永久删除，服务器就会返回此响应。
411 （需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。
412 （未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。
413 （请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
414 （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。
415 （不支持的媒体类型） 请求的格式不受请求页面的支持。
416 （请求范围不符合要求） 如果页面无法提供请求的范围，则服务器会返回此状态代码。
417 （未满足期望值） 服务器未满足”期望”请求标头字段的要求。

5xx（服务器错误）
这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。

代码 说明
500 （服务器内部错误） 服务器遇到错误，无法完成请求。
501 （尚未实施） 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。
502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。
503 （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。
504 （网关超时） 服务器作为网关或代理，但是没有及时从上游服务器收到请求。
505 （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。

四十五、JS事件代理。目标、冒泡、捕获

使用事件代理机制，当事件被抛到更上层的父节点的时候，我们通过检查事件的目标对象（target）来判断并获取事件源。 // 获取父节点，并为它添加一个click事件 document.getElementById("parent-list").addEventListener("click",function(e) { // 检查事件源e.targe是否为Li if(e.target && e.target.nodeName.toUpperCase() == "LI") { // 真正的处理过程在这里 //alert(123); console.log("List item ",e.target.id," was clicked!");
  }
});
•   事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。 
•   事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。 
•   事件起泡：从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被一次触发。如果想阻止事件起泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）来组织事件的冒泡传播。 

四十六、页面性能优化，为什么CSS放头上，JS放底下

js是阻塞加载，会影响页面加载的速度，如果js文件比较大，算法也比较复杂的话，影响更大。所以要放在底下加载；如果CSS放在底下加载的话，页面出现白屏。CSS放在前端，页面渲染时首先是根据DOM结构生成一个DOM树然后加上CSS样式生成一个渲染树 
（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。 （2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数 （3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。 （4） 当需要设置的样式很多时设置className而不是直接操作style。 （5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。 （6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。 （7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。 

四十七.jquery 描述

1、jq相比其他角本类库的优势：核心稳定、效率高、兼容性强;有丰富的学习资源、插件多
2、jquery的主旨：以更少的代码，实现更多的功能 (Write less,do more)
3、官网：jquery.com
4、引入jquery文件库
<script language="javascript" type="text/javascript" src="存放路径/jquery-1.7.1.min.js"></script>
5、jquery的标志："$"页面元素的选择、功能函数的前缀都必须使用

四十八、平时如何管理你的项目？

    1、先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等；

    2、编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；

    3、标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；

    4、页面进行标注（例如 页面 模块 开始和结束）；

    5、CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；

    6、JS 分文件夹存放 命名以该JS功能为准的英文翻译。

    7、图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理 

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

Node.js、Mongodb、npm、MVVM、vue,React 。        
网站：w3cfuns,sf,hacknews,CSDN,慕课，博客园，InfoQ,w3cplus等

五十、javascript对象的几种创建方式

    1，工厂模式
    2，构造函数模式
    3，原型模式
    4，混合构造函数和原型模式
    5，动态原型模式
    6，寄生构造函数模式
    7，稳妥构造函数模式

javascript继承的6种方法
1，原型链继承
2，借用构造函数继承
3，组合继承(原型+借用构造)
4，原型式继承
5，寄生式继承
6，寄生组合式继承
详解：https://segmentfault.com/a/1190000002440502

五十一、ajax过程
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.

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

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

(4)发送HTTP请求.

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

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

五十二、异步加载和延迟加载

    1.异步加载的方案： 动态插入script标签
    2.通过ajax去获取js代码，然后通过eval执行
    3.script标签上添加defer或者async属性
    4.创建并插入iframe，让它异步执行js
    5.延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。

五十三、JavaScript 的同源策略。

概念:同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。

这里的同源策略指的是：协议（http://），域名（子域名：www, 主域名：abc.com），端口（:8080）相同，同源策略是一种安全协议。

指一段脚本只能读取来自同一来源的窗口和文档的属性。

五十四、重构、回流

浏览器的重构指的是改变每个元素外观时所触发的浏览器行为，比如颜色，背景等样式发生了改变而进行的重新构造新外观的过程。重构不会引发页面的重新布局，不一定伴随着回流，
回流指的是浏览器为了重新渲染页面的需要而进行的重新计算元素的几何大小和位置的，他的开销是非常大的，回流可以理解为渲染树需要重新进行计算，一般最好触发元素的重构，避免元素的回流；比如通过通过添加类来添加css样式，而不是直接在DOM上设置，当需要操作某一块元素时候，最好使其脱离文档流，这样就不会引起回流了，比如设置position：absolute或者fixed，或者display：none，等操作结束后在显示。

五十五、JavaScript数组函数unshift、shift、pop、push使用

shift:从集合中把第一个元素删除，并返回这个元素的值。

unshift: 在集合开头添加一个或更多元素，并返回新的长度

push:在集合中添加元素，并返回新的长度

pop:从集合中把最后一个元素删除，并返回这个元素的值。

五十六、background-clip:

border-box：背景被裁剪到边框盒。
padding-box：背景被裁剪到内边距框。
content-box：背景被裁剪到内容框。

五十七、试举例：3 个行内元素与块级元素。

块级元素：div , p , form, ul, li , ol, dl, address, hr, menu, table
行内元素：span, strong, em, br, img , input, label, select, textarea