五万字142道超全前端面试题---送给在校招的你

Posted 北极光之夜。

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了五万字142道超全前端面试题---送给在校招的你相关的知识,希望对你有一定的参考价值。

不知不觉,又到校招时间啦。这份前端面试宝典,是我在去年,在无数个月的黑夜下,奋笔疾书,呕心沥血,织帘诵书,映雪读书,废寝忘食,停停写写,巴拉巴拉能量,集大成之作。99%内容都是按自己的理解纯手打与各处收集的题与答案。包括我自己以前在面试中经常遇到的问题我也加入了。本着社区分享快乐原则,现在分享给各位同学,希望你能有所收获。当然,都是一些比较基础简单的内容,如果发现有误的地方,大概是我头昏眼花了,欢迎在评论区指出,一起讨论。毕竟是停停写写的,可能会有许多题没有答案,或者答案不严谨的,望见谅,我也不去检查然后一个个删了,就保留着,时刻警醒自己,当然也可以自己补全,哈哈~

文章目录

一. html、CSS 基础得记

1.p 标签中的文字如何水平垂直居中

1.flex 布局,display:flex;justify-content:center;align-items:center;

  1. 先 text-align:center,再 line-height:跟盒子高一样。
2.怎样将两个 span 标签在 p 标签内水平居中
3.子元素父元素不给宽高,怎么垂直水平居中
4.怎么将多列字体大小不同的子元素之间互相居中排列
5.怎么实现移动端适配
  1. @media 媒体查询实现
  2. booststrap 框架
  3. 动态 rem 实现
6.移动端如何实现 0.5px 边框

1.把元素的伪类高度设为 1px,背景渐变,一半有颜色,一半透明。

2.transform:scale()来达到压缩一半的目的。

7.如何解决加载 css 出现不断闪烁空白问题
8.说说你知道的选择器

​ 类选择器、id 选择器、后代选择器、兄弟选择器、子代选择器、伪类选择器、属性选择器

9.css3 新特性

​ 过渡 transition、动画 animation、形状转换 transform、阴影 box-shadow、flex 布局、栅格布局 grid、媒体查询@media、伪类选择器。。。

10.H5 新特性:
  • 1.新增语义化标签 header、article、footer、section、nav
  • 2.本地存储 webStorage,包括 sessionStorage、localStorage 。和 indexedDB。
  • 3、input 新增的属性:
  • 4.audio 和 video 标签。
  • 5、data-*自定义属性。。。
  • 6.canvas 画布
  • 7.拖拽 drag

语义化标签好处:便于阅读理解维护。页面结构化,便于浏览器搜索引擎解析。

11.em 和 rem:

都是长度单位。区别是 em 相对于父元素字体大小。rem 相对于 HTML 根元素大小。

12.常用清除浮动方法:

因为子元素浮动脱离文档流所以父元素高度塌陷。

1.父元素 overflow:hidden。2.父元素 ::aftercontent:‘’;display:block;clear:both 3.浮动元素同级最后加一个空盒子,设置 clear:both。

13.说一说 BFC :

格式化上下文,一个隔离的独立容器。容器内元素布局不影响外界。

开启条件:

1.浮动。
2.position不为static、relative
3.oveflow不为visible
4.display为inline-blick.table-cell.flex.table-caption.inline-flex

BFC 的区域不会与 float box 重叠。计算 BFC 的高度时,浮动元素也参与计算。

14.css 可继承样式:

font、color、line-height、cursor、text-align、visibility、text-indent、letter-spacing、list-style

15.link 与@import 区别:
  1. link 是 HTML 标签,不仅可以加载 css,还可以定义 rss、rel 等。@import 是 css 语法规则,只有样式导入作用。
  2. link 标签引入时同 css 同步加载。@import 将在页面加载完毕后加载。
  3. link 无兼容,@import 是 css2 出的,ie5+支持。
  4. js 可以操作 link。js 操作不了@import。
16.行内元素的 padding、margin:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3IquHQTj-1657174227824)(C:\\Users\\夜\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210827105703891.png)]

17.flex 布局:

容器属性:

flex-direction:row|column|row-reverse|column-reverse;

flex-wrap:nowrap|wrap|wrap-reverse;

flex-flow: row nowrap ... flex-direction与flex-wrap简写;

justify-content:flex-start|flex-end|center|space-between|sapce-around|space-evenly;

align-items:stretch|flex-start|flex-end|center|baseline;

align-content:stretch|flex-start|center|flex-end|space-around|space-between|space-evenly;

元素属性:

order: 0|1|2....;  越大排越靠前
flex-grow:0|1|...; 占据剩余空间
flex-shrink:1|0    空间不足是否缩小,默认缩小
flex-basis:auto| 项目宽度
flex: 0 1 auto | 上面3个简写
align-self:auto|flex-start|flex-end|center|baseline|stretch
align-self:auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;子项单独在侧轴(纵轴)方向上的对齐方式。
18.媒体查询@media:
设备类别尺寸区间平常设置的大小
手机<768px100%
平板>=768px - - - < 992px750px
桌面显示屏(中等屏幕)>=992px - - - < 1200px970px
大桌面显示器(大屏幕)> = 1200px1170px
<link rel="stylesheet" media="(min-width:800px) href="example.css">
// @media 媒体类型 and (媒体属性)  。。。属性 
<style>
 @media screen and (min-width:500px)
     bodycolor:red;

@media screen and (min-width:1200px)


</style>
19.css 画三角形:
div
    width:0;
    height:0;
    border: 10px solid transparent;
    border-bottom:10px solid red;

div
    width:0;
    height:0;
    border-bottom:10px solid red;
    border-left:10px solid transparent;
    border-right:10px solid transparent;

-----------------------------------------------
clip-path 属性使用裁剪方式创建元素的可显示区域。
--------------------------------------------
canvas画布画
20.css 选择器权重:
       第一等级:代表 内联样式,如 style="",权值为 1,0,0,0;

    第二等级:代表 ID选择器,如 #id="", 权值为 0,1,0,0;

    第三等级:代表 calss | 伪类 | 属性 选择器,如 .class | :hover,:link,:target | [type], 权值 0,0,1,0;

    第四等级:代表 标签 | 伪元素 选择器,如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1;

    此外,通用选择器(*),子选择器(>), 相邻同胞选择器(+)等选择器不在4等级之内,所以它们的权值都为 0,0,0,0;
权值计算 公式:

    权值 = 第一等级选择器*个数,第二等级选择器*个数,第三等级选择器*个数,第四等级选择器*个数;
    
比较规则就是三点

    1.先从高等级进行比较,高等级相同时,再比较低等级的,以此类推;

    2.完全相同的话,就采用 后者优先原则(也就是样式覆盖);

    3.css属性后面加 !important 时,无条件绝对优先(比内联样式还要优先);
21.外边距合并:

在 CSS 当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。分为兄弟合并和父子合并。

解决方法:
父子级: 1.给父元素添加边框属性 2.给父元素/子元素添加浮动属性 3.给父元素/子元素添加 position:absolute 属性 4.给父级元素设置 overflow:hidden 属性 5.给父子级添加 display:inline-block 属性 6.将本应该设置给子元素的外边距设置给父元素的内边距
兄弟级:
解决:将本应该设置给两个元素的外边距设置给一个元素
合并规则: 1.两个数值均为正数时,取较大一个 2.两个数值均为负数时,取较小的一个 3.当两个数值一正一负时,直接相加

22. rgba()与 opacity 透明效果区别:

opacity 是作用在元素上的,元素内所有内容都透明。它及其所有子元素都透明了。

rgba()是作用与颜色,只是颜色上透明。设置 rgba()的子元素不会继承透明。

23. Doctype 的作用 :

< !DOCTYPE > 用于告知浏览器以何种模式来渲染文档。h5 为< !DOCTYPE html >。( HTML5 没有严格和混杂之分)

严格模式:页面排版及 JS 解析采用改浏览器支持的最高标准。

混杂模式:不严格按照标准执行,为了兼容旧浏览器。

24. CSS 属性触发 GPU 硬件加速:

transform、opacity、filter 、Will-change 这些属性可以触发。

​ 浏览器接收到页面文档后,会将文档中的标记语言解析为 DOM 树。DOM 树和 CSS 结合后形成浏览器构建页面的渲染树。渲染树中包含了大量的渲染元素,每一个渲染元素会被分到一个图层中,每个图层又会被加载到 GPU 形成渲染纹理,而图层在 GPU 中transform 是不会触发 repaint(重绘) 的,最终这些使用 transform 的图层都会由独立的合成器进程进行处理。CSS transform 会创建了一个新的复合图层,可以被 GPU 直接用来执行 transform 操作。

​ ransform 属性不会触发浏览器的 repaint(重绘),而绝对定位 absolute 中的 left 和 top 则会一直触发 repaint(重绘)。使用 css3 硬件加速,可以让 transform、opacity、filters 这些动画不会引起回流重绘 。但是对于动画的其它属性,比如 background-color 这些,还是会引起回流重绘的,不过它还是可以提升这些动画的性能。

​ 如果你为太多元素使用 css3 硬件加速,会导致内存占用较大,会有性能问题。在 GPU 渲染字体会导致抗锯齿无效。这是因为 GPU 和 CPU 的算法不同。因此如果你不在动画结束的时候关闭硬件加速,会产生字体模糊。

25.audio 与 video 的常用属性与方法:

video:

<video src="..." controls autoplay poster="..." loop muted></video>

constrols 是控制条 , loop 是循环播放 , autoplay 是自动播放 , poster=‘’ 封面 放封面地址 , muted 静音 ,width,height。

​ 方法 .play() 播放 , .pause() 暂停, .paused 切换是否是暂停状态, .volume 控制音量 , .currentTime 当前播放秒数 ,.playbackRate 倍速播放

audio:

<audio src="..." controls autoplay loop muted></audio>

​ 属性跟方法跟 video 差不多一样的。

26.canvas 的常用属性与方法:

1.获取画布:

var canvas=document.querySelector('canvas');
var ctx=canvas.getContext('2d');
-----
ctx.clearRect(0,0,canvas.width,canvas.heigth);

2.绘制矩形:

ctx.fillstyle = 'red';
ctx.fillRect(0,0,100,100);
-----------
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
ctx.strokeRect(0,0,100,100);

3.绘制圆:

ctx.arc(50, 50, 10, 0, Math.PI, false);
//  x y r 开始弧度 结束弧度 圆的方向是否是逆时针路径
ctx.fill();
// ctx.stroke()绘制轮廓

4.渐变:

// ---------------------线性渐变
var g = ctx.createLinearGradient(0, 0, 400, 400);
// 声明一个渐变对象 第一个参数渐变x轴开始位置 第二个参数渐变y轴开始位置 第三个参数渐变结束x轴位置 第四个参数渐变结束y轴位置
g.addColorStop(0, "red");
g.addColorStop(0.5, "cyan");
g.addColorStop(1, "yellow");
// 将渐变色给到填充样式
ctx.fillStyle = g;
//-----------------------径向渐变
var g = ctx.createRadialGradient(200, 200, 50, 200, 200, 200);
// 声明一个渐变对象 前三个参数开始圆心x轴开始位置 y轴开始位置 半径 后三个参数结束圆心x轴开始位置 y轴开始位置 半径

5.绘制线段:

context.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineCap = "round";
ctx.lineTo(100, 100);
ctx.lineTo(200, 150);
ctx.closePath();

6.绘制文本:

ctx.font = "20px fangsong";
ctx.fillText("hello", 0, 0);
ctx.textAlign = "center";
ctx.textBaseline = "middle";
strokeText(str, x, y);
  1. 常用变形:
ctx.save();
//将当前的绘画状态进行保存并存入状态栈
ctx.translate(50, 50);
ctx.scale(x, y);
//x:代表的是水平方向上的放大倍数 y:代表的是垂直方向上的放大倍数(如果想要缩小,参数设置为0-1之间的值)
ctx.rotate(angle);
//angle:旋转角度,旋转的中心点就是坐标轴的原点,默认按照顺时针进行旋转,想要进行逆时针旋转,角度设置为负数即可
ctx.restore();
//该方法每次调用只会回滚到上一次save的状态

8.绘制图像:

var img = new img();
img.src = "...";
img.onload = function () 
  ctx.drawImage(img, 0, 0, 200, 200);
;

9.绘制视频:

var canvas = document.querySelector("canvas");
// 获取上下文
var context = canvas.getContext("2d");
var video = document.querySelector("video");
draw();
function draw() 
  context.drawImage(video, 0, 0, 200, 200);
  // 请求动画帧
  requestAnimationFrame(draw);

27. vertical-align:

经常用于设置图片或者表单【行内块级元素】和文字垂直对齐。

  • basesline:默认,元素放置在父元素的基线上
  • top:把元素的顶端与行中最高元素的顶部对齐
  • middle:把此元素放置在父元素的中部
  • bottom:把元素的顶部与行中最低的元素的顶部对齐

解决图片底部默认空白缝隙问题,给图片添加 vertical-align:middle;

28.文本溢出隐藏省略号:

单行:

 
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

多行:

 
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

28. SVG 矢量图:

​ SVG 能够绘制一些 CSS 难以做到的复杂图像和动画。而且放大不失真,为矢量图。SVG 绘图时,每个图形都是以 DOM 节点的形式插入到页面中。

29.回流 reflow 与重绘 repaint:

回流:当渲染树中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建的过程叫回流(改变大小、布局)。

重绘:当渲染树中的一部分元素需要更新属性,如改变元素的外观、风格,而不影响布局的重新渲染的过程叫重绘(改变样式)。

注意:回流一定会触发重绘,而重绘不一定会回流。

30.常用 sass 用法:
31.盒子模型:

。。。

设置盒子模型:

box-sizing:border-box ; 边框盒子

box-sizing:centent-box;内容盒子

box-sizing:inherit; 继承父元素

32.bootstrap 栅格布局:

  <div class="container">
      <div class="row">
        <div class="col-lg-3">1</div>
        <div class="col-lg-3">2</div>
        <div class="col-lg-3">3</div>
        <div class="col-lg-3">4</div>
      </div>
 </div>

如果全部子盒子加起来不够 12 列咋办,那么.container 整体就不会分为 12 列,有多少就多少。如果全部子盒子加起来超过 12 列咋办,多的会另起一行显示。可以同时为一列指定多个设备的类名。

<div class="container">
    <div class="row">
            <div class="col-lg-3 col-md-4">1</div>
            <div class="col-lg-3 col-md-4">2</div>
            <div class="col-lg-3 col-md-4">3</div>
            <div class="col-lg-3 col-md-4">4</div>
    </div>
</div>

行( row )必须放到 container 布局容器里面,我们实现列的平均划分需要给列添加类前缀。
列( column)大于 12,多余的“列(column)"所在的元素将被作为一个整体另起一行排列,每一列默认有左右 15 像素的 padding 值。
可以同时为一列指定多个设备的类名,以便划分不同份数例如 class= “col-md-4 col-sm-6”
栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。套娃。:

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="row">
        <div class="col-md-6">1.1</div>
        <div class="col-md-6">1.2</div>
      </div>
    </div>
    <div class="col-md-4">2</div>
    <div class="col-md-4">3</div>
  </div>
</div>

使用.col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用选择器为当前元素增加了左侧的边距( margin )。当然什么屏幕尺寸就用什么前缀。

<div class="container">
        <div class="row">
             <div class="col-md-4">左</div>
             <div class="col-md-4 col-md-offset-4">右</div>
        </div>
    </div>

33.href 与 src 的区别:
  1. 请求资源类型不同。href 是超文本引用的简写,src 是指向的资源下载并引用到当前文档。
  2. 作用结果不同。href 是为当前文档和引用资源建立联系。src 是替换当前元素。
  3. 浏览器的解析方式不同。herf 引用的资源,浏览器会将其识别为 CSS 文档,并行下载资源并且不会停止对当前文档的处理。当浏览器解析到 src 时,会暂停其他资源的下载和处理,直接将该资源下载,编译,执行完毕,图片和框架也是如此,类似于将所指资源应用到当前内容。
34.PC 端或移动端如何设置适配屏幕宽度:
  1. 使用百分比长度单位。vw、vh、vm、em、rem、% 。优点:一套 css 代码可适应所有屏幕宽度不同的手机。

vw:相对于视口的宽度,视口被均分为 100 单位的 vw。将当前屏幕宽度均分为 100 份,1vw 即为当前屏幕宽度的 1%;**优点:**vw 单位长度准确分明,常用此单位,推荐使用此单位

**vh:**相对于视口的高度,视口被均分为 100 单位的 vh;即将当前屏幕高度均分为 100 份,1vh 即为当前屏幕高度的 1%;基本不用此单位

**vm:**相对于视口的宽度或高度,取决于哪个更小,视口宽度或高度中更小的那个被均分为 100 单位的 vm;

**em:**相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于上一个父元素的默认字体尺寸。

**rem:**相对长度单位,相对于根元素(即 html 元素)内文本的字体尺寸。rem 继承且只继承 html 标签的字体大小。同样的,此单位若要用于屏幕自适应,需与 vw 配合使用设置根元素的字体大小。必须在 css 中进行字体设置:htmlfont-size:4vw;,方可实现屏幕自适应。常用此单位,推荐使用此单位。

  1. 使用固定长度单位 px ,再使用 js 根据当前屏幕宽度与固定宽度计算比例,进行网页缩放,来实现移动端屏幕自适应
35.ifram 标签使用规则:

https://zhuanlan.zhihu.com/p/88809313


二 . JS 地基要牢

1.说说 js 中的数据类型

​ 1.值类型:number、string、boolearn、undefined、null、Symbol

​ 2.引用类型:Object、Array、Function

2.说说 var let const 的区别
  1. 作用域不同,var是函数作用域,let是块级作用域。
     2. var有变量声明提升,let没有,同时let存在暂时性死区。暂时性死区就是如果在let声明语句之前使用变量,会报Uncaught ReferenceError错误。
     3. var可以重复声明相同变量名,let和const不可以重复声明。
     4.const声明常量。块级作用域。没有变量提升。必须赋初始值。
     5.let和const不能和var使用一样变量名。
3.说说你还知道哪些 ES6 特性

​ 1.const 声明常量。也是块级作用域,也不能变量提升,同时不能修改,但是引用类型的值可以修改。

  1. 变量解构赋值。数组解构,如 [a,b] = [1,2],相当于 a=1,b=2;对象的解构赋值,name,age = name:‘jack’,age = 18 相当于 name=Jack,age = 18;注意的是变量名与对象里属性名会一一对应,不管顺序如何。

  2. 模板字符串,可换行与拼接变量:

    ` result:$sum `
    
    1. 箭头函数。如 let a = (a,b) => a + b ;注意的是 this 指向的是声明时所处作用域下的 this。
    2. 扩展运算符。arr=[1,2,3] 则 […arr]相当于[1,2,3] ,可用来快速拼接数组。
    3. Symbol,表示独一无二的值。let a = Symbol(‘hello’) 。
    4. promise,解决异步编程新方案。
    5. set 方法,类似数组,但成员都是唯一,可以拿来数组去重。如 arr=[1,2,3,3] arr2=[…new Set(arr)]。
    6. class 类。constructor 定义构造函数初始化。static 定义静态方法与属性。
    7. 。。。。略。
4.说说原型以及原型链
  1. prototype,通常称为原型,它是函数的一个属性,类型为对象。
  2. __proto__,通常称为原型链,它是对象的一个属性,类型也是对象。
  3. 概念就是对象的__proto__保存着该对象构造函数的 prototype。
  4. 原型链继承机制。如果在这个对象里找不到该属性,那么他会通过**proto**为连接点向上寻找,找到它构造函数的 prototype 看看有没有,没有的话通过 prototype 里的__proto__为连接点继续往上找,一直找到 Object.prototype 为止。
  5. 原型链继承机制中,只会返回先找到的值。
  6. 底层规定Function.__proto__ === Function.prototype
  7. 扩展,hasOwnProperty()方法可以查看属性是否在对象上,且不是原型链上的对象。也可用 in判断,in 的话原型链上的也算。
  8. constructor 属性返回对创建此对象的数组函数的引用。
5.说说你是如何理解闭包的

​ 1.闭包简单来说就是一个函数定义时和它周围状态引用捆绑起来的一个组合。

优点:1.能够读取函数内部的变量 2.让这些变量一直存在于内存中,不会在调用结束后,被垃圾回收机制回收。

2. 同时,闭包和函数的定义有关,而不是和函数调用时有关。跟他相反的是this和函数调用时有关,箭头函数除外。
   3. 解决闭包内存泄露:退出函数前将局部变量赋值为 null 。
   如:return function()console.log(i++) i=null; 

for(var i=0 ; i< 5 ;i++)
   (function (j)
     console.log(j);
   )(i);

6.说说数组、字符串、对象 中你用到的哪些方法

Array:

    1. push(),数组末尾添加**一个或多个**元素,返回长度,改变原数组。
    2. pop(),数组末尾删除**一个**元素并返回,改变原数组。
    3. unshift(),数组开头添加**一个或多个**元素,返回长度,改变原数组。
    4. shift(),数组开头删除**一个**元素并返回,改变原数组。
    5. concat(),合并多个数组,返回新数组,不改变原数组。
    6. join(),将数组变为字符串,返回一个字符串,不改变原数组。
    7. slice(),提取数组部分元素,返回新数组,不改变原数组。
    8. splice(),删除或替换或添加数组元素,改变原数组。
    9. sort(),数组排序,改变原数组。
 10. reverse(),数组前后颠倒,改变原数组。
 11. forEach()、filter()、返回新数组,不改变原数组。
 12. every()、some()、map()、indexOf()略。
 13.IndexOf()、lastIndexOf()
 14.Array.from('0':'0','1':'1',length:2) 将类数组对象转为数组。

String:

1.toLowerCase();把字符串转为小写,返回新的字符串。
2.toUpperCase();把字符串转为大写,返回新的字符串。
3.charAt();返回指定下标位置的字符。如果index不在0以上是关于五万字142道超全前端面试题---送给在校招的你的主要内容,如果未能解决你的问题,请参考以下文章

呕心沥血,五万字超全前端面试题---送给在校招的你

Flink保姆级教程,超全五万字,学习与面试收藏这一篇就够了

上岸了,私藏总结的 20 万字超全硬核面试题送给学弟妹们,奥利给!

五万字,57道hadoop大厂高频面试题,每一字都细心打磨,强烈建议收藏!

Java并发编程面试题(五万字总结)——快来打怪升级吧

Java并发编程面试题(五万字总结)——快来打怪升级吧