一、前端安全問題

1.xss攻擊（跨站腳本攻擊）
2.csrf攻擊（跨站請求偽造）
3.點(diǎn)擊攻擊（內(nèi)嵌ifame）

二、防抖節(jié)流

防抖:
在第一次觸發(fā)事件時(shí)，不立即執(zhí)行函數(shù)，而是給出一個(gè)期限值比如200ms。(比如滾動(dòng)監(jiān)聽，一直按方向鍵就一直會(huì)觸發(fā)）
節(jié)流：
即使用戶不斷拖動(dòng)滾動(dòng)條，也能在某個(gè)時(shí)間間隔之后給出反饋。
讓函數(shù)執(zhí)行一次后，在某個(gè)時(shí)間段內(nèi)暫時(shí)失效，過了這段時(shí)間后再重新激活

三、作弊檢測

監(jiān)聽VisibilityChange事件，當(dāng)頁面不可見的時(shí)候就會(huì)documnet.visibilitystate==”hide”

四、項(xiàng)目加密的方式

一次des加密，再md5加密，再des加密。秘鑰保存在全局變量中，不會(huì)直接暴露。但還是可查。

五、打包配置內(nèi)容

·UnlifyJsPlugin：js壓縮、去除console.log、
·構(gòu)建時(shí)開啟多進(jìn)程處理編譯
·配置fav-icon
·gzip壓縮
·自定義輸出目錄
·圖片壓縮
·配置跨域

六、Express如何與前端建立連接

引入express、新建express對象、配置跨域、app.get（post）定義接口、server.listen起服務(wù)

七、Express常用Api

req.query：獲取URL的查詢參數(shù)串
req.body: 獲取請求主體（post數(shù)據(jù)，需要設(shè)置中間件函數(shù) json與urlencode）
req.cookies：獲取Cookies (需要使用 cookie-parser 中間件)
req.hostname / req.ip：獲取主機(jī)名和IP地址
req.params：獲取路由的parameters
req.path：獲取請求路徑
req.protocol：獲取協(xié)議類型
req.get()：獲取指定的HTTP請求頭

res.header()：設(shè)置請求頭
res.status()：設(shè)置HTTP狀態(tài)碼
res.send()：傳送HTTP響應(yīng)
res.redirect()：設(shè)置響應(yīng)的Location HTTP頭，并且設(shè)置狀態(tài)碼302
res.json()：傳送JSON響應(yīng)
res.cookie(name，value [，option])：設(shè)置Cookie
res.clearCookie()：清除Cookie
res.download()：傳送指定路徑的文件
res.sendFile(path [，options] [，fn])：傳送指定路徑的文件 -會(huì)自動(dòng)根據(jù)文件extension設(shè)定Content-Type
res.render(view [, locals] [, callback]) 渲染一個(gè)view

八、Express連接數(shù)據(jù)庫

·安裝、引入MySQL；
·配置mysql（服務(wù)器地址，數(shù)據(jù)庫，密碼等）；
·使用連接池，避開太多線程，提升性能；
·pool.getConnection()連接數(shù)據(jù)庫

九、SSL證書的配置

本地讀取ssl證書；使用https創(chuàng)建一個(gè)服務(wù)，并將ssl加入進(jìn)去；然后監(jiān)聽一個(gè)端口

十、Linux搭建node環(huán)境

下載node安裝包Wget +地址；解壓安裝包tar xvf ；創(chuàng)建軟連接，在任意目錄下直接使用node和npm;npm下載一個(gè)pm2，pm2可以實(shí)現(xiàn)自動(dòng)起服務(wù)。

十一、MySql數(shù)據(jù)庫的配置

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

十三、線上導(dǎo)入數(shù)據(jù)庫

用可視化工具navicat導(dǎo)出為sql文件；查看數(shù)據(jù)庫show databases；切換數(shù)據(jù)庫use xxx;
Source 文件路徑；查看表show tables；

十四、國際化的配置

安裝vue-i18n;創(chuàng)建i18n文件夾；創(chuàng)建語言文件；放到message對象中一并導(dǎo)出。I18n引入message；掛載到i18n實(shí)例中；最后在main.js中引入i18n,掛載到vue實(shí)例上；
使用：$t“message.key”/this.$t{“message.key”}
切換：this.$i18n.locacl = “cn”

十五、上傳文件的實(shí)現(xiàn)

el-upload;
before-upload //上傳前的鉤子
on-change //文件狀態(tài)改變
on-success

十六、語音轉(zhuǎn)文字SDK的集成

微軟的api

十七、Websocket是什么？與ajax有什么區(qū)別？

十八、webcoket是怎么使用的

十九、原生Audio播放事件

@loadstart="onloadstart" //開始加載@loadedmetadata="onLoadedmetadata"@play="onPlay" //開始@pause="onPause"@waiting="onWaiting" //開始等待@playing="onplaying" //緩沖下一幀就緒@loadeddata="onloadeddata" //沒有足夠的數(shù)據(jù)來播放指定音頻@timeupdate="onTimeupdate" //更新視頻流@error="onerror"

this.audio.currentTime //當(dāng)前播放時(shí)間
this.audio.maxTime //音頻時(shí)長
this.audio.volume //音量

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

Boble

二十一、動(dòng)畫效果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屬性，時(shí)間，速度曲線、延遲觸發(fā)
animation: name duration timing-function delay iteration-count direction;
animation:keyframe的名稱，時(shí)間，速度曲線，延遲觸發(fā)，播放次數(shù)，反向播放
transform: translate(10px, 10px) scale(x, y) rotate(10deg);
位移、縮放、旋轉(zhuǎn)

二十二、webapck相關(guān)

二十三、頁面性能優(yōu)化

打包壓縮、gizp壓縮、精靈圖、圖片懶加載、圖片壓縮、避免重定向、緩存頁面

二十四、懶加載怎么實(shí)現(xiàn)、原理

二十五、前端埋點(diǎn)

二十六、移動(dòng)端適配和響應(yīng)式網(wǎng)站的實(shí)現(xiàn)方式

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

二十七、TypeScript的特點(diǎn)

TypeScript 是 JavaScript 的一個(gè)超集，主要提供了類型系統(tǒng)和對 ES6 的支持；
編譯時(shí)檢查、類型檢測、ES6規(guī)范，js超集。

二十八、深淺拷貝

對淺拷貝的值做修改的話，會(huì)改變被拷貝者的值，深拷貝不會(huì)
淺拷貝：賦值修改
深拷貝：Json.parse();object.assign()

二十九、promise異步

async/await;
Promise
$nexttick

三十、兩個(gè)路由出口

{
path:‘double’,
components: {
default:resolve=>require([’…/components/Vue06-a.vue’],resolve),
bottom:resolve=>require([’…/components/Vue06-b.vue’],resolve)
}
}
想實(shí)現(xiàn)多個(gè)router-view就要使用components，并在里面配置router-view的name屬性對應(yīng)的組件。
default是默認(rèn)路由，就是不設(shè)置路由的router-view都會(huì)顯示default指向的組件。

三十一、less特性

變量 、混合、嵌套規(guī)則、 運(yùn)算 、函數(shù) 、命名空間 、作用域、注釋、導(dǎo)入（Import）
https://blog.csdn.net/u014695532/article/details/50957356

三十二、deep

引用了第三方組件庫，只需要在當(dāng)前頁面修改第三方組件庫的樣式以做到不污染全局樣式。通過在樣式標(biāo)簽上使用scoped達(dá)到樣式只制作用到本頁面。
但有時(shí)又需要調(diào)整組件的樣式，在含有scoped的style里里面在寫樣式對子組件是不生效的。
以前都是再加一個(gè)不含scoped的style標(biāo)簽，通過外層組件添加唯一class來區(qū)分組件，修改各種第三方組件的樣式。

三十三、彈性布局

.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: ; //用整數(shù)值來定義排列順序
flex-grow: ; //擴(kuò)展的量
flex-shrink: ; //收縮量
flex-basis: | auto; //規(guī)定元素的初始長度。

三十四、超出隱藏

Overflow:hidden;
Text-overfollw:ellipesis;
White-spce:nowrap
+=超出兩行隱藏：
Display：-webkit-box; //將對象作為彈性伸縮盒子模型顯示
-webkit-box-orient:vertical; //設(shè)置盒子子元素排列方式
-webkit-line-clamp:2; //顯示的行數(shù)

三十五、axios和ajax的區(qū)別

三十六、取消默認(rèn)事件，取消冒泡

取消冒泡：
window.event? window.event.cancelBubble = true : e.stopPropagation();　　　　//兼容的寫法
取消默認(rèn)事件：
w:preventDefault()，ie:returnValue = false; return false；

三十七、連接數(shù)組，數(shù)組\字符串方法

數(shù)組：
pop（）刪除最后一個(gè)、push()向末尾添加
shift()刪除第一個(gè)、unshift()開頭添加
Splice()添加、刪除 ; slice()截取數(shù)組
Reverse()顛倒、sort()排序
concat()連接數(shù)組；
Jion()以分隔符拼接為字符串，toString()
字符串：
Charat()提取字符；charCodeAt()提取字符編碼；
Cancat()連接字符串；
Indexof()搜索字符串；lastIndexOf()從后搜索一個(gè)字符串；
Mactch()正則匹配字符串；replace()正則替換字符串；Search()正則匹配位置
Slice()提取子串substr()、substring()
split()分割為數(shù)組
TolowerCase()化為小寫、toupperCase()化為大寫
Trim()去掉前后空白符

三十八、路由守衛(wèi)

全局：beforeEach,beforeResolve(異步路由組件被解析之后),faterEach
路由獨(dú)享：beforeEnter
組件內(nèi)：beforeRouteEnter、beforeRouterUpdate、beforeRouterLeave

三十九、高并發(fā)請求

·利用緩存，精簡請求
·合并壓縮
·靜態(tài)資源上傳cdn
·避免高頻刷新頁面獲取數(shù)據(jù)
·設(shè)置響應(yīng)頭cache-control和last-modified 設(shè)置請求間隔

總結(jié)

以上是生活随笔為你收集整理的2020前端面试总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。