百度2015前端面试题
Posted liunaiming
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了百度2015前端面试题相关的知识,希望对你有一定的参考价值。
1.html的 Doctype 作用 ? 严格模式与混杂模式如何区分?它们有何意义 ?
1.<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。
2.严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
3.DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
2.
请用CSS实现如下图的样式,相关尺寸如图示,其中dom结构为:
<div id=”demo”></div>
<div id=”demo”></div>
#demo { width: 100px; height: 100px; background-color: #fff; position: relative; border: 2px solid #333; } #demo:after, #demo:before { border: solid transparent; content: ‘ ‘; height: 0; left: 99%;//此处99%效果更佳 position: absolute; width: 0; } #demo:after { border-width: 10px; border-left-color: #fff; top: 20px; } #demo:before { border-width: 12px; border-left-color: #000; top: 18px; }
3.简述document.write和 innerHTML的区别。
document.write只能重绘整个页面,
innerHTML可以重绘页面的一部分。
innerHTML可以重绘页面的一部分。
4.你知道的,javascript语言的执行环境是"单线程模式",这种模式的好处是实现起来比较简单,执行环境相对单纯;坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行,因此很多时候需要进行“异步模式”,请列举js异步编程的方法。
回调函数,这是异步编程最基本的方法。
事件监听,另一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序,而取决于某个事件是否发生。
发布/订阅,上一节的"事件",完全可以理解成"信号"。
Promises对象,Promises 对象是CommonJS 工作组提出的一种规范,目的是为异步编程提供统一接口。
事件监听,另一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序,而取决于某个事件是否发生。
发布/订阅,上一节的"事件",完全可以理解成"信号"。
Promises对象,Promises 对象是CommonJS 工作组提出的一种规范,目的是为异步编程提供统一接口。
5.用户从手机的浏览器访问www.baidu.com,看到的可能跟桌面PC电脑,是不太一样的网页效果,会更适合移动设备使用。请简要分析一下,实现这种网页区分显示的原因及技术原理。
手机的网速问题、屏幕大小、内存、CPU等。通过不同设备的特征,实现不同的网页展现或输出效果。根据useragent、屏幕大小信息、IP、网速、css media Query等原理,实现前端或后端的特征识别和行为改变。
6.Flappy Bird是风靡一时的手机游戏,玩家要操作一只小鸟穿过无穷无尽的由钢管组成的障碍。如果要你在HTML前端开发这个游戏,为了保证游戏的流畅运行,并长时间运行也不会崩溃,请列举开发要注意的性能问题和解决的方法。
背景的卷轴效果优化。背景不能是无限长的图片拼接,必须有回收已移出的场景的方法。
将复杂运算从主UI线程中解耦。比如场景中小鸟的运动轨迹、碰撞算法等,需要在空闲时间片运算,不能和UI动画同时进行。
将比较大的运算分解成不同的时间片,防止阻塞主UI线程。最好使用webworker。
注意内存泄漏和回收。使用对象池管理内存,提高内存检测和垃圾回收。
进行预处理。将一些常用的过程进行预处理,
控制好帧率。将1秒分解成多个时间片,在固定间隔时间片进行UI动画,其他时间片用在后台运算。
通过GPU 加速和CSS transition 将小鸟飞行动画和背景动画分离7.如下图,请实现表格信息的排序功能,当点击表头的属性区域,将表格信息进行排序切换功能,即第一次点击为降序排序,再一次点击进行升序排序。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>表格排序</title> </head> <style type="text/css"> table{ width: 500px; height: 200px; position: relative; border-width: 0px 0px 1px 1px; border-style: solid; } tr{ height: 40px; } td,th{ width: 25%; border-width: 1px 1px 0 0; border-style: solid; padding: 0; margin: 0; } </style> <body> <table id="table" cellpadding="1" cellspacing="1"> <thead> <tr bgcolor="grey"> <th>姓名</th> <th onclick="sortTable(1)">力量</th> <th onclick="sortTable(2)">敏捷</th> <th onclick="sortTable(3)">智力</th> </tr> </thead> <tbody> <tr> <th>德鲁伊</th> <td>17</td> <td>24</td> <td>13</td> </tr> <tr> <th>月之骑士</th> <td>15</td> <td>22</td> <td>16</td> </tr> <tr> <th>众神归王</th> <td>19</td> <td>35</td> <td>20</td> </tr> <tr> <th>流浪剑客</th> <td>23</td> <td>15</td> <td>14</td> </tr> </tbody> </table> <script type="text/javascript"> var isSort = [false,false,false];//标记是否排过序 function sortTable (colNo) { var rowsArray = [];//表格中所有行的集合 var colsArray = [];//表格中所有列的集合 var tbody = document.getElementsByTagName(‘tbody‘)[0]; //初始化行和列 for (var i = 0; i < tbody.rows.length; i++) { rowsArray[i] = tbody.rows[i]; colsArray[i] = rowsArray[i].cells[colNo]; } //排序 console.log(isSort[colNo]) if (!isSort[colNo]) {//isSort为false时,降序排列 isSort[colNo] = true; colsArray.sort(function (a,b) { return b.innerHTML - a.innerHTML;//将被点的那一列降序排序 }); }else{ //此时已经降序排序过了,对数组逆序即可 colsArray.reverse(); isSort[colNo] = false; } //当某一列排序后将表格所有元素的值放到新的数组中 var rowsTempArray = []; for (var i = 0; i < rowsArray.length; i++) { var colsTempArray = []; for (var j = 0; j < colsArray.length; j++) { //将i行的所有列的内容保存在colsTempArray[j]中 colsTempArray[j] = colsArray[i].parentNode.cells[j].innerHTML; } //将一行内容保存到rowsTempArray。 rowsTempArray[i] = colsTempArray; } //重绘页面 for (var i = 0; i < rowsArray.length; i++) { for (var j = 0; j < colsArray.length; j++) { rowsArray[i].cells[j].innerHTML = rowsTempArray[i][j]; } } } </script> </body> </html>
以上是关于百度2015前端面试题的主要内容,如果未能解决你的问题,请参考以下文章