欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端面试题的那些事儿(一)

程序员文章站 2022-05-06 14:35:02
...
  • HTML的 Doctype 作用 ? 严格模式与混杂模式如何区分?它们有何意义 ?
    1. 声明位于文档中的最前面,处于 标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。
    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: 100%;
    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;
}
  • 简述document.write和 innerHTML的区别。
    document.write只能绘制整个页面
    innerHTML可以重绘页面的一部分

  • 你知道的,javascript语言的执行环境是”单线程模式”,这种模式的好处是实现起来比较简单,执行环境相对单纯;坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行,因此很多时候需要进行“异步模式”,请列举js异步编程的方法。
    1.回调函数,这是异步编程最基本的方法。
    2.事件监听,另一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序,而取决于某个事件是否发生。
    3.发布/订阅,上一节的”事件”,完全可以理解成”信号”。
    4.Promises对象,Promises 对象是CommonJS 工作组提出的一种规范,目的是为异步编程提供统一接口。

  • 用户从手机的浏览器访问www.baidu.com,看到的可能跟桌面PC电脑,是不太一样的网页效果,会更适合移动设备使用。请简要分析一下,实现这种网页区分显示的原因及技术原理。
    手机的网速问题、屏幕大小、内存、CPU等。通过不同设备的特征,实现不同的网页展现或输出效果。根据useragent、屏幕大小信息、IP、网速、css media Query等原理,实现前端或后端的特征识别和行为改变。

  • Flappy Bird是风靡一时的手机游戏,玩家要操作一只小鸟穿过无穷无尽的由钢管组成的障碍。如果要你在HTML前端开发这个游戏,为了保证游戏的流畅运行,并长时间运行也不会崩溃,请列举开发要注意的性能问题和解决的方法。
    前端面试题的那些事儿(一)
    背景的卷轴效果优化。背景不能是无限长的图片拼接,必须有回收已移出的场景的方法。
    将复杂运算从主UI线程中解耦。比如场景中小鸟的运动轨迹、碰撞算法等,需要在空闲时间片运算,不能和UI动画同时进行。
    将比较大的运算分解成不同的时间片,防止阻塞主UI线程。最好使用webworker。
    注意内存泄漏和回收。使用对象池管理内存,提高内存检测和垃圾回收。
    进行预处理。将一些常用的过程进行预处理,
    控制好帧率。将1秒分解成多个时间片,在固定间隔时间片进行UI动画,其他时间片用在后台运算。
    通过 GPU 加速和 CSS transition 将小鸟飞行动画和背景动画分离

  • 如下图,请实现表格信息的排序功能,当点击表头的属性区域,将表格信息进行排序切换功能,即第一次点击为降序排序,再一次点击进行升序排序。
    前端面试题的那些事儿(一)
    非纯JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table id="table" border="1">
        <tr>
            <th id="name">姓名</th>
            <th id="power">力量</th>
            <th id="agility">敏捷</th>
            <th id="iq">智力</th>
        </tr>
    </table>
</body>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
    var data = [{
        name: '德鲁伊',
        power: 17,
        agility: 24,
        iq: 13
    }, {
        name: '月之骑士',
        power: 15,
        agility: 22,
        iq: 16
    }, {
        name: '众神之王',
        power: 19,
        agility: 15,
        iq: 20
    }, {
        name: '流浪剑客',
        power: 23,
        agility: 15,
        iq: 14
    }];

    ! function() { //初始化渲染
        var table = $('table');
        for (var i = 0; i < data.length; i++) {
            item = '<tr><td class="name">' + data[i].name + '</td><td class="power">' + data[i].power + '</td><td class="agility">' + data[i].agility + '</td><td class="iq">' + data[i].iq + '</td></tr>';
            table.append(item);
        }
    }()

    ! function() {
        var count_name = 0,count_power = 0,count_agility = 0,count_iq = 0;

        $('#name').click(function() {
            count_power = 0,count_agility = 0,count_iq = 0;    //将其他排序列状态置零,也就是说当点了姓名进行排序之后,若再点其它排序,那么必然是从升序开始
            if (count_name % 2 === 1) { //奇数升序
                data = sort(data, 'name', 'unicode,ascend');
            } else { //偶数降序
                data = sort(data, 'name', 'unicode,descend');
            }
            count_name++;

            //视图层渲染
            var area = $("tr").slice(1);
            for (var i = 0; i < data.length; i++) {
                area.eq(i).find('.name').text(data[i].name);
                area.eq(i).find('.power').text(data[i].power);
                area.eq(i).find('.agility').text(data[i].agility);
                area.eq(i).find('.iq').text(data[i].iq);
            }
        })
        $('#power').click(function() {
            count_name = 0,count_agility = 0,count_iq = 0;
            if (count_power % 2 === 1) {
                data = sort(data, 'power', 'number,ascend');
            } else {
                data = sort(data, 'power', 'number,descend');
            }
            count_power++;

            var area = $("tr").slice(1);
            for (var i = 0; i < data.length; i++) {
                area.eq(i).find('.name').text(data[i].name);
                area.eq(i).find('.power').text(data[i].power);
                area.eq(i).find('.agility').text(data[i].agility);
                area.eq(i).find('.iq').text(data[i].iq);
            }
        })
        $('#agility').click(function() {
            count_name = 0,count_power = 0,count_iq = 0;
            if (count_agility % 2 === 1) {
                data = sort(data, 'agility', 'number,ascend');
            } else {
                data = sort(data, 'agility', 'number,descend');
            }
            count_agility++;

            var area = $("tr").slice(1);
            for (var i = 0; i < data.length; i++) {
                area.eq(i).find('.name').text(data[i].name);
                area.eq(i).find('.power').text(data[i].power);
                area.eq(i).find('.agility').text(data[i].agility);
                area.eq(i).find('.iq').text(data[i].iq);
            }
        })
        $('#iq').click(function() {
            count_name = 0,count_power = 0,count_agility = 0;
            if (count_iq % 2 === 1) {
                data = sort(data, 'iq', 'number,ascend');
            } else {
                data = sort(data, 'iq', 'number,descend');
            }
            count_iq++;

            var area = $("tr").slice(1);
            for (var i = 0; i < data.length; i++) {
                area.eq(i).find('.name').text(data[i].name);
                area.eq(i).find('.power').text(data[i].power);
                area.eq(i).find('.agility').text(data[i].agility);
                area.eq(i).find('.iq').text(data[i].iq);
            }
        })
    }()

    //对数据进行排序
    function sort(data, field, compareFunction) {
        var handler = {
            'unicode,ascend': function(pre, next) {
                if (pre[field] > next[field])
                    return -1;
                else
                    return 1;
            },
            'unicode,descend': function(pre, next) {
                if (pre[field] > next[field])
                    return 1;
                else
                    return -1;
            },
            'number,ascend': function(pre, next) {
                return next[field] - pre[field];
            },
            'number,descend': function(pre, next) {
                return pre[field] - next[field];
            }
        }
        if (typeof compareFunction === 'string') {
            data.sort(handler[compareFunction]);
        } else if (typeof compareFunction === 'function')
            data.sort(compareFunction);
        else
            data.sort();
        return data;
    }
</script>
</html>