大前端面试

置顶「已注销」

已于 2023-07-28 13:35:13 修改

阅读量271

点赞数

分类专栏：面试文章标签： html5 javascript css 前端框架 react.js

于 2023-04-28 15:01:58 首次发布

晴天

本文链接：https://blog.csdn.net/jyaqingtianlove/article/details/130425427

版权

面试专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML/CSS

说一下常见的HTML标签有哪些，每个标签的作用是什么？

常见的HTML标签包括：

HTML5新增的标签？

解释一下浮动(float)的原理，如何清除浮动？

CSS样式的权重是如何计算的？谈谈!important的作用？

什么是原型链？如何理解JavaScript中的继承？

使用ES6的新特性，比如箭头函数、模板字符串、解构赋值等等。

Promise的原理和用法，以及async/await的使用方法。

框架和库

说说你熟悉的框架和相应的优缺点，例如React和Vue。

叙述一下Vue组件的通信方式，包括props、Event bus和vuex。

介绍React中的Virtual DOM的原理和常见的性能优化手段。

有没有使用过jQuery？介绍一下jQuery的链式调用与插件开发。

网络和安全

介绍http和https的区别，以及get和post请求的区别？

什么是CORS(Cross-Origin Resource Sharing)？如何解决跨域问题？

怎么通过前端防范XSS攻击和CSRF攻击?

HTML/CSS

说一下常见的HTML标签有哪些，每个标签的作用是什么？

常见的HTML标签包括：

<html>：定义HTML文档的根元素。

<head>：定义文档头部，包含文档的元数据。

<title>：定义文档的标题。

<body>：定义文档的主体部分。

<h1>~<h6>：定义标题，数字表示标题的级别，从大到小依次减小。

<p>：定义段落。

<a>：定义超链接。

<img>：定义图像。

<ul>：定义无序列表。

<ol>：定义有序列表。

<li>：定义列表项。

<table>：定义表格。

<tr>：定义表格行。

<td>：定义表格单元格。

<form>：定义表单。

<input>：定义表单中的输入控件。

<select>：定义下拉列表。

<option>：定义下拉列表中的选项。

<textarea>：定义多行文本输入框。

<button>：定义按钮。

HTML5新增的标签？

<header>：定义文档或节的页眉。

<nav>：定义导航链接的部分。

<section>：定义文档中的节或区域。

<article>：定义独立的自包含文章。

<aside>：定义文章的侧边栏内容。

<footer>：定义文档或节的页脚。

<figure>：定义任何独立的内容，如图像、图表、照片等。

<figcaption>：定义与<figure>元素相关的标题或说明。

<video>：定义视频。

<audio>：定义音频。

<canvas>：定义绘制图形和动画的区域。

<datalist>：定义输入字段的选项列表。

<details>：定义用户可以打开和关闭的详情列表。

<summary>：定义<details>元素的标题或摘要。

<progress>：定义任务进度条。

<meter>：定义度量衡值的范围和比例。

<output>：定义表单的计算结果。

解释一下浮动(float)的原理，如何清除浮动？

什么是浮动（float）

浮动是指将元素从文档的正常流中移出，使其可以左右移动。浮动元素会像浮在水中的物体一样，如果它后面的元素没有清除浮动，那么后面的元素就会跟着浮动元素一起移动。浮动元素在布局中非常有用，可以实现多列布局、图文混排等效果。

如何让元素浮动起来

要让元素浮动起来，可以使用CSS中的float属性。float属性可以让元素向左或向右浮动，让其他元素环绕在其周围。

例如，以下代码可以让一个div元素向左浮动：

<div style="float: left;">这是一个浮动的div元素</div>

需要注意的是，浮动元素会影响其后面的元素布局，因此需要在HTML中合理安排元素的顺序和位置，以避免布局混乱。同时，也需要对浮动元素进行清除浮动，否则可能会影响后面的布局。

清除浮动的方法有以下几种：

使用clear属性：在浮动元素的下方添加一个元素，并设置clear属性，这个元素会将前面的浮动元素的影响清除。
使用overflow属性：在浮动元素的父元素上添加overflow属性，设置为hidden、auto或scroll，可以清除浮动。
使用:after伪元素：在浮动元素的父元素上使用:after伪元素，设置content为""，display为block，clear为both，可以清除浮动。
使用clearfix类：为浮动元素的父元素添加clearfix类，该类的样式设置为clear:both，可以清除浮动。

注意事项

清除浮动的方法应该尽量少用，因为它会增加额外的DOM元素，影响性能。建议在设计布局时尽量避免使用浮动，使用flexbox、grid等布局方式。

CSS样式的权重是如何计算的？谈谈!important的作用？

CSS等级计算

!important声明的样式优先级最高，不受其他规则影响。
行内样式（在HTML元素的style属性中定义）优先级最高，优先级为1000。
ID选择器的优先级为100。
类选择器、伪类选择器和属性选择器的优先级相同，为10。
标签选择器和伪元素选择器的优先级相同，为1。
通配符选择器、子选择器、后代选择器和相邻兄弟选择器的优先级较低，为0。

如果多个选择器的优先级相同，则后面的样式会覆盖前面的样式。、

!important

!important声明可以用于任何类型的选择器，它可以直接覆盖其他样式的优先级，即使其他样式的优先级更高。但是，使用!important声明可能会导致样式的不可预测性和难以维护性，因此应该尽量避免使用。

介绍盒模型以及box-sizing的应用

盒模型

盒模型是指网页中元素的大小由四个部分组成：内容区域、内边距、边框和外边距。其中，内容区域是元素放置内容的区域，内边距是内容区域和边框之间的空白区域，边框是内容区域和外边距之间的边框线，外边距是边框和相邻元素之间的空白区域。

box-sizing的应用

box-sizing是CSS中的一个属性，用于设置元素的盒模型大小计算方式。默认值为content-box，表示盒模型的大小只包括内容区域的大小，不包括内边距、边框和外边距的大小。而box-sizing的另一个值为border-box，表示盒模型的大小包括内容区域、内边距和边框的大小，但不包括外边距的大小。

应用box-sizing属性可以方便地进行网页的布局设计，例如设置元素的宽度为100%，并且同时设置box-sizing为border-box，使得元素的宽度包括内边距和边框的大小，不会因为内边距和边框的大小而导致元素宽度超出父元素的大小。同时，应用box-sizing属性还可以方便地进行响应式设计，例如在小屏幕设备下，可以通过设置box-sizing为border-box，使得元素的大小包括内边距和边框的大小，从而使得元素在小屏幕设备下的大小更加合适。

box-sizing的使用案例

1、响应式布局

在响应式布局中，我们通常使用百分比宽度来定义容器的大小，以便在不同屏幕尺寸下实现自适应布局。但是，当我们设置元素的宽度时，元素的padding和border会导致元素的实际宽度超出设置的百分比宽度，从而破坏了布局的自适应性。这时，我们可以使用box-sizing来解决这个问题。将box-sizing设为border-box，元素的padding和border会被包含在设置的百分比宽度内，从而保持元素的实际宽度不超出设置的宽度。

例如，以下代码中，我们使用box-sizing：border-box来实现一个响应式布局的三栏网格：

<style>
.container {
  width: 100%;
  display: flex;
}

.col {
  width: 33.33%;
  padding: 20px;
  box-sizing: border-box;
}
</style>

<div class="container">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
  <div class="col">Column 3</div>
</div>

2、制作网格布局

在制作网格布局时，我们通常使用浮动或者flex布局来实现。但是，在使用浮动时，元素的padding和border会导致元素的实际宽度超出设置的宽度，从而破坏了布局的准确性。这时，我们可以使用box-sizing来解决这个问题。将box-sizing设为border-box，元素的padding和border会被包含在设置的宽度内，从而保持元素的实际宽度不超出设置的宽度。

例如，以下代码中，我们使用box-sizing：border-box来实现一个简单的网格布局：

<style>
.grid {
  display: flex;
  flex-wrap: wrap;
}

.grid-item {
  width: calc(33.33% - 20px);
  margin: 10px;
  padding: 20px;
  box-sizing: border-box;
}
</style>

<div class="grid">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
  <div class="grid-item">Item 6</div>
</div>

3、制作响应式图片

在制作响应式图片时，我们通常使用max-width来限制图片的最大宽度，以便在不同屏幕尺寸下实现自适应布局。但是，当我们设置图片的宽度时，图片的padding和border会导致图片的实际宽度超出设置的最大宽度，从而破坏了布局的自适应性。这时，我们可以使用box-sizing来解决这个问题。将box-sizing设为border-box，图片的padding和border会被包含在设置的最大宽度内，从而保持图片的实际宽度不超出设置的最大宽度。

例如，以下代码中，我们使用box-sizing：border-box来实现一个响应式图片：

<style>
img {
  max-width: 100%;
  padding: 20px;
  box-sizing: border-box;
}
</style>

<img src="example.jpg" alt="Example Image">

JavaScript

什么是闭包？它有什么特点和缺点？

闭包的含义：

闭包是一种函数编程技术，它可以在函数内部创建一个新的作用域，使得函数内部的变量和函数在函数执行完毕后仍然可以被访问和调用。

闭包的特点包括：

可以访问函数定义时的作用域和变量，即使函数在定义之后被调用。
可以在函数内部定义函数，形成多层嵌套的函数。
可以将函数作为参数传递给其他函数，或者将函数作为返回值返回。

闭包的缺点包括：

占用内存资源：闭包中的变量和函数会一直存在于内存中，直到闭包被销毁。
可能导致内存泄漏：如果闭包中的变量或函数被错误地引用或持有，可能会导致内存泄漏。
可能导致代码可读性和可维护性降低：多层嵌套的函数和变量作用域可能使代码难以理解和调试。

前端闭包的使用案例

计数器

function createCounter() {
  let count = 0;
  function counter() {
    count++;
    console.log(count);
  }
  return counter;
}

const counter = createCounter();
counter(); // 输出 1
counter(); // 输出 2
counter(); // 输出 3

私有变量

function createPerson(name) {
  let age = 0;
  function showAge() {
    console.log(`${name} 的年龄是 ${age}`);
  }
  return {
    setAge(newAge) {
      age = newAge;
    },
    showAge,
  };
}

const person = createPerson('Tom');
person.setAge(18);
person.showAge(); // 输出 "Tom 的年龄是 18"

缓存函数

function createCache(fn) {
  const cache = new Map();
  return function (arg) {
    if (cache.has(arg)) {
      return cache.get(arg);
    }
    const result = fn(arg);
    cache.set(arg, result);
    return result;
  };
}

function fibonacci(n) {
  if (n <= 1) {
    return n;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
}

const fibonacciCache = createCache(fibonacci);
console.log(fibonacciCache(10)); // 输出 55
console.log(fibonacciCache(10)); // 输出 55，从缓存中获取

什么是原型链？如何理解JavaScript中的继承？

原型链是JavaScript中用于实现继承的机制。每个对象都有一个指向它的原型对象的内部链接，也就是原型。当我们在一个对象上访问一个属性或方法时，如果这个对象本身没有这个属性或方法，那么JavaScript就会沿着原型链向上查找，直到找到该属性或方法或者到达原型链的末端。

JavaScript中的继承是通过原型链来实现的。当我们创建一个对象时，它会自动继承其原型对象的属性和方法。如果我们希望一个对象继承另一个对象的属性和方法，可以将该对象的原型设置为另一个对象。这样，该对象就可以通过原型链访问到另一个对象的属性和方法，实现了继承。

例如，我们可以创建一个Animal对象，它有一个eat方法：

function Animal(name) {
  this.name = name;
}

Animal.prototype.eat = function() {
  console.log(this.name + ' is eating.');
}

然后我们可以创建一个Cat对象，它继承自Animal，并且有一个meow方法：

function Cat(name) {
  Animal.call(this, name);
}
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

Cat.prototype.meow = function() {
  console.log(this.name + ' is meowing.');
}