3.26前端面试题总结

今天十道笔试，一个小时，然后面试五题。

1.CSS中可以继承的属性。

font-size、font-family、color、cursor、list-style。

2.画两条直角边距均为16px，背景色为#dadada的直角三角形。（可参考技术，HTML，css,svg）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>画直角三角形</title>
    <style>
        .triangle {
            width: 0px;
            height: 0px;
            border-width: 16px;
            border-style: solid;
            border-color: transparent #dadada #dadada transparent;
        }
    </style>
</head>
<body>
    <div class="triangle">

    </div>
</body>
</html>

3.如何实现元素的垂直居中？（请尽可能写出多种方法）

单行文本垂直居中，设置line-height的值等于height的值

.way1 {
            width: 100%;
            height: 300px;
            line-height: 300px;
            background-color: aquamarine;//方便观察效果
        }

2.已知块级子元素高度，使用绝对定位和top实现垂直居中（生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位）

 .container {
            width: 100%;
            height: 300px;
            position: relative;
            background-color:blueviolet;
        }
        .way2 {
            height: 150px;
            position: absolute;
            top: 50%;      /* 父元素高度的50% */
            margin-top: -75px; /* 自身高度的一半 */
            background-color: aquamarine;
        }

3.未知高度的块级父子元素居中，模拟表格布局

缺点：IE67不兼容，父级 overflow：hidden 失效

.fatherBox {
            display: table;
            height: 200px;
            background-color: brown;
        }
        .way3 {
            display: table-cell;
            vertical-align: middle;
            background-color: chocolate;
        }

4.新增 inline-block 兄弟元素，设置 vertical-align

缺点：需要增加额外标签，IE67不兼容

.container {
  height: 100%;/*定义父级高度，作为参考*/
}
.extra .vertical{
  display: inline-block;  /*行内块显示*/
  vertical-align: middle; /*垂直居中*/
}
.extra {
  height: 100%; /*设置新增元素高度为100%*/
}

5.绝对定位配合CSS3位移

.div1 {
            height: 300px;
            position: relative;
            background-color: darkgoldenrod;
        }
        .way5 {
            position: absolute; 
            height: 100px;
            top: 50%;/* 父元素的50% */
            transform: translateY(-50%);
            background-color: crimson;
        }

6.CSS弹性盒模型

.coontainer {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 200px;
            background-color: darkgray;
}

4.css中三种隐藏元素的方式：visibility:hidden,display:none和opacity:0的区别？

5.下列代码输出结果是什么？

 function node() {
        this.element = document.createElement('div');
        this.textContent = 'content';
        this.element.innerHTML = 'innerHTML';
        this.element.addEventListener('click',this.func, true);
        this.element.onelick = this.func.bind(this.element);
        this.element.addEventListener('click',this.func.call(this));
    }
    node.prototype.render = function () {
        document.body.appendChild(this.element);
    }
    node.prototype.func = function () {
        console.log(this.textContent);
    }
    var obj = new node();
    obj.render();
    obj.func();
    obj.element.click();

6.下列代码控制台的最终输出结果是多少？

var length = 'ih5互动';
    var obj = {
        length:'H5游戏营销领导者',
        exec: function () {
            return(function (length) {
                return function () {
                    console.log(this.length);
                    console.log(length);
                }
            })(this.length)
        }
    }
    var exec = obj.exec();
    console.log(exec.length);
    console.log(exec());

7.下列代码控制台的最终输出结果是多少？

  try{
        oh();
        wow();
        console.log(oh);
        console.log(wow);
    }catch (e){
        setTimeout(function () {
            console.log(wow);
            console.log(oh);
        });
    }
    function oh() {
        console.log('更好玩的H5');
    }
    var wow = function () {
        console.log('更酷的H5');
    }
    var oh = '疯狂的H5传单';
    var wow = '微传单';

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

9.请按提示编写代码，要求代码尽量考虑容错性和安全性。

（1）请实现一个函数，获取当前网页URL，并将其中的查询参数解析成字典对象，比如房钱URL为：http://www.baidu.com/helpCenter.html?a=1&b&c=&d=百度&e=<script>alert(0)</scritp>,则按形式拼成对象{a：“1”，b："", c：“”，d=“百度”,e："<script>alert(0)</script>"}

（2）在实际开发中，列举几个常见的XSS攻击例子并且给出防御方案。

10.请按提示编写代码，要求代码尽量考虑性能。

（1）请实现一个函数，对字符串数组进行去重，尽量使用多种方法，并按性能排序，比如 [‘JS’，‘H5’，‘css’，‘JQ’，‘ES6’，‘JS’]去重为[‘JS’，‘H5’，‘css’，‘JQ’，‘ES6’]。

（2）请实现一个函数，对元素数据类型不确定的数组进行去重，比如[1，2，2，3，[1,2]，[1,2]，[1,3]，[a，1]，{a:1,b:1}，{a:1,b:1}]去重为[1，2，3，[1,2]，[1,3]，[a，1]，{a:1,b:1}]

11.请谈谈你对position的了解。

12.谈谈你对变量提升的理解。

13.给你一个动态生成的无序列表，要实现对列表中的某一对象进行操作绑定，你会使用什么办法？

14.谈谈this对象的理解。

15.描述 cookies、sessionStorage 和 localStorage 的区别？

与服务器交互：

cookie是网站为了标示用户身份而存储在用户本地终端上的数据（通常经过加密）；
cookie始终会在同源http中携带（即使不需要），在浏览器和服务器之间来回传递；
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：

cookie数据根据不同浏览器限制，大小一般不超过4K；
sessionStorage和localStorage虽然也有存储大小限制，但是比cookie大得多，可以达到5M或者更大。

有期时间：

localStorage存储持久数据，浏览器关闭后数据不丢失，除非主动删除；
sessionStorage在当前浏览器窗口关闭后数据自动删除。
cookie设置的cookie过期时间前一直有效，与浏览器关闭无关。

4.2

1、请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）

尽量减少重复的http请求数量；
压缩javascript、css代码；
Ajax采用缓存调用；

其他参考：https://blog.csdn.net/gongzhuxiaoxin/article/details/52454213；

2、iframe有那些缺点？如何解决跨域问题？

会产生很多页面，不容易管理；
不容易打印；
浏览器的后退按钮无效；
代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化；
多数小型的移动设备（PDA 手机）无法完全显示框架，设备兼容性差；
多框架的页面会增加服务器的http请求，对于大型网站是不可取的；

解决跨域问题：

同一个 origin 下，父页面可以通过 iframe.contentWindow 直接访问 iframe 的全局变量、DOM 树等，iframe 可以也通过 parent/top 对父页面做同样的事情。
不同 origin 下，标准的方法是通过 .postMessage() 互相通信，不标准的方法是利用 location.hash 等奇技淫巧。

协议、域名、端口号，共同决定一个 origin 。

3、事件是什么？IE与火狐的事件机制有什么区别？如何阻止冒泡？

事件是指用户在网页中的某些操作；
IE是事件冒泡，火狐是事件捕获；
e.stopPropagation阻止冒泡；

4、谈谈This对象的理解。

5、翻转一个字符串 let a =’hello word’

先用split()将字符串转换为字符数组，然后用reverse()颠倒数组中数组,然后使用jion(),将数组字符转换为字符串；

let a = 'hello world';
let b = a.split("");
console.log(b.reverse().join(""));

6、请解释CSS动画和JavaScript动画的优缺点。requestAnimationFrame是什么？ *

7、移动端rem布局 line-height在Android机中渲染相差几px解决办法

8、font，background 简写规则，举例说明

posted @ 2018-03-26 19:30 脑袋空空空想家阅读(208) 评论(0) 编辑收藏举报

刷新页面返回顶部

脑袋空空空想家

3.26前端面试题总结

公告