最新web前端面试题

LZB_1006

于 2021-11-22 09:19:23 发布

阅读量3.1k

点赞数

本文链接：https://blog.csdn.net/LZB_1006/article/details/121464730

版权

HTML面试题

1.简述一下你对 HTML 语义化的理解？
①用正确的标签做正确的事情。
②html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;
③ 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO;
④ 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
2.Label 的作用是什么？是怎么用的？
答案：label 标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
解析：两种用法：一种是 id 绑定，一种是嵌套
3.iframe 框架有那些优缺点？
优点：
iframe 能够原封不动的把嵌入的网页展现出来。
如果有多个网页引用 iframe，那么你只需要修改 iframe 的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用 iframe 来嵌套，可以增加代码的可重用。
如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由 iframe 来解决。
缺点：
框架结构中出现各种滚动条
iframe 会阻塞主页面的 Onload 事件
搜索引擎的检索程序无法解读这种页面，不利于 SEO
iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

4.HTML 与 XHTML 二者有什么区别，你觉得应该使用哪一个并说出理由。
应该使用XHTML，因为XHTML是XML重写了HTML的规范，比HTML更加严格，表现如下:
1、XHTML中所有的标记都必须有一个相应的结束标签;
2、XHTML所有标签的元素和属性的名字都必须使用小写;
3、所有的XML标记都必须合理嵌套;
4、所有的属性都必须用引号"”括起来;
5、把所有<和&特殊符号用编码表示;
6、给所有属性附一个值;
7、不要在注释内容中使用“–”;
8、图片必须使用说明文字。

5.HTML5 的 form 如何关闭自动完成功能？
答案：将不想要自动完成的 form 或 input 设置为 autocomplete=off

6.每个 HTML 文件头里都有个很重要的东西，Doctype，知道这是干什么的么？
答案：<!DOCTYPE> 声明位于文档中的最前面的位置，处于标签之前。
1.告知浏览器文档使用哪种 HTML 或 XHTML 规范。
2.告诉浏览器按照何种规范解析页（如果你的页面没有 DOCTYPE 的声明，那么 compatMode 默认就是 BackCompat,浏览器按照自己的方式解析渲染页面）
7. 简述一下 src 与 href 的区别。
答案：src 用于引用资源，替换当前元素；href 用于在当前文档和引用资源之间确立联系。

8.严格模式与混杂模式
严格模式：以浏览器支持的最高标准运行
混杂模式：页面以宽松向下兼容的方式显示，模拟老式浏览器的行为
9.对于 WEB 标准以及 W3C 的理解与认识问题
答案：
web 标准简单来说可以分为结构、表现和行为。其中结构主要是有 HTML 标签组成。或许通俗点说，在页面 body 里面我们写入的标签都是为了页面的结构。表现即指 css 样式表，通过 css 可以是页面的结构标签更具美感。行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是有 js 组成。
web 标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。
W3C 对 web 标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点
1.对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对 SEO 很有帮助）
1）标签字母要小写
2）标签要闭合
3）标签不允许随意嵌套
2.对于 css 和 js 来说
1）尽量使用外链 css 样式表和 js 脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
2）样式尽量少用行间样式表，使结构与表现分离，标签的 id 和 class 等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版
3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。
10.列举 IE 与其他浏览器不一样的特性？
a. IE 的排版引擎是 Trident （又称为 MSHTML）
b. Trident 内核曾经几乎与 W3C 标准脱节（2005 年）
c. Trident 内核的大量 Bug 等安全性问题没有得到及时解决
d. JS 方面，有很多独立的方法，例如绑定事件的 attachEvent、创建事件的 createEventObject 等
e. CSS 方面，也有自己独有的处理方式，例如设置透明，低版本 IE 中使用滤镜的方式
11.前端页面有哪三层构成，分别是什么？作用是什么？
答案：分成：结构层、表示层、行为层。
1.结构层（structural layer）
由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”
1.表示层（presentation layer）
由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。
1.行为层（behaviorlayer）
负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。
12. 网页验证码是干嘛的，是为了解决什么安全问题？
答案：
（1）区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水
（2）有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试

13.为什么用多个域名存储网站资源更有效？
答案：
1、CDN 缓存更方便
2、突破浏览器并发限制
3、节约 cookie 带宽
4、节约主域名的连接数，优化页面响应速度
5、防止不必要的安全问题

页面可见性（Page Visibility）API 可以有哪些用途？
答案：
页面可见性：就是对于用户来说，页面是显示还是隐藏, 所谓显示的页面，就是我们正在看的页面；隐藏的页面，就是我们没有看的页面。因为，我们一次可以打开好多标签页面来回切换着，始终只有一个页面在我们眼前，其他页面就是隐藏的，还有一种就是…，(把浏览器最小化，所有的页面就都不可见了)。
div+css 的布局较 table 布局有什么优点？
答案：分离方便改版快清晰简洁 seo
1.改版的时候更方便只要改 css 文件。
2.页面加载速度更快、结构化清晰、页面显示简洁。
3.表现与结构相分离。
4.易于优化（seo）搜索引擎更友好，排名更容易靠前。
你能描述一下渐进增强和优雅降级之间的不同吗?
答案：
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
（一开始保证最基本的功能，再改进和追加功能）
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
（一开始就构建完整的功能，再针对低版本浏览器进行兼容。）
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
请谈一下你对网页标准和标准制定机构重要性的理解。
答案：降低开发难度及开发成本，减少各种 BUG、安全问题，提高网站易用性
html 常见兼容性问题？
答案：
1.双边距 BUG float 引起的，解决办法: 使用 display解决
2.3 像素问题使用 float 引起的，解决办法: 使用 dislpay:inline -3px
3.超链接 hover 点击后失效，解决办法: 使用正确的书写顺序 link visited hover active
4.Ie z-index 问题，解决办法: 给父级添加 position:relative
5.Png 透明，解决办法: 使用 js 代码
6.Min-height 最小高度，解决办法: ！Important 解决
7.select 在 ie6 下遮盖，解决办法: 使用 iframe 嵌套
8.为什么没有办法定义 1px 左右的宽度容器，解决办法: （IE6 默认的行高造成的，使用 over:hidden,zoom:0.08 line-height:1px）
9.IE6 不支持 PNG 透明背景，解决办法: IE6 下使用 gif 图片
对 WEB 标准以及 W3C 的理解与认识
答案：标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链 css 和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

CSS面试题

1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

2 box-sizing属性？

用来控制元素的盒子模型的解析模式，默认为content-box
context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

3 CSS选择器有哪些？哪些属性可以继承？

CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）

可继承的属性：font-size, font-family, color

不可继承的样式：border, padding, margin, width, height

优先级（就近原则）：!important > [ id > class > tag ]
!important 比内联优先级高

4 CSS优先级算法如何计算？

元素选择符： 1
class选择符： 10
id选择符：100
元素标签：1000

!important声明的样式优先级最高，如果冲突再进行计算。
如果优先级相同，则选择最后出现的样式。
继承得到的样式的优先级最低。

5 CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。

6 请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。
7. 为什么要初始化CSS样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
8 display:none与visibility：hidden的区别？
display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）
9. position跟display、overflow、float这些特性相互叠加后会怎么样？
display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。
类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

10 对BFC规范(块级格式化上下文：block formatting context)的理解？

BFC规定了内部的Block Box如何布局。
定位方案：
内部的Box会在垂直方向上一个接一个放置。
Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
每个元素的margin box 的左边，与包含块border box的左边相接触。
BFC的区域不会与float box重叠。
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
计算BFC的高度时，浮动元素也会参与计算。
满足下列条件之一就可触发BFC

根元素，即html
float的值不为none（默认）
overflow的值不为visible（默认）
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed
11. 为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？
浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
浮动带来的问题：

父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
清除浮动的方式：
父级div定义height
最后一个浮动元素后加空div标签并添加样式clear:both。
包含浮动元素的父标签添加样式overflow为hidden或auto。
父级div定义zoom
12.设置元素浮动后，该元素的display值是多少？
自动变成display:block
13 CSS优化、提高性能的方法有哪些？
1.避免过度约束
2.避免后代选择符
3.避免链式选择符
4.使用紧凑的语法
5.避免不必要的命名空间
6.避免不必要的重复
7.最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
8.避免！important，可以选择其他选择器
9.尽可能的精简规则，你可以合并不同类里的重复规则
13如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

14 li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。
解决方法：
可以将

代码全部写在一排
浮动li中float：left
在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px
15. display:inline-block 什么时候会显示间隙？
有空格时候会有间隙解决：移除空格
margin正值的时候解决：margin使用负值
使用font-size时候解决：font-size:0、letter-spacing、word-spacing
16. 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度
外层div使用position：relative；高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0
1. png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
  png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。大多数地方都可以用。
  jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
  gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
  webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。
2. style标签写在body后与body前有什么区别？
页面加载自上而下当然是先加载样式。
写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）
1. CSS属性overflow属性定义溢出元素内容区的内容会如何处理?
参数是scroll时候，必会出现滚动条。
参数是auto时候，子元素内容大于父元素时出现滚动条。
参数是visible时候，溢出的内容出现在父元素之外。
参数是hidden时候，溢出隐藏。
1. 阐述一下CSS Sprites
将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。

JS面试题

1.js中let和const有什么用？
在现代js中，let＆const是创建变量的不同方式。在早期的js中，咱们使用var关键字来创建变量。 let＆const关键字是在ES6版本中引入的，其目的是在js中创建两种不同类型的变量，一种是不可变的，另一种是可变的。
const:它用于创建一个不可变变量。不可变变量是指其值在程序的整个生命周期中永不改变的变量。
let: let用于创建一个可变变量，可变变量是像var这样的普通变量，可以任意次数地更改。
2. JS 中的主要有哪几类错误
JS有三类的错误:
加载时错误：加载web页面时出现的错误(如语法错误)称为加载时错误，它会动态生成错误。
运行时错误：由于滥用html语言中的命令而导致的错误。
逻辑错误：这些错误是由于对具有不同操作的函数执行了错误的逻辑而导致的
3.JS的作用域链是什么及其作用
一般情况下，变量取值到创建这个变量的函数的作用域中取值。但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。
JS中的作用域链主要用于解析变量的值。如果没有这个，在不同的作用域内定义了许多变量，JS很难为变量选择某个值。
4.解释JS中的MUL函数
MUL表示数的简单乘法。在这种技术中，将一个值作为参数传递给一个函数，而该函数将返回另一个函数，将第二个值传递给该函数，然后重复继续。
5.用纯JS编写一个程序来反转字符串
使用内置函数：内置函数reverse()直接反转字符串。
6. 列出JS中的一些设计模式:
设计模式是软件设计中常见问题的通用可重用解决方案，以下是一些设计模式是：
创建模式：该模式抽象了对象实例化过程。
结构型模式：这些模式处理不同的类和对象以提供新功能。
行为模式：也称发布-订阅模式，定义了一个被观察者和多个观察者的、一对多的对象关系。
并行设计模式：这些模式处理多线程编程范例。
架构设计模式：这些模式用于处理架构设计。
7.如何在JS中动态添加/删除对象的属性？
咱们可以使用object.property_name = value向对象添加属性，delete object.property_name 用于删除属性。
8.解释一下什么是 promise ？
promise是js中的一个对象，用于生成可能在将来产生结果的值。值可以是已解析的值，也可以是说明为什么未解析该值的原因。
promise 可以有三种状态:
pending：初始状态，既不是成功也不是失败
fulfilled：意味着操作完全成功
rejected：意味着操作失败
一个等待状态的promise对象能够成功后返回一个值，也能失败后带回一个错误
当这两种情况发生的时候，处理函数会排队执行通过then方法会被调用。
9. undefined，null 和 undeclared 有什么区别？
1.null表示"没有对象"，即该处不应该有值，转为数值时为0。典型用法是：
（1）作为函数的参数，表示该函数的参数不是对象。
（2）作为对象原型链的终点。
2.undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义，转为数值时为NaN。典型用法是：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
3.undeclared：js语法错误，没有申明直接使用，js无法找到对应的上下文。
10.列出JS基本和非基本数据类型之间的一些区别？
1.目前JS中有6种基本数据类型: Undefined、Null、Boolean、Number、Symbol 和 String。还有1种复杂的数据类型————Object，Object本质上是由一组无序的名值对组成的。Object、Array和Function则属于引用类型。
2.基本数据类型是不可变的，而非基本数据类型是可变的。
3.基本数据类型是不可变的，因为它们一旦创建就无法更改，但非基本数据类型刚可更改，意味着一旦创建了对象，就可以更改它。
4.将基本数据类型与其值进行比较，这意味着如果两个值具有相同的数据类型并具有相同的值，那么它们是严格相等的。
5.非基本数据类型不与值进行比较。例如，如果两个对象具有相同的属性和值，则它们严格不相等。
11. JS中的深拷贝与浅拷贝的区别？
深拷贝递归地复制新对象中的所有值或属性，而拷贝只复制引用。
在深拷贝中，新对象中的更改不会影响原始对象，而在浅拷贝中，新对象中的更改，原始对象中也会跟着改。
在深拷贝中，原始对象不与新对象共享相同的属性，而在浅拷贝中，它们具有相同的属性。
12. JS中的宿主对象与原生对象有何不同？
宿主对象:这些是运行环境提供的对象。这意味着它们在不同的环境下是不同的。例如，浏览器包含像windows这样的对象，但是Node.js环境提供像Node List这样的对象。
原生对象:这些是JS中的内置对象。它们也被称为全局对象，因为如果使用JS，内置对象不受是运行环境影响。
13. 解释JS中的高阶函数？
高阶函数是JS函数式编程的最佳特性。它是以函数为参数并返回函数作为结果的函数。一些内置的高阶函数是map、filter、reduce 等等。
14. JS 中 == 和 === 区别是什么？
1、对于string,number等基础类型，和=有区别
1）不同类型间比较，==之比较“转化成同一类型后的值”看“值”是否相等，=如果类型不同，其结果就是不等。
2）同类型比较，直接进行“值”比较，两者结果一样。
2、对于Array,Object等高级类型，和=没有区别
进行“指针地址”比较。
3、基础类型与高级类型，和=有区别
1）对于，将高级转化为基础类型，进行“值”比较。
2）因为类型不同，===结果为false。
1. 是否可以在JS中执行301重定向？
  JS完全运行在客户端上。301是服务器作为响应发送的响应代码。因此，在JS中不可能执行301重定向。
2. 解释JS中的事件冒泡和事件捕获
  事件捕获和冒泡: 在html DOM API中，有两种事件传播方法，它们决定了接收事件的顺序。两种方法是事件冒泡和事件捕获。第一个方法事件冒泡将事件指向其预期的目标，第二个方法称为事件捕获，其中事件向下到达元素。
  事件捕获
  捕获过程很少被使用，但是当它被使用时，它被证明是非常有用的。这个过程也称为滴流模式。在这个过程中，事件首先由最外层的元素捕获，然后传播到最内部的元素
  事件冒泡
  冒泡的工作原理与冒泡类似，事件由最内部的元素处理，然后传播到外部元素。
3. 解释一下什么是箭头函数？
  箭头函数是在es6或更高版本中编写函数表达式的简明方法。箭头函数不能用作构造函数，也不支持this，arguments，super或new.target关键字，它最适合非方法函数
4. 解释 JS 中的函数提升
  JS允许将声明移动到顶部的默认行为称为提升。JS中创建函数的两种方法是函数声明和函数表达式。
5. 解释一下 “use strict” ?
  “use strict”是Es5中引入的js指令。使用“use strict”指令的目的是强制执行严格模式下的代码。在严格模式下，咱们不能在不声明变量的情况下使用变量。早期版本的js忽略了“use strict”。
  20.解释 JS 事件委托模型？
  在JS中，有一些很酷的东西。其中之一是委托模型。当捕获和冒泡时，允许函数在一个特定的时间实现一个处理程序到多个元素，这称为事件委托。事件委托允许将事件侦听器添加到父节点而不是指定的节点。这个特定的侦听器分析冒泡事件，以找到子元素上的匹配项。
ES6面试题
1、es5和es6的区别，说一下你所知道的es6
ECMAScript5，即ES5，是ECMAScript的第五次修订，于2009年完成标准化ECMAScript6,即ES6，是ECMAScript的第六次修订，于2015年完成，也称ES2015ES6是继ES5之后的一次改进，相对于ES5更加简洁，提高了开发效率ES6新增的一些特性:
1. let声明变量和const声明常量，两个都有块级作用域ES5中是没有块级作用域的，并且var有变量提升，在let中，使用的变量—定要进行声明
  2）箭头函数ES6中的函数定义不再使用关键字function()，而是利用了()=>来进行定义
  3）模板字符串模板字符串是增强版的字符串，用反引号()标识，可以当作普通字符串使用，也可以用来定义多行字符串
  4)解构赋值ES6允许按照—定模式，从数组和对象中提取值，对变量进行赋值
2. for of循环for…of循环可以遍历数组、Set和Map结构、某些类似数组的对象、对象，以及字符串
3. import、export导入导出ES6标准中，Js原生支持模块(module)。将JS代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用
4. set数据结构Set数据结构，类似数组。所有的数据都是唯一的，没有重复的值。它本身是一个构造函数
  8)…展开运算符可以将数组或对象里面的值展开;还可以将多个值收集为一个变量
  9）修饰器@decorator是一个函数，用来修改类甚至于是方法的行为。修饰器本质就是编译时执行的函数
5. class类的继承ES6中不再像ES5—样使用原型链实现继承，而是引入Class这个概念11)async、await使用async/await，搭配promise,可以通过编写形似同步的代码来处理异步流程,提高代码的简洁性和可读性async用于申明一个function是异步的，而await用于等待一个异步方法执行完成
6. promisePromise是异步编程的一种解决方案，比传统的解决方案(回调函数和事件）更合理、强大
7. SymbolSymbol是一种基本类型。Symbol通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的
8. Proxy代理使用代理(Proxy)监听对象的操作，然后可以做一些相应事情
2、var、let、const之间的区别
var声明变量可以重复声明，而let不可以重复声明var是不受限于块级的，而let是受限于块级
var会与window相映射(会挂一个属性)，而let不与window相映射
var可以在声明的上面访问变量，而let有暂存死区，在声明的上面访问变量会报错const声明之后必须赋值，否则会报错
const定义不可变的量，改变了就会报错
const和let一样不会与window相映射、支持块级作用域、在声明的上面访问变量会报错
3、使用箭头函数应注意什么？
(1)用了箭头函数，this就不是指向window，而是父级(指向是可变的)
(2)不能够使用arguments对象
(3）不能用作构造函数，这就是说不能够使用new命令，否则会抛出一个错误(4)不可以使用yield命令，因此箭头函数不能用作Generator 函数
4、ES6的模板字符串有哪些新特性？并实现一个类模板字符串的功能
基本的字符串格式化。
将表达式嵌入字符串中进行拼接。
用${}来界定在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。
ES6反引号(``)就能解决类模板字符串的功能
5、介绍下 Set、Map的区别？
应用场景Set用于数据重组，Map用于数据储存Set：　
（1）成员不能重复
（2）只有键值没有键名，类似数组
（3）可以遍历，方法有add, delete,has
Map:
（1）本质上是健值对的集合，类似集合
（2）可以遍历，可以跟各种数据格式转换
6、Promise构造函数是同步执行还是异步执行，那么 then 方法呢？
promise构造函数是同步执行的，then方法是异步执行的
7、setTimeout、Promise、Async/Await 的区别
事件循环中分为宏任务队列和微任务队列
其中setTimeout的回调函数放到宏任务队列里，等到执行栈清空以后执行promise.then里的回调函数会放到相应宏任务的微任务队列里，等宏任务里面的同步代码执行完再执行async函数表示函数里面可能会有异步方法，await后面跟一个表达式
async方法执行时，遇到await会立即执行表达式，然后把表达式后面的代码放到微任务队列里，让出执行栈让同步代码先执行
7、promise有几种状态，什么时候会进入catch？
三个状态：
pending、fulfilled、reject
两个过程：
padding -> fulfilled、padding -> rejected当pending为rejectd时，会进入catch
8、Promise 中reject 和 catch 处理上有什么区别
reject 是用来抛出异常，catch 是用来处理异常
reject 是 Promise 的方法，而 catch 是 Promise 实例的方法
reject后的东西，一定会进入then中的第二个回调，如果then中没有写第二个回调，则进入catch
网络异常（比如断网），会直接进入catch而不会进入then的第二个回调
9、forEach、for in、for of三者区别
forEach更多的用来遍历数组
for in 一般常用来遍历对象或json
for of数组对象都可以遍历，遍历对象需要通过和Object.keys()
for in循环出的是key，for of循环出的是value

Vue面试题

1.vue优点？
答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；
简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习；
双向数据绑定：保留了angular的特点，在数据操作方面更为简单；
组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；
视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；
虚拟DOM：dom操作是非常耗费性能的，不再使用原生的dom操作节点，极大解放dom操作，但具体操作的还是dom不过是换了另一种方式；
运行速度更快:相比较与react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势。
2.vue父组件向子组件传递数据？
答：通过props
3.子组件像父组件传递事件？
答： $e m i t 方法 4 . v - s h o w 和 v - i f 指令的共同点和不同点？答 : 共同点：都能控制元素的显示和隐藏；不同点：实现本质方法不同， v - s h o w 本质就是通过控制 c s s 中的 d i s p l a y 设置为 n o n e ，控制隐藏，只会编译一次； v - i f 是动态的向 D O M 树内添加或者删除 D O M 元素，若初始值为 f a l s e ，就不会编译了。而且 v - i f 不停的销毁和创建比较消耗性能。总结：如果要频繁切换某节点，使用 v - s h o w (切换开销比较小，初始开销较大) 。如果不需要频繁切换某节点使用 v - i f （初始渲染开销较小，切换开销比较大）。 5 . 如何让 C S S 只在当前组件中起作用？答：在组件中的 s t y l e 前面加上 s c o p e d 6 . < k e e p - a l i v e > < / k e e p - a l i v e > 的作用是什么 ? 答 : k e e p - a l i v e 是 V u e 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 7 . 如何获取 d o m ? 答： r e f = " d o m N a m e " 用法： t h i s .$ refs.domName
8.说出几种vue当中的指令和它的用法？
答：v-model双向数据绑定；
v-for循环；
v-if v-show 显示与隐藏；
v-on事件；v-once: 只绑定一次。
9. vue-loader是什么？使用它的用途有哪些？
答：vue文件的一个加载器，将template/js/style转换成js模块。
用途：js可以写es6、style样式可以scss或less、template可以加jade等
10.为什么使用key?
答：需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。
作用主要是为了高效的更新虚拟DOM。
11.axios及安装?
答：请求后台资源的模块。npm install axios --save装好，
js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中。
12.v-modal的使用。
答：v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
v-bind绑定一个value属性；
v-on指令给当前元素绑定input事件。
13.请说出vue.cli项目中src目录每个文件夹和文件的用法？
答：assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置; app.vue是一个应用主组件；main.js是入口文件。
14.分别简述computed和watch的使用场景
答：computed:
　　　　当一个属性受多个属性影响的时候就需要用到computed
　　　　最典型的栗子：购物车商品结算的时候
watch:
　　　　当一条数据影响多条数据的时候就需要用watch
　　　　栗子：搜索数据
15.v-on可以监听多个方法吗？
答：可以，栗子：。
16. $n e x t T i c k 的使用答：当你修改了 d a t a 的值然后马上获取这个 d o m 元素的值，是不能获取到更新后的值，你需要使用$ nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。
17.vue组件中data为什么必须是一个函数？
答：因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。
　　组建中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。
18.渐进式框架的理解
答：主张最少；可以根据不同的需求选择不同的层级；
19.Vue中双向数据绑定是如何实现的？
答：vue 双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法。
20.单页面应用和多页面应用区别及优缺点
答：单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。
多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新
单页面的优点：
用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小；前后端分离；页面效果会比较炫酷（比如切换页面内容时的专场动画）。
单页面缺点：
不利于seo；导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）；初次加载时耗时多；页面复杂度提高很多。
21.v-if和v-for的优先级
答：当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以，不推荐v-if和v-for同时使用。
如果v-if和v-for一起用的话，vue中的的会自动提示v-if应该放到外层去。
22.assets和static的区别
答：相同点：assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下，这是相同点
不相同点：assets中存放的静态资源文件在项目打包时，也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传，所谓打包简单点可以理解为压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器。static中放置的静态资源文件就不会要走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器。因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是static中的资源文件由于没有进行压缩等操作，所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。
建议：将项目中template需要的样式文件js文件等都可以放置在assets中，走打包这一流程。减少体积。而项目中引入的第三方的资源文件如iconfoont.css等文件可以放置在static中，因为这些引入的第三方文件已经经过处理，我们不再需要处理，直接上传。
23.vue常用的修饰符
答：.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡；
.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；
.capture：与事件冒泡的方向相反，事件捕获由外到内；
.self：只会触发自己范围内的事件，不包含子元素；
.once：只会触发一次。
24.vue的两个核心点
答：数据驱动、组件系统
数据驱动：ViewModel，保证数据和视图的一致性。
组件系统：应用类UI可以看作全部是由组件树构成的。
25.vue和jQuery的区别
答：jQuery是使用选择器（ $）选取 D O M 对象，对其进行赋值、取值、事件绑定等操作，其实和原生的 H T M L 的区别只在于可以更方便的选取和操作 D O M 对象，而数据和界面是在一起的。比如需要获取 l a b e l 标签的内容：$ (“lable”).val();,它还是依赖DOM元素的值。
Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。
26. 引进组件的步骤
答: 在template中引入组件；
在script的第一行用import引入路径；
用component中写上组件名称。
27.delete和Vue.delete删除数组的区别
答：delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete 直接删除了数组改变了数组的键值。
28.SPA首屏加载慢如何解决
答：安装动态懒加载所需插件；使用CDN资源。
29.Vue-router跳转和location.href有什么区别
答：使用location.href=’/url’来跳转，简单方便，但是刷新了页面；
使用history.pushState(’/url’)，无刷新页面，静态跳转；
引进router，然后使用router.push(’/url’)来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。
其实使用router跳转和使用history.pushState()没什么差别的，因为vue-router就是用了history.pushState()，尤其是在history模式下。
30. vue slot
答：简单来说，假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。
31.你们vue项目是打包了一个js文件，一个css文件，还是有多个文件？
答：根据vue-cli脚手架规范，一个js文件，一个CSS文件。
32.Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？
答：Vue路由在Android机上有问题，babel问题，安装babel polypill插件解决。
33.Vue2中注册在router-link上事件无效解决方法
答：使用@click.native。原因：router-link会阻止click事件，.native指直接监听一个原生事件。
34.RouterLink在IE和Firefox中不起作用（路由不跳转）的问题
答: 方法一：只用a标签，不适用button标签；方法二：使用button标签和Router.navigate方法
35.axios的特点有哪些
答：从浏览器中创建XMLHttpRequests；
node.js创建http请求；
支持Promise API；
拦截请求和响应；
转换请求数据和响应数据；
取消请求；
自动换成json。
axios中的发送字段的参数是data跟params两个，两者的区别在于params是跟请求地址一起发送的，data的作为一个请求体进行发送
params一般适用于get请求，data一般适用于post put 请求。
36.请说下封装 vue 组件的过程？
答：1. 建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。(os：思考1小时，码码10分钟，程序猿的准则。)
　　2. 准备好组件的数据输入。即分析好逻辑，定好 props 里面的数据、类型。
　　3. 准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。
　　4. 封装完毕了，直接调用即可
37.params和query的区别
答：用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this. $r o u t e . q u e r y . n a m e 和 t h i s .$ route.params.name。
url地址显示：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
注意点：query刷新不会丢失query里面的数据
params刷新会丢失 params里面的数据。
38.vue初始化页面闪动问题
答：使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的。
首先：在css里加上[v-cloak] {
display: none;
}。
如果没有彻底解决问题，则在根元素加上style=“display: none;” :style="{display: ‘block’}"
39.vue更新数组时触发视图更新的方法
答:push()；pop()；shift()；unshift()；splice()； sort()；reverse()
40.什么是 vue 生命周期？有什么作用？
答：每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。（ps：生命周期钩子就是生命周期函数）例如，如果要通过某些插件操作DOM节点，如想在页面渲染完后弹出广告窗，那我们最早可在mounted 中进行。
41.第一次页面加载会触发哪几个钩子？
答：beforeCreate， created， beforeMount， mounted
42.简述每个周期具体适合哪些场景
答：beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
create：data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作
beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的
mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行
beforeUpdate：当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的，页面还没有和最新的数据保持同步
updated：页面显示的数据和data中的数据已经保持同步了，都是最新的
beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ，指令，过滤器 ……都是处于可用状态。还没有真正被销毁
destroyed：这个时候上所有的 data 和 methods ，指令，过滤器 ……都是处于不可用状态。组件已经被销毁了。
43.created和mounted的区别
答：created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
44.vue获取数据在哪个周期函数
答：一般 created/beforeMount/mounted 皆可.
比如如果你要操作 DOM , 那肯定 mounted 时候才能操作.
45.请详细说下你对vue生命周期的理解？
答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
创建前/后：在beforeCreated阶段，vue实例的挂载元素 $e l 和 * * 数据对象 * * d a t a 都为 u n d e f i n e d ，还未初始化。在 c r e a t e d 阶段， v u e 实例的数据对象 d a t a 有了，$ el还没有。
载入前/后：在beforeMount阶段，vue实例的route 和 $r o u t e r 的区别答：$ router是VueRouter的实例，在script标签中想要导航到不同的URL,使用 $r o u t e r . p u s h 方法。返回上一个历史 h i s t o r y 用$ router.to(-1)
$route为当前router跳转对象。里面可以获取当前路由的name,path,query,parmas等。
52.vue-router的两种模式
答:hash模式：即地址栏 URL 中的 # 符号；
history模式：window.history对象打印出来可以看到里边提供的方法和记录长度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）。
53.vue-router实现路由懒加载（动态加载路由）
答:三种方式
第一种：vue异步组件技术 ==== 异步加载，vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件。
第二种：路由懒加载(使用import)。
第三种：webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。
vuex常见面试题
54.vuex是什么？怎么使用？哪种功能场景使用它？
答：vue框架中状态管理。在main.js引入store，注入。
新建了一个目录store.js，…… export 。
场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车
55.vuex有哪几种属性？
答：有五种，分别是 State、 Getter、Mutation 、Action、 Module
state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex
56.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？
答：如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。

LZB_1006

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
最新web前端面试题

HTML面试题1.简述一下你对 HTML 语义化的理解？①用正确的标签做正确的事情。②html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;③ 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO;④ 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。2.Label 的作用是什么？是怎么用的？答案：label 标签来定义表单控制间的关系,当用户选择该标签时，浏览器会
复制链接

扫一扫