初级前端面试题最新汇总

面试题

一、宏观

1. 自我介绍

2. 你能说一下你是如何自学前端的

• 好的。首先前端开发的东西是要跑在浏览器里面的，浏览器只能识别html，css，js的。所以我觉得这三块是我们入行最基础的东西，学好这些之后。然后呢，我在使用JavaScript这些老代码的时候，会有很多问题。我就又去学习了es6。就可以做出一个没有前后端交互，但是有前端效果的静态页面。比如说手写一些轮播图啊什么的。然后又去了解前后端分离，我就又去学习网络，比说说http协议什么的。就可以去做一些前后端分离的项目了。但是在做项目的时候又遇到了一些问题，比如说要经常保存代码，去浏览器刷新；还有很多人配合的时候，css的class类名会冲突，然后js没有模块嘛，就文件加载会有一些问题。为了解决这些问题我就又去学习了一些打包工具，比如说webpack，这个相对于业内来说比较火嘛。但是我对它的了解可能只在使用上，我可以给他配一些，因为我知道webpack只可以处理JavaScript文件嘛，处理其他的文件的话，都要去配一些对应loader嘛。然后接触webpack之后，就可以从一些js的demo变成个比较复杂的项目，可以多人配合，比如说css的命名会拼接一些哈希值来保证它全局的唯一。在工程化这一块完成之后！我们都知道前端可以做一些其他端的事情，比如说把网站塞到一个app里面，比如说用前端来构建小程序这些跨端的能力。我认为这些可能就是一个初级前端重要的比较核心的能力。有了这些能力之后呢，就去探索一些效率的提升，因为之前一个功能可要去封装函数，这样代码就比较臃肿。我就又去了解了比较火的前端框架vue，它会把我们一些底层的事情给做掉，比如说一些实际操作的dom，因为在vue里面他是不建议去使用真实dom去操作的，是基于数据去驱动视图的，我们开发者只需要去关注视图这一层，剩下的事情都去交给框架来做。

3. 上大学的时候有学习过别的语言嘛，你觉得JavaScript和其他语言的区别

• JavaScript是解释型语言，java是编译型语言

  • 解释性语言：执行时由解释器逐条翻译并执行
  • 编译性语言：执行前先有编译器全部翻译，在执行
  • 编译型语言执行速度快，解释性语言最主要的是安全性

  JavaScript是基于对象，java是面向对象

  JavaScript可在任何浏览器上运行，java需要借助虚拟机实现跨平台

  js的安全性更好，不会读取本地数据

  但是他们都是高级语言，都必须被翻译为机器语言才能执行

4. 假如公司要开发一个新的项目，那项目应该具备什么基础功能

• 首先我们确立技术选型：

  ​ 首先要确认我们团队人员的技术栈，然后对应技术栈的社区活跃程度，是否有人维护。

  ​ 确立技术方案之后呢，要详细考虑一些功能的实现，比如说vue中使用vue-router来处理路由，使用vuex来管理全局的数据。在项目搭建好之后呢，我们可以先把一些基础的功能搞定，比如要和后端一起确认登录的技术选型，然后可以对我们的请求库进行封装，比如说在全局处理掉 数据的结构啊，全局接口的报错啊，报错的错误提示等。然后再继续考虑，拿后台管理来说，会用到权限管理，比如果不同的管理员登录之后见到的菜单按钮是不同的。把这些确立好模板这些。然后再按照模板进行开发。我大概的理解就是这样。

5. 你的优点/竞争力

• 暂时还没有实习经验。但是很多技能我愿意去尝试，喜欢去接触新的东西，学习新的技能，就是哪里不会学哪里。平时喜欢在一些网站上看学习视频，比如慕课网，腾讯课堂等去学习自己需要掌握的技能。个人一般有比较好的学习习惯和较好的接受新知识的能力，相信能较快适应所在岗位，如果能够入职的话。

6. 你可以接收加班嘛

• 我作为这个行业的新人，我认为我自己有很多的不足去弥补和学习，并且我自己也会在工作之余去学习其他的技术，丰富自己的技术栈，我个人觉得加班对于我来说也算是一个比较好的事情，能让我提升自己。

二、CSS

1. 把div居中的几个方法

• 其实实现水平垂直剧中方法有很多：

  第一种：定位：

  第一种思路：通过给div设置绝对定位，并且left,right,top,bottom设置为0,margin:auto即可以水平垂直居中

  第二种思路：通过给div设置绝对定位，left为50%,top为50%,再给div设置距左是自身的一半即：margin-left:自身宽度/2,margin-top:自身高度/2。

  第三种思路：通过给div设置绝对定位，left为50%,top为50%，再给div设置跨左和跟上是自身的一半：transform:translate3d(-50%,-50%,0)

  第四种：flex布局:

  ​ 思路：有两个div，父级div和子级div，给父级div设置display:flex,并且设置父级div的水平居中justify-content:center，并且给父级div设置垂直居中align-items:center即可

2. css优先级怎么计算的

• • 第一优先级：!important会覆盖页面内任何位置的元素样式
  • 1.内联样式，如style=“float: right”，权值为：1000
  • 2.ID 选择器，如：#app，权值为：0100
  • 3.类、伪类、属性选择器，权值为：0010
  • 4.标签、伪元素选择器，权值为：0001
  • 5.通配符、子类选择器、兄弟选择器。权值为：0000
  • 6.继承的样式，没有权值

3. px、rem、em、%、vw、vh、vm的区别

• 1、px是什么

  px就是像素，也是我们现在经常使用的基本单位。px就是一张图片最小的一个点，一张位图就是千千万万这样的点构成的，比如常常听到的电脑像素是1024×768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。使用px时，页面按精准像素展示。

  2、什么是em？

  相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值

  3、什么是rem

  相对单位，可理解为“root em”，相对根节点html（网页）的字体大小来计算，css3新加属性，chrome/firefox/IE9+支持。不会像em那样，依赖于父元素的字体大小，而造成混乱。rem参考物是相对于根元素，我们在使用时可以在根元素设置一个参考值即可。相对于em使用，减少很大运算工作量，例如：html大小为10px，12rem就是120px

  4、什么是%

  一般宽泛的讲是相对于父元素，但是并不是十分准确

  1. 对于普通定位元素就是我们理解的父元素
  2. 对于position：absolute；的元素是相对于已定义的父元素
  3. 对于position：fixed的元素是相对于ViewPort（可视窗口）

  5、什么是vw

  v是viewport，可视窗口的意思。w是width，宽度的意思。视窗宽度

  举个例子：浏览器宽度1200px，1vw = 1200px/100 = 12px

  6、什么是vh

  v是viewport，可视窗口的意思。h是height，宽度的意思。视窗高度

  举个例子：浏览器高度900px，1vh = 900px/100 = 9px

  7、什么是vm

  css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm

  举个例子：浏览器高度为900px，宽度1200px，取最小的浏览器高度，1vm = 900px/100 = 9px。但是现在vm的兼容性很差。

4. css3有哪些新特性

• 一、属性选择器

  /* 存在title属性的<a> */
  a[title]{
        
  color: blue;
  }
  
  /* 存在href属性并且属性值匹配 "https://example.org"的<a> 元素 */
  a[href="https://example.org"]{
        
  color: green;
  }
  
  /* 存在href属性并且属性值包含"example"的<a> 元素 */
  a[href*="example"]{
        
  font-size: 2em;
  }
  
  /* 存在href属性并且属性值结尾是".org"的<a> 元素 */
  a[href$=".org"]{
        
  font-style:italic;
  }
  
  /* 存在class属性并且属性值包含以空格分隔的"logo"的<a>元素 */
  a[class~="logo"] {
        
  padding: 2px;
  }
  

  二、border-radius

  三、颜色

  在css 2.1中可以使用：

  • 英文单词
  • 十六进制
  • rgb()函数

  来指定颜色

  在 css 3 中，新增了几个指定颜色的方法：

  • rgba()函数
  • hsl()和hsla()函数
  • opacity属性，用于设置透明度

  在上面的所有特性中，a均指alpha，且alpha指代的就是opacity。

  3.1 rgba

  其实就是 rgb() 函数加了第四参数alpha。实例：

  rgba(255,255,255,.5)/*white with 50% opacity(50%透明度的白色)*/
  rgba(255 255 255 / 0.5);/* css Color 4 space-separated values 同上 */
  

  3.2 hsl

  由于hsla()中的a与rgba()中的a没有差别，所以本部分只写hsl()。

  MDN的官方说明如下：

  The hsl() functional notation expresses a given color according to its hue, saturation, and lightness components. An optional alpha component represents the color’s transparency.

  翻译如下（我自己翻的）：

  hsl() 函数是用色调（hue）、饱和度（saturation）和亮度（liteness）来表示颜色。额外的alpha参数代表颜色的透明度。

  示例如下：

  /* 示例来自：https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl() */
  hsl(100, 100%, 50%) /* #5f0 */
  hsl(235, 100%, 50%, .5) /* #0015ff with 50% opacity */
  hsl(235 100% 50%); /* CSS Colors 4 space-separated values */
  

  hsl()可加第四参数。加上第四参数后，与hsla()功能相同。

  四、text-shadow

  五、渐变

  六、多背景图片

  七、3D-transform

5. 常用的css优化手段有哪些

• 加载性能：

  （1）css 压缩：将写好的 css 进行打包压缩，可以减小文件体积。

  （2）css 单一样式：当需要下边距和左边距的时候，很多时候会选择使用 margin:top 0 bottom 0；但 margin-bottom:bottom;margin-left:left;执行效率会更高。

  （3）减少使用@import，建议使用 link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。

  选择器性能：

  （1）关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS 选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；

  （2）如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。

  （3）避免使用通配规则，如*{}计算次数惊人，只对需要用到的元素进行选择。

  （4）尽量少的去对标签进行选择，而是用 class。

  （5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。

  （6）了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。

  渲染性能：

  （1）慎重使用高性能属性：浮动、定位。

  （2）尽量减少页面重排、重绘。

  （3）去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少 css 文档体积。

  （4）属性值为 0 时，不加单位。

  （5）属性值为浮动小数 0.**，可以省略小数点之前的 0。

  （6）标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。

  （7）不使用@import 前缀，它会影响 css 的加载速度。

  （8）选择器优化嵌套，尽量避免层级过深。

  （9）css 雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。

  （10）正确使用 display 的属性，由于 display 的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。

  （11）不滥用 web 字体。对于中文网站来说 WebFonts 可能很陌生，国外却很流行。web fonts 通常体积庞大，而且一些浏览器在下载 web fonts 时会阻塞页面渲染损伤性能。

  可维护性、健壮性：

  （1）将具有相同属性的样式抽离出来，整合并通过 class 在页面中进行使用，提高 css 的可维护性。

  （2）样式与内容分离：将 css 代码定义到外部 css 中。

三、JavaScript

1. JavaScript中的数据类型

• 六大数据类型

  Number —— 数据类型

  String —— 字符串类型

  Boolean —— 布尔类型 true / false

  Null —— null它是一个空对象

  undefined —— 未定义类型

  Object —— 对象

  分类

  **基本数据类型：**存在栈内存中，赋值时进行的是值传递（number，string，boolean，null，undefined，symbol）

  **引用数据类型：**存在堆内存中，赋值时传递的是地址传递 object → （object，array Date，RegExp）

  栈内存是自动分配内存的。而堆内存是动态分配内存的，不会自动释放。所以每次使用完对象的时候都要把它设置为null，从而减少无用的内存消耗

  附

  Symbol(ES6新增数据类型)

    Symbol值是通过Symbol函数生成。这就是说，对象的属性名可以有两种类型：一种是字符串，另一种是Symbol类型。凡是属性名属于Symbol类型，就都是独一无二的，可以保证不会与其他属性名产生冲突
  

  let firstName = Symbol()
  let person = {
        }
  person[firstName] = "huochai"
  console.log(person[firstName]) // "huochai"
  

  bigint

  js中的Number只能安全的表示-9007199254740991 (-(2^{53-1))和9007199254740991(2}53-1)之间的整数，任何超出此范围的整数值都可能失去精度。BigInt类型的出现正是为了解决此类问题，要创建Bigint，只需在整数的末尾追加n即可

  console<