新浪微博前端开发面试

来源：互联网发布：js设置div的样式编辑：程序博客网时间：2024/05/17 04:05

昨晚等了一晚上，没有收到新浪微博的消息，直到今天上午11点半接到Hr电话，让我2点钟到新纪元大酒店进行面试。以为很轻松，但是面试官考察的内容绝对有分量，让我对微博的敬畏之感更加一层。
来到新纪元大酒店是1点40多，路上碰到开面试运营的mm,里面坐着10来等待面试的朋友。1点50我的打电话，过了一会下来一个跟班的同学（比我大一点点的学长），看起来很像原先科协活动室的黄大为同志。

到了4楼，看到hr，昨天看见多他监考我们的考试。

问我做过哪些项目，我就把原来做的几个项目讲给他听，带了优盘，顺便把作品给他展示了一下。问了我几个问题主要是JS是怎么实现的。结果忘得都差不多了，回答的很糟糕。
废话不多说，献上题目：
1. 相册是怎么实现的。
2.问我js用过哪些库，我说jquery。

3.如何实现微博为输入文字便提交的功能（输入框会变粉红色并闪几下，提醒用户要输入文字）。

<html><head><script>  function submit(){    var obj = document.getElementById("Text_area");var rst = document.getElementById("result"); var len = 140-obj.value.length; if(obj !=null){  if(len>=0){rst.innerHTML = "您当前可以输入"+len+"个字符";}else{len = -len;rst.innerHTML = "您当前输入的字符数已超出"+len+"个字符"obj}   }else if (obj ==null) {     change_color(); } }   </script></head><body><div id = "result">您当前可以输入140 个字符</div>请输入内容：<textarea name="TextArea" id="Text_area"  onKeyUp="submit()" cols="60" rows="3" > </textarea><br/><input type ="button" name = " 发布" value = "发布" onclick = "change_color()"/> </body></html>

4“回到顶部”这个按钮怎么实现？
position：fixed
5.javascript如何检测浏览器的类型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML> <HEAD>  <TITLE> New Document </TITLE>  <META name="Generator" content="EditPlus">  <META name="Author" content="">  <META name="Keywords" content="">  <META name="Description" content=""> </HEAD> <BODY> <script> //方法一 function GetIEver() {var ua = navigator.userAgent;//获取用户端信息var b = ua.indexOf ("MSIE");//获取特殊字符位置信息if(b<0){return 0; }return parseFloat(ua.substring(b+5,ua.indexOf(";",b)));//截取字符串，转换数值 } alert(GetIEver());  // 方法二:user-agent字符串检测法var ua = navigator.userAgent.toLowerCase();var info = {ie:/msie/.test(ua)&&!/opera/.test(ua),//匹配IE浏览器op:/opera/.test(ua),//匹配opera浏览器sa:/version,*Safari/.test(ua),//匹配safari浏览器ch:/chrome/.test(ua),//匹配Chrome浏览器ff:/gecko/.test(ua)&&!/webkit/.test(ua)//匹配火狐浏览器 };(info.ie)&&alert("IE浏览器");(info.op)&&alert("opera浏览器");(info.sa)&&alert("Safari浏览器");(info.ff)&&alert("火狐浏览器");(info.ch)&&alert("chrome浏览器"); </script>   </BODY></HTML>

6.如何获取鼠标的位置。
各个浏览器的鼠标定位各不一样，不同版本的IE也不一样。
我们首先要声明一个 evnet 对象，无论移动、点击、按键等，都会激活一个 evnet ，在 Internet Explorer 里， event 是全局变量，会被存储在 window.event 里．在 firefox 或者其他浏览器，event 会被相应的函数获取．当我们将mouseMove函数赋值于document.onmousemove，mouseMove 会获取鼠标移动事件。为了让 ev 在所有浏览器下获取了 event 事件，在Firefox下"||window.event"将不起作用，因为ev已经有了赋值。在 MSIE 中 ev 为空，所以得到 window.event 。
因为我们需要多次获取鼠标位置，所以我们设计了一个 mousePosition 函数，它包含一个参数： event 。因为我们要在 MSIE 和其他浏览器下运行，Firefox 和其他浏览器用 event.pageX 和 event.pageY 来表示鼠标相对于文档的位置，如果你有一个 500*500 的窗口并且你的鼠标在绝对中间，那么 pageX 和 pageY 的值都是 250，如果你向下滚动 500，那么 pageY 将变成 750。MSIE 正好相反，它使用 event.clientX 和 event.clientY 表示鼠标相当于窗口的位置，而不是文档。在同样的例子中，如果你向下滚动500，clientY 依然是 250，因此，我们需要添加 scrollLeft 和 scrollTop 这两个相对于文档的属性。最后，MSIE 中文档并不是从 0，0 开始，而是通常有一个小的边框（通常是 2 象素），边框的大小定义在 document.body.clientLeft 和 clientTop 中，我们也把这些加进去

function mousePosition(e){         if(e.pageX || e.pageY){                  return {x:e.pageX, y:e.pageY};         }         return {                  x:e.clientX + document.body.scrollLeft - document.body.clientLeft,                  y:e.clientY + document.body.scrollTop  - document.body.clientTop         };}document.onmousemove = mouseMove;function mouseMove(e){    e = (e ||event);    var mousePos = mousePosition(e);         document.getElementByIdx('mouseXPosition').value = mousePos.x;         document.getElementByIdx('mouseYPosition').value = mousePos.y;}

7.点击鼠标，如何知道，这个点在哪个位置并作出相应的动作。
采取绑定函数

8.浏览器跨域的问题，如何在web.com中获取sina.com.cn中的用户信息。
9.javascript对IE与火狐有什么不同，哪些参数或者变量是其中一个有，另一个没有的。

10.http请求过程。

HTTP请求流程(转自)

首先，http属于Tcp/Ip模型中的应用层协议，而两个应用程序（我们这里指的就是浏览器与服务器）之间要进行互相通信，首先得建立Tcp连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求信息后，返回相应的应答信息，浏览器接收到来自服务器的应答信息后，对这些数据进行解释执行。

在http 1.0的版本中，浏览器的每次请求（也就是对每一个页面的访问）都要求建立一次单独的连接，在处理完每一次的请求后，就自动释放连接。（这点我们应该都有感觉，比如我们访问一个页面，当该页面在浏览器中显示出来的时候，我们可以拔掉网线，此时该页面上的信息并不会丢失。）而当我们请求的网页文件中有很多图片、音乐、电影等信息时，服务器返回的信息中并不直接包含图片数据，而只是保存该图片的链接，当浏览器进行解释的时候，遇到图片的url时,才向服务器发出对图片的请求信息。可见如果一个网页中包含多个图片数据时，将会频繁的与服务器建立连接，与释放连接，这无疑会造成资源的浪费。

http 1.0 请求模式

而http 1.1则可以在一次连接中处理多个请求，并且多个请求可以重叠进行，不需要等待一个请求结束后再发送下一个请求。

      ·HTTP请求消息

      1次完整的http请求消息包括：一个请求行、若干消息头以及实体内容，而消息头和实体内容可以没有，消息头和实体内容间有一个空行。
      我们来看一个例子（为了便于说明，我在每行前加了序号）：
            1 Get /mattmarg/ HTTP/1.0
            2 User-Agent: Mozilla/2.0 (Macintosh; I; PPC)
            3 Accept: text/html; */*
            4 Cookie: name = value
            5 Referer: http://www.XXX.com/a.html
      其中，第1行就是请求行：请求方式为Get（除了Get之外，还有Post、Put、Delete方式），请求的文件位于"根目录/mattmarg/"下，当然也可以直接给出需要的页面（如：/mattmarg/index.asp，也可以加上一些其它字段如：/mattmarg/index.asp？id=1&uid=xxx。当我们通过Get请求时，提交给服务器的请求行长度不能超过1K,而如果利用Post方式，则是把所提交的信息以实体内容形式发送给服务器，所以如果服务器没有限制的话，原则上讲可以传输无限大的内容），HTTP/1.0 表示了http的版本为1.0。其余几行就是消息头了，消息头主要是用来向服务器传达某种信息或指示。如告诉服务器自己的终端（User-Agent）是什么(如果是浏览器则返回相应的浏览器型号),终端所可以解释的类型（Accept）是什么，是从哪个页面提交的请求（Referer），以及浏览器所能解释的语言（Accept-Language）等等。我们这里拿Accept-Language来举个例子，大家都知道google在中国大陆显示的是简体中文，而在其它的国家则显示对应的语言，这个是怎么做到的呢？其实就是浏览器向服务器递交的请求信息中包含了Accept-Language,而我们的浏览器默认是zh-cn,然后服务器在接受到该信息时返回对应的页面。

11.最近看了哪些javascript的书籍，并讲一下书中的主要内容。（我说的是看过《javascript高性能》忘得差不多了，泪奔啊！！！！）

面试官问我那一门学的最好，我说数据库跟C/C++,他说要我在3者当中选择一个，我想了想毅然选择前端开发，因为我报的这几个公司岗位都是前端，我也怕这是面试官给下的套，所以说的很谨慎。他问我想在那个城市发展，我说南京，北京，上海，深圳几个城市。
最后问了我还有什么问题，我问了一下在新浪发展的问题，还有他们用javascript主要用在什么方面，最后问了一下他刚才问得我不会的题目（关于头部“死定位”的问题，position:fiexed）居然忘记了...无语了。

最后面试官说他会过段时间给我消息，肯定是回到北京以后，如果我通过就跟我联系。自我感觉提高的空间太大了，希望不是很大，也知道一个大型的网站javascript需要做什么，期待人品~

注：上面的所有问题都是通过查找资料得来，还有很多不尽人意地方，欢迎指正！

新浪微博 前端开发面试

新浪微博前端开发面试