腾讯前端面试题详解

废话不说,直接上题。

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 {
      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规范, 这样可以将你写的优秀模块代码发布到上, 其他人就很方便的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.跨域必问,自行百度。

加油!

原文地址:https://www.cnblogs.com/chaojidan/p/4110892.html