不记住这66道前端面试题，不敢回家过年！

最新推荐文章于 2024-04-10 19:47:08 发布

前端叭叭说

最新推荐文章于 2024-04-10 19:47:08 发布

阅读量234

点赞数 1

文章标签：前端面试

本文链接：https://blog.csdn.net/qq_35271011/article/details/127858766

版权

不记住这66道前端面试题，不敢回家过年

现阶段由于很多原因可能会有职场焦虑，焦虑会带来很大的精神内耗；解决焦虑的最好办法是行动起来、把焦虑的时间用来锻炼能力提升自己，先尽人事然后才能心安理得的听天命。

本文内容结构、读者可获得

精选的66道前端面试题；

本文特别适合前端初学者、有几个月工作经验的前端开发者、中高级开发者等各种有兴趣的同学学习并牢记。

内容包括：html题目1题；css题目10题；原生js20题；vue题目20题；网络浏览器10题；其他5题；

建议

建议自己熟记之后抽空找个朋友以类似模拟面试方式提问自己几遍，让自己能准确流畅的回答每一个问题，避免面试时给面试官留下技术不扎实的印象，珍惜每一次来之不易的面试机会。

也可私信作者提供类似帮助 ！

HTML 篇

1. 说一下Html5有哪些新特性？

新增语义化标签，例如<header>、<body>、<footer>等
增强表单功能，例如新增input标签type类型，type: color,date
新增视频和音频，audio、video 标签
新增Canvas绘图
新增SVG绘图
新增WebSocket

CSS 篇

2. 来聊一下Css吧，介绍一下盒模型概念

在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。

广泛地使用两种“盒子” —— 块级盒子 (block box) 和内联盒子 (inline box)。这两种盒子会在页面流和元素之间的关系方面表现出不同的行为。

完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。

CSS 中一个块级盒子有如下组成：

Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
Padding box: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置。
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

在这里插入图片描述

盒模型一般有两种：标准盒模型、IE盒模型；

标准盒模型和IE盒模型的唯一区别是：

标准盒模型给盒设置 width 和 height，实际设置的是 content box。padding 和 border 再加上设置的宽高一起决定整个盒子的大小。
IE盒模型设置width 和 height，则设置的是 content box，padding 和 border之和。

默认浏览器会使用标准模型。如果需要使用替代模型，您可以通过为其设置 box-sizing: border-box 来实现；

3. css有哪些样式属性是可以继承的？

字体系列属性：font：组合字体 font-family：规定元素的字体系列 font-weight：设置字体的粗细 font-size：设置字体的尺寸 font-style：定义字体的风格
文本系列属性：text-indent：文本缩进 text-align：文本水平对齐 line-height：行高 word-spacing：增加或减少单词间的空白（即字间隔） letter-spacing：增加或减少字符间的空白（字符间距） direction：规定文本的书写方向 color：文本颜色
元素可见性：visibility、opacity
列表属性：list-style-type、list-style-image、list-style-position、list-style
光标属性：cursor

4. 如何隐藏页面中的一个元素，你有哪些方法？

css属性设置display: none
css属性设置width: 0;height: 0;
css属性设置opacity: 0，透明度为0
css属性设置position: absolute; + 大负left + 大负top，移出视线
css属性设置visibility: hidden
css属性设置color：和背景色一样

5. Css有哪些常用的选择器？他们的优先级权重怎么计算的？

常用的选择有：

元素选择器 标签名{ }
id选择器 #id属性值{ }
类选择器 ·class属性值{ }
通配选择器 * { }
后代元素选择器 祖先元素后代元素{ }
子元素选择器 父元素>子元素{ }
伪类选择器 元素:hover{ }等
属性选择器 元素[属性名=“属性值”]
兄弟元素选择器 选择器1 + 选择器2 { }等
并集选择器 选择器1，选择器2，选择器n{ }
交集选择器 选择器1选择器2选择器n{ }

优先级权重计算

优先级从高到低顺序：!Important>行内样式>ID 选择器>类选择器>标签选择器>通配符>继承>浏览器默认属性；

权重：

第一等：内联样式，如：style=“color:red;”，权值为 1000
第二等：ID 选择器，如：#body，权值为 0100
第三等：类、伪类、属性选择器如：.bar，权值为 0010
第四等：标签、伪元素选择器，如：div ::first-line 权值为 0001
其他: 通配符，子选择器，相邻选择器等。如*，>,+, 权值为 0000；继承的样式没有权值

6. Css雪碧图的原理

应用场景：
有大量小图标和背景图像，让UI设计合并到一张图片上，然后利用css强大的 position 定位，来显示需要显示的图片部分。
优点：

减少加载网页图片时对服务器的请求次数，降低服务器压力
提高页面的加载速度

7. 说一下你对BFC的了解吧

BFC：块格式化上下文（Block Formatting Context）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响。

创建BFC的方式：

根元素（<html>）
float 值非 none，即 left、right 等
overflow 值非 visible、clip的块元素，即 auto、scroll、hidden等
display 值为 inline-block、table-cell、table-caption、flex、inline-flex、flow-root
position 值为 absolute、fixed

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks、table-cells、table-caption），以及 overflow 值不为 visiable 的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

特性：BFC影响布局，通常我们会为定位和清除浮动创建新的 BFC，而不是更改布局;

包含内部浮动，解决浮动元素令父元素高度坍塌的问题
排除外部浮动，解决非浮动元素被浮动元素覆盖的问题
阻止外边距重叠，解决外边距垂直方向重合的问题

给父元素开启BFC

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BFC</title>
  <style>
    * {
     
      margin: 0; padding: 0;
    }
    .outer {
     
      border: 10px solid aqua;
      /* 给父元素设置BFC */
      overflow: hidden;
    }
    .inner {
     
      width: 120px;
      height: 120px;
      background-color: antiquewhite;
      /* 子元素浮动令父元素高度坍塌 */
      float: left;
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner"></div>
  </div>
</body>
</html>

给非浮动元素开启BFC

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BFC</title>
  <style>
    * {
     
      margin: 0; padding: 0;
    }
    .left {
     
      width: 80px;
      height: 80px;
      background-color: aqua;
      /* 浮动元素 */
      float: left;
    }
    .right {
     
      width: 120px; /* 另:这里宽度width: auto; 则左边宽度固定，右边宽度自适应的两列布局 */
      height: 120px;
      background-color: antiquewhite;
      /* 排除外部浮动，解决非浮动元素被浮动元素覆盖的问题 */
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="left"></div>
  <div class="right"></div>
</body>
</html>

属于同一个BFC的两个相邻的Box的margin会发生重叠

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BFC</title>
  <style>
    * {
     
      margin: 0; padding: 0;
    }
    .top {
     
      width: 80px;
      height: 80px;
      background-color: aqua;
      margin-bottom: 10px;
    }
    .bottom {
     
      width: 80px;
      height: 120px;
      background-color: antiquewhite;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div class="top"></div>
  <!-- 包裹开启BFC -->
  <div style="overflow: hidden;">
    <div class="bottom"></div>
  </div>
</body>
</html>

8. Css布局时为什么有时需要清除浮动，有哪些方式清除浮动？

起初 float 属性是为了能让开发人员实现简单的布局，即在成块的文本内浮动图像，文字环绕在它的左边或右边。

但是由于任何元素都可以浮动，而不仅仅是图像，所以float布局被’滥用’，浮动的使用范围扩大了，甚至曾被用来实现整个网站页面的布局。

过度的使用float布局，会出现问题：比如由于父级盒子在很多的情况下不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子的高度为0，就会影响父级盒子下面的标准流盒子。

此时就需要清除浮动

1.清除浮动的本质是清除浮动元素对后面的元素造成影响；
2.如果父盒子本身有高度，则不需要清除浮动。父级有了高度，就不会影响下面的标准流
3.清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流

清除浮动的方法

父级元素添加overflow：hidden等方式，使得触发BFC；
父级元素使用 after 伪元素，在伪元素里面清除浮动，见示例；
额外标签法，类似第二条；

示例：

.wrapper::after {
   
  content: "";
  clear: both;
  display: block;
}

目前出现了更好的页面布局技术，比如：flex布局、grid布局，很少使用浮动这种传统的布局方法来进行页面布局。

9. 介绍一下 position 的属性值有哪些，分别相对于什么定位

CSS 中 position 属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。

position 属性值有：

static：默认值；元素在文档常规流中位置，此时 top, right, bottom, left 和 z-index 属性无效。
relative：相对定位；元素先放置在文档常规流中位置，使用 top, right, bottom, left改变位置之后，原先所在的位置会留下空白；
absolute：绝对定位；元素会被移出正常文档流，并不为元素预留空间；相对于父级元素定位；
fixed：固定定位；元素会被移出正常文档流，并不为元素预留空间；相对于屏幕视口定位；
sticky：粘性定位；元素根据正常文档流进行定位，并不为元素预留空间；然后相对它的最近滚动祖先定位；

10. 页面导入样式时，使用link和@import有什么区别？

1.他们都是css引入外部样式表文件的方式，link属于HTML标签，而@import是CSS提供的;
2.页面被加载的时，link会同时被加载；而@import引用的CSS会等到页面被加载完再加载;
3.link方式的样式的权重高于@import的权重;
4.import只在IE5以上才能识别，而link是HTML标签，无兼容问题;现在IE5极少遇到，此条几乎可以忽略；

html中使用：

<!-- link -->
<link href="CSSurl路径" rel="stylesheet" type="text/css" />
<!-- @import -->
<style type="text/css">
  @import url(CSS文件路径地址);
</style>

css中使用：

@import url(CSS文件路径地址);

11. 怎么理解回流、重绘？什么场景下会触发？

浏览器解析渲染页面的html、css时，会涉及到回流与重绘。

什么是回流、重绘？

回流：布局引擎会根据各种样式，计算每个元素盒子在页面上的大小与位置

重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个元素盒子特性进行绘制

在页面初始渲染阶段，回流不可避免的触发，可以理解成页面一开始是空白的元素，后面添加了新的元素使页面布局发生改变；

当我们对 DOM 的修改引发了 DOM几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性，然后再将计算的结果绘制出来；

当我们对 DOM的修改导致了样式的变化（color或background-color），却并未影响其几何属性时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式，这里就仅仅触发了回流。

如何触发回流

回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流

添加或删除可见的DOM元素
元素的位置发生变化
元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
页面一开始渲染的时候（这避免不了）
浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
获取一些特定属性的值，这些属性有一个共性，就是需要通过即时计算得到，比如：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight
调用一些方法时比如：getComputedStyle()方法

如何触发重绘

触发回流一定会触发重绘
颜色的修改
文本方向的修改
阴影的修改

如何减少回流、重绘

如果想设定元素的样式，通过改变元素的 class 类名 (尽可能在 DOM 树的最里层)
避免设置多项内联样式
应用元素的动画，使用 position 属性的 fixed 值或 absolute 值(如前文示例所提)
避免使用 table 布局，table 中每个元素的大小以及内容的改动，都会导致整个 table 的重新计算
对于那些复杂的动画，对其设置 position: fixed/absolute，尽可能地使元素脱离文档流，从而减少对其他元素的影响
使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘
避免使用 CSS 的 JavaScript 表达式

浏览器的优化措施

由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列

当你获取布局信息的操作的时候，会强制队列刷新，包括前面讲到的offsetTop等方法都会返回最新的数据

因此浏览器不得不清空队列，触发回流重绘来返回正确的值

原生JS篇

12. js有哪些数据类型？

8种：number string boolean null undefined object Symbol bigInt

分为两类：
基本数据类型：String、Number、Boolean、Null、Undefined、Symbol
复杂数据类型：Object【Object是个大类，Function函数、Array数组、Date日期…等都归属于Object】

13. js如何判断一个变量的类型？

typeof方法

基本数据类型都返回对应的字符串；
例外的null返回object，NaN返回number；
复杂数据类型都返回object，函数返回function；

示例：
typeof 1 // 'number'
typeof 'abc' // 'string'

instanceof 方法

只能用来判断复杂数据类型,因为instanceof 是用于检测构造函数（右边）的 prototype 属性是否出现在某个实例对象（左边）的原型链上；

示例：
[1,2] instanceof Array // true
({a: 1}) instanceof Object // true

Object.property.toString.call

可检查所有的数据类型
返回"[object, 类型]"，注意返回的格式及大小写，前面是小写，后面是首字母大写

示例：
Object.property.toString.call(9) // '[object Number]'
Object.property.toString.call(true) // '[object Boolean]'
Object.property.toString.call([1,2]) // '[object Array]'

constructor方法

示例：
({a: 1}).constructor == Object // true
([1,2]).constructor == Array // true

14. js如何判断一个变量是数组？

大概有四种方法：

Array.isArray([1,2]) // true
[1,2] instanceof Array // true
[1,2] constructor === Array // true
Object.prototype.toString.call([1,2]) === '[object Array]'

15. 工作中用过Es6吗？用过Es6哪些新特性

经常用的新特性有：

声明变量let、const
模板字符串
解构赋值
扩展运算符、
箭头函数
Class类
模块化，导入导出（import export）
promise
async await
Symbol
对象增加方法，Object.values()、Object.entries()、Object.assign()
函数的参数默认值
for…of 和 for…in

16. let、const 以及 var 的区别是什么？

声明变量时有声明提升的特性，赋值不提升
可以重复声明变量
省略var，变量是全局变量
函数作用域

let声明的变量具有块级作用域的特征
在同一块级作用域，不能重复声明变量
let声明的变量不存在变量提升，即let声明存在暂时性死区。

const

除了具有let的特点外，const声明的为常量

最低0.47元/天解锁文章

前端叭叭说

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
不记住这66道前端面试题，不敢回家过年！

精选的66道前端面试题；本文特别适合前端初学者、有几个月工作经验的前端开发者、中高级开发者等各种有兴趣的同学学习并牢记。建议自己熟记之后抽空找个朋友以类似模拟面试方式提问自己几遍，让自己能准确流畅的回答每一个问题，避免面试时给面试官留下技术不扎实的印象，珍惜每一次来之不易的面试机会。
复制链接

扫一扫