前端面试高频题，八股文精华篇

前端_刘师兄
25,959 阅读17分钟

浏览器和协议

1. 从输入url到展示页面加载的过程

  • 通过DNS解析获得网址的对应IP地址
  • 浏览器与远程web服务器 通过TCP三次握手协商来建立一个 TCP/IP 连接
  • 浏览器 通过TCP/IP连接 向web服务器 发送一个 HTTP 请求
  • 服务器的永久重定向响应
  • 浏览器跟踪重定向地址
  • 服务器处理请求
  • 服务器返回一个 HTTP 响应
  • 浏览器渲染:解析HTML、解析CSS、解析JS、Render树

2. 三次握手和四次挥手

握手

  • 第一次握手，发送端首先发送一个带SYN（synchronize）标志的数据包给接收方，第一次的seq序列号是随机产生的，这样是为了网络安全，如果不是随机产生初始序列号，黑客将会以很容易的方式获取到你与其他主机之间的初始化序列号，并且伪造序列号进行攻击
  • 第二次握手，接收端收到后，回传一个带有SYN/ACK（acknowledgement）标志的数据包以示传达确认信息SYN 是为了告诉发送端，发送方到接收方的通道没问题；ACK 用来验证接收方到发送方的通道没问题
  • 第三次握手，发送端再回传一个带ACK标志的数据包，代表握手结束，若在握手某个过程中某个阶段莫名中断，TCP协议会再次以相同的顺序发送相同的数据包

image.png 挥手

  • 客户端发送一个 FIN，用来关闭服务端到客户端的数据传送
  • 服务端收到这个 FIN，它发回一 个 ACK，确认序号为收到的序号加1 。和 SYN 一样，一个 FIN 将占用一个序号
  • 服务端关闭与客户端的连接，发送一个FIN给客户端
  • 客户端发回 ACK 报文确认，并将确认序号设置为收到序号加1

image.png

3. HTTP和HTTPS

HTTP：

  • 不安全
  • 协议对客户端没有状态存储【没有状态】
  • 每次请求需要TCP三次握手四次挥手，和服务器重新建立连接【没有连接】
  • 基本的特性，由客户端发起请求，服务端响应
  • 简单快速、灵活
  • 使用明文、请求和响应不进行确认

HTTPS：

  • 安全
  • HTTP安全版本，通过SSL或TLS提供加密处理数据、验证对方身份以及数据完整性保护
  • 采用混合加密技术，传输过程无法直接查看明文内容【传输加密】
  • 通过证书认证客户端访问的是自己的服务器【身份认证】
  • 传输过程防止被篡改【数据完整】

详情请参考：HTTP和HTTPS协议，看一篇就够了

4. 跨域的解决方案

  • JSONP
  • PostMessage
  • document.domain
  • Websocket
  • CORS
  • Nginx 反向代理
  • Node 中间件代理

详情请参考：
前端常见跨域解决方案（全）
可能是最好的跨域解决方案了

5. 01服务器返回的code意义

状态码简义含义
100继续请求服务器已接收到部分请求，等待剩下的部分继续请求
101切换协议客户端请求切换协议，服务器已准备切换协议
200请求成功客户端请求的数据服务器已成功返回
201创建成功客户端请求成功且服务器已创建新的资源
202接受请求服务器已接受请求，但尚未处理
203非授权信息服务器处理成功，但返回内容源于其他
204没有内容服务器处理成功，但是没有任何返回
205内容重置服务器处理成功，内容无返回，请求重置文档内容
206部分内容服务器成功处理了部分get请求
300多种选择服务器可以执行多个操作，或者根据返回列表客户端选择进行操作
301永久移动请求的资源已永久移动到其他位置，服务器自动修改请求资源的位置
302临时移动服务器响应的资源非在客户端请求的位置，但是可以响应该请求
303访问其他位置服务器自动（除 HEAD 之外）请求的其他位置
304未修改上次访问服务器的资源没有改变
305使用代理客户端使用代理访问服务器
307临时重定向客户端的要求服务器临时修改当前访问资源位置
400请求错误服务器无法解析该请求
401未授权客户端请求的资源没有进行身份验证，或未请求权限
403拒绝请求客户端发起的请求被服务器拒绝
404未找到没有找到请求的网页地址或请求的地址不存在
405方法禁用客户端请求的方法被禁用
406无法请求无法使用请求的内容特性响应请求的网页
407缺少代理授权客户端请求应使用代理或需要代理的授权
408请求超时服务器等候请求超时
409存在冲突服务器返回字段存在冲突，或返回的列表差异过大
410已删除请求资源已删除，请求资源以前有而现在没有
411标头字段无效服务器不接受不含有效内容长度标头字段的请求
412条件未满足服务器未满足请求者在请求中设置的其中一个前提条件
413请求体超标服务器无法处理超标（占用内存太大）的请求，超出了服务器的处理范围
414URI超标请求的 URI超标，服务器无法解析
415不支持请求请求的格式不受请求页面的支持
416不在请求范围页面无法提供请求的范围
417请求头未满足条件服务器没有按要求请求标头字段
500服务器内部错误服务器无法完成请求
501未完成请求服务器问题，没有完成请求，并非请求问题
502网关错误服务器配置的网关可能存在问题，无法接收信息
503服务器不可使用服务器正处于维护阶段或暂停服务
504网关超时网关没有及时未回应，上游没有接收到信息
505HTTP协议不支持当前请求的HTML版本与服务器不一致或服务器不支持当前请求的HTML版本

详情请参考： HTTP请求返回code意义

HTML

1. 语义化标签有哪些？

header    头部 
nav       导航栏 
section   区块
main      主要区域 
article   主要内容 
aside     侧边栏 
footer    底部

2. 简单说一下拖拽过程？

dragstart  // 拖放事件，开始拖放时触发。

darg       // 拖放事件，正在拖放触发。

dragenter  // 目标事件，拖放进入目标时触发。

dragover   // 目标事件，拖放目标内移动时触发。

dragleave  // 目标事件，拖放移出目标时触发。

drop       // 目标事件，目标接受被拖放时触发。

dragend    // 拖放事件，拖放操作结束时触发。

3. 严格模式与混杂模式

严格模式： 浏览器支持的最高标准运行 混杂模式： 向下兼容的方式显示，模拟低版本浏览器的行为

4. iframe的优缺点有哪些？

优点：

  • iframe能够原封不动地把嵌入的网页展示出来；
  • 提高页面代码的复用性；
  • 解决加载缓慢的第三方内容，如图标和广告等的加载问题；
  • 在处理上传或局部刷新时，避免了页面整体刷新；
  • iframe解决部分跨域问题；

缺点：

  • iframe会阻塞主页面的 onload 事件；
  • 无法被一些搜索引擎索引到；
  • 页面会增加服务器的http请求；
  • 会产生很多页面，不便于管理；
  • 很多移动设备无法完全显示框架，设备兼容性差；
  • 会出现区域的上下、左右滚动条，滚动条会挤占页面空间；
  • 使用框架时，要保证正确的使用导航链接，容易造成链接死循环；

CSS

1. 盒模型

盒模型构成：content + padding + border + margin
W3C标准盒模型：width表示content（主内容）宽度
IE盒子模型： width表示content(主内容)+padding(内边距)+border(边框)这三个部分的宽度

image.png

切换盒模型:

box-sizing: content-box  // W3C盒子模型
box-sizing: border-box   // IE盒子模型

2. CSS常用样式选择器

选择器权重使用示例
!important1111* {color: '#00f' !important}
行内1000<span style={color:'#00f'} />
id0100#id{color:'#00f}
class0010.calssName{color:'#00f}
标签0001div{color:'#00f}
子选择0001div > span{color:'#00f}
伪类0001a:hover {color:'#00f}>

PS: 相同等级或重复写的样式则为最后写的样式为准

3. 伪类和伪元素

常用的伪类：  

a:link      // 未访问
a:hover     //  悬停
a:visited   // 已访问
a:active    // 已选择

常用的伪元素：

span::before {  // 内容前面插入新内容
    content:'';
}
span::after{  // 内容之后插入新内容
    content:'';
}

4. CSS属性继承

5. 居中div的方案

水平垂直居中：

div{ 
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
}

详情请参考： CSS实现DIV居中方案

6. 绝对定位和相对定位

  • position属性的绝对定位：absolute 和 fixed 统称为绝对定位
  • position属性的相对定位：relative
  • position属性的默认值：static
  • absolute脱离文档流，参考最近的relative位置，没有设置相对定位没有则参照根元素html的位置
  • relative定位是相对于自身位置定位

详情请参考：position 相对定位和绝对定位

7. CSS3特性

border-radius           // 圆角
text-shadow             // 文字阴影
transition              // 动画过度
animation               // 动画
box-shadow              // 盒子阴影
border-image            // 图片边框
background-clip         // 背景绘制
color: rgba(0,0,0,0.1)  // 透明度设置
flex                    //布局
                        // 媒体查询
                        // 多列布局

8. Flex布局

详情请参考：Flex 布局教程：语法篇

9. CSS绘制三角形

普通三角形

image.png

div {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
   }

右上角角标的三角形

image.png

div {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;
   }

10. px、em、rem、vh\vw

px： 像素px是相对于显示器屏幕分辨率而言的一个单位
em： 相对于当前对象内文本的字体尺寸
rem： 相对于根元素<html>的字体大小
vh\vw： 相对于视口的高度和宽度。1vh = 1/100 的浏览窗口高度，1vw = 1/100 的浏览器窗口宽度

11. 清除浮动的方法

<div style="clear:both" />
<br clear="all" />

// 父元素使用overflow: hidden、auto
// 使用伪元素清除浮动

12. CSS优化

  • 尽量避免使用@import
  • 多个图片背景尽量使用精灵图
  • 减少重绘和重排的属性使用（如color，background，visibility等属性）
  • 有重复命名时，选择器添加父节点名方便快捷查找

13. 0.5px的线条

div{
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background-color: red;
  transform: scaleY(0.5);        // 通过设置 Y 轴的值来定义缩放转换
  transform-origin: center top;  // 允许您改变被转换元素的位置,X轴位置‘center’,Y轴位置‘top’
}

14. CSS动画

  • @keyframes

  • animation-name

  • animation-duration

  • animation-delay

  • animation-iteration-count

  • animation-direction

    • normal - 动画正常播放（向前）。默认值
    • reverse - 动画以反方向播放（向后）
    • alternate - 动画先向前播放，然后向后
    • alternate-reverse - 动画先向后播放，然后向前

  • animation-timing-function

    • ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
    • linear - 规定从开始到结束的速度相同的动画
    • ease-in - 规定慢速开始的动画
    • ease-out - 规定慢速结束的动画
    • ease-in-out - 指定开始和结束较慢的动画
    • cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

  • animation-fill-mode

    • none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
    • forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
    • backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
    • both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

  • animation

    • 设置所有动画属性的简写属性。
@keyframes anima {
  0% {background-color:  #fff;}
  50% {background-color:  #00f;}
  100% {background-color: #0cf;}
}
div {
  width: 50px;
  height: 50px;
  background-color: #fff;
  animation-name: anima;   // 添加动画
  animation-duration: 3s;  // 动画时间3s
  animation-delay: 0.5s;   // 延迟0.5s
  animation-iteration-count: 3;  // 该动画执行3次   // 设置 infinite 则一直执行
}

JavaScript

1. 数据类型

基础数据类型：Undefined、Null、Boolean、Number、String、Symbol【ES6】、Bigint【ES10】
复杂数据类型（三大引用类型）：Object、Array、Function 【Arrar和Function都属于Object类型】 

var obj = new Object();
obj.name = 'zhangsan';

var arr = new Array();
arr.push(1);

var func = function(){
    return 1
}

console.log(obj, arr, func());  // {name:'zhangsan'}, [1], 1

2. 数据类型转换

可以相互转换的类型：Number、String、Boolean 

var a = 0;
console.log(a);                       // 0
console.log(a.toString());            // '0'
console.log(parseInt(a.toString()));  // 0
console.log(+(a.toString()));         // 0
console.log(Boolean(a));              // false

3. 数据类型判断

typeof

console.log(typeof 1);　　        // number
console.log(typeof '1');　　      // string
console.log(typeof true );       // boolean
console.log(typeof undefined);   // undefined
console.log(typeof null);        // object
console.log(typeof {});          // object
console.log(typeof [] );         // object

var func = function(){
    return 1
}
console.log(typeof func );       // function
console.log(typeof func() );     // number
console.log(typeof (function() {}));   // function

constructor

console.log(false.constructor === Boolean);   // true

Object.prototype.toString.call

console.log(Object.prototype.toString.call(false)); // [object Boolean]

instanceof【只能识别复杂类型】

console.log([] instanceof Array);       // true
console.log({} instanceof Object);      // true

var func = function(){
    return 1
}
console.log(func instanceof Function);  // true
console.log(1 instanceof Number);       // false

4. 原型和原型链

  • 定义一个函数数据类型(普通函数、类)时候，都会自带一个 prototype 属性，这个属性指向函数的原型对象，并且这个属性是一个对象数据类型的值
  • 对象数据类型也自带一个属性 __proto__ ，属性值是当前实例所属类的原型(prototype)。原型对象中有一个属性 constructor , 它指向函数对象
  • 原型链指的是通过prototype对象指向父类对象最后指向Object对象的过程【Object最后为null】

image.png

5. 作用域和作用域链

  • 作用域就是代码的执行环境，全局执行环境就是全局作用域，函数的执行环境就是私有作用域，它们都是栈内存
  • 当代码在一个环境中执行时，会创建变量对象的一个作用域链（作用域形成的链条)
  • 内部环境可以通过作用域链访问所有外部环境，但外部环境不能访问内部环境的任何变量和函数
  • 当在内部函数中，需要访问一个变量的时候，首先会访问函数本身的变量对象，是否有这个变量，如果没有，那么会继续沿作用域链往上查找，直到全局作用域。
在 Web 浏览器中，全局执行环境被认为是 window 对象，所有全局变量和函数都是作为 window 对象的属性和方法创建的。
在 node 环境中，全局执行环境是 global 对象。

6. 深拷贝和浅拷贝的方法

  • 浅拷贝就是可以将对象的基础类型复制，无法复制复杂数据类型
  • 深拷贝就是为了解决无法复制复杂数据类型，对数据进行深程度拷贝

浅拷贝

  1. Object.assign
var obj1 = {
    name:'zangsan',
    age: 18
}
var obj2 = Object.assign(obj1);

console.log(obj1, obj2)

2. 扩展运算符(...)

var obj1 = {
    name:'zangsan',
    age: 18
}
var obj2 = {...obj1};

console.log(obj1, obj2)

3. for...in

function copy(obj1) {
   var obj = Array.isArray(obj1) ? [] : {};
   for (let i in obj1) {
   obj[i] = obj1[i];
  }
   return obj;
}

var obj1 = {
    name:'zangsan',
    age: 18
}

var obj2 = copy(obj1);
console.log(obj1, obj2)

深拷贝

  1. JSON对象来实现深拷贝【缺点：函数无法拷贝，会显示undefined】
var obj1 = {
    name:'zangsan',
    age: 18,
    hobby:{
        motion: new Array('篮球','足球'),
    }
}

function deepClone(obj) {
  var _obj = JSON.stringify(obj),
    objClone = JSON.parse(_obj);
  return objClone;
}

var obj2 = deepClone(obj1);
console.log(obj1, obj2);

2. lodash函数库实现深拷贝【需要引入lodash库】

var obj1 = {
    name:'zangsan',
    age: 18,
    hobby:{
        motion: new Array('篮球','足球')
    }
}

var obj2 = _.cloneDeep(obj1);
console.log(obj1, obj2);

3. 递归

function deepClone(obj){
    015 objClone = Array.isArray(obj) ? [] : {};
    if(obj && typeof obj=== "object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}

var obj1 = {
    name:'zangsan',
    age: 18,
    hobby:{
        motion: new Array('篮球','足球')
    }
}
var obj2 = deepClone(obj1);
console.log(obj1, obj2);

7. 闭包

  • 在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“
  • 在本质上，闭包是将函数内部和函数外部连接起来的桥梁

详情请参考：学习Javascript闭包

8. 常用的创建对象的几种方式

  • 工厂模式
const createCase = (name,age,onName) =>{
    const obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.obName = () => {
            alert(name);
        }
    return obj;
}

const case1 = createCase('zs', 23);
const case2 = createCase('ls', 24);

console.log(case1);  // {name: 'zs', age: 23, obName: ƒ} 
console.log(case2);  // {name: 'ls', age: 24, obName: ƒ}
  • 构造函数模式
function createCase(name,age,onName){
    this.name = name;
    this.age = age;
    this.obName = () => {
            alert(name);
        }
}

const case1 = new createCase('zs', 23);
const case2 = new createCase('ls', 24);

console.log(case1); // {name: 'zs', age: 23, obName: ƒ} 
console.log(case2); // {name: 'ls', age: 24, obName: ƒ}
  • 原型模式
function createCase(){};
createCase.prototype.name = 'zs';
createCase.prototype.age = '23';

const case1 = new createCase();

console.log(case1.name); // 'zs'
console.log(case1.age); // 23
  • 通过Object构造函数或对象字面量创建单个对象
  • 组合使用构造函数模式和原型模式
  • 动态原型模式
  • 寄生构造函数模式
  • 稳妥构造函数模式

9. 继承的几种实现方法

  • 构造继承
  • 原型链继承
  • 拷贝继承
  • 实例继承
  • 组合继承
  • 寄生组合继承

10. this：call、apply、bind

  • this的指向受函数运行环境的影响(默认指向window)
  • call方法可以修改this的指向(指向函数执行时所在的作用域), 然后再执行函数
// function.prototype.call();

   function f(x, y){
     console.log(x + y);
   }

   f.call(null, 1, 1) // 2
  • apply和call作用类似，唯一区别是apply 接收数组作为函数执行时的参数
// function.prototype.apply();

function f(x, y){
  console.log(x + y);
}

f.apply(null, [1, 1]) // 2
  • bind 用于将函数体内的this绑定到某个对象，然后返回一个新函数
// function.prototype.bind();

const add = function (x, y) {
    console.log(x, y);
    return x * this.a + y * this.b;
}

const newAdd = add.bind({a: 2, b: 3}, 5);  // 第二个参数为x值
newAdd(5) // 输入参数为y值  结果: 25

11. 事件捕获和事件冒泡

  • 捕获型事件：事件从document对象开始触发，然后到目标事件
  • 冒泡型事件：目标事件到document对象的顺序触发。

12. DOM操作

获取DOM

DOM事件

  • onclick--------点击事件
  • onload---------进入时执行事件
  • onunload-------离开时执行事件
  • onmouseover----鼠标指针移入时执行事件
  • onmouseout-----鼠标指针移出时执行事件
  • onmousedown----鼠标摁下时执行事件
  • onmouseup------鼠标松开时执行事件

13. AJAX

  • AJAX是异步 JavaScript 和 XML。
  • AJAX可以通过在后台与服务器进行少量数据交换,实现异步更新。
  • AJAX的XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。
  • AJAX通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。
  • AJAX常用的方法：（新增）post,（获取）get,（删除）delete, （修改）put
  • 原生AJAX请求
//创建 XMLHttpRequest 对象
var ajax = new XMLHttpRequest();
//规定请求的类型、URL 以及是否异步处理请求。
ajax.open('GET',url,true);
//发送信息至服务器时内容编码类型
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
//发送请求
ajax.send(null);  
//接受服务器响应数据
ajax.onreadystatechange = function () {};

14. 宏任务与微任务

Git操作

其他

1. 前端电脑必装

2. 实用工具推荐

3. 学习社区推荐

4. 学习官网推荐

PS

希望大家都可以找到在工作中的乐趣。
热爱前端技术。
新手交流点这里 -->有兴趣一起摸鱼的点击这里

avatar
文章
阅读
粉丝