前端面试个人技能总结

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.设计模式

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/16065.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

slam14讲(第9,10讲 后端)

slam14讲(第9,10讲 后端) 后端分类基于滤波器的后端线性系统和卡尔曼滤波非线性系统和扩展卡尔曼滤波 BA优化H矩阵的稀疏性和边缘化H矩阵求解的总结 位姿图优化公式推导 基于滑动窗口的后端个人见解旧关键帧的边缘化 后端分类 基于滤波器的后…

AtCoder Beginner Contest 355 A~F

A.Who Ate the Cake?(思维) 题意 已知有三个嫌疑人,有两个证人,每个证人可以指出其中一个嫌疑人不是罪犯,如果可以排除两个嫌疑人来确定犯人,输出犯人的身份,如果无法确定,输出"-1"。 分析 …

AT_abc351_c [ABC351C] Merge the balls 题解

题目传送门 题目大意 你有一个空序列和 N N N 个球。第 i i i 个球 ( 1 ≤ i ≤ N ) (1 \leq i \leq N) (1≤i≤N) 的大小是 2 A i 2^{A_i} 2Ai​。 计算 N N N 操作后序列中剩余的球的个数。 你将进行 N N N 次运算。 在第 i i i 次操作中,你将第 i i…

springboot + Vue前后端项目(第十一记)

项目实战第十一记 1.写在前面2. 文件上传和下载后端2.1 数据库编写2.2 工具类CodeGenerator生成代码2.2.1 FileController2.2.2 application.yml2.2.3 拦截器InterceptorConfig 放行 3 文件上传和下载前端3.1 File.vue页面编写3.2 路由配置3.3 Aside.vue 最终效果图总结写在最后…

TabAttention:基于表格数据的条件注意力学习

文章目录 TabAttention: Learning Attention Conditionally on Tabular Data摘要方法实验结果 TabAttention: Learning Attention Conditionally on Tabular Data 摘要 医疗数据分析通常结合成像数据和表格数据处理,使用机器学习算法。尽管先前的研究探讨了注意力…

Hudi 多表摄取工具 HoodieMultiTableStreamer 配置方法与示例

博主历时三年精心创作的《大数据平台架构与原型实现:数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行,点击《重磅推荐:建大数据平台太难了!给我发个工程原型吧!》了解图书详情,…

vue3添加收藏网站页面

结构与样式 <template><div class"web_view"><ul><li v-for"web in webList" :key"web.title"><a :href"web.src" :title"web.title" target"_blank"><img :src"web.img&…

微信小程序基础 -- 小程序UI组件(5)

小程序UI组件 1.小程序UI组件概述 开发文档&#xff1a;https://developers.weixin.qq.com/miniprogram/dev/framework/view/component.html 什么是组件&#xff1a; 组件是视图层的基本组成单元。 组件自带一些功能与微信风格一致的样式。 一个组件通常包括 开始标签 和 结…

Cyber Weekly #8

赛博新闻 1、微软召开年度发布会Microsoft Build 2024 本周&#xff08;5.22&#xff09;微软召开了年度发布会&#xff0c;Microsoft Build 2024&#xff0c;发布了包括大杀器 Copilot Studio 在内的 50 项更新。主要包括&#xff1a; 硬件层面&#xff1a;与英伟达 & A…

3D牙科网格分割使用基于语义的特征学习与图变换器

文章目录 3D Dental Mesh Segmentation Using Semantics-Based Feature Learning with Graph-Transformer摘要方法实验结果 3D Dental Mesh Segmentation Using Semantics-Based Feature Learning with Graph-Transformer 摘要 本文提出了一种新颖的基于语义的牙科网格分割方…

民国漫画杂志《时代漫画》第16期.PDF

时代漫画16.PDF: https://url03.ctfile.com/f/1779803-1248612470-6a05f0?p9586 (访问密码: 9586) 《时代漫画》的杂志在1934年诞生了&#xff0c;截止1937年6月战争来临被迫停刊共发行了39期。 ps:资源来源网络&#xff01;

代码随想录训练营总结

历经60天的训练营终于结束啦&#xff0c;感觉自己两个月前做的这个决定非常正确&#xff0c;非常感谢卡哥和卡哥助手&#xff0c;从一个代码没有系统刷题没有体系的小白到现在已经有了一些基础&#xff0c;也具备一些刷题的习惯和手感&#xff0c;如果是我自己没有规划的刷可能…

【C++】二分查找:在排序数组中查找元素的第一个和最后一个位置

1.题目 难点&#xff1a;要求时间复杂度度为O(logn)。 2.算法思路 需要找到左边界和右边界就可以解决问题。 题目中的数组具有“二段性”&#xff0c;所以可以通过二分查找的思想进行解题。 代码&#xff1a; class Solution { public:vector<int> searchRange(vect…

Camunda BPM主要组件

Camunda BPM是使用java开发的,核心流程引擎运行在JVM里,纯java库,不依赖其他库或者底层操作系统。可以完美地与其他java框架融合,比如Spring。除了核心流程引擎外,还提供了一系列的管理,操作和监控工具。 1,工作流引擎 既适用于服务或者微服务编排,也适用于人工任务管…

Leetcode42题:接雨水

1.题目描述 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面是由数组 [0,1,0,2,1,0,1,…

hadoop节点添加与删除测试

hadoop节点上下线 docker run -d --name hd1 -p 8888:8888 -p 2222:22 centos:basic init docker run -d --name hd2 -p 8889:8889 centos:basic init docker run -d --name hd3 centos:basic init# hosts echo "172.17.0.2 hadoop1 172.17.0.3 hadoop2 172.17.0.4 hadoo…

网络协议:CSMA/CD 和 CSMA/CA

当多台设备共享同一通信信道时&#xff0c;避免数据传输冲突至关重要。本文将探讨两种广泛使用的协议&#xff1a;CSMA/CD&#xff08;Carrier Sense Multiple Access with Collision Detection&#xff09;和CSMA/CA&#xff08;Carrier Sense Multiple Access with Collision…

【C语言】二叉树的实现

文章目录 前言⭐一、二叉树的定义&#x1f6b2;二、创建二叉树&#x1f3a1;三、二叉树的销毁&#x1f389;四、遍历二叉树1. 前序遍历2. 中序遍历3. 后序遍历4. 层序遍历 &#x1f332;五、二叉树的计算1. 计算二叉树结点个数2. 计算二叉树叶子结点的个数3. 计算二叉树的深度4…

一、Elasticsearch介绍与部署

目录 一、什么是Elasticsearch 二、安装Elasticsearch 三、配置es 四、启动es 1、下载安装elasticsearch的插件head 2、在浏览器&#xff0c;加载扩展程序 3、运行扩展程序 4、输入es地址就可以了 五、Elasticsearch 创建、查看、删除索引、创建、查看、修改、删除文档…

【MySQL】——并发控制

&#x1f4bb;博主现有专栏&#xff1a; C51单片机&#xff08;STC89C516&#xff09;&#xff0c;c语言&#xff0c;c&#xff0c;离散数学&#xff0c;算法设计与分析&#xff0c;数据结构&#xff0c;Python&#xff0c;Java基础&#xff0c;MySQL&#xff0c;linux&#xf…