腾讯前端面试题详解

废话不说，直接上题。

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下生效

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

加油！

posted on 2014-11-20 16:24 chaojidan 阅读(6639) 评论(0) 编辑收藏举报

刷新页面返回顶部

chaojidan

导航

公告

腾讯前端面试题详解