前端面试题详解

浏览器前言

最近正好在找工作，整理一下可能问到的和遇到过的面试题。

HTML

HTML语义化标签

HTML5新增的语义化标签有：header、nav、main、article、aside、footer等等。

HTML语义化就是让页面内容结构化，他有以下优点：

1. 易于用户阅读，当用户因网络原因无法加载css或js时，能够让页面呈现清晰的结构。
2. 有利于SEO搜索引擎的抓捕。
3. 方便其他设备解析，比如盲人阅读器根据语义化标签渲染网页。
4. 有利于开发维护，语义化更具可读性，代码更好维护。

HTML5新标签

HTML5新增的标签有：header、nav、video、audio、canvas、aside等等。

HTML5新增了哪些内容

广义上的HTML5指的是最新一代前端开发技术的总称，包括：HTML5、CSS3、新增的webStorage等webAPI。

HTML中新增了header、footer、nav等语义化标签，还新增了video、audio媒体标签，新增了canvas画布，还有一些标签的新属性，比如：input标签的placeholder属性。

CSS中新增了圆角、阴影、滤镜、vw和vh长度单位，flex布局，媒体查询，过度和动画，伪类等。

js中新增了webStorage浏览器缓存策略、querySelector、webSocket、requestAnimationFrame、Worker线程、地理位置等。

HTML5中的form的自动完成功能是什么

autocomplete属性规定输入字段是否应该启用自动完成功能，默认为启用。设置autocomplete=off可以关闭该功能。

自动完成允许浏览器预测对字段的输入。在用户在字段开始键入时，浏览器基于之前键入的值，应该显示出在字段中的选项。

多个浏览器标签页之间的通信

浏览器标签页之间是没办法直接通信的，一般都是通过找一个中介者来实现通信。

1. 使用websocket，通信的标签页连接同一个服务器，发送消息到服务器后，服务器推送消息给所有连接的客户端。
2. 可以适当的调用localStorage，localStorage在另一个浏览上下文里被添加、修改或删除时，都会触发一个storage事件，可以通过监听storage事件，控制它的值来进行页面信息通信。
3. 如果可以获取对应标签的引用，可通过postMessage方法向另一个标签页传递数据。

H5中cookie的原理

cookie就是HTML5提供的一种缓存方式，一个cookie就是存储在用户主机浏览器中的一小段文本文件。Cookies是纯文本形式，他们不包含任何可执行代码。每个cookie相当于一个用户标识，在该页面发送请求时，会携带对应页面存储的cookie值发送给后端用来判断登录状态是否失效。

cookie还可以用来存储数据，但是浏览器供cookie存放数据的空间较少，如果需要存放大容量数据，推荐使用webStorage。

CSS

CSS盒模型

盒模型分为标准盒模型和ie盒模型。标准盒模型为content(内容)+padding(内边距)+border(边框)+margin(外边距)，而ie盒模型则为content(内容)+padding(内边距)+margin(外边距)。

标准盒模型和ie盒模型最根本的区别在于标准盒模型将边框的单位长度单独算了进去，而ie盒模型没有算进去，ie盒模型将边框的单位长度算进内边距中。

可以通过box-sizing进行标准盒模型和ie盒模型之间的转换。

标准盒模型：box-sizing: content-box;

ie盒模型：box-sizing: border-box;

rem和em的区别

rem和em都是css的长度单位，rem是相对于根元素html的font-size进行变化，em是根据父元素的fong-size进行变化的。

CSS选择器

常用的选择器

通配符选择器：*
ID选择器：#ID
类选择器：.class
元素选择器：p、a、span等
后代选择器：p span、div a等
伪类选择器：a:hover、a:active等
属性选择器：input[type="text"]等

CSS选择器权重

!import > 行内样式 > #id > .class > 元素和伪元素 > * > 继承 > 默认

CSS精灵图

在CSS中，多个图标集成到一张图上使用background-position属性设置的图片，称为精灵图(又称图片精灵)。

CSS新特性

transition: 过渡
transform: 旋转、缩放、移动或者倾斜
animation: 动画
gradient: 渐变
shadow: 阴影
border-radius: 圆角

元素性质：行内元素和块级元素

行内元素(display: inline)

宽度和高度是由内容决定的，与其他元素共占一行不能设置宽高，例如：span标签、a标签、i标签等等

块级元素(display: block)

默认宽度由父容器决定，默认高度由内容决定，并且独占一行可以设置宽高，例如：p标签、div标签、ul标签等。

行内块元素(display: inline-block)

宽度和高度由内容决定，与其他元素共占一行但是可以设置宽高等，例如：img标签等。

绝对定位和相对定位

position：absolute;

绝对定位，是相对于元素最近的已定位的父元素，如果没有已定位的父元素，就相对于body元素进行定位。

position：relative；

相对定位，是相对于元素在文档中的初始位置进行定位。

flex布局

通过display：flex使该元素的子元素脱离文档流，进行一些其他的操作。

align-item: 定义元素横向排列规则

flex-direction: 定义元素纵向排列规则

justify-content: 定义在主轴上的对齐方式

BFC

BFC格式化上下文，就是创作一个独立的渲染区域，让处于BFC内部的元素和外部相互隔离，使内外元素不受影响。

如何产生BFC

最有效的一种方式就是将元素的性质改变为行内块元素(display：inline-block)，还可以通过position：absolute/relative进行产生bfc。

最不推荐的一种方式就是给元素添加边框，但是这种方式相比而言最简单。

BFC的作用

1. 上外边距重叠，也就是margin塌陷问题
2. 浮动引起的高度坍塌
3. 文字环绕图片问题，左边图片右边文字。

水平垂直居中

通过flex布局或者line-height属性和text-align属性进行布置

less、sass和stylus的区别

1. sass和less语法严谨，stylus相对自由。因为less长得更像css，所以它学习起来更容易。
2. sass和stylus都具有类语言的逻辑方式处理：条件、循环等，而less需要通过when等关键字模拟这些功能，这方面less比不上sass和stylus。
3. less在丰富性以及特色上都不及sass和stylus，

link和@import的区别

1. link的功能比较多，可以定义RSS，定义REL等作用，而@import只能用于加载css。
2. 当浏览器解析到link标签时，页面会同步加载所引用的css，而@Import所引用的css会等到页面加载完才被加载。
3. @Import需要IE5以上才能使用，link没有这个限制。
4. link可以使用js动态引入，@import不行。

多行元素的文本省略号

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; // 控制行数
-webkit-box-orient: vertical

重绘和回流(Repaint & Reflow)

根据浏览器渲染机制(下方浏览器部分中有解释)可以得知HTML被解析解析成了DOM，CSS被解析成了CSSOM，它俩合并产生了渲染树Render Tree。

重绘

由于节点的集合属性发生改变或者由于样式改变而不会影响布局的，称为重绘。例如outline、visibility、color、background-color等等，重绘的代价是高昂的，因此浏览器必须验证DOM树上其他元素的可见性。

回流

回流是布局或几何属性发生改变就称为回流。回流是影响浏览器性能的关键因素，因为其变涉及到部分页面(或是整个页面)的布局更新。一个元素的回流可能会导致其素有子元素以及DOM中紧随其后的节点、祖先节点元素随后的回流。大部分的回流将导致页面的重新渲染。

回流必定会发生重绘，重绘不一定会引发回流。

JavaScript

JS的几条基本规范

1. 不要再同一行声明多个变量
2. 使用===/!==来比较true/false或者数值
3. 使用字面量对象替代new Array这种形式
4. 尽量不要使用全局变量
5. Switch语句必须带有default分支
6. 函数不应该有时候有返回值&#x