一、前端安全問題

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 設置請求間隔

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。