2020前端面试总结

一、前端安全问题

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 设置请求间隔