2014各大互联网前端面试题总结

原文地址：http://www.w3cmark.com/2014/8.html 

每一年的年后回来，总是伴随着一大波人员流动，现在是4月初，这种现象依然是很明显。对于我们前端来说，有了一定经验之后总想另觅高就，毕竟待遇是生活的现实。但是跳槽就有风险，要像得到更好的环境和待遇，不止是面试开价是要狠，还要自己准备好。特别是对于有经验的人，不要抱着自己有两年经验，面试的是高级前端，就不需要准备一下基础知识，可能这些基础知识平时在项目中很少接触，或者有用到的时候再网上一搜就ok了，但是万一在面试的笔试出现或者被面试官问到答不出，估计到时候也就没底气去提高自己的身价了。

       这里归纳了包括网易、腾讯、YY、太平洋网络等等一些广州互联网公司的前端，但不是以公司来分类，毕竟面试题不是死的，不能确保今年改公司的面试一直都是这样。总得来说，前端面试可以分为三大板块：CSS、JS、综合题。下面的归纳就以这三大板块来分类，希望对各位的面试有帮助。后面还有一些题目还没整理答案的，各位可以自己思考下，欢迎微博交流 @w3cmark

CSS面试题

1、display有多少个属性

list-item 此元素会作为列表显示。

run-in 此元素会根据上下文作为块级元素或内联元素显示。

compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

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

），表格前后带有换行符。

inline-table 此元素会作为内联表格来显示（类似

），表格前后没有换行符。

table-row-group 此元素会作为一个或多个行的分组来显示（类似

）。

table-header-group 此元素会作为一个或多个行的分组来显示（类似

）。

table-footer-group 此元素会作为一个或多个行的分组来显示（类似

）。

table-row 此元素会作为一个表格行显示（类似

）。

table-column-group 此元素会作为一个或多个列的分组来显示（类似）。

table-column 此元素会作为一个单元格列显示（类似）

table-cell 此元素会作为一个表格单元格显示（类似

和	）

table-caption 此元素会作为一个表格标题显示（类似

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

 

2、inline-block的兼容支持
IE 7和Firefox 2及以前的版本是不支持inline-block，可以通过设置hasLayout（加上zoom: 1，触发layout）;Firefox 2可以用display: -moz-inline-box、display: -moz-inline-stack

 

3、盒子模型有多少种

IE6盒子模型中，盒子的尺寸包含了内容区，padding，border和margin这四个部分，而W3C的盒子模型中，盒子的尺寸只包含内容区，padding，border 和 margin 被排除在盒子尺寸之外。

注：在 CSS3 中，增加了属性：box-sizing。box-sizing 有两个可选值，一个是默认的content-box一个是border-box，选用后者，盒子模型将按 IE6 的方式进行处理。

 

4、正确理解 Repaint 和 Reflow

Repaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的情况下发生，如改变visibility、outline、背景色等等。

Reflow(重排)就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化，style属性的改变等等。

通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow，所以最好通过设置class的方式；　有动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局；如果功能需求上不能设置position为fixed或absolute，那么就权衡速度的平滑性。

 

JS面试题

1、运算符

 i++和 ++i的区别，i++单独使用时候和++i一模一样，i++是等i这个表达式运算结束后再运算i+1，然后改变i的值,

而++i是先运算i+1,然后改变i的值，然后再和外面的表达式结合，进行整体运算。

 

2、字符串处理

toFixed(num)  //（ps：num为保留小数点后几位） Math.ceil(num)  //返回大于等于其数值参数的最大整数 Math.floor(num)  //返回小于等于其数值参数的最大整数 Math.round(num)  //四舍五入取整 concat  //将两个或多个字符的文本组合起来，返回一个新的字符串。 indexOf  //返回字符串中一个子串第一处出现的索引（从左到右搜索）。如果没有匹配项，返回 -1 。 charAt  //返回指定位置的字符。 lastIndexOf  //返回字符串中一个子串最后一处出现的索引（从右到左搜索），如果没有匹配项，返回 -1 。 match  //检查一个字符串匹配一个正则表达式内容，如果么有匹配返回 null。 substring  //返回字符串的一个子串，传入参数是起始位置和结束位置。 substr  //返回字符串的一个子串，传入参数是起始位置和长度 replace  //用来查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配的字符串。 search  //执行一个正则表达式匹配查找。如果查找成功，返回字符串中匹配的索引值。否则返回 -1 。 slice  //提取字符串的一部分，并返回一个新字符串（与 substring 相同）。 split  //通过将字符串划分成子串，将一个字符串做成一个字符串数组。 length  //返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。 toLowerCase  //将整个字符串转成小写字母。 toUpperCase  //将整个字符串转成大写字母。

 

字符串连接操作非常消耗资源,解决方法是用 Array 对象存储字符串，然后用 join() 方法（参数是空字符串）创建最后的字符串

 

3、XMLHttpRequest

Xmlhttprequest是ajax中的一个最为重要的对象，可以说没有xmlhttprequst的支持就没有ajax技术

xmlRequest =  new  XMLHttpRequest();  //IE7 & Mozilla xmlRequest =  new  ActiveXObject( "Microsoft.XMLHTTP" );  //IE6,IE5

 

xmlhttprequest 具有六个常用的方法,分别是:

(1)abort---------停止当前的请求.

(2)getAllResponseHeader-----------把当前的所有HTTP请求的响应头部作为键值对返回.

(3)getResponseHeader(“header”)----------返回指定的首部串值.

(4)open(“method”,”url”,”Boolean”,”username”,”password”)------建立对服务器的请求,其中method方法为get,put,post等.

(5)send(content)-------------------------具休向服务器提出请求.

(6)setRequestHeader(“header”,”value”)-----------为指定的首部设置值,注在设置之前,必须先调用OPEN()方法.

 

xmlhttprequest还提供了六个常用的属性.

(1)onreadystatechange--------------------当状态改变时就调用由此指定的函数.

(2)readystate----------------------------获得当前状态.通常有5个可取值(0-4)对我们真真正用用的就是4代表完成..

(3)responseText--------------------------通常由服务器返回一个字符串.

(4)responseXML---------------------------表示返回一个XML对象.

(5)status--------------------------------返回服务器状态.(200代表OK,404代表没有找到)

(6)statuse-------------------------------http状态码的相应文本.(ok或未找到).

 

readystate

0 － （未初始化）还没有调用send()方法

1 － （载入）已调用send()方法，正在发送请求

2 － （载入完成）send()方法执行完成，已经接收到全部响应内容

3 － （交互）正在解析响应内容

4 － （完成）响应内容解析完成，可以在客户端调用了

 

4、正则

两种声明方式

var  reg1 = / '\w+' /g; var  reg2 =  new  RegExp( '\'\\w+\'' , 'g' );

 

/d 任意一个数字，0~9 中的任意一个

/w 任意一个字母或数字或下划线，也就是 A~Z,a~z,0~9,_ 中任意一个

/s 包括空格、制表符、换页符等空白字符的其中任意一个

. 小数点可以匹配除了换行符（/n）以外的任意一个字符

[ab5@] 匹配 "a" 或 "b" 或 "5" 或 "@"

[^abc] 匹配 "a","b","c" 之外的任意一个字符

[f-k] 匹配 "f"~"k" 之间的任意一个字母

[^A-F0-3] 匹配 "A"~"F","0"~"3" 之外的任意一个字符

{n} 表达式重复n次，比如："/w{2}" 相当于 "/w/w"；"a{5}" 相当于 "aaaaa"

{m,n} 表达式至少重复m次，最多重复n次，比如："ba{1,3}"可以匹配 "ba"或"baa"或"baaa"

{m,} 表达式至少重复m次，比如："/w/d{2,}"可以匹配 "a12","_456","M12344"...

? 匹配表达式0次或者1次，相当于 {0,1}，比如："a[cd]?"可以匹配 "a","ac","ad"

+ 表达式至少出现1次，相当于 {1,}，比如："a+b"可以匹配 "ab","aab","aaab"...

* 表达式不出现或出现任意次，相当于 {0,}，比如："/^*b"可以匹配 "b","^^^b"...

^ 以字符串开始的地方匹配，不匹配任何字符

$ 以字符串结束的地方匹配，不匹配任何字符

/b 匹配一个单词边界，也就是单词和空格之间的位置，不匹配任何字符

 

5、闭包和其作用

一个是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

 

6、框架比较 jQuery prototype YUI

jQuery

有人说jQuery是被设计用来改变你写JavaScript的方法的。在这一方面jQuery的确作的很好，20行的Dom javascript语句在jQuery里只需要2－3行就可以完成，语言的简洁简直太吸引人了，尤其对于前端开发工程师这群多少有些代码洁癖的人来说，简直美妙绝伦，甚至忽视了其粗糙的面向对象的结构这一致命的缺点。当我们过多的沉浸在代码简洁的乐趣中无法自拔的时候，对更高级抽象的忽视往往阻挡住了我们的视野。因此，jQuery本身无法承担庞大的网站架构任务，也只能在中小网站中搞一搞动画特效而已。但这仍然无法阻止wd们对jQuery的偏爱，只要你有洁癖，那么你一定会喜欢jQuery的。

 

Prototype

优点：基本底层，易学易用，甚至是其他一些js特效开发包的底层，体积算是最小的了。

缺点：如果说缺点，可能就是功能是他的弱项

 

MooTools

在面向对象的方面，MooTools的确作的不错，软件设计模式中的高内聚和低耦合在MooTools中有良好的体现。文档也很完整，但MooTools的占有率一直不高是一个很尴尬的现象，作底端太多余，无法和jQuery竞争，作高端又有点吃力，无法和Yui竞争，给人鸡肋的感觉，就这样。

 

Yui

如果你想作门户、如果你想作SNS、如果你想作大型电子商务和电子政务网站，你大概只有一个选择，那就是Yui，Yui抽象出了比其他框架更复杂的层次结构、把模块按照不同的层次划分，并定义层次之间模块依赖关系，这种设计使得Yui对万行级代码的管理游刃有余，这种重设计轻开发的思想是Yui的核心之一，此外，Yui不仅仅是JS框架，他是JS＋CSS＋规范的集合，必要的约束在团队协作项目中可以降低成本。其实Yui本身也是团队合作的产物。在扩展性方面，我觉得Yui是所有前端框架作的最好的，Ext就是选择基于Yui进行扩展。相对来讲，ProtoType和jQuery显然太小了。

 

轻量级的选择主要是MooTools和jQuery，由于它们的设计思想的不同，jQuery是追求简洁和高效，MooTools除了追求这些目标以外，其核心在于面向对象，所以jQuery适合于快速开发，MooTools适合于稍大型和复杂的项目，其中需要面向对象的支持;另外，在Ajax的支持上，jQuery稍强一些;在Comet的支持上，jQuery有相关的插件，MooTools目前没有，但是Comet的核心在于服务器的支持，浏览器端的接口很简单，开发相关的插件很简单。在面向对象的Javascript Library中，MooTools逐渐战胜了ProtoType(体积大，面向对象的设计不合理等)，也包括script.acul.ous(基于 ProtoType，实际上就是ProtoType上的UI库)。

 

7、JS原型链

原型链就是把原型连接在一起组成的链，那么为什么要把原型连接在一起呢？这就是继承啦，当你new一个对象，然后把另一个对象赋值给他的原型对象

function  Person(){}; function  Niko(){}; Niko.prototype =  new  Person();

这样，Niko就具有了Person的所有属性和方法，

 

8、js模板引擎

模板引擎是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。

 

js模板引擎包括如下：

template

官方参考：http://aui.github.io/artTemplate

BaiduTemplate

官方参考：http://baidufe.github.io/BaiduTemplate

juicer

官方参考：http://juicer.name

doT

官方参考：http://olado.github.io/doT

kissy

官方参考：http://docs.kissyui.com和https://github.com/kissyteam/kissy

mustache

官方参考：https://github.com/janl/mustache.js

 

9、Jquery绑定事件

$( "#obj" ).click( function (){});      $( "#obj" ).change( function (){});      $( "#obj" ).bind( "click" , function (){});      $( "#obj" ).live( "submit" , function (){});

 

10、cookie(值不能为中文，要经过编码处理)

大多数浏览器规定Cookie大小不超过4K，每个站点能保存的Cookie不超过20个，所有站点保存的Cookie总和不超过300个

当没有指明cookie时间时，所创建的cookie有效期默认到用户浏览器关闭止，故被称为会话cookie

document.cookie="userId=828; userName=hulk";

 

11、Ajax过程

var  xmlHttp; function  createXMLHttpRequest(){      if  (window.ActiveXObject) {          xmlHttp =  new  ActiveXObject( "Microsoft.XMLHTTP" );      }      else           if  (window.XMLHttpRequest) {              xmlHttp =  new  XMLHttpRequest();          } }    function  startRequest(){      createXMLHttpRequest(); //第一步: 创建异步调用对象      xmlHttp.onreadystatechange = handleStateChange; //第二步: 将对象状态与事件相关联      xmlHttp.open( "GET" ,  "simpleResponse.txt" ,  true ); ///第三步: 加载数据所在的服务器页      xmlHttp.send( null ); //第三步: 发送请求 }    function  handleStateChange(){      if  (xmlHttp.readyState == 4) {          if  (xmlHttp.status == 200) {              document.getElementById( "test" ).innerHTML = xmlHttp.responseText; //返回simpleRespose.txt中的内容          }      } }

 

12、js里面的基础对象和基础数据类型

JS数据类型:number数字(NaN)、string字符串、boolean布尔值、函数类型、object对象（obj、[]、{}、null）、undefined未定义

typeof 用来判断数据类型

显示/强制类型转换（ Number()、parseInt()、parseFloat() ）

基础对象：Document、Window、Navigator、Screen、History、Location

 

基础对象

JS Array、JS Boolean、JS Date、JS Math、JS Number、JS String、JS RegExp、JS Functions、JS Events

Browser 对象 Window、Navigator、Screen、History、Location

 

13、DOM年份，DOM好处和坏处，怎么禁用DOM

Document Object Model (DOM)是HTML和XML文档的编程接口。

DOM标准主要要为：微软DOM与W3C DOM，一般IE实现的是微软DOM，而其它浏览器则不同程度的实际了W3C DOM

DOM Level Zero ,事实上从来不存在DOM 0版本，只是人们的戏称。只是在W3C DOM出现之前，不同浏览器（主要是IE与NN）实现的DOM相互排斥，1996年的浏览器大战所产生的DHTML就是所谓的DOM 0，它是脚本程序员的恶梦

DOM Level 1 包括DOM Core和DOM HTML。前者提供了基于XML的文档结构图。后者添加了一些HTML专用的对象和方法，从而扩展了DOM Core.目前IE在内的大部分桌面浏览器都通过不同方式实现了DOM 1

DOM Level 2 引入几个新模块：DOM视图，事件，样式，遍历和范围。IE只实现了一部分，火狐浏览器几乎全部实现，除IE之外的浏览器也实现了大部分

DOM Level 3 引入了以统一的方式载入和保存文档的方法。DOM Core被扩展支持所有的XML1.0的特性。火狐浏览器之类实现了少部分

 

好处：js调用dom的属性和方法就可以编程控制网页中的各种元素

坏处：DOM操作很耗性能

 

14、BOM浏览器信息

BOM是Browser Object Model的缩写，简称浏览器对象模型

window对象、History对象、Location 对象、Navigator对象

 

15、seaJS AMD CMD kissy

 

简单友好的模块定义规范：Sea.js 遵循 CMD 规范，可以像 Node.js 一般书写模块代码。

自然直观的代码组织方式：依赖的自动加载、配置的简洁清晰，可以让我们更多地享受编码的乐趣。

kissy是taobao UED小组推的一款js框架。官网地址：http://github.com/kissyteam/kissy；

 

作为一个规范，只需定义其语法API，而不关心其实现。AMD规范简单到只有一个API，即define函数：

define([module-name?], [array-of-dependencies?], [module-factory-or-object]);

其中：

module-name: 模块标识，可以省略。

array-of-dependencies: 所依赖的模块，可以省略。

module-factory-or-object: 模块的实现，或者一个JavaScript对象。

 

16、实现一个遍历数组或对象里所有成员的迭代器

var  each =  function (obj, fn){         //+++++++++++答题区域+++++++++++                           //+++++++++++答题结束+++++++++++ };    try {                  var  data1 = [4,5,6,7,8,9,10,11,12];         var  data2 = {                 "a" : 4,                 "b" : 5,                 "c" : 6         };                  console.group(data1);                  each(data1,  function (o){                 if ( 6 ==  this  )                         return  true ;                 else  if ( 8 ==  this  )                         return  false ;                 console.log(o +  ": \""  +  this  +  "\"" );         });                  console.groupEnd();            /*------[执行结果]------            1: "4"         2: "5"         4: "7"          ------------------*/                  console.group(data2);                  each(data2,  function (v, n){                 if ( 5 ==  this  )                         return  true ;                 console.log(n +  ": \""  + v +  "\"" );         });                  console.groupEnd();            /*------[执行结果]------            a: "4"         c: "6"            ------------------*/          } catch (e){         console.error( "执行出错，错误信息: "  + e); }

 

 

17、实现一个叫Man的类，包含attr, words, say三个方法

var  Man; //+++++++++++答题区域+++++++++++                //+++++++++++答题结束+++++++++++    try {                  var  me = Man({ fullname:  "小红"  });         var  she =  new  Man({ fullname:  "小红"  });                  console.group();         console.info( "我的名字是："  + me.attr( "fullname" ) +  "\n我的性别是："  + me.attr( "gender" ));         console.groupEnd();         /*------[执行结果]------            我的名字是：小红         我的性别是：<用户未输入>            ------------------*/            me.attr( "fullname" ,  "小明" );         me.attr( "gender" ,  "男" );         me.fullname =  "废柴" ;         me.gender =  "人妖" ;          she.attr( "gender" ,  "女" );                  console.group();         console.info( "我的名字是："  + me.attr( "fullname" ) +  "\n我的性别是："  + me.attr( "gender" ));         console.groupEnd();         /*------[执行结果]------            我的名字是：小明         我的性别是：男            ------------------*/                  console.group();         console.info( "我的名字是："  + she.attr( "fullname" ) +  "\n我的性别是："  + she.attr( "gender" ));         console.groupEnd();         /*------[执行结果]------            我的名字是：小红         我的性别是：女            ------------------*/            me.attr({                 "words-limit" : 3,                 "words-emote" :  "微笑"         });         me.words( "我喜欢看视频。" );         me.words( "我们的办公室太漂亮了。" );         me.words( "视频里美女真多！" );         me.words( "我平时都看优酷！" );                  console.group();         console.log(me.say());         /*------[执行结果]------            小明微笑："我喜欢看视频。我们的办公室太漂亮了。视频里美女真多！"            ------------------*/            me.attr({                 "words-limit" : 2,                 "words-emote" :  "喊"         });            console.log(me.say());         console.groupEnd();         /*------[执行结果]------            小明喊："我喜欢看视频。我们的办公室太漂亮了。"            ------------------*/          } catch (e){         console.error( "执行出错，错误信息: "  + e); }

 

18、实现一个URI解析方法，把url里#之后的参数解析成指定的数据结构。

function  urlParser(s){         //+++++++++++答题区域+++++++++++                                   //+++++++++++答题结束+++++++++++ }    try {         var  url1 =  "http://www.abc.com/m/s/#page/2/?type=latest_videos&page_size=20" ;         var  url2 =  "http://www.abc.com/m/s/#type=latest_videos&page_size=20" ;         var  url3 =  "http://www.abc.com/m/s/#page?type=latest_videos&page_size=20" ;            console.group();         console.info( urlParser(url1) );         console.info( urlParser(url2) );         console.info( urlParser(url3) );         console.groupEnd();         /*------[执行结果]------            ["page", "2", { "type": "latest_videos", "page_size": 20 }]         [{ "type": "latest_videos", "page_size": 20 }]         ["page", { "type": "latest_videos", "page_size": 20 }]                  ------------------*/          } catch (e){         console.error( "执行出错，错误信息: "  + e); }

 

19、浏览器兼容性举例

1）在FireFox中可以使用与HTML节点对象ID属性值相同的JS变量名称，但是IE中不行。

解决办法：在命名上区分HTML节点对象ID属性值和JS变量

 

2）IE不支持JS的const,无法定义JS常量

解决办法：全部用var定义为变量

 

3）在JS中书写URL地址字符串时&字符就直接写为“&”(去掉双引号),不要写“&”，否则容易出现URL识别不正常的错误

 

4）在IE中可以通过showModalDialog和showModelessDialog打开模式和非模式窗口，FireFox下则不能

解决办法：使用Window.Open方法。 如果需要将子窗口中的参数传递回父窗口，可以在子窗口中使用Window.Opener属性来访问父窗口；如果需要父窗口控制子窗口的话，使用Var subWindow = Window.Open(pageURL,Name,Parameters); 来获得新开的窗口对象

 

5）在IE中向表格里添加一行的方法insertRow()如果不指定参数，默认参数为-1,将自动向Table中追加1行；在FireFox中一定要指定参数如-1,参数为空会报错

 

6）在IE中可以使用new ActiveXObject()的方法实例化对象，如var xmlDom = new ActiveXObject("Microsoft.XMLHTTP");但是FireFox不支持ActiveXObject,只能通过这种方法如var xmlDom = new XMLHttpRequest();实例化对象

 

20、反向代理

反向代理（Reverse Proxy）方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个服务器。

通常的代理服务器，只用于代理内部网络对Internet的连接请求，客户机必须指定代理服务器,并将本来要直接发送到Web服务器上的http请求发送到代理服务器中。由于外部网络上的主机并不会配置并使用这个代理服务器，普通代理服务器也被设计为在Internet上搜寻多个不确定的服务器,而不是针对Internet上多个客户机的请求访问某一个固定的服务器，因此普通的Web代理服务器不支持外部对内部网络的访问请求。当一个代理服务器能够代理外部网络上的主机，访问内部网络时，这种代理服务的方式称为反向代理服务。此时代理服务器对外就表现为一个Web服务器，外部网络就可以简单把它当作一个标准的Web服务器而不需要特定的配置。不同之处在于，这个服务器没有保存任何网页的真实数据，所有的静态网页或者CGI程序，都保存在内部的Web服务器上。因此对反向代理服务器的攻击并不会使得网页信息遭到破坏，这样就增强了Web服务器的安全性。 

反向代理方式和包过滤方式或普通代理方式并无冲突，因此可以在防火墙设备中同时使用这两种方式，其中反向代理用于外部网络访问内部网络时使用，正向代理或包过滤方式用于拒绝其他外部访问方式并提供内部网络对外部网络的访问能力。因此可以结合这些方式提供最佳的安全访问方式。

 

21、输入网址到出现页面的过程（IP解析，DNS解析等）

宏观来看，浏览器的工作流程是：

发送请求——（服务器响应，返回各种资源）——对返回的资源进行解析渲染，生成页面——将生成的页面展现给用户

 

其中，解析渲染是核心，解析渲染的过程是：

首先，渲染引擎开始解析HTML，将标签转化为dom树中的dom节点。

接着，它解析CSS文件及style标签中的各种样式信息，将这些样式信息对应先前解析好的dom树构建另一颗树——render树。

然后，对render树上的各个节点进行布局，确定每个节点在屏幕上的确切坐标。

最后，遍历render树上个各个节点，对其进行绘制。

 

22、如果是3.00元，则转为300分，如果是300分，则转为3.00元

 

23、新闻ul列表，插入3个，获取index

 

24、全文单词首字母大写

 

25、文章单词（字母）频率出现最高
 

26、30分钟等到车概率是70%，那10分钟呢？
 

27、一个班学舞蹈的有75%，学唱歌的有85%，问同时学习舞蹈和唱歌的最多多少，最少多少？
 

28、两个很大数的加法运算

 

29、页面流量
 

30、堆栈
 

31、-1在计算机中怎么表示，如何判断数组A是否为数组B的子集。
 

32、一个概率问题，假设长江以北有80W人，长江以南有20W人，A向B打电话算一个电话，如果打了10W个电话，那么长江以北打向长江以南的电话有多少个？

33、任何时间分针和时针夹角

 

综合题

 

1、http常用的几种状态

200(OK)：找到了该资源，并且一切正常；

301（永久移动）：请求的网页已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。您应使用此代码告诉 Googlebot 某个网页或网站已永久移动到新位置。

302（临时移动）：服 务器目前从不同位置的网页响应请求，但申请人应当继续使用原有位置来响应以后的请求。此代码与响应 GET 和 HEAD 请求的 301 代码类似，会自动将请求者转到不同的位置，但不应使用此代码来告诉 Googlebot 页面或网站已经移动，因为 Googlebot 要继续抓取原来的位置并编制索引。

304(NOT MODIFIED)：该资源在上次请求之后没有任何修改。这通常用于浏览器的缓存机制；

401(UNAUTHORIZED)：客户端无权访问该资源。这通常会使得浏览器要求输入用户名和密码，以登录到服务器；

403(FORBIDDEN)：客户端未能获得授权。这通常是在401之后输入了不正确的用户名和密码；

404(NOT FOUND)：在指定的位置不存在所申请的资源。(这估计是我们碰到最多的问题)

 

2、项目中遇到什么问题

流程：

（1）接到需求，开需求会议，对需求的要点进行讨论（主要讨论能否实现，实现的难度和时间）

（2）开始制作，具体包括切图和敲代码

（3）进行全面的测试，包括各种设备的各种浏览器进行检查测试，设备包括IOS的iPhone和ipad、安卓的2.x和4.x，浏览器主要包括自带、UC、QQ、百度、chrome

（4）给需求对静态页面的确认

（5）套数据（cms或者协助开发套数据）

（6）专门的测试人员进行测试，协助修bug

（7）最后的上线

移动端的问题

（1）设备测试问题，虽然没有IE，但是设备比较多，分辨率非常不统一，需要一个个设备测试

（2）安卓2.x和4.x的自带浏览器会存在兼容问题，比如用伪类实现的小icon，在高度和宽度为0的下，再用overflow：hidden将看不到效果；

（3）UC低版本强制把点过的链接变色

 

3、网速性能优化的方法(雅虎35条优化建议)

减少HTTP请求；

压缩图片和使用图片Sprite技术

高性能的脚本代码（正确理解 Repaint 和 Reflow、减少对DOM的操作）

使用JSON格式来进行数据交换；

高效使用HTML标签和CSS样式；

使用CDN加速（内容分发网络）

 

Excetional Performance 团队总结出了一系列可以提高网站速度的方法。可以分为 7大类 35条。

包括内容 、服务器 、 CSS 、 JavaScript 、Cookie 、图片 、移动应用 ，七部分。 

 

一、内容部分

1、尽量减少 HTTP请求（减少页面组件、合并文件、CSS Sprites、内联图像是使用 data:URL）

2、减少 DNS查找

3、避免跳转

4、缓存 Ajxa（Gizp 压缩文件、减少 DNS查找次数、精简 JavaScript、避免跳转、配置 ETags）

5、推迟加载

6、提前加载（无条件加载、有条件加载、有预期的加载）

7、减少 DOM元素数量

8、用域名划分页面内容

9、使 frame数量最少

10、避免 404错误

 

二、服务器部分

使用内容分发网络

为文件头指定Expires或Cache-Control

Gzip压缩文件内容

配置ETag

尽早刷新输出缓冲

使用GET来完成AJAX请求

避免空的图像来源

 

三、CSS部分

把样式表置于顶部

避免使用CSS表达式（Expression）

用代替@import

避免使用滤镜

 

 

四、 JavaScript部分

把脚本置于页面底部

使用外部JavaScript和CSS

削减JavaScript和CSS

剔除重复脚本

减少DOM访问

开发智能事件处理程序

 

五、Coockie部分

减小Cookie体积

对于页面内容使用无coockie域名 

 

六、Image 部分

优化图像

优化CSS Spirite

不要在HTML中缩放图像

favicon.ico要小而且可缓存

 

七、 Mobile部分

保持单个内容小于25K

打包组件成复合文本