前端面试题2016

HTML/CSS部分

1、什么是盒子模型？

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

2、行内元素有哪些？块级元素有哪些？空(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

3、CSS实现垂直水平居中

一道经典的问题，实现方法有很多种，以下是其中一种实现：

HTML结构：

1.

CSS：

1. .wrapper{position:relative;}

2. .content{

3. background-color:#6699FF;

4. width:200px;

5. height:200px;

6. position: absolute; //父元素需要相对定位

7. top: 50%;

8. left: 50%;

9. margin-top:-100px ; //二分之一的height，width

10. margin-left: -100px;

11. }

4、简述一下src与href的区别

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

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

5、什么是CSS Hack?

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

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

1. // 1、条件Hack

2.

7. // 2、属性Hack

8. .test{

9. color:#0909; /* For IE8+ */

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

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

12. }

13. // 3、选择符Hack

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

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

6、简述同步和异步的区别

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

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

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

7、px和em的区别

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

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

8、什么叫优雅降级和渐进增强？

渐进增强progressive enhancement：

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

优雅降级graceful degradation：

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

区别：

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

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

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

9、浏览器的内核分别是什么?

IE: trident内核

Firefox：gecko内核

Safari：webkit内核

Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核Chrome：Blink(基于webkit，Google与Opera Software共同开发)

JavaScript部分

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

1）创建新节点

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

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

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

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

appendChild() //添加

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

3）查找

getElementsByTagName() //通过标签名称

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

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

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

1. /**

2. * 对象克隆

3. * 支持基本数据类型及对象

4. * 递归方法

5. */

6.function clone(obj) {

7.var o;

8. switch (typeofobj) {

9. case "undefined":

10. break;

11. case "string":

12. o = obj + "";

13. break;

14. case "number":

15. o = obj - 0;

16. break;

17. case "boolean":

18. o = obj;

19. break;

20. case "object": // object 分为两种情况对象（Object）或数

组（Array）

21. if (obj === null) {

22. o = null;

23. } else {

24. if (Object.prototype.toString.call(obj).slice(8,

-1) === "Array") {

25. o = [];

26. for (vari = 0; iobj.length; i++) {

27.o.push(clone(obj[i]));

28. }

29. } else {

30. o = {};

31. for (var k in obj) {

32. o[k] = clone(obj[k]);

33. }

34. }

35. }

36. break;

37. default:

38. o = obj;

39. break;

40. }

41. return o;

42.}

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

1.// 方法一：

2.var arr1 =[1,2,2,2,3,3,3,4,5,6],

3. arr2 = [];

4.for(vari = 0,len = arr1.length; i

5. if(arr2.indexOf(arr1[i]) < 0){

6. arr2.push(arr1[i]);

7. }

8.}

9.document.write(arr2); // 1,2,3,4,5,6

4、想实现一个对页面某个节点的拖曳？如何做？（使用原生JS）。

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

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

1.function log(){

2.varargs = Array.prototype.slice.call(arguments);

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

4.args.unshift('(app)');

5.

6.console.log.apply(console, args);

7.};

6、Javascript中callee和caller的作用？

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

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

7、请描述一下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仅仅是为了在本地“存储”数据而生。

8、手写数组快速排序

1.varquickSort=function(arr) {

if(arr.length<=1){return arr;}

varmiddleIndex=Math.floor(arr.length/2);

varmiddleVal=arr.splice(middleIndex,1)[0];

var left=[];

var right=[];

for(vari=0;i

if(arr[i]

left.push(arr[i]);

}else{

right.push(arr[i]);

}

}

returnquickSort(left).concat([middleVal],quickSort(right));

}

9、统计字符串”aaaabbbccccddfgh”中字母个数或统计最多字母数。

2.varstr = "aaaabbbccccddfgh";

3.varobj = {};

4.for(vari=0;str.length;i++){

5.var v = str.charAt(i);

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

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

8. }else{

9.obj[v] = {};

10.obj[v].count = 1;

11.obj[v].value = v;

12. }

13.}

14.for(key in obj){

15. document.write(obj[key].value +'='+obj[key].count+' '); //

a=4 b=3 c=4 d=2 f=1 g=1 h=1

16.}

9题衍生题，统计字符串中字母个数

var reg = /[a-zA-Z]/g;

var str = "a1b2c3d4";

str.match(reg).length

10、写一个function，清除字符串前后的空格。（兼容所有浏览器）

function trim(str) {

if (str&typeofstr === "string") {

return str.replace(/(^s*)|(s*)$/g,""); }}

其他

1、一次完整的HTTP事务是怎样的一个过程？

基本流程：

a. 域名解析

b. 发起TCP的3次握手

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

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

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

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

2、对前端工程师这个职位你是怎么样理解的？

a. 前端是最贴近用户的程序员，前端的能力就是能让产品从90分进化到100 分，甚至更好

b. 参与项目，快速高质量完成实现效果图，精确到1px；

c. 与团队成员，UI设计，产品经理的沟通；

d. 做好的页面结构，页面重构和用户体验；

e. 处理hack，兼容、写出优美的代码格式；

f. 针对服务器的优化、拥抱最新前端技术。

事业单位面试题目及参考答案新

事业单位面试题目及参考答案 1.你所在的小区有一块空置的绿化地，有居民提议建停车场，也有居民提议保留绿地，双方因此产生争吵，领导让你去调解，你会怎么做? 作为社区工作人员，我有责任维护小区居民的和谐和安全。针对此次出现的居民因为空置绿地而产生的争吵，我会采取如下方法加以调解。 首先，第一时间赶到争吵现场，拉开双方进行劝架，告知双方争吵无益于问题解决，希望双方能够在心态平和的情况下推举出代表以促成问题的解决。 其次，联系小区物业及开发商，详细查询设置此块绿地的目的及本小区的车位数量和日常停车情况，以做到对绿地去留心中有数。 再次，与两方居民代表进行交谈，了解双方诉求。有居民提议建停车场，可能是因本小区存在停车难的问题，鉴于此我会结合前期在小区物业管理部门得到的信息以及居民 的陈述，综合考虑于空置绿地上兴建停车场的建议是否可行。有居民提议保留绿地，可能是出于绿地的紧急避难功能，我也会认真考虑该部分居民的意见，同时结合从物业部门和开发商处了解到的信息综合考虑解决方案。 再次，联系物业部门负责人、交通部门负责人及居民代表等坐下来共同商讨空置绿地的处置办法。若空置绿地是为

小区居民保留紧急室外避难场所而建，且小区内停车难问题并不严重，则会从保护居民人身安全角度出发，空置绿地需要保留。如果小区内车位紧张，停车难现象严重，则我会和物业及交通部门商讨，考虑能否在不影响绿地作为紧急避难场地之功能的前提下，从绿地中划出一小块地方用于停车，以缓解小区内部停车难的现状。 最后，召开小区居民大会，将全部保留绿地和部分保留绿地两种预设方案公诸于众，并详细阐明两种方案制定的原因及绿地的作用和小区内当前面临的停车难问题。由小区居民公开投票，自己选择绿地的处置办法。待投票结束后，总结居民的意愿，妥善处理空置绿地，以使空置绿地更好发挥作用。 2.某旅行团由于管理组织不善，车辆调度出现问题，导致游客少看了好几个景点，游客要求旅行社赔偿，但是旅行社只进行了赔礼道歉，针对此事你怎么看? 游客选择旅行社跟团出游，是为了更加省时省事，但该旅行团并非因不可抗力因素而不得不改变旅游线路，只是因

前端面试题大全(html篇)

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言。最主要的不同： (1)XHTML元素必须被正确地嵌套 (2)XHTML元素必须被关闭 (3)XHTML标签名必须用小写字母 (4)XHTML文档必须拥有根元素 2.什么是语义化的HTML html5的语义化是指用正确的标签包含正确的容，比如nav标签就应该包含导航条容 (1)直观的认识标签对于搜索引擎的抓取有好处，用正确的标签做正确的事情！ (2)html语义化就是让页面的容结构化，便于对浏览器、搜索引擎解析 (3)在没有CCS样式情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下和各个关键字的权重，利于SEO。 (4)使阅读源代码的人更容易将分块，便于阅读维护理解。 写一段语义的html代码(HTML5中新增加的很多标签如：