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

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

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

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

CSS面试题

一、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 属性的值。

 

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

 

三、盒子模型有多少种

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

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

 

四、正确理解 Repaint 和 Reflow

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

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

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

 

JS面试题

一、运算符

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

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

 

二、字符串处理

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() 方法（参数是空字符串）建立最后的字符串

 

三、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 － （完成）响应内容解析完成，能够在客户端调用了

 

四、正则

两种声明方式

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 匹配一个单词边界，也就是单词和空格之间的位置，不匹配任何字符

 

五、闭包和其做用

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

 

六、框架比较 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库)。

 

七、JS原型链

原型链就是把原型链接在一块儿组成的链，那么为何要把原型链接在一块儿呢？这就是继承啦，当你new一个对象，而后把另外一个对象赋值给他的原型对象

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

这样，Niko就具备了Person的全部属性和方法，

 

八、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

 

九、Jquery绑定事件

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

 

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

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

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

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

 

十一、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中的内容          }      } }

 

十二、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

 

1三、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操做很耗性能

 

1四、BOM浏览器信息

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

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

 

1五、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对象。

 

1六、实现一个遍历数组或对象里全部成员的迭代器

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); }

 

 

1七、实现一个叫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); }

 

1八、实现一个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); }

 

1九、浏览器兼容性举例

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服务器的安全性。 

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

 

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

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

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

 

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

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

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

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

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

 

2二、若是是3.00元，则转为300分，若是是300分，则转为3.00元

 

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

 

2四、全文单词首字母大写

 

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

2六、30分钟等到车几率是70%，那10分钟呢？
 

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

2八、两个很大数的加法运算

 

2九、页面流量
 

30、堆栈
 

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

3二、一个几率问题，假设长江以北有80W人，长江以南有20W人，A向B打电话算一个电话，若是打了10W个电话，那么长江以北打向长江以南的电话有多少个？

3三、任什么时候间分针和时针夹角

 

综合题

 

一、http经常使用的几种状态

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

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

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

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

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

403(FORBIDDEN)：客户端未能得到受权。这一般是在401以后输入了不正确的用户名和密码；

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

 

二、项目中遇到什么问题

流程：

（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低版本强制把点过的连接变色

 

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

减小HTTP请求；

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

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

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

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

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

 

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

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

 

1、内容部分

一、尽可能减小 HTTP请求（减小页面组件、合并文件、CSS Sprites、内联图像是使用 data:URL）

二、减小 DNS查找

三、避免跳转

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

五、推迟加载

六、提早加载（无条件加载、有条件加载、有预期的加载）

七、减小 DOM元素数量

八、用域名划分页面内容

九、使 frame数量最少

十、避免 404错误

 

2、服务器部分

使用内容分发网络

为文件头指定Expires或Cache-Control

Gzip压缩文件内容

配置ETag

尽早刷新输出缓冲

使用GET来完成AJAX请求

避免空的图像来源

 

3、CSS部分

把样式表置于顶部

避免使用CSS表达式（Expression）

用代替@import

避免使用滤镜

 

 

4、 JavaScript部分

把脚本置于页面底部

使用外部JavaScript和CSS

削减JavaScript和CSS

剔除重复脚本

减小DOM访问

开发智能事件处理程序

 

5、Coockie部分

减少Cookie体积

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

 

6、Image 部分

优化图像

优化CSS Spirite

不要在HTML中缩放图像

favicon.ico要小并且可缓存

 

7、 Mobile部分

保持单个内容小于25K

打包组件成复合文本