前言

最近有小伙伴催我更一期前端大厂面试题，前几天都忙于私事，耽误了。。。

但是，今天它来了↓

因为很久以前就整理了面试题，所以稍微修改了一下发出来供大家阅读

这套前端面试题已经有小伙伴成功拿到了腾讯offer，所以大家可以放心借鉴。

为了满足大家的需求，题都已经分享出来啦，喜欢的小伙伴别忘了给这篇小文章点个小小的赞哟,如果你觉得有用的话，也可以分享给其他小伙伴一起阅读！

下面请看题：

前端面试题集锦——HTML 篇

1. 你是怎么理解 HTML 语义化

Step 1：先举例说明 HTML 语义化简单来说就是用正确的标签来做正确的事。

比如表示段落用 p 标签、表示标题用 h1-h6 标签、表示文章就用 article 等。

Step 2：说说为什么需要使用语义化标签

前期：前端工作主要由后端人员完成，也就是打野阶段，使用的是 table 布局 中期：美工人员使用 div+css 来完成
当前：专业的前端开发应该使用合适的标签来表达正确含义的页面结构 让页面具有良好的结构和含义，可以有效提高：
可访问性：帮助辅助技术更好的阅读和转译你的网页，利于无障碍阅读；
可检索性：有了良好的结构和语义，可以提高搜索引擎的有效爬取，提高网站流量；
国际化：全球只有 13%的人口是英语母语使用者，因此通用的语义化标签可以让各国开发 者更容易弄懂你网页的结构；
互用性：减少网页间的差异性，帮助其他开发者了解你网页的结构，方便后期开发和维护

2. 你用过哪些 HTML5 标签 表示结构的标签

<header> <nav> <main> <article> <section> <aside> <footer> 表示文字形式

<data> ： 举例：
展示了一些产品名称，而且每个名称都和一个产品编码相关联。

<p>新产品</p>
<ul> 
<li>
<data value="398">迷你番茄酱</data>
</li>
 <li>
<data value="399">巨 无霸番茄酱</data>
</li>
 <li>
<data value="400">超级巨无霸番茄酱</data>
</li>
</ul> 

<time> ： 表示日期和时间值，机器读取通过 datetime 属性指定。
举例：
<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time></p>
<mark>：用于高亮文本 嵌入内容
<video> ： controls：展示视频自带的控件
autoplay：视频马上自动播放
poster：海报帧的 URL
height、width：视频显示区域的宽和高
loop：视频结尾自动回到视频开始的地方

<video controls> 
<source src="myVideo.mp4" type="video/mp4"> 
<source src="myVideo.webm" type="video/webm"> 
<p>Your browser doesn't support HTML5 video. Here is a <a href="myVideo.mp4">link to the video</a> instead.</p>
</video>
<!-- Simple video example --><video src="videofile.ogg" autoplay poster="posterimage.jpg"> 抱歉，您的浏 览器不支持内嵌视频，不过不用担心，你可以 <a href="videofile.ogg">下载</a> 并用你喜 欢 的 播 放 器 观 看 !</video><!-- Video with subtitles -->
<video src="foo.ogg"> 
<track kind="subtitles" src="foo.en.vtt" srclang="en" label="English"> 
<track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska"></video> 

<audio> ： 大部分同 <vedio>
controls：展示音频自带的控件
autoplay：音频马上自动播放
muted：是否静音
loop：音频结尾自动回到开始的地方

<audio controls> 
<source src="myAudio.mp3" type="audio/mpeg"> 
<source src="myAudio.ogg" type="audio/ogg"> 
<p>Your browser doesn't support HTML5 audio. Here is a <a href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>
<!-- Simple audio playback -->
<audio src="AudioTest.ogg" autoplay> Your browser does not support the <code>audio</code> element.</audio>
<audio controls> 
<source src="foo.opus"
type="audio/ogg; codecs=opus"/>
<source src="foo.ogg" type="audio/ogg; codecs=vorbis"/> 
<source src="foo.mp3" type="audio/mpeg"/></audio>
<canvas> ： 通过 JavaScript 和 HTML 的 <canvas> 元素来绘制图形 <canvas id="canvas" width="300" height="300"></canvas>//获取HTML 

<canvas> 元素的引用const canvas = document.getElementById('canvas');//获得一 个绘图上下文
const ctx = canvas.getContext('2d');//让长方形变成绿色
ctx.fillStyle = 'green';//将 它的左上角放在(10, 10)，把它的大小设置成宽 150 高 100ctx.fillRect(10, 10, 150, 100);

3. meta viewport 是做什么用的，怎么写？

Step 1：使用目的 是为了在移动端不让用户缩放页面使用的
Step 2：怎么写 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale-1, minimum-scale=1">
Step 3：解释每个单词的含义 with=device-width 将布局视窗（layout viewport）的宽度设置为设备屏幕分辨率的宽度 initial-scale=1 页面初始缩放比例为屏幕分辨率的宽度 maximum-scale=1 指定用户能够放大的最大比例 minimum-scale=1 指定用户能够缩小的最大比例

4.H5 是什么

简单粗暴：就是一种移动端页面
深入点：微信上的一种移动营销页面 总之不是 HTML5 5.label 标签的作用 label 标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签 相关的表单控件上。
<label for="Name">Number:</label><input type='text' name="Name" id="Name"/><label>Date:<input type="text" name="B"/></label>

6.行内元素有哪些？

块级元素有哪些？
空(void)元素有那 些？
首先：CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认的 display 值，如 div 的 display 默认值为“block”，则为“块级”元素；span 默认 display 属性 值为“inline”，是“行内”元素。

常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、 <blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、 <code>
常用的内联块状元素有：
<img>、<input>
知名的空元素：
<br/> <hr/> <img/> <input/> <link/> <meta/> <br />

7.a 标签中 如何禁用 href 跳转页面 或 定位链接

e.preventDefault();href="javascript:void(0);

8. canvas 在标签上设置宽高和在 style 中设置宽高有什么区别

canvas 标签的 width 和 height 是画布实际宽度和高度，绘制的图形都是在这个上面。而 style 的 width 和 height 是 canvas 在浏览器中被渲染的高度和宽度。如果 canvas 的 width 和 height 没指定或值不正确，就被设置成默认值 。

9.你做的页面在哪些流览器测试过？这些浏览器的内核分别 是什么?

IE: trident 内核 Firefox：gecko 内核 Safari:webkit 内核 Opera:以前是 presto 内核，Opera 现已改用 GoogleChrome 的 Blink 内核
Chrome:Blink(基于 webkit，Google 与 Opera Software 共同开发)

10.iframe 有哪些缺点?

iframe 是一种框架，也是一种很常见的网页嵌入方 iframe 的优点：
1.iframe 能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用 iframe，那么你只需要修改 iframe 的内容，就可以实现调用的每一个 页面内容的更改，方便快捷。
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用 iframe 来嵌 套，可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由 iframe 来解决。
iframe 的缺点：
1.会产生很多页面，不容易管理。
2.iframe 框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动 条，会分散访问者的注意力，用户体验度差。
3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好 的处理 iframe 中的内容，所以使用 iframe 会不利于搜索引擎优化。
4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
5.iframe 框架页面会增加服务器的 http 请求，对于大型网站是不可取的。 现在基本上都是用 Ajax 来代替 iframe，所以 iframe 已经渐渐的退出了前端开发。

11.HTML5 新特性

1. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失; sessionStorage 的 数据在浏览器关闭后自动删除; 新的技术 webworker, websocket, Geolocation;

12.HTML5 离线储存

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户 机器上的缓存文件。
原理： HTML5 的离线存储是基于一个新建的.appcache 文件的缓存机制(不是存储技术)，通 过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后 当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

如何使用： 页面头部像下面一样加入一个 manifest 的属性；
在 cache.manifest 文件的编写离线存储的资源；
CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html 在离线状态时，操作 window.applicationCache 进行需求实现。

13.浏览器是怎么对 HTML5 的离线储存资源进行管理和加 载的呢？

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第 一次访问 app，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。 如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面， 然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做 任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。 离线的情况下，浏览器就直接使用离线存储的资源。

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

（1）<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种 模式来渲染文档。
（2）严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。 （3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站 点无法工作。
（4）DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。复制代码 你知道多少种 Doctype 文档类型？ 该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。 HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。 XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。 Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks （包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

15.HTML 与 XHTML——二者有什么区别

区别：
1.所有的标记都必须要有一个相应的结束标记
2.所有标签的元素和属性的名字都必须使用小写
3.所有的 XML 标记都必须合理嵌套
4.所有的属性必须用引号""括起来
5.把所有<和&特殊符号用编码表示
6.给所有属性赋一个值
7.不要在注释内容中使“--”
8.图片必须有说明文字复制代码

前端面试题集锦——CSS 篇

1. 页面渲染时，dom 元素所采用的 布局模型,可通过 box-sizing 进行设置。根据计算宽高的区域可分为：

content-box (W3C 标准 盒模型 ) border-box (IE 盒模 型) padding-box (FireFox 曾经 支持 ) margin-box (浏览器未实现) Tips: 理论上是有上面 4 种盒子，但现在 w3c 与 mdn 规范中均只支持 content-box 与 border-box；

2. ie 盒模型算上 border、padding 及自身（不算 margin）， 标准的只算上自身窗体的大小 css 设置方法

如下：

标准模型 :box-sizing:content-box;
IE 模型:box-sizing:border-box;

3.几种获得宽高的方式 :

dom.style.width/height 这种方式只能取到 dom 元素内联样式所设置的宽高，也就是说如果该节点的样式是在 style 标签中或外联的 CSS 文件中设置的话，通过这种方法是获取不到 dom 的宽高的。

dom.currentStyle.width/height 这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取 到。但这种方式只有 IE 浏览器支持。 window.getComputedStyle(dom).width/height 这种方式的原理和 2 是一样的，这个可以兼容更多的浏览器，通用性好一些。

dom.getBoundingClientRect().width/height 这种方式是根据元素在视窗中的绝对位置来获取宽高的 dom.offsetWidth/offsetHeight 这个就没什么好说的了，最常用的，也是兼容最好的。

4.拓展各种获得宽高的方式 : 获取屏幕的高度和宽度（屏幕分辨率）：

window.screen.height/width 获取屏幕工作区域的高度和宽度（去掉状态栏）： window.screen.availHeight/availWidth 网页全文的高度和宽度： document.body.scrollHeight/Width 滚动条卷上去的高度和向右卷的宽度： document.body.scrollTop/scrollLeft 网页可见区域的高度和宽度（不加边线）： document.body.clientHeight/clientWidth 网页可见 区域的高度和宽度（加边线）： document.body.offsetHeight/offsetWidth

5.边距重叠解决方案(BFC) BFC 原理 :

内部的 box 会在垂直方向，一个接一个的放置 每个元素的 margin box 的左边，与包含块 border box 的左边相接触（对于从做往右的格式化，否则相反） box 垂直方向的距离由 margin 决定，属于同一个 bfc 的两个相邻 box 的 margin 会发生重叠 bfc 的区域不会与浮动区域的 box 重叠 bfc 是一个页面上的独立的容器，外面的元素不会影响 bfc 里的元素，反过来，里面的也不 会影响外面的 计算 bfc 高度的时候，浮动元素也会参与计算 创建 bfc float 属性不为 none（脱离文档流） position 为 absolute 或 fixed display 为 inline-block,table-cell,table-caption,flex,inine-flex overflow 不为 visible 根元素 demo 上这块 margin-bottom:30px; 下这块 margin-top:50px;

前端面试题集锦——JavaScript

1.请你谈谈 Cookie 的优缺点

优点：
极高的扩展性和可用性

1. 数据持久性。
2. 不需要任何服务器资源。 Cookie 存储在客户端并在发送后由服务器读取。 3) 可配置到期规则。 控制 cookie 的生命期，使之不会永远有效。偷盗者很可 能拿到一个过期的 cookie 。
3. 简单性。 基于文本的轻量结构。
4. 通过良好的编程，控制保存在 cookie 中的 session 对象的大小。
5. 通过加密和安全传输技术（ SSL ），减少 cookie 被破解的可能性。
6. 只在 cookie 中存放不敏感数据，即使被盗也不会有重大损失。
   缺点：
7. Cookie 数量和长度的限制 。 数量：每个域的 cookie 总数有限。 a) IE6 或更低版本最多 20 个 cookie b) IE7 和之后的版本最后可以有 50 个 cookie c) Firefox 最多 50 个 cookie d) chrome 和 Safari 没有做硬性限制 长度：每个 cookie 长度不超过 4KB （ 4096B ），否则会被截掉。
8. 潜在的安全风险 。 Cookie 可能被拦截、篡改。如果 cookie 被拦截，就有 可能取得所有的 session 信息。
9. 用户配置为禁用 。有些用户禁用了浏览器或客户端设备接受 cookie 的能 力，因此限制了这一功能。
10. 有些状态不可能保存在客户端 。例如，为了防止重复提交表单，我们需要在 服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到 任何作用。

2.Array.prototype.slice.call(arr，2)方法的作用是：

利用 Array 原型上的 slice 方法，使用 call 函数的第一个参数，让这个方法中 的 this 指向 arr，并传递参数 2，实际上等于 arr.slice(2)，即从下标为 2 开 始截取到末尾。

3.以下代码执行后，控制台的输出是：

var a = 10; function a(){} console.log(typeof a)
A."number" B."object" C."function" D."undefined&quot

答案：C
函数提升优先级高于变量提升，所以代码等价于 function a(){} var a； a = 10; console.log(typeof a)

4、简单说一下浏览器本地存储是怎样的

总的来说，浏览器存储分为以下几种：
1、Cookie 存储，明文，大小限制 4k 等
2、localStorage，持久化存储方式之一，不用在两端之间传输，且限制大小为 10M
3、sessionStorage，会话级存储方式，浏览器关闭立即数据丢失
4、indexDb，浏览器端的数据库
5.原型 / 构造函数 / 实例 原型(prototype): 一个简单的对象，用于实现对象的 属性继承。可以简单的理 解成对象的爹。在 Firefox 和 Chrome 中，每个 JavaScript 对象中都包含一个 proto (非标准)的属性指向它爹(该对象的原型)，可 obj.proto进行访 问。构造函数: 可以通过 new 来 新建一个对象 的函数。 实例: 通过构造函数和 new 创建出来的对象，便是实例。 实例通过proto 指向原型，通过 constructor 指向构造函数。 说了一大堆，大家可能有点懵逼，这里来举个栗子，以 Object 为例，我们常用 的 Object 便是一个构造函数，因此我们可以通过它构建实例。

// 实例 const instance = new Object()复制代码 则此时， 实例为 instance, 构造函数为 Object，我们知道，构造函数拥有一个 prototype 的属性指向原型，因此原型为:

// 原型 const prototype = Object.prototype 这里我们可以来看出三者的关系: 实例.proto === 原型 原型.constructor === 构造函数 构造函数.prototype === 原型 // 这条线其实是是基于原型进行获取的，可以理解成一条基于原型的映射线// 例如: // const o = new Object()// o.constructor === Object --> true// o.proto = null;// o.constructor === Object --> false// 注意: 其 实实例上并不是真正有 constructor 这个指针，它其实是从原型链上获取的// instance.hasOwnProperty('constructor') === false (感谢 刘博海 Brian 童鞋实例.constructor === 构造函数 此处感谢 caihaihong 童鞋的指出。 放大来看，我画了张图供大家彻底理解:

image

6.原型链： 原型链是由原型对象组成，每个对象都有 proto 属性，指向了创建该对象 的构造函数的原型，proto 将对象连接起来组成了原型链。是一个用来实现 继承和共享属性的有限的对象链。

属性查找机制: 当查找对象的属性时，如果实例对象自身不存在该属性，则沿着 原型链往上一级查找，找到时则输出，不存在时，则继续沿着原型链往上一级查 找，直至最顶级的原型对象 Object.prototype，如还是没找到，则输出 undefined；

属性修改机制: 只会修改实例对象本身的属性，如果不存在，则进行添加该属性， 如果需要修改原型的属性时，则可以用: b.prototype.x = 2；但是这样会造成 所有继承于该对象的实例的属性发生改变。

7.执行上下文(EC)

执行上下文可以简单理解为一个对象:
它包含三个部分:
o 变量对象(VO) o 作用域链(词法作用域) othis 指向
它的类型: o 全局执行上下文 o 函数执行上下文 oeval 执行上下文
代码执行过程: o 创建 全局上下文 (global EC) o 全局执行上下文 (caller) 逐行 自上而下 执行。遇到函数时，函数执行上下 文 (callee) 被 push 到执行栈顶层 o 函数执行上下文被激活，成为 active EC, 开始执行函数中的代码，caller 被 挂起o 函数执行完后，callee 被 pop 移除出执行栈，控制权交还全局上下文 (caller)，继续执行。

8.变量对象

变量对象，是执行上下文中的一部分，可以抽象为一种 数据作用域，其实也可 以理解为就是一个简单的对象，它存储着该执行上下文中的所有 变量和函数声 明(不包含函数表达式)。

活动对象 (AO): 当变量对象所处的上下文为 active EC 时，称为活动对象。

9.作用域链

我们知道，我们可以在执行上下文中访问到父级甚至全局的变量，这便是作用域 链的功劳。作用域链可以理解为一组对象列表，包含 父级和自身的变量对象， 因此我们便能通过作用域链访问到父级里声明的变量或者函数。

由两部分组成: o[[scope]]属性: 指向父级变量对象和作用域链，也就是包含了父级的[[scope]] 和 AO oAO: 自身活动对象 如此 [[scopr]]包含[[scope]]，便自上而下形成一条 链式作用域。

10.闭包

闭包属于一种特殊的作用域，称为 静态作用域。它的定义可以理解为: 父函数 被销毁 的情况下，返回出的子函数的[[scope]]中仍然保留着父级的单变量对象 和作用域链，因此可以继续访问到父级的变量对象，这样的函数称为闭包。

闭包会产生一个很经典的问题: o 多个子函数的[[scope]]都是同时指向父级，是完全共享的。因此当父级的变 量对象被修改时，所有子函数都受到影响。 解决: o 变量可以通过 函数参数的形式 传入，避免使用默认的[[scope]]向上查找 o 使用 setTimeout 包裹，通过第三个参数传入 o 使用 块级作用域，让变量成为自己上下文的属性，避免共享 6. script 引入方式： html 静态<script>引入 js 动态插入<script> <script defer>: 延迟加载，元素解析完成后执行 <script async>: 异步加载，但执行时会阻塞元素渲染

除了以上的小部分题外，还包括了其他前端面试题(实在是太多了页面写不下)

大厂面试

如下：

前端面试题集锦——Vue

前端面试题集锦——算法

.............................................................

由于篇幅太长，大家读起来较冗长，我就不一一列举出来了，下面请看这套面试题的目录你就知道了

面试题目录

大厂面试题

最后的最后，大家都知道答案仅供参考，看了题不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击这里免费分享学习~