腾讯前端面试题详解

废话不说，直接上题。

1.用正则把yya yyb yyc变成yya5 yyb6 yyc7？

　　正则用的很少，思想是对的 用replace方法，可是第二个须要用function，得出如下方法：其实就是考replace方法的第二个参数，function。

j=5;str.replace(/\w+/g,function(m){

　　return m+j++;

});

function的第一参数表明匹配正则的字符串，第二个表明第一个子表达式匹配的字符串，第三个表明第二个子表达式匹配的字符串。

面试官顺带提了下数组的forEach(function(value,index,arr){});

forEach的第二个参数是干吗的，我没答上，实际上是this(context)，当执行回调函数时，做为this的值。若是省略 this，则 undefined将用做 this 值。回调函数中的第三个参数是包含元素的数组对象。此方法在IE8以及如下不支持。

 

2.arr = [1,2,3];arr.slice(1,2,3) ;arr.splice(1,2,3,4)?

　　slice只接受两个参数，第三个参数没用，所以就是arr.slice(1,2),第一个表明start，第二个表明end（我当时当成了length），结果其实返回[2]。包含从 start 到 end （不包括该元素）。

splice能够接受无数个参数，第一个是开始项，第二项是要删除的个数，第三项以及最后一项是添加到数组的项。返回的值是删除的数组：[2,3]，数组arr变成[1,3,4]。

 

3.get请求和post请求的区别？

　　get请求数据有限，由于在url上面。所以也会引发安全问题。面试官提到 使用history就能够进行攻击。

post请求没法保存标签。post请求不会缓存数据，get方法会，能够经过时间戳的方式避免。

GET请求只能传文本给服务器，POST能够传文本和二进制数据，如上传文件。

get请求的效率比post请求高，缘由是get请求只请求一次（header），post请求须要请求两次（header和body）。（还有包的内容不同，服务器处理时，post的包处理时间长。腾讯面试官说的。POST的Header比GET大一些）

（这里提下百度面试官提的问题，get请求和post请求头的内容和区别，当时没答出来：区别：

get请求头：

request-line    get    url      http/1.1

accept    */*

accept-encoding    gzip,deflate

accept-language  zh-cn

connection keep-alive

host   localhost

referer    url

user-agent

post请求:

request-line    post   url      http/1.1

accept    */*

accept-encoding    gzip,deflate

accept-language  zh-cn

Cache-Control:   no-cache

connection keep-alive

content-length   34

content-type   application/x-www-form-urlencoded

host   localhost

referer    url

user-agent

由于访问同一台服务器，因此返回头是同样的。

response:

status-line   http/1.1  200 ok

cache-control    private

Content-Type: text/html; charset=utf-8
Content-Length: 60

Date: Sun, 05 Jun 2011 15:47:39 GMT
Server: Microsoft-IIS/6.0

....

）

 

4.跨站请求伪造（csrf）

　　用户A 用浏览器 访问了博客园网站，登陆后，会把登陆信息保存在用户A的浏览器cookie中。这时用户A访问了攻击人的网站 B,可是B网站一加载到用户A的浏览器中，就执行一段js文件，这个js文件是向博客园网站请求改用户密码，那么博客园网站接到这个请求时，会验证，因为以前用户A的浏览器cookie中保存了登陆信息，博客园网站会认为这是用户的操做，就直接执行。这就是所谓的请求伪造。能够经过服务器端的随机数token（最安全）或者判断referer解决。

 

5.css3  动画定义

  @keyframes IDENT（动画名字） {
     from { Properties:Properties value; } Percentage { Properties:Properties value; } to { Properties:Properties value; } } 或者所有写成百分比的形式： @keyframes IDENT { 0% { Properties:Properties value; } Percentage { Properties:Properties value; } 100% { Properties:Properties value; } }

 .demo1 { width: 50px; height: 50px; margin-left: 100px; background: blue; -webkit-animation-name:'wobble';/*动画属性名，也就是咱们前面keyframes定义的动画名*/ -webkit-animation-duration: 10s;/*动画持续时间*/ -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是同样的*/ -webkit-animation-delay: 2s;/*动画延迟时间*/ -webkit-animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/ -webkit-animation-direction: alternate;/*定义动画方式*/ }

6.seajs在打包，压缩时，有什么缺点？

　　seajs加载模块，会引发屡次http请求，所以须要打包，压缩。

若是要用Seajs, 最好使用SPM提供的工具进行打包压缩, 一是由于像require这种固定语法的, 能够当作是关键字, 通常压缩工具如yuicompressor会改为其余名字; 二是, 过程当中会分析各文件的相互依赖,并把某文件的依赖文件合并到这个文件中; 三是, 由于遵循了统一的CMD规范, 这样能够将你写的优秀模块代码发布到http://module.seajs.org上, 其余人就很方便的install你的模块. SPM和Seajs的关系能够当作是npm和nodejs的关系...

spm工具是基于node（nodejs的服务平台）的,所以咱们须要先安装 node 和 npm 

7.Backbone的module继承

　　Backbone必须依赖于 Underscore.js，DOM操做和AJAX请求依赖于第三方jQuery/Zepto/ender之一，也能够经过 Backbone.setDomLibrary( lib ) 设置其余的第三方库。

 var extend = function(protoProps, classProps) {
    return inherits(this, protoProps, classProps);
  };

// 自扩展函数

Backbone.Model.extend = Backbone.Collection.extend = Backbone.Router.extend = Backbone.View.extend = extend; 
this指的是Model，protoProps实例属性，classProps静态属性

inherits使用的是原型继承的方法，child.prototype = new parent();里面调用了underscore.js的的extend方法：_.extend（）

// 定义Book模型类
var Book = Backbone.Model.extend({
    defaults : {
        name : 'unknown',
        author : 'unknown',
        price : 0
    }
});

// 实例化模型对象
var javabook = new Book({
    name : 'Thinking in Java',
    author : 'Bruce Eckel',
    price : 395.70
});  

8.当ajax请求状态为3的时候，忽然拔掉网线，会报什么错误？同时，状态为3时，可使用数据吗？
　　第一个好像会报网关错误，504，Gateway Timeout 网关超时。由于不能及时地从远程服务器得到应答。（这个不肯定）
第二个是可使用一些数据，好比，图像的大小。而后面试官又问，还有什么数据？我就卡住了。应该是响应头里面的数据。（不肯定）

9.window.name的用处？
　　跨域（传递参数）。判断当前的window，由于一个页面可能会有iframe，这时会有多个window。保存页面刷新时，用户输入的数据。
同一窗口打开页面，只要window.open(url,name),name同样，就会在同一窗口下打开url。

10.图片的data:url和直接加在图片的优缺点？
　　图片被转换成base64编码的字符串形式，并存储在URL中。使用Data URL技术，图片数据以base64字符串格式嵌入到了页面中，与HTML成为一体。

• 当图片的体积过小，占用一个HTTP会话不是很值得时。可使用Data url
• Data URL形式的图片不会被浏览器缓存，这意味着每次访问这样页面时都被下载一次。这是一个使用效率方面的问题——尤为当这个图片被整个网站大量使用的时候。不适用。
• 能够将Data URL形式的图片存储在CSS样式表中。而全部浏览器都会积极的缓存CSS文件来提升页面加载效率。
• 只要这个图片不是很大，并且不是在CSS文件里反复使用，就能够以Data URL方法呈现图片下降页面的加载时间，改善用户的浏览体验。

紧接着，面试官问：图片始终是要下载的，那么下载一张图片的速度快仍是下载一堆编码快？浏览器对图片的显示快，仍是处理代码的速度快？

其实Data URL实际使用的比较少，在如下条件下可使用：

• 背景图片不能与其余图片以CSS Sprite的形式存在，只能独行
• 背景图片从诞生之日起，基本上不多被更新
• 背景图片的实际尺寸很小

loading.gif就是其中一种。

11.css hack

　　IE6:_，IE7：*,IE8:\9.  

　条件注释：只在IE6下生效 <!--[if IE 6]> 这段文字只在IE6浏览器显示 <![endif]-->

12.跨域必问，自行百度。

 

加油！