1.html5新特性
- 语义化标签:header footer nav section artical aside
- 媒体标签:qudio video (control autoplay loop ) source标签
- 表单新增属性:输入类型type:email url data month week color;新增属性:placeholder required autofocus multiple
- 本地存储:sessionstorage页面关闭自动清除 localstorage 没有时间限制
- Dom查询 document.queryselector document.queryselectorall
- 其他:canvas geolocation 拖拽draggable
2.Css3新特性:
- 选择器:属性,结构伪类,伪类
- 背景和边框:background-size box-shadow
- 文本控制:text-shadow text-decoraction
- 布局:flexbox弹性盒子 grid网格布局
- 转换和动画:transform animation
3.Js/ts区别
类型系统 编译 类型检查 代码提示 泛型编程 接口和抽象 修饰符
- Js 动态类型语言 无需编译 运行时 弱 不支持 不支持 不支持访问
- Ts 静态类型语言 编译成js 编译时 强 支持 支持 支持访问
4.Es6新特性
- let const代替var let声明的变量具有块级作用域 暂时性死区 const常量 一次
- 模板字符串 在字符串中插入变量和表达式,反引号~
- 解构赋值 从数组和对象中提取值并赋给变量 数组解构、对象解构
- 扩展运算符
- Promise 异步问题,解决异步回调
- 类 class关键字声明类和创建对象
- 模块化加载 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 怎么取出当前行的数据:
- 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.设计模式
创建型模式 :工厂模式 单例模式 原型模式 建造者模式
结构型模式:适配器 装饰圈 代理 桥接 组合 享元 外观
行为型模式 :策略 。。。。