百度2015前端面试题

1.HTML的 Doctype 作用 ? 严格模式与混杂模式如何区分？它们有何意义 ?

1.<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。
2.严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
3.DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为：
<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可以重绘页面的一部分。

4.你知道的，javascript语言的执行环境是"单线程模式"，这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行，因此很多时候需要进行“异步模式”，请列举js异步编程的方法。

回调函数，这是异步编程最基本的方法。
事件监听，另一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序，而取决于某个事件是否发生。
发布/订阅，上一节的"事件"，完全可以理解成"信号"。
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>

posted @ 2020-07-22 23:13 油闷大虾啊阅读(122) 评论(0) 编辑收藏举报

刷新页面返回顶部

油闷大虾啊

百度2015前端面试题

公告