Web前端开发笔试&面试_02（others）

AL>>

1.CSS 3 如何实现旋转图片？

　　答：transform : rotate

2.写CSS 的工具？

　　答：LESS、SASS

3.JavaScript 倒计时？

　　答：setTimeout

4.setTimeout 和 setInterval 的区别？

　　答：setTimeout 指定在某时间段后调用一次； setInterval 则调用多次。

5.setTimeout 如何调用多次？

　　答：在回调函数里再次调用 setTimeout。

6.JavaScript 怎么处理异常？

　　答：throw 和catch

7.XML  和 JSON 的优缺点？

　　答：XML的优缺点：

　　　　　　优点：a.格式统一，符合标准

　　　　　　　　　b.容易与其他系统进行远程交互，数据共享比较方便

　　　　　　　　　c.调用将 XML 用作传输的现有服务

　　　　　　　　　d.使用 XSLT 可以动态转换 XML。这是企业服务总线 (ESB) 方案中的理想功能。

　　 　　　  缺点：

　　　　　　　　　a.XML文件格式文件庞大，格式复杂，传输占用带宽

　　　　　　　　　b.服务器端和客户端都需要花费大量代码来解析XML，不论服务器端和客户端代码变的异常复杂和不容易维护

　　　　　　　　　c.客户端不同浏览器之间解析XML的方式不一致，需要重复编写很多代码

　　　　　　　　　d.客户端不同浏览器之间解析XML的方式不一致，需要重复编写很多代码

 　　     JSON的优缺点：

　　　　　　优点：a.数据格式比较简单，易于读写，格式都是压缩的，占用带宽小，浏览器解析快

　　　　　　　　　b.易于解析这种语言，客户端JavaScript可以简单的通过eval()进行JSON数据的读取

　　　　　　　　　c.构造友好，支持多种语言，包括ActionScript， C，C#，ColdFusion，Java，JavaScript，Per，PHP，Python，Ruby等语言服务器端语言，便于服务器端的解析

　　　　　　　　　d.在PHP世界，已经有PHP-JSON和JSON-PHP出现了，便于PHP序列化后的程序直接调用，PHP服务器端的对象、数组等能够直接生JSON格式，便于客户端的访问提取

　　　　　　　　　e.因为JSON格式能够直接为服务器端代码使用，大大简化了服务器端和客户端的代码开发量, 但是完成的任务不变, 且易于维护

　　　　　　　　　f.相当稳定。JSON 的附加内容将成为超集

　　　　　　缺点：a.没有XML格式这么推广的深入人心和使用广泛，没有XML那么通用性

　　　　　　　　　b.没有XML格式这么推广的深入人心和使用广泛，没有XML那么通用性

　　（ref: http://www.lingdublog.com/134.html）

8.JavaScript 如何实现继承？

　　答：prototype

9.对闭包的理解？　　

　　在程序语言范畴内的“闭包”指的是函数把其中的变量作用域都“包”在该函数的作用域内，形成一个“包”，外部函数无法访问内部变量。所以严格意义上来 说，JavaScript 中的函数都是闭包。但我们常说的闭包，通常是指为了让外部函数访问到内部函数中变量，使内部函数返回一个函数，在其中操作内部变量。

10.RESTful的操作名？

　　答：GET、POST、PUT、DELETE ~

11.HTTP 404、301、302、500、403 状态名是什么意思？

　　答：404：（未找到）请求的网页不存在。

　　　　301：（永久移动）永久移动转移，请求的内容已永久移动其他新位置。

　　　　302： （临时移动）临时移动转移，请求的内容已临时移动新的位置。

　　　　500： （服务器内部错误）服务器遇到错误，无法完成请求。

　　　　403： （禁止）服务器拒绝请求。

12.position 的几种值？

　　答：static（默认值） , relative , absolute , fixed

13.如果一个元素 absolute ，它是相对谁说的？

　　答：如果它的父元素是非 static 值，则相对父元素；否则相对是非 static 值的父元素的父元素……直到找到一个最近的非 static 值的祖先元素。如果都没有，则是相对 window 而言。

14.如果一个元素 absolute ，没设 left 、top，位置是哪里？

　　答：相当于static 的默认位置。

15.width:100px;

    padding:50px;

    border:1px;

    margin:50px;

    则border 之间的距离是？

　　答：200px。（但是 IE 某些版本可能是 100px。应该指定box-sizing，比如将其设为：box-sizing：border-box，则距离都是100px）

16. 实现 var a=['a','b','c','d'] 每过一秒 alert 一下数组中的值　　

　　答：

<script>
    var i;
    for(var j=0;j<4;j++){
        (function(i){
            setTimeout(function(){
                alert(a[i]);
            },(i+1)*1000);
        })(j);
    }
    var a=['a','b','c','d'];
</script>

17. AJAX 请求需要做哪些事情？

　　答：（详见：Ajax请求简单实例）

18.为什么要减少HTTP的访问次数？

　　答：浏览器进程请求链接的数目是有限的，如果有很多 HTTP 请求，有些就得等着；另外，建立 HTTP 链接的开销比较大，需要三次握手之类，而相对地，一次连接中文件大小的边际成本就很小。

 

 

 

BD>>

1.从浏览器输入URL到页面渲染发生了什么事？

　　答：1).当用户输入网页URL时，WebKit 调用其资源加载器加载该URL对应的网页。

   　　　2).加载依赖网络模块建立连接，发送请求并接收答复。

　　　　3).WebKit 接收到各种网页或者资源的数据，其中某些资源可能是同步或异步获取的。

　　　　4).网页被交给HTML解释器转变成一系列的词语（Token）。

　　　　5).解释器根据词语构建节点（Node），形成DOM树。

　　　　6).如果节点是JavaScript代码的话，调用JavaScript引擎解释并执行。

　　　　7).JavaScript代码可能会修改DOM树的结构。

　　　　8).如果节点需要依赖其他资源，例如图片、CSS、视频等，调用资源加载器来加载它们，但是它们是异步的，不会阻碍当前DOM树的创建，直到JavaScript的资源加载并被JavaScript引擎执行后才继续DOM树的创建。

（更细力度的回答：从输入 URL 到页面加载完成的过程中都发生了什么事情？）

 

2.在 network 中看到很多 JavaScript 是并行发的，但是这就叫异步加载吗？

　　答：不能，在默认情况下 JavaScript 的加载是阻塞的，前面的 JavaScript 请求没有处理、执行完，是会阻塞 DOM tree 的解析等的，需要 JavaScript 代码完全获取到并执行完毕才继续。

3.如何管理多个文件？

　　答：RequireJS。

4.RequireJS 里 a 文件依赖于 b 文件，b 文件依赖于 c文件，加载顺序如何？

　　答：先加载 c，再 b，再 a。

5.函数的 this 各种指向？

　　答：

6.下面代码的 this 是什么？

function a() {
    function b() {
        console.log(this);
    }
    b();
}
a();

　　答：window

7.以下代码两次 alert 的结果分别是什么？为什么？

var a = "Hello";
function b() {
    alert(a);
    var a = "World";
    alert(a);
}
b();

　　答：undefined 和 world .

　　　　（用函数表达式形式定义的函数不会 hoist 到顶部，区别于函数语句定义会 hoist 。函数内的变量都会被 hoist 到顶部。在第一次 alert 之前，a 已是 undefined 了，只是这时候还没被赋值为 world 。 故 两次输出的结果为：undefined 和 world .）

8.你理解的 Web 前端未来的发展？

　　答：我认为随着 HTML、CSS 等的发展，网页上能做的事情越来越丰富了，包括更酷炫的前端呈现方式、音视频的处理，更趋向于能够做 Native 应用能做的事情了，可能以后 Web 和 Native 的边界会越来越模糊。

9.WebRTC 相比 Web Socket 有什么好处？

 

10. CSS selector 优先级？

 

（11-17，xuqiujuanxuejie_bd_）

11.写出下列表达式的值

　　“1”+ 2 = ？    =12  //任何类型与字符串（双引号引起来的即是）相加都会被转换成字符串类型

　　“1”* 2 = ？　 =2    //字符串和数字相乘。。会有隐性转换，转换成数字  

　　“a”* 2 = ？    =NaN  //但是a转换不成数字，所以会是NaN，:not a number

　　答：如上。

12.说说在javascript中声明变量时不加var都有哪些坏处？

　　答：

13.用html+css实现两列布局，要求

A、 右侧栏目固定宽度100px

B、 左侧栏目宽度随浏览器宽度而变化（两栏目占满整个屏幕）

　　答：

14.用javascript设计实现一个全汉字显示时钟。如假设当地时间为“2012.05.06 10:11:11”，显示为“二零一二年五月六日十时十一分十一秒”，下一秒则显示为“二零一二年五月六日十时十一分十二秒”。请写出设计思路或代码。

　　答：

15.假设一个公司有500人，设计一个算法，算出公司任何一个人与你同月同日生的人的概率。

　　答：

16.在javascript中如何实现类、继承、私有变量？

　　答：

17.描述你最满意的一个作品

A、 是如何设计、实现的？

B、 你在其中担任什么角色？

c、  还可以从哪些方面对它进行改进优化？

　　答：

 

 

MT>>

16041120152115

1.使用CSS3将一个div水平垂直均居中。写出多种方案。

　　(详见：使用css3将一个div水平和垂直居中显示)

2.使用高效CSS时需要注意的问题。

　　(详见：CSS 在工程中改变——面向对象的CSS （OO CSS）)

3.下列函数在页面中依次alert出的内容是：（undefined，2，1，3）

<script>
    var a=1;
    function test(){
        alert(a);
        var a=2;
        alert(a);
        alert(this.a);
        var a=3;
        alert(a);
    }
    test();
</script>

验证截图：

 

4.对数组 var nums =[1,2,3,2,2,2,2,3,4] 进行去重处理。

　　示例答案如下：

<script>
       Array.prototype.unique3=function() {

           var res=[];
           var json={};
           for(var i=0;i<this.length;i++){
               if(!json[this[i]]){
                   res.push(this[i]);
                   json[this[i]]=1;
               }
           }
           return res;
       }
       var arr=[1,2,3,2,2,2,2,3,4];
       alert(arr.unique3());
   </script>

　　（亦可详见：JS数组元素去重的方法）

5.写出能减少网页加载时间的方法，至少5项。

　　（详见：减少页面加载时间的方法）

6.写出你最擅长的前端技术栈，并说明掌握及应用情况。

 

1、  写出下列表达式的值

“1”+ 2 = ？

“1”* 2 = ？

“a”* 2 = ？

2、  说说在javascript中声明变量时不加var都有哪些坏处？

3、  用html+css实现两列布局，要求

A、 右侧栏目固定宽度100px

B、 左侧栏目宽度随浏览器宽度而变化（两栏目占满整个屏幕）

4、  用javascript设计实现一个全汉字显示时钟。如假设当地时间为“2012.05.06 10:11:11”，显示为“二零一二年五月六日十时十一分十一秒”，下一秒则显示为“二零一二年五月六日十时十一分十二秒”。请写出设计思路或代码。

5、  假设一个公司有500人，设计一个算法，算出公司任何一个人与你同月同日生的人的概率。（PS:不晓得这题要不要用js）

6、  在javascript中如何实现类、继承、私有变量？

7、  描述你最满意的一个作品

A、 是如何设计、实现的？

B、 你在其中担任什么角色？

c、  还可以从哪些方面对它进行改进优化？