前端面试三

1.求y和z的值是多少？

<script type="text/javascript">

var x = 1;

var y = 0;

var z = 0;

function add(n){n=n+1;}

y = add(x);

function add(n){n=n+3;}

z = add(x);

</script>

都为undefined，因为没有返回值。

2.javascript是面向对象的，怎么体现javascript的继承关系？   使用prototype来实现。

3.javascript怎样选中一个checkbox，怎样设置它无效？document.all.cb1[0].disabled = true;

4.form中的input可以设置为readonly和disable，请问2者有什么区别？

readonly不可编辑，但可以选择和复制；值可以传递到后台

disabled不能编辑，不能复制，不能选择；值不可以传递到后台

5.js中的3种弹出式消息提醒（警告窗口，确认窗口，信息输入窗口）的命令式什么？

alert       confirm       prompt

6.form中的input有哪些类型？

7.javaScript的2种变量范围有什么不同？

全局变量：当前页面内有效                       局部变量：方法内有效

8.列举javaScript的3种主要数据类型，2种复合数据类型和2种特殊数据类型。

主要数据类型：string, boolean, number

复合数据类型：function, object          特殊数据：Null ,Undefined 

9.程序中捕获异常的方法？

window.error               try{}catch(){}finally{}

10.写出函数DateDemo的返回结果，系统时间假定为今天

function DateDemo(){

var d, s="今天日期是：";

d = new Date();

s += d.getMonth()+1 + "/";

s += d.getDate() + "/";

s += d.getFullYear();

return s;

}

11.写出程序运行的结果？

for(i=0, j=0; i<10, j<6; i++, j++){

   k = i + j;

}

结果：10（小心陷阱）

12.浏览器的对象模型？

window

顶级对象

window.alert(msg)

window.prompt()

window.confirm()

if(window.confirm()){...}

window.open()

window.close()

document

document.write()

history

当用户浏览网页时，浏览器保存了一个最近所访问网页的url列表。这个列表就是用history对象表示。

history.back():后退

history.forward():前进

history.go(n):正数表示向前，负数表示向后

location

表示当前打开的窗口或框架的URL信息。

location.href：重定向

等价于location.assign(url)

location.host：类似www.163.com:80

navigator

表示浏览器的信息及js运行的环境

navigator.cookieEnabled：该属性表示是否启用cookie

screen

用于显示网页的显示器的大小和颜色

screen.width/screen.height：表示显示器的分辨率（总的宽度，高度）

13.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

14,.简述一下src与href的区别

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

15.什么是CSS Hack?

一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。

IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack（详细参考CSS文档：css文档）。例如：

// 1、条件Hack

  <!--[if IE]>

  <style>

  .test{color:red;}

  </style>

  <![endif]-->

// 2、属性Hack

  .test{

  color:#090\9; /* For IE8+ */

  *color:#f00; /* For IE7 and earlier */

  _color:#ff0; /* For IE6 and earlier */

  }

  // 3、选择符Hack

  * html .test{color:#090;} /* For IE6 and earlier */

  * + html .test{color:#ff0;} /* For IE7 */

16.简述同步和异步的区别

同步是阻塞模式，异步是非阻塞模式。

同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；

异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

17.px和em的区别

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

18.什么叫优雅降级和渐进增强？

渐进增强 progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给

b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

19.浏览器的内核分别是什么?

IE: trident内核

Firefox：gecko内核

Safari：webkit内核

Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome：Blink(基于webkit，Google与Opera Software共同开发)

20.怎样添加、移除、移动、复制、创建和查找节点？

1）创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

2）添加、移除、替换、插入

appendChild() //添加

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

3）查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的Name属性的值

getElementById() //通过元素Id，唯一性

21.实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制。

 /** * 对象克隆 * 支持基本数据类型及对象 * 递归方法 */functionclone(obj){var o;switch (typeof obj) {case"undefined":break;case"string": o = obj +"";break;case"number": o = obj -0;break;case"boolean": o = obj;break;case"object":// object 分为两种情况 对象（Object）或数组（Array）if (obj ===null){ o =null;}else{if (Object.prototype.toString.call(obj).slice(8,-1)==="Array"){ o = [];for (var i =0; i <obj.length; i++){o.push(clone(obj[i]));}}else{ o ={};for (var k in obj) { o[k] =clone(obj[k]);}}}break;default: o = obj;break;}return o;}

22.如何消除一个数组里面重复的元素？

var arr1 =[1,2,2,2,3,3,3,4,5,6], arr2 = [];for(var i =0,len=arr1.length; i< len; i++){if(arr2.indexOf(arr1[i])<0){arr2.push(arr1[i]);}}document.write(arr2);// 1,2,3,4,5,6

23.在Javascript中什么是伪数组？如何将伪数组转化为标准数组？

伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

function log(){

  var args = Array.prototype.slice.call(arguments);

//为了使用unshift数组方法，将argument转化为真正的数组

  args.unshift('(app)');

  console.log.apply(console, args);

};

24.Javascript中callee和caller的作用？

caller是返回一个对函数的引用，该函数调用了当前函数；

callee是返回正在被执行的function函数，也就是所指定的function对象的正文。

25.请描述一下cookies，sessionStorage和localStorage的区别

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

26.统计字符串中字母个数或统计最多字母数。

var str = "aaaabbbccccddfgh";

var obj = {};

for(var i=0;i<str.length;i++){

  var v = str.charAt(i);

  if(obj[v] && obj[v].value == v){

  obj[v].count = ++ obj[v].count;

  }else{

  obj[v] = {};

  obj[v].count = 1;

  obj[v].value = v;

  }

}

for(key in obj){

  document.write(obj[key].value +'='+obj[key].count+'&nbsp;'); // a=4 b=3 c=4 d=2 f=1 g=1 h=1

}

   

27.一次完整的HTTP事务是怎样的一个过程？

基本流程：

a. 域名解析

b. 发起TCP的3次握手

c. 建立TCP连接后发起http请求

d. 服务器端响应http请求，浏览器得到html代码

e. 浏览器解析html代码，并请求html代码中的资源

f. 浏览器对页面进行渲染呈现给用户

28.按顺序写出alert弹出窗口的内容。

var name = "The Window";

var object = {

  name : "My Object",

  getNameFunc : function(){

  alert('1.' + this.name);

  return function(){

  return this.name;

  };

  }

};

var func = object.getNameFunc();

alert('2.' + func());

alert('3.' + func.call(object));

alert('4.' + func.apply(object));

结果：

• var func = object.getNameFunc() => 1.My Object
• alert('2.' + func()) => 2.The Window
• alert('3.' + func.call(object)) => 3.My Object
• alert('4.' + func.apply(object)) => 4.My Object

29.使用正则表达式给所有string对象添加trim方法。

String.prototype.trim = function () {

  return this.replace(/(^\s*)|(\s*$)/g, "");

};

30.找出数字数组中最大的元素（使用Math.max函数）

var arr = [61, 22, 31, 4, 5];

// 1

var max = 0;

arr.map(function (value, index) {

  max = Math.max(value, max);

});

// 2

Math.max.apply(null, arr)

31.利用JavaScript打印出Fibonacci（斐波那契）数（不使用全局变量）

var fibonacci = (function () {

  var arr = [0, 1];

  return function () {

  var num = arr[arr.length - 1],

  len = arr.length;

  arr.push(arr[len - 1] + arr[len - 2]);

  return num;

  };

}());

//test

var i;

for (i = 0; i < 10; i++) {

  console.log(fibonacci());

}

//1,1,2,3,5,8,13,21,34,55

32.实现如下语法的功能：var a = (5).plus(3).minus(6); //2

Number.prototype.plus = function (num) {

  return this + num;

};

Number.prototype.minus = function (num) {

  return this - num;

};

33.实现如下语法的功能：var a = add(2)(3)(4); //9

function add(x) {

  return function (y) {

  return function (z) {

  return x + y + z;

  };

  };

}

34.数字数组排序

var arr = [11,2,28,5,8,4]

arr.sort(function(a,b){return a-b})

sort的参数是一个排序函数，我们可以把参数a当作数组里靠后的元素，b当作数组里靠前的元素，排序函数return的值如果是正的，才执行排序，所以最后排下来是从小到大，相反，如果return的是b-a，那么就是从大到小排序。

35.数组清除重复项

myArray.filter(function(elem, pos,self){

     return self.indexOf(elem)== pos;

})

filter是过滤的意思，filter通过一个函数的参数来选择什么项需要被filter掉，函数返回true保留，false干掉。

函数参数带三个参数，第一个elem是这一项元素，第二个pos是这一项所在的位置，第三个self指的是执行filter的数组。那么，你看，巧妙吗:self.indexOf(elem) 是指这个项目在数组中的位置，位置是第一个，也就是说同样的项目在第一位和第5位都出现了，他返回的是0，而此时pos还是4，所以通过self.indexOf(elem) == pos 能判断出这一项是不是重复出现的项，如果是（返回false），则干掉它。

36.

function a(x){

  return function b(y){

  return y+x++

  }

}

var a1 = a(10)

var a2 = a(20)

a1(10)

a2(10)

++优先级显然大于+，a++返回本身，++a返回加过以后的值。

37.哪几种方式会内存泄漏

 四种：闭包、没有var、计时器、循环引用

50.前端的具体优化手段都有哪些

优化方向优化手段请求数量合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域请求带宽开启GZip，精简JavaScript，移除重复脚本，图像优化缓存利用使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存页面结构将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出代码校验避免CSS表达式，避免重定向

关于Web性能优化

压缩源码和图片

JavaScript文件源代码可以采用混淆压缩的方式，CSS文件源代码进行普通压缩，JPG图片可以根据具体质量来压缩为50%到70%，PNG可以使用一些开源压缩软件来压缩，比如24色变成8色、去掉一些PNG格式信息等。

选择合适的图片格式

如果图片颜色数较多就使用JPG格式，如果图片颜色数较少就使用PNG格式，如果能够通过服务器端判断浏览器支持WebP，那么就使用WebP格式和SVG格式。

合并静态资源

包括CSS、JavaScript和小图片，减少HTTP请求。

开启服务器端的Gzip压缩

这对文本资源非常有效，对图片资源则没那么大的压缩比率。

使用CDN

或者一些公开库使用第三方提供的静态资源地址（比如jQuery、normalize.css）。一方面增加并发下载量，另一方面能够和其他网站共享缓存。

延长静态资源缓存时间

这样，频繁访问网站的访客就能够更快地访问。不过，这里要通过修改文件名的方式，确保在资源更新的时候，用户会拉取到最新的内容。

把CSS放在页面头部，把JavaScript放在页面底部

这样就不会阻塞页面渲染，让页面出现长时间的空白。

每一个条目都可以进一步深层挖掘下去。

Web性能优化分为服务器端和浏览器端两个方面。

此外，由于中文的歧义性，Web性能优化这个词既可以解读成页面加载速度（Page Speed）的优化，也可以解读成页面渲染性能（Page Performance）的优化。或者是二者的集合。所以，应聘者如果能在这个问题上多做一些分析，会有很高的加分。但是A君在网络性能方面的研究只是浅 尝辄止，停留在压缩资源方面，这说明他还没有足够理解HTTP协议本身。

关于网络性能和HTTP协议，作为大公司的前端工程师是非常看重的，因为每一个页面都会有亿万用户访问量，任何一点对服务器带宽压力都会积少成多，最终造成很大的成本。关于这方面的技术详解，我在后面会有一篇单独的文章来分析。

减少 JavaScript 对性能的影响有以下几种方法：

• 将所有的<script>标签放到页面底部，也就是</body>闭合标签之前，这能确保在脚本执行前页面已经完成了渲染。
• 尽可能地合并脚本。页面中的<script>标签越少，加载也就越快，响应也越迅速。无论是外链脚本还是内嵌脚本都是如此。
• 采用无阻塞下载 JavaScript 脚本的方法：
• 使用<script>标签的 defer 属性（仅适用于 IE 和 Firefox 3.5 以上版本）；
• 使用动态创建的<script>元素来下载并执行代码；
• 使用 XHR 对象下载 JavaScript 代码并注入页面中。

1、列举3个HTML5标签，3个CSS3新特性，3个ECMAScript 5新API。

• 3个HTML5标签

  • <header>

  • <main>

  • <footer>

• 3个CSS3新特性

  • border-radius

  • @keyframes

  • media query

• 3个ECMAScript 5新API

  • String.prototype.trim()

  • Array.prototype.foEach()

  • Array.prototype.isArray()