前端面试个人技能总结

1.html5新特性 

1. 语义化标签：header footer nav section artical aside
2. 媒体标签：qudio video （control  autoplay loop ） source标签
3. 表单新增属性：输入类型type:email url data month week color；新增属性：placeholder required autofocus multiple
4. 本地存储：sessionstorage页面关闭自动清除 localstorage 没有时间限制
5. Dom查询 document.queryselector  document.queryselectorall
6. 其他：canvas geolocation 拖拽draggable

2.Css3新特性：

1. 选择器：属性，结构伪类，伪类
2. 背景和边框：background-size box-shadow
3. 文本控制：text-shadow text-decoraction
4. 布局：flexbox弹性盒子 grid网格布局
5. 转换和动画：transform animation

3.Js/ts区别

        类型系统                编译        类型检查   代码提示   泛型编程  接口和抽象   修饰符

1. Js 动态类型语言 无需编译  运行时      弱     不支持      不支持      不支持访问
2. Ts 静态类型语言 编译成js   编译时    强      支持        支持           支持访问

4.Es6新特性

1. let const代替var let声明的变量具有块级作用域 暂时性死区 const常量 一次
2. 模板字符串  在字符串中插入变量和表达式，反引号~
3. 解构赋值 从数组和对象中提取值并赋给变量 数组解构、对象解构
4. 扩展运算符
5. Promise 异步问题，解决异步回调
6. 类 class关键字声明类和创建对象
7. 模块化加载 import export，在模块中导入或导出变量函数对象

5.Async/await

（1）async 用于申明一个 function 是异步的，返回一个promise对象。

（2）而 await必须在函数内部使用， 用于等待一个异步方法执行完成。等待promise对象的resolved或者rejected状态。

6.flex响应式（弹性）布局

父元素：display:flex开启  flex-direction主轴方向 flex-wrap是否换行justify-content 项目在主轴对齐方式align-items项目在交叉轴对齐方式

子元素; order顺序 flex-grow放大 flex-shrink 缩小 flex-basis占据空间

7.Vue3/2区别

Vue2 选项式api 支持单个根节点 响应式原理es5的defineproperty 响应式实现方式data中 指令优先级v-for>v-if

生命周期：beforcreate created beforemounte mounted beforeupdate updated beforedstory destoryed

Vue3 组合式api 支持多个根节点 proxy对象 响应式实现方式ref reactive  v-if>V-for

生命周期：setup onbeforemounte onmounted onbeforeupdate onupdated

8.Element plus element ui

表单el-table 怎么取出当前行的数据：

1. v-slot插槽

9.Echarts

指定图表的配置项和数据

var option = { title: { text: '示例图表' }, tooltip: {}, xAxis: { data: ["类别1", "类别2", "类别3", "类别4", "类别5"] }, yAxis: {}, series: [{ name: '数据系列', type: 'bar', // 图表类型，这里是柱状图 data: [5, 20, 36, 10, 10] // 数据源 }] };

10.webpack常用配置

Entry 指定打包入口文件

output输出的目录和文件名称

Module 配置不同的loaders加载器处理不同的模块

resolve解析

Plugins插件

11.vite配置

Root 项目根目录

Base 公共基础路径

Publicdir公共资源文件夹的路径

Outdir 输出目录默认dist

Assetsdir 静态资源

Resolve

plugins

12.前端工程化 常见的loader和plugin

Loader函数:babel-loader es6转换为es5 css-loader解析css style-loader css注入到html文档中 sass-loader less-loader

Plugin插件；htmlwebpackplugin生成html将jscss引入到html defineplugin定义全局变量

13.git版本控制

Git init   git push   git add  

14.浏览器工作原理

输入地址，dns解析域名到ip地址，与服务器建立连接，服务器返回对应的静态资源index.html，浏览器开始解析，遇到cssjs就请求下载，渲染页面，执行js代码。

15.输入url到页面展示发生了什么？

dns域名解析 将域名解析成ip地址

tcp连接 三次握手

发送HTTP请求

服务器处理请求返回报文

浏览器解析渲染页面

断开连接 tcp四次挥手

16.三次握手

客户端向服务器发送一个syn（同步）报文，表示客户端请求建立连接，并选择一个初始序列号。

• 服务器收到syn报文之后，向客户端发宋syn+ack（同步确认）报文，表示服务端接受连接请求，并确认客户端的初始序列号，选择自己的初始序列号。
• 客户端收到之后，向服务器发宋ack（确认）报文，表示客户端确认连接建立，并发宋自己的初始序列号。

为什么不是两次四次。

如果是两次：客户端知道服务器能正常接收到自己发送的数据，但是服务器不知道客户端能否接收到自己发送的数据。

如果是四次：没必要。

四次挥手

• 客户端发送（结束）fin报文给服务器,表示不再发送数据。
• 服务器收到，发生ack确认报文给客户端，表示收到了关闭请求。
• 服务器发送fin结束报文给客户端，表示服务器也准备关闭连接。
• 客户端收到，给服务器发送一个ack确认报文，表示确认收到关闭请求。

为什么是四次？

关闭连接时，客户端向服务器发送结束报文，仅仅表示客户端不再发送数据，但是还能接收数据。

服务器收到，先回应一个已经收到了的ack应答报文，但是服务器还有数据需要处理和发宋，等到服务端不再发送数据，才发送fin结束报文给客户端表示同意现在关闭连接。

所以，服务端的ack确认报文和fin结束报文都会分开发送，因此是四次挥手。

17.存储机制

Cookies sessionstorage localstorage

都是浏览器存储，都存储在浏览器本地，都遵循同源原则

Cookie 生命周期是由服务器端在写入时就设置好的 存储空间小存储登录验证信息

localstorage写入时就存在 需要手动清除 存储不一变动信息

sessionstorage页面关闭时自动清除 检测用户是否刷新进入页面

前端给后端发送请求时会自动携带cookie的数据

18.http协议

超文本传输协议 浏览器和万维网服务器之间互相通信的规则

组成：请求报文：请求行（请求方法URL http版本协议） 请求首部字段 请求内容实体

响应报文：状态行（http版本 状态码 状态码原因短语） 响应首部字段 响应内容实体

19.设计模式

创建型模式 ：工厂模式 单例模式 原型模式 建造者模式

结构型模式：适配器 装饰圈 代理 桥接 组合 享元 外观

行为型模式 ：策略 。。。。