web前端面试题-原创手记-慕课网

1.写出HTML5新增语义化标签以及表单控件（越多越好）
常用的语义化标签：<header>，<nav>，<footer>，<section> ，<article>，<aside>...
常用的表单控件：email, url, number, range, Data Pickers, data, month, week, time, search

2.简述HTML5中web worker, web socket, geo location, local storage适用场景
web worker: 在Javascript单线程执行的基础上，开启一个子线程，进行程序处理，而不影响主线程的执行，当子线程执行完毕之后再回到主线程上，在这个过程中并不影响主线程的执行过程。可以加载一个JS进行大量的复杂计算而不挂起主进程，并通过postMessage，onmessage进行通信。
web socket：在做一些需要即时通信的功能时候，我们首选就是用web socket，只需要建立一次连接，传递一次必要的请求头和响应头信息，之后再传递数据的时候就不需要在交换这些信息了。节省了带宽。
geo location：提供了一个可以准确知道浏览器用户当前位置的方法。
local storage：客户端存储数据，有时间限制的数据存储。

3.css中position的值有哪些？relative和absolute分别是相对于谁进行定位的？
position的值有absolute，fixed，relative，static，inherit；
relative：生成相对定位的元素，相对于其正常位置进行定位。
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

4.css清除浮动的方法有哪些，最常用的是？
①使用overflow属性来清除浮动，先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响.
②使用额外标签法，在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.
③使用伪元素来清除浮动

　　　　.clearfix:after{
　　　　　　content:"";//设置内容为空　　　　　　height:0;//高度为0　　　　　　line-height:0;//行高为0　　　　　　display:block;//将文本转为块级元素　　　　　　visibility:hidden;//将元素隐藏　　　　　　clear:both//清除浮动　　　　　}
　　　　.clearfix{
　　　　　　zoom:1;为了兼容IE
　　　　}

④使用双伪元素清除浮动

　　　　.clearfix:before,.clearfix:after {                  content: "";                 display: block;                  clear: both;
            }            .clearfix {                  zoom: 1;
            }

总结：第一种方法会将超出部分隐藏在某些时候我们想清除浮动并且保留超出部分时做不到,第二种方法会增加许多不必要的标签,常用的是第三种。

5.介绍一下css中的box-sizing属性？
content-box：在宽度和高度之外绘制元素的内边距和边框。
border-box：任何内边距和边框都将在已设定的宽度和高度内进行绘制。
inherit：规定应从父元素继承 box-sizing 属性的值。

6.如何用Flex布局实现垂直和水平居中？
水平居中：justify-content：center
垂直居中：align-items：center

7.例举JS中3种强制类型转换和2种隐式类型转换？
Boolean(value)——把给定的值转换成Boolean型；
Number(value)——把给定的值转换成数字（可以是整数或浮点数）；
String(value)——把给定的值转换成字符串。
隐式类型转换
①比如-, *, /,和%等算术运算符都会把操作数转换成数字的‘5+6’
②如果字符串和数字相加，JavaScript会自动把数字转换成字符的“ '' + 5 ”

8.如何阻止事件冒泡？

div1.addEventListener('click',function(obj){  
    alert("div1")  
},true);//如果未false则为事件冒泡，不填的话，默认false

利用addEventListener可以设置事件处理机制为捕获还是冒泡：这里将第三个参数设为true，指定事件处理机制为事件捕获。

阻止事件冒泡function stopBubble(event){  
    if(window.event){//兼容IE  
        window.event.cancelBubble=true;  
    }else{  
        event.stopPropagation();  
    }

9.获取当前页面所有a标签的href的值所组成的数组

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body>
    <div>
        <a href="index.html"></a>
        <a href="index.html"></a>
        <a href="index.html"></a>
    </div></body><script type="text/javascript">
    var arrs = []    var arr = document.querySelectorAll('a')
    arr.forEach((item, index) => {
        arrs.push(item.href)
    })    console.log(arrs)</script></html>

10.你知道ES6，ES7中引入了那些新内容？
es6的可能算是一个比较大的改变，可以看看http://es6.ruanyifeng.com/

11.你知道那些前端跨域解决方法？

12.你知道前端那些性能优化方法？

13.对于前端自动化构建工具了解吗？简单的介绍一下？

14.如果今年你打算熟练掌握一项新技术，会是什么？你选择的理由？

作者：费莱姆
链接：https://www.jianshu.com/p/26c4c49b8d1c