前端面试题参考答案

1.HTML5和CSS3各有哪些新特性？  增加更多的语义化标签：header/ footer/ section/ nav/ summary/ details/ dialog/ progress/ video/... 全新的video/标签，支持播放多种视频格式 增加canvas API接口 增加更多的JS API 支持web sokect  2.说说HTML中title和h1、b和strong各有哪些不同？  主要区别是语义不同： 1. title/针对浏览器，h1/表示页面内容标题，搜索引擎更重视h1/； 2. b/仅表示视觉上加粗，strong/表示语气强调+样式加粗；     a). 读屏软件阅读文字时会对strong/加强语气, 而会忽略b/；     b). 搜索引擎亦会加大strong/内容的权重；  3.float布局有哪些缺点？ 是否有替代float的实现方案？如果有，请说说你的实现方法。  float不能自由控制对齐方式和换行；需要强制清除浮动，否则后面的内容会错乱； 替代float的方案主要用inline­block; 给子元素定义display:inline­bolck;    4.CSS行内样式与important谁的优先级高？如果行内样式和外部样式同时定义了important, 谁的优先级高？ important优先级高； 如果行内样式和外部样式同时定义了important，那么行内样式的important的优先级高；   5. 在同一个CSS文件中定义的两个类.a{color:blue;} 和.b{color:red;}，如果把它们同时应用到同一元素上，他们会怎么显示？为什么？ 页面上怎么显示取决于在css文件中定义的先后位置，后定义的样式会覆盖前面定义的样式；所以： 1. 如果.b在.a后面，则.b的color会覆盖.a, 显示为red; 2. 如果.a在.b后面，则.a的color会覆盖.b, 显示为blue;   6.你知道哪些CSS Hack技巧？分别有什么用？ IE6：_属性名前缀 IE7：+属性名前缀 IE789: \9后缀 IE7以下：zoom:1；能解决不少页面错乱的问题；       7.执行下面的代码会输出什么结果？请将答案填写在括号内的空格处 script type=”text/javascript”     var x = 1;     var y = 1;       method(8);     alert( x + y );  //结果1：（____5_____）       function method (y) {         x += 3;         y += 3;         alert( x + y ); // 结果2：（____15_____）     } /script // 请问是先输出“结果1”还是“结果2”？ （____结果2_____）  8.有如下HTML代码判断，要求按照W3C标准实现click每一个li元素时弹出其index，请写出实现思路（或者直接上代码）： ul id=”user­list” li张三/li li李四/li li王五/li /ul  var list = document.getElementById(”user­list”); var func = function(event) {     var target = event.target || event.srcElement;     var preElem = target.previousElementSibling;     var i = 0;     while (preElem) {         i+=1;         preElem = preElem.previousElementSibling;     }     alert(i); }; list.addEventListener(”click”, func);   9.为什么要用AJAX？怎么解决AJAX跨域请求？  无刷新、更好的交互体验、节省带宽、加快页面响应速度等等； 跨域：jsonp或者iframe提交；  10.在前端开发过程中，会遇到各种浏览器兼容性问题，请至少写出6条（CSS/HTML/JS均可）：              11.jQuery有哪些事件方法？说说方法.on()和.bind()有哪些区别？  on / bind / delegate / unbind / off / once等； 其他模拟浏览器的鼠标事件、键盘事件等其他事件，包含keydown / keyup / mouseover / mouseout / mouseenter / mouseleave / click / dlclick / unload / contextmenu；  on() 是jQuery的底层事件方法，bind()和delegate()都是基于on方法实现的；  12. 一个并发访问量特别具大的页面，你怎么安排你的CSS、JS和图片?  a). 同目录的CSS文件尽量合并成一个并压缩；去除不必要的CSS文件； b). CSS里面的图片尽量合并成一个，使用CSS的background­position应用不同的图片区域； b). 所有被依赖的JS文件压缩成一个js; c). 在不影响视觉效果的情况下，适当的压缩图片质量； d). 如果可能，增大静态文件的浏览器客户端缓存时间；   13.怎么实现鼠标悬停在如下元素上时，使其放大1.2倍，请优先使用CSS3实现并要求兼容IE6+（好变态的要求）。 a class=”profile”img src=””//a style type=”text/css” .profile{ display:block; width:80px; height:80px; } .profile:hover{ /* 请在这里实现 */  ­webkit­transform: scale(1.2);                         ­moz­transform: scale(1.2);                         ­o­transform: scale(1.2);                         ­ms­transform: scale(1.2);                         transform: scale(1.2);                         +zoom: 1.2\9; /* IE67 */                         zoom: 1.2\9; /* IE8 */  width:80px; height:80px; } /style  14. 如下有一个超级大的数组，请把它用li标签以尽量快的速度渲染到#list元素内?  ul id=”list”     !­­ HTML结构模板     li1/li     li2/li     …     li99999/li     li100000/li     ­­ /ul  script type=”text/javascript”     var arr = [’a’, ’b’, ’c’, …];       var html = [],         len = arr.length,         i;       for (i=0; ilen; i++) {         html.push(’li’+ arr[i] +’/li’);     }       document.getElementById(”list”).innerHTML = arr.join(’’);  /script  15.了解过哪些JS库或框架？你能用他们做什么？         16. 事件冒泡和事件捕获的区别是什么？哪个的优先级高？          17.如果很不幸，线上代码出现BUG, 你怎么快速找出原因？         18.你熟悉那些JS MVC框架？说说你昀熟悉的一个？          19.如果产品已经开发到一半，需求突然改变需要返工，你怎么处理？          20.晚上有妹子或帅哥约你，而公司突然宣布由于紧急情况，要求所有人加班，你怎么办？