前端两年月入30K，高频面试题整理（含解析）

我就是我 2022-12-17 08:56 52阅读 0赞

# css相关 #

## 1.万能居中 ##

1.margin: 0 auto;水平  
2.text-align: center;水平  
3.行高，垂直  
4.表格，center,middle；水平垂直  
5.display:table-cell；模拟表格，all  
6.绝对定位，50%减自身宽高  
7.绝对定位，上下左右全0，margin:auto  
8.绝对定位加相对定位。不需要知道宽高  
9.IE6，IE7：给父元素设一个font-size:高度/1.14,vertical-align:middle

## 2. BFC优化 ##

块格式化上下文, 特性:

使 BFC 内部浮动元素不会到处乱跑；  
和浮动元素产生边界。

## 3. 盒模型哪两种模式？什么区别？如何设置 ##

标准模式: box-sizing: content-box; 宽高不包括内边距和边框  
怪异模式: box-sizing: border-box

## 4. 常用清除浮动的方法，如不清除浮动会怎样？ ##

当父元素不给高度的时候，内部元素不浮动时会撑开, 而浮动的时候，父元素变成一条线, 造成塌陷.

额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）  
父元素添加overflow:hidden; (触发BFC)  
使用after伪元素清除浮动（推荐使用）  
使用before和after双伪元素清除浮动

## 5. 删格化的原理 ##

比如antd的row和col, 将一行等分为24份, col是几就占几份, 底层按百分比实现; 结合媒体查询, 可以实现响应式

## 6.CSS 选择符有哪些？ ##

（1）id选择器（\#myid）  
（2）类选择器（.myclassname）  
（3）标签选择器（div,h1,p）  
（4）后代选择器（h1p）  
（5）相邻后代选择器（子）选择器（ul>li）  
（6）兄弟选择器（li~a）  
（7）相邻兄弟选择器（li+a）  
（8）属性选择器（a\[rel=“external”\]）  
（9）伪类选择器（a:hover,li:nth-child）  
（10）伪元素选择器（::before、::after）

## 7.伪类与伪元素的区别 ##

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句  
话中的第一个字母，或者是列表中的第一个元素。  
伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的  
元素时，我们可以通过:hover来描述这个元素的状态。  
伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过::be  
fore来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。  
有时你会发现伪元素使用了两个冒号（::）而不是一个冒号（:）。这是CSS3的一部分，并尝试区分伪类和伪元素。大多数浏览  
器都支持这两个值。按照规则应该使用（::）而不是（:），从而区分伪类和伪元素。但是，由于在旧版本的W3C规范并未对此进行  
特别区分，因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。

## 8.CSS 中哪些属性可以继承？ ##

每一个属性在定义中都给出了这个属性是否具有继承性，一个具有继承性的属性会在没有指定值的时候，会使用父元素的同属性的值来作为自己的值。  
一般具有继承性的属性有，字体相关的属性，font-size和font-weight等。文本相关的属性，color和text-align等。  
表格的一些布局属性、列表属性如list-style等。还有光标属性cursor、元素可见性visibility。  
当一个属性不是继承属性的时候，我们也可以通过将它的值设置为inherit来使它从父元素那获取同名的属性值来继承。

## 9.CSS 优先级算法如何计算？ ##

判断优先级时，首先我们会判断一条属性声明是否有权重，也就是是否在声明后面加上了!important。一条声明如果加上了权重，那么它的优先级就是最高的，前提是它之后不再出现相同权重的声明。如果权重相同，我们则需要去比较匹配规则的特殊性。  
一条匹配规则一般由多个选择器组成，一条规则的特殊性由组成它的选择器的特殊性累加而成。选择器的特殊性可以分为四个等级，第一个等级是行内样式，为1000，第二个等级是id选择器，为0100，第三个等级是类选择器、伪类选择器和属性选择器，为0010，第四个等级是元素选择器和伪元素选择器，为0001。规则中每出现一个选择器，就将它的特殊性进行叠加，这个叠加只限于对应的等级的叠加，不会产生进位。选择器特殊性值的比较是从左向右排序的，也就是说以1开头的特殊性值比所有以0开头的特殊性值要大。  
比如说特殊性值为1000的的规则优先级就要比特殊性值为0999的规则高。如果两个规则的特殊性值相等的时候，那么就会根据它们引入的顺序，后出现的规则的优先级最高。

## 10.display 有哪些值？说明他们的作用。 ##

block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。  
none 元素不显示，并从文档流中移除。  
inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。  
inline-block默认宽度为内容宽度，可以设置宽高，同行显示。  
list-item 像块类型元素一样显示，并添加样式列表标记。  
table 此元素会作为块级表格来显示。  
inherit 规定应该从父元素继承display属性的值。

# JavaScript相关 #

## 1. 介绍 js 的基本数据类型。 ##

js 一共有六种基本数据类型，分别是 Undefined、Null、Boolean、Number、String，还有在 ES6 中新增的 Symbol 类型，代表创建后独一无二且不可变的数据类型，它的出现我认为主要是为了解决可能出现的全局变量冲突的问题。

## 2. JavaScript 有几种类型的值？你能画一下他们的内存图吗？ ##

js 可以分为两种类型的值，一种是基本数据类型，一种是复杂数据类型。

复杂数据类型指的是 Object 类型，所有其他的如 Array、Date 等数据类型都可以理解为 Object 类型的子类。

两种类型间的主要区别是它们的存储位置不同，基本数据类型的值直接保存在栈中，而复杂数据类型的值保存在堆中，通过使用在栈中保存对应的指针来获取堆中的值。

## 3. 内部属性 \[\[Class\]\] 是什么？ ##

所有 typeof 返回值为 “object” 的对象（如数组）都包含一个内部属性 \[\[Class\]\]（我们可以把它看作一个内部的分类，而非传统的面向对象意义上的类）。这个属性无法直接访问，一般通过 Object.prototype.toString(…) 来查看。例如：

Object.prototype.toString.call( [1,2,3] );
    // "[object Array]"
    
    Object.prototype.toString.call( /regex-literal/i );
    // "[object RegExp]"

## 4.介绍 js 有哪些内置对象？ ##

js 中的内置对象主要指的是在程序执行前存在全局作用域里的由 js 定义的一些全局值属性、函数和用来实例化其他对象的构造函数对象。一般我们经常用到的如全局变量值 NaN、undefined，全局函数如 parseInt()、parseFloat() 用来实例化对象的构造函数如 Date、Object 等，还有提供数学计算的单体内置对象如 Math 对象。

## 5.undefined 与 undeclared 的区别？ ##

已在作用域中声明但还没有赋值的变量，是 undefined 的。相反，还没有在作用域中声明过的变量，是 undeclared 的。

对于 undeclared 变量的引用，浏览器会报引用错误，如 ReferenceError: b is not defined 。但是我们可以使用 typeof 的安全防范机制来避免报错，因为对于 undeclared（或者 not defined ）变量，typeof 会返回 “undefined”。

## 6.null 和 undefined 的区别？ ##

首先 Undefined 和 Null 都是基本数据类型，这两个基本数据类型分别都只有一个值，就是 undefined 和 null。

undefined 代表的含义是未定义，null 代表的含义是空对象。一般变量声明了但还没有定义的时候会返回 undefined，null主要用于赋值给一些可能会返回对象的变量，作为初始化。

undefined 在 js 中不是一个保留字，这意味着我们可以使用 undefined 来作为一个变量名，这样的做法是非常危险的，它会影响我们对 undefined 值的判断。但是我们可以通过一些方法获得安全的 undefined 值，比如说 void 0。

当我们对两种类型使用 typeof 进行判断的时候，Null 类型化会返回 “object”，这是一个历史遗留的问题。当我们使用双等号对两种类型的值进行比较时会返回 true，使用三个等号时会返回 false。

## 7. 如何获取安全的 undefined 值？ ##

因为 undefined 是一个标识符，所以可以被当作变量来使用和赋值，但是这样会影响 undefined 的正常判断。

表达式 void \_\_\_ 没有返回值，因此返回结果是 undefined。void 并不改变表达式的结果，只是让表达式不返回值。

按惯例我们用 void 0 来获得 undefined。

## 8.说几条写 JavaScript 的基本规范？ ##

在平常项目开发中，我们遵守一些这样的基本规范，比如说：

（1）一个函数作用域中所有的变量声明应该尽量提到函数首部，用一个 var 声明，不允许出现两个连续的 var 声明，声明时  
如果变量没有值，应该给该变量赋值对应类型的初始值，便于他人阅读代码时，能够一目了然的知道变量对应的类型值。

（2）代码中出现地址、时间等字符串时需要使用常量代替。

（3）在进行比较的时候吧，尽量使用’=’, '!‘代替’==’, ‘!=’。

（4）不要在内置对象的原型上添加方法，如 Array, Date。

（5）switch 语句必须带有 default 分支。

（6）for 循环必须使用大括号。

（7）if 语句必须使用大括号。

## 9.JavaScript 原型，原型链？有什么特点？ ##

在 js 中我们是使用构造函数来新建一个对象的，每一个构造函数的内部都有一个 prototype 属性值，这个属性值是一个对象，这个对象包含了可以由该构造函数的所有实例共享的属性和方法。当我们使用构造函数新建一个对象后，在这个对象的内部将包含一个指针，这个指针指向构造函数的 prototype 属性对应的值，在 ES5 中这个指针被称为对象的原型。一般来说我们是不应该能够获取到这个值的，但是现在浏览器中都实现了 **proto** 属性来让我们访问这个属性，但是我们最好不要使用这个属性，因为它不是规范中规定的。ES5 中新增了一个 Object.getPrototypeOf() 方法，我们可以通过这个方法来获取对象的原型。  
当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是 Object.prototype 所以这就是我们新建的对象为什么能够使用 toString() 等方法的原因。  
特点：  
JavaScript 对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。

## 10.js 中整数的安全范围是多少？ ##

安全整数指的是，在这个范围内的整数转化为二进制存储的时候不会出现精度丢失，能够被“安全”呈现的最大整数是 2^53 - 1，即9007199254740991，在 ES6 中被定义为 Number.MAX\_SAFE\_INTEGER。最小整数是-9007199254740991，在 ES6 中被定义为 Number.MIN\_SAFE\_INTEGER。  
如果某次计算的结果得到了一个超过 JavaScript 数值范围的值，那么这个值会被自动转换为特殊的 Infinity 值。如果某次计算返回了正或负的 Infinity 值，那么该值将无法参与下一次的计算。判断一个数是不是有穷的，可以使用 isFinite 函数来判断。

# 浏览器网络相关 #

## 1. reflow(回流)和repaint(重绘)优化 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1Z28yMzM_size_16_color_FFFFFF_t_70_pic_center][]

浏览器渲染过程: DOM tree, CSS tree --> Render tree --> Paint  
DOM tree根节点为html  
渲染从浏览器左上角到右下角  
第一次打开页面至少触发一次重绘和回流, 结构如宽高位置变化时, 触发reflow回流;非结构如背景色变化时, 触发repaint重绘. 二者都会造成体验不佳

## 2.如何减少重绘和回流? ##

通过classname或cssText一次性修改样式, 而非一个一个改  
离线模式: 克隆要操作的结点, 操作后再与原始结点交换, 类似于虚拟DOM  
避免频繁直接访问计算后的样式, 而是先将信息保存下来  
绝对布局的DOM, 不会造成大量reflow  
p不要嵌套太深, 不要超过六层

## 3.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？ ##

浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；  
服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；  
浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM Tree）；  
载入解析到的资源文件，渲染页面，完成。

## 4.localStorage 与 sessionStorage 与cookie的区别总结 ##

共同点: 都保存在浏览器端, 且同源localStorage 与 sessionStorage 统称webStorage,保存在浏览器,不参与服务器通信,大小为5M  
生命周期不同: localStorage永久保存, sessionStorage当前会话, 都可手动清除  
作用域不同: 不同浏览器不共享local和session, 不同会话不共享session  
Cookie: 设置的过期时间前一直有效, 大小4K.有个数限制, 各浏览器不同, 一般为20个.携带在HTTP头中, 过多会有性能问题.可自己封装, 也可用原生

## 5.浏览器如何阻止事件传播，阻止默认行为 ##

阻止事件传播(冒泡): e.stopPropagation()  
阻止默认行为: e.preventDefault()

## 6.虚拟DOM方案相对原生DOM操作有什么优点，实现上是什么原理？ ##

虚拟DOM可提升性能, 无须整体重新渲染, 而是局部刷新.  
JS对象, diff算法

## 7.浏览器事件机制中事件触发三个阶段 ##

事件捕获阶段: 从dom树节点往下找到目标节点, 不会触发函数  
事件目标处理函数: 到达目标节点  
事件冒泡: 最后从目标节点往顶层元素传递, 通常函数在此阶段执行.  
addEventListener第三个参数默认false(冒泡阶段执行),true(捕获阶段执行).  
阻止冒泡见以上方法.

## 8.什么是跨域？为什么浏览器要使用同源策略？你有几种方式可以解决跨域问题？了解预检请求嘛？ ##

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源  
防止XSS、CSFR等攻击, 协议+域名+端口不同  
jsonp; 跨域资源共享（CORS）(Access control); 服务器正向代理等  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1Z28yMzM_size_16_color_FFFFFF_t_70_pic_center 1][]

预检请求: 需预检的请求要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。"预检请求“的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响

## 9.了解浏览器缓存机制吗？ ##

浏览器缓存就是把一个已经请求过的资源拷贝一份存储起来，当下次需要该资源时，浏览器会根据缓存机制决定直接使用缓存资源还是再次向服务器发送请求.  
from memory cache ; from disk cache  
作用: 减少网络传输的损耗以及降低服务器压力。  
优先级: 强制缓存 > 协商缓存; cache-control > Expires > Etag > Last-modified

## 10.为什么操作 DOM 慢? ##

DOM本身是一个js对象, 操作这个对象本身不慢, 但是操作后触发了浏览器的行为, 如repaint和reflow等浏览器行为, 使其变慢

## 11.什么情况会阻塞渲染？ ##

js脚本同步执行  
css和图片虽然是异步加载, 但js文件执行需依赖css, 所以css也会阻塞渲染

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1Z28yMzM_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/d92adf78b6084a388590781281744f17.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1Z28yMzM_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221122/dc7781f5fc884d04899c48983ef01be8.png