2020前端面试总结 -凯发k8官方网

一、前端安全问题

1.xss攻击（跨站脚本攻击）
2.csrf攻击（跨站请求伪造）
3.点击攻击（内嵌ifame）

二、防抖节流

防抖:
在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms。(比如滚动监听，一直按方向键就一直会触发）
节流：
即使用户不断拖动滚动条，也能在某个时间间隔之后给出反馈。
让函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活

三、作弊检测

监听visibilitychange事件，当页面不可见的时候就会documnet.visibilitystate==”hide”

四、项目加密的方式

一次des加密，再md5加密，再des加密。秘钥保存在全局变量中，不会直接暴露。但还是可查。

五、打包配置内容

·unlifyjsplugin：js压缩、去除console.log、
·构建时开启多进程处理编译
·配置fav-icon
·gzip压缩
·自定义输出目录
·图片压缩
·配置跨域

六、express如何与前端建立连接

引入express、新建express对象、配置跨域、app.get（post）定义接口、server.listen起服务

七、express常用api

req.query：获取url的查询参数串
req.body: 获取请求主体（post数据，需要设置中间件函数 json与urlencode）
req.cookies：获取cookies (需要使用 cookie-parser 中间件)
req.hostname / req.ip：获取主机名和ip地址
req.params：获取路由的parameters
req.path：获取请求路径
req.protocol：获取协议类型
req.get()：获取指定的http请求头

res.header()：设置请求头
res.status()：设置http状态码
res.send()：传送http响应
res.redirect()：设置响应的location http头，并且设置状态码302
res.json()：传送json响应
res.cookie(name，value [，option])：设置cookie
res.clearcookie()：清除cookie
res.download()：传送指定路径的文件
res.sendfile(path [，options] [，fn])：传送指定路径的文件 -会自动根据文件extension设定content-type
res.render(view [, locals] [, callback]) 渲染一个view

八、express连接数据库

·安装、引入mysql；
·配置mysql（服务器地址，数据库，密码等）；
·使用连接池，避开太多线程，提升性能；
·pool.getconnection()连接数据库

九、ssl证书的配置

本地读取ssl证书；使用https创建一个服务，并将ssl加入进去；然后监听一个端口

十、linux搭建node环境

下载node安装包wget 地址；解压安装包tar xvf ；创建软连接，在任意目录下直接使用node和npm;npm下载一个pm2，pm2可以实现自动起服务。

十一、mysql数据库的配置

host: “120.78.100.xxx”,
user: “root”,
password: “0622”,
port: “3306”,
database: “databasename”,
datestrings: true

十二、sql语句

建库：create database xx
建表：create table xx{ id int not null primary key};
增：insert into xx values()
删：delete from xx where id = 1
改：updata xx set name = “” where id = 2;
查：select name from xx where id = 1

十三、线上导入数据库

用可视化工具navicat导出为sql文件；查看数据库show databases；切换数据库use xxx;
source 文件路径；查看表show tables；

十四、国际化的配置

安装vue-i18n;创建i18n文件夹；创建语言文件；放到message对象中一并导出。i18n引入message；挂载到i18n实例中；最后在main.js中引入i18n,挂载到vue实例上；
使用：$t“message.key”/this.$t{“message.key”}
切换：this.$i18n.locacl = “cn”

十五、上传文件的实现

el-upload;
before-upload //上传前的钩子
on-change //文件状态改变
on-success

十六、语音转文字sdk的集成

微软的api

十七、websocket是什么？与ajax有什么区别？

十八、webcoket是怎么使用的

十九、原生audio播放事件

@loadstart="onloadstart" //开始加载@loadedmetadata="onloadedmetadata"@play="onplay" //开始@pause="onpause"@waiting="onwaiting" //开始等待@playing="onplaying" //缓冲下一帧就绪@loadeddata="onloadeddata" //没有足够的数据来播放指定音频@timeupdate="ontimeupdate" //更新视频流@error="onerror"

this.audio.currenttime //当前播放时间
this.audio.maxtime //音频时长
this.audio.volume //音量

二十、下载、保存文件到本地

boble

二十一、动画效果api

animation: myfirst 5s
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
transition: property duration timing-function delay;
transition：css属性，时间，速度曲线、延迟触发
animation: name duration timing-function delay iteration-count direction;
animation:keyframe的名称，时间，速度曲线，延迟触发，播放次数，反向播放
transform: translate(10px, 10px) scale(x, y) rotate(10deg);
位移、缩放、旋转

二十二、webapck相关

二十三、页面性能优化

打包压缩、gizp压缩、精灵图、图片懒加载、图片压缩、避免重定向、缓存页面

二十四、懒加载怎么实现、原理

二十五、前端埋点

二十六、移动端适配和响应式网站的实现方式

@media screen and (min-width:600px) and (max-width:900px)
rem =var rem = width * 100 / designwidth;

二十七、typescript的特点

typescript 是 javascript 的一个超集，主要提供了类型系统和对 es6 的支持；
编译时检查、类型检测、es6规范，js超集。

二十八、深浅拷贝

对浅拷贝的值做修改的话，会改变被拷贝者的值，深拷贝不会
浅拷贝：赋值修改
深拷贝：json.parse();object.assign()

二十九、promise异步

async/await;
promise
$nexttick

三十、两个路由出口

{
path:‘double’,
components: {
default:resolve=>require([’…/components/vue06-a.vue’],resolve),
bottom:resolve=>require([’…/components/vue06-b.vue’],resolve)
}
}
想实现多个router-view就要使用components，并在里面配置router-view的name属性对应的组件。
default是默认路由，就是不设置路由的router-view都会显示default指向的组件。

三十一、less特性

变量 、混合、嵌套规则、 运算 、函数 、命名空间 、作用域、注释、导入（import）
https://blog.csdn.net/u014695532/article/details/50957356

三十二、deep

引用了第三方组件库，只需要在当前页面修改第三方组件库的样式以做到不污染全局样式。通过在样式标签上使用scoped达到样式只制作用到本页面。
但有时又需要调整组件的样式，在含有scoped的style里里面在写样式对子组件是不生效的。
以前都是再加一个不含scoped的style标签，通过外层组件添加唯一class来区分组件，修改各种第三方组件的样式。

三十三、弹性布局

.flex-container {
flex-direction: row | row-reverse | column | column-reverse; //方向
flex-wrap: nowrap | wrap | wrap-reverse; //换行
align-items：stretch center flex-start flex-end baseline //纵轴对齐
justify-content：flex-start flex-end center space-between space-around
//横轴对齐方式
}
.flex-container .flex-item {
order: ; //用整数值来定义排列顺序
flex-grow: ; //扩展的量
flex-shrink: ; //收缩量
flex-basis: | auto; //规定元素的初始长度。

三十四、超出隐藏

overflow:hidden;
text-overfollw:ellipesis;
white-spce:nowrap
=超出两行隐藏：
display：-webkit-box; //将对象作为弹性伸缩盒子模型显示
-webkit-box-orient:vertical; //设置盒子子元素排列方式
-webkit-line-clamp:2; //显示的行数

三十五、axios和ajax的区别

三十六、取消默认事件，取消冒泡

取消冒泡：
window.event? window.event.cancelbubble = true : e.stoppropagation();　　　　//兼容的写法
取消默认事件：
w:preventdefault()，ie:returnvalue = false; return false；

三十七、连接数组，数组\字符串方法

数组：
pop（）删除最后一个、push()向末尾添加
shift()删除第一个、unshift()开头添加
splice()添加、删除 ; slice()截取数组
reverse()颠倒、sort()排序
concat()连接数组；
jion()以分隔符拼接为字符串，tostring()
字符串：
charat()提取字符；charcodeat()提取字符编码；
cancat()连接字符串；
indexof()搜索字符串；lastindexof()从后搜索一个字符串；
mactch()正则匹配字符串；replace()正则替换字符串；search()正则匹配位置
slice()提取子串substr()、substring()
split()分割为数组
tolowercase()化为小写、touppercase()化为大写
trim()去掉前后空白符

三十八、路由守卫

全局：beforeeach,beforeresolve(异步路由组件被解析之后),fatereach
路由独享：beforeenter
组件内：beforerouteenter、beforerouterupdate、beforerouterleave

三十九、高并发请求

·利用缓存，精简请求
·合并压缩
·静态资源上传cdn
·避免高频刷新页面获取数据
·设置响应头cache-control和last-modified 设置请求间隔

总结

以上是凯发k8官方网为你收集整理的2020前端面试总结的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。