2018年10月份面試題
本身的一些面試題，從十月份中旬差很少，面試官問個人一些問題，也有些問題我也是沒寫，大家多多補充哈~哈哈哈哈php
1. ajax的數據請求解析（js的數據對接）css
2. ajax的狀態html
·200 表示請求成功前端
·304 自從上次請求過，請求頁面未修改過vue
·401 請求要求身份驗證jquery
·403 請求失敗，請求的資源未被服務器發現webpack
·500 服務器代碼出現錯誤ios
·504 超時es6
3. 對前端的化有什麼好的優化(性能的優化)web
-
- 減小http的請求
- 避免空的src和href
- 使用gzip壓縮內容
- 把css放到頂部 js放到底部
- 避免使用css
- 精簡css和js
4. 界面的優化（代碼方面）
-
- 字符串的拼接儘可能不用使用join
- 少使用全局變量
5. 圖片的預加載
http://www.javashuo.com/article/p-udpcdgeu-br.html
使用css+js進行圖片的預加載，在css中設置background背景圖
6. vue的生命週期
-
- beforeCreate
- Created
- beforeMount
- Mounted
- beforeUpdate
- Updated
- beforeDestory
- Destoryed
- deactivated
- activated
7. 怎麼解決跨域
-
- 第一個：Jsonp解決跨域
- 動態建立script標籤，src，回調函數
- jsonp只可使用get不可使用post請求
- 第二個： CORS
- 是跨域資源共享，根據php設置請求頭就能夠
8. es6中的模板字符串
-
- 用反引號（``）標識，用${}將變量括起來
- 使用模板字符串標識多行字符串，全部的空格和縮進都會被輸出
- 模板字符串可使用變量或者不是用變量也能夠
9. es6中怎麼定義類 class
有兩種聲明方式
-
- 類聲明
Class personal{}
-
- 類表達式
var personal = Class {}
10. 用ajax怎麼解決異步的問題
11. vue的全家桶
項目構建工具 路由 狀態管理 http請求工具
vue vue-router vuex axios
12. h5的存儲和區別
（sessionStorage，localStorage, cookie）
13. 前端的存儲還有哪些
離線緩存 application cache
14. SPA PWA
-
- SPA 單頁面應用
15. vue中的修飾符
.native 用在組件上的 .trim 去除空格 .stop/.prevent 阻止事件冒泡/阻止默認行爲 .once 表示綁定事件只會被觸發一次
16. 組件，通用型的組件
父傳子 props 可使用對象/數組
子傳父 $emit
同級傳參 $bus.$emit
17. vue有哪些不足，SEO，vue的服務端渲染
18. vuex， maxmin屬性方法是同樣的，用它就能夠。
19. 作項目的時候遇到的問題
20. vue中不用自動創建的router，手動怎麼弄
同36
21. vue的自定義事件
html:
<div id=’button-event’>
<button-counter></button-counter>
</div>
js:
Vue.component(‘button-counter’,{
Data:function() {},
Methods:function(){}
})
new Vue({
el:#button-event,
data: {}
})
22. js的面向對象的三個特性
23. 什麼是面向對象
24. vue打包 npm build 通常狀況下，開發環境，測試環境，正式環境，接口地址不同，怎麼在編譯完會是開發環境，測試環境，正式環境。
這三個問題大家就本身個搜吧，
25. mvvm和mvc的區別
-
- 與任何語言是沒有關係的, 是一種設計模式
- mvvm ： m –> model v –> view vm - > viewmodel 通訊是雙向
- mvc : m –> model v - > view c - > control 單向傳輸
- mvvm解決了mvc的大量dom操做頁面渲染性能下降，加載速度變慢，影響用戶體驗。
26. token怎麼傳輸的
- post
- 獲取到的token值放入data中
這跟問題面試官問我，是我在作項目中有使用token
27. vue雙向數據綁定的原理
-
- 數據劫持結合發佈者訂閱者模式實現的
- object.defineProperty 是控制對象屬性的一些操做 屬性有 get set
28. pc端的兼容問題
1. 在IE9下若是圖片加a標籤會有邊框 解決： img{border: none}
2. rgba不支持ie8 解決: 換opacity
3. display: inline-block IE6不支持 解決：display:inline
29. vue-router怎麼使用的
-
- 下載 vue-router
- 註冊 Vue.use(router)
- export default new Router
- {path: ‘’」, component: 「」}
- <router-linke ：to></router-linke> <router-view></router-view>
30. swiper插件用的時候有哪些問題
-
- 必須指定下載swiper插件的版本號，否則不顯示分頁器
- 要想有分頁器顯示，必須寫solt=
- swiper雖然有本身的高度，但仍是須要手動設置
31. vuex怎麼使用的
什麼是Vuex？
官方說法：Vuex 是一個專爲 Vue.js應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
我的理解：Vuex是用來管理組件之間通訊的一個插件
- 下載vuex –save
- 引入vuex Vue.use(vuex) import
- 創建新的文件夾和文件
const store = new Vuex.store({
state:{} // 存儲數據，像data同樣
mutations: {} // 遞交更改 對state中屬性數據進行更改
actions:{} // 遞交異步更改，經過調用mutations實現對數據的更改
})
32. 獲取到的狀態怎麼存儲的
cookie， localStorage， sessionStorage
localStorage， sessionStorage 不會把數據發送給服務器，僅保存在本地
cookie 在瀏覽器請求頭活ajax請求頭中發送cookie內容
33. 打包的時候有的時候js文件太大，怎麼解決
1.開啓gzip，將文件打包成gzip格式
2. 按需加載js http請求
3. 將圖片懶加載
34. for in 和for of的區別
-
- for in也能夠遍歷數組，可是會出現問題，使用for in能夠遍歷出全部數組可枚舉屬性，包括原型，因此仍是儘量的遍歷對象而不是數組 遍歷的是數組的索引
- for of遍歷的只是數組內的元素，不會遍歷原型 遍歷的是數組的元素值
35. vuex是什麼，在什麼狀況下爲用到它
-
- vuex是狀態管理，採用集中式存儲管理應用的全部組件的狀態，我的理解是管理組件之間通訊的一個插件
36. keepAlive緩存實現的機制是什麼
37. keepAlive的數據是存到什麼地方的
38. localStorage怎麼失效
像這些問題都很簡單吧，本身組織語言吧，打字是在太累
39. h5的存儲都適用哪些場景，都分別能用來作什麼事情
使用場景：
-
- localStorage用來統計頁面的訪問次數
- sessionStorage 用來統計當前頁面元素的點擊次數
- cookie通常存儲用戶名密碼相關信息，通常使用escape轉移編碼後儲存
作什麼事情：
·localStorage， sessionStorage 不會把數據發送給服務器，僅保存在本地
cookie 在瀏覽器請求頭活ajax請求頭中發送cookie內容
40. 怎麼優化頁面的加載速度，提高頁面效率，性能
優化頁面的加載速度：
-
- 啓用gzip壓縮
- 壓縮css和js
- 把css文件放在頁面頂部，js放在放在底部
- 使用雪碧圖整合圖像
提高頁面效率和性能：
-
- 減小http請求 按需加載
- 避免css表達式
41. iframe
42. 遇到過跨域的問題麼，什麼狀況下瀏覽器會禁止你有一些操做，用在什麼標籤，什麼場景會遇到跨域
跨域：jsonp iframe cors 反向代理
什麼場景會遇到跨域：
-
- 域名不一樣
- 二級域名相同，子域名不一樣 www.wuhan,yangwei.com www.shenzheng.yangwei.com
- 端口不一樣，協議不一樣
43. 響應式
-
- 響應式佈局就是網頁可以響應各類個樣不一樣分辨率大小的設備，可以將網頁很好的呈現給用戶
44. js的閉包能夠用來作什麼事情，能用來幹什麼，解決什麼問題
用來作什麼事情：
-
- 匿名自執行函數
- 緩存
- 實現封裝函數
解決什麼問題：
-
- 一個變量長期存儲在內存當中不會被垃圾機制回收
- 避免全局污染
- 安全性提升
45. http請求中post和get的區別
·get是從服務器上獲取數據 放在url後面 get有大小的限制
·post是向服務器傳送數據 放在虛擬載體裏面
·安全問題
46. 簡述一下es6
-
- 模版字面量 `${}` ``反引號表示，用${}將變量括起來
- 擴展運算符 …
- 箭頭函數 =>
- 數組的去重 set
- 異步編程 promise
三種狀態：進行中pending 已成功fulfilled resolved 已失敗 rejected
promise也有缺點：沒法取消，一旦新建它就會當即執行，沒法中途取消，promise內部拋出的錯誤，不會影響到外部。
- const let 區別
const不能夠不初始化變量 不能夠重複定義，定義常量
let 是定義變量，用法相似於var，可是所聲明的變量，只在let命令所在的代碼塊內有效。
47. 移動端遇到較多的兼容性問題
-
- 評論框
- 文本框圓角bug
- 動態獲取中間內容
48. element-ui
49. vue的多頁面，多頁面的訪問，配置（多頁面訪問單頁面須要改寫什麼文件）
-
- https://www.jb51.net/article/124124.htm
- 下載glob，
- 修改build下的文件webpack.back.conf.js
50. history，hash，上線以後非history模式打包以後沒辦法正常訪問的（JAVA後臺語言）
·使用非history模式打包以後是沒法正常訪問的，因此都會使用hash模式就會避免這個問題
51. 什麼是僞數組
·沒法直接調用數組方法，但仍可用遍歷數組的方法遍歷
52. transform 變形 rotate scale skew
translate 移動 translatex translatey translatez
transiton 過渡 duration timing
53. Vue-router中的鉤子函數(導航守衛)
可分爲三類:
·beforeEach 有三個刪除參數 to from next
Router.beforeEach((to,from,next))
·afterEach 不用傳next()函數 單個路由裏面的鉤子
{
Path:’’,
Component:,
beforeEnter:(to,from,next)=>{}
}
·組件路由
BeforeRouter , beforeRouterUpdate, beforeRouteLeave
54. this.$route 和this.$router的區別
·$route是路由信息對象，包含了path，params，query，hash，fullPath，matched，name這些路由信息參數
·$router是路由實例對象包含了路由的一下跳轉方法，鉤子函數
55. Es6的模塊化
·每個模塊只加載一次，每個js只執行一次，若是下次再去加載同目錄下同文件直接讀取。一個模塊就是一個單例，或者說是一個對象；
·每個模塊內聲明的變量都是局部變量，不會污染全局做用域
·模塊內部的變量或者函數能夠經過export導出；
·一個模塊能夠導入別的模塊
Export default {}
Export const sqrt = Math.sqrt
Export function square () {}
56. Try catch 是幹什麼的
Try catch是異常捕獲
try{
有可能出現錯誤的代碼寫在這裏
}catch{
出錯後的處理
}
若是try中的代碼沒有出錯，則程序正常運行try中的內容後，不會執行catch中的內容。
若是try中的代碼一旦出現錯誤，程序當即跳入catch中去執行代碼，那麼try中出錯代碼後的全部代碼就不會執行。
57. 數組都有哪些數組和方法，es6有哪些新增的數組方法
·Shift() 刪除數組的開頭 unshift() 添加數組的開頭
Slice 開始到結束截取數組 splice() 經過刪除/添加現有元素更改數組內容
Sort() 對數組進行排序，並返回數組
Reverse 數組中元素位置顛倒
58. es6中的數組方法
Foreach() 改變數組自己
Map() 不會改變原數組
Filter() 不會改變原數組
59. Es5和es6新增的數據類型
Symbol Number Null Underfined Boolean
60. 閉包的優缺點
·缺點：不會回收垃圾機制回收，形成內存溢出
·優勢：一個變量長期駐紮在內存中不會被垃圾回收機制回收
避免全局的污染
安全性提升
61. 打包工具webpack的優化
http://www.javashuo.com/article/p-bsxukgru-hn.html
62. Less定義變量怎麼定義，爲何會用less
·定義變量用@
·Less中的寫法：
@ly_with:100px;
.box{width: @ly_width}
·編譯後的css中顯示
.box{widht:100px}
·項目足夠大，起碼幾十張頁面，有公共的ui組件
63. 怎麼引用相同的css到另外一個組件中
http://www.javashuo.com/article/p-xrhestnn-x.html
extend
64. 怎麼動態實現路由
http://www.javashuo.com/article/p-oeqzsqcs-cd.html
動態實現生成側邊欄
65. https和http的區別
http 是超文本傳輸協議，具備安全性的ssl加密傳輸協議。
https須要到ca申請證書，通常免費證書比較少，須要必定費用。
http的鏈接很簡單，是無狀態的；https協議是由ssl+http協議構建可進行加密傳輸，比http安全
66. http中的屬性都有哪些並說出是什麼
Url: 地址
Method：請求方式
Status code：狀態碼
Content-type:application/x-www-form-urlencoded/ multipart/form-data
Cookie
67. Display:inline-block和display:block的區別
display:block 轉換成塊元素，換行；
Display：inline-block；內聯塊元素，既不換行又可使用塊元素所擁有的屬性
68. Js中的原型鏈
prototype
69. Display後面都有哪些參數
Flex block inline-block inline
70. 說一下異步和同步
一種是同步任務（synchronous），另外一種是異步任務（asynchronous）。同步任務指的是，在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行後一個任務；異步任務指的是，不進入主線程、而進入"任務隊列"（task queue）的任務，只有等主線程任務執行完畢，"任務隊列"開始通知主線程，請求執行任務，該任務纔會進入主線程執行
71. Let和var的區別
let的好處是當咱們寫代碼比較多的時候能夠避免在不知道的狀況下重複聲明變量
經過var定義的變量，做用域是整個封閉函數，是全域的 。經過let定義的變量，做用域是在塊級或是子塊中。
72. Typeof有哪些類型
Undefined null string number function Boolean 都是字符串
73. 怎麼會讓圖片變小
圖片上傳的時候壓縮，
我來新添加面試題了，這本不是我意... 我今天本想寫一下我五個月以前用vue寫的移動端遇到的問題，誰讓我最近這腦子很差使，老是忘記把當初記在紙上的筆記拍下來，因此，我也是隻能來補充一下面試題了，此次的面試題是2018年5月份的面試題，本身親身經歷的。
74. 遇到哪些移動端適配問題（8和8p）屏幕大小的問題
· 評論框 （彈出的虛擬框遮住了評論框）
75. http請求的過程（三次握手）
· http請求格式主要有四部分：請求行，請求頭，空行，消息體
76. 瀏覽器加載html的過程
· 解析html結構（告知瀏覽器以什麼方式解決）
· 加載外部腳本和樣式表文件
· 解析執行腳本
· Dom樹構建完成
· 加載圖片等外部資源
· 頁面加載完畢
77. 實現一個長寬相等的盒子（移動端）不給固定的寬和高
· 媒體查詢
· width：100%；padding：10%；height:0；
78. css畫三角形
width：0；height：0；border：10px solid transparent；border-top：50px solid green;
考點：top：向下，bottom：向上，left：向右，right：向左。
79. slice和splice的區別
slice 不改變原數組， splice 改變原數組
80. 設置空心的三角形
· 放一條線，旋轉（rotate）三角形就是成爲一個空心的三角形 （面試官給個人答案）
· 寫一個實心的三角形，在寫一個實心的三角形比上一個小的並添加白色背景圖，覆蓋到第一個三角形上 （我本身想的）
81. 垂直居中的方法
· line-height
· display：table-cell；vertical-align：middle ；
· margin：0 au出to；
· position：absolute；top：0；left：0；right：0；bottom：0；margin： auto；
82. 對象的淺拷貝和深拷貝
對象的拷貝也就是複製，淺拷貝是指只拷貝對象自己，而不考慮對象的引用指向的對象，而深拷貝則將對象中的引用指向的全部對象一塊兒拷貝
當時面試官還給我出了淺拷貝和深拷貝的題，可是我沒記住他出的題，就不展現了
83. 數組去重
· Set （es6）
Array.from(new Set(arrat))
· let arr = [1,2,3,4,5]
let crr = []
for (var i=0;i<arr.length;i++){
if(crr.indexOf(arr[i]) == -1) {
crr.push(arr[i])
}
}
84. map, filter, foreach 遍歷數組
map 不會改變原數組
filter 不會改變原數組
foreach 改變原數組
85. 如何獲取cookie上的值
jquery： $.cookie('img') img 是動態的
js： document.cookie
86. 怎麼防止全局變量被污染？
· 定義全局變量命名空間
· 利用匿名函數將腳本包裹起來
87. 頁面的性能優化（js，css性能優化）
· 減小http的請求
· 開啓gzip壓縮
· 將樣式表放在頁面上方 （網頁從上往下執行，邊下載邊解析頁面元素）
· 腳本放在底部（瀏覽器js下載是並行的，下載時會組織頁面的一些加載順序）
· 精簡代碼
88. history 對象
· 瀏覽器記錄它走了幾步
· history.go(-n) 回到歷史記錄的前n步（後退一步）
· history.go(n) 前進一步
· history.forward() 前進一步
· history.back() 前一個頁面
89. window.location.search之外還有哪些
· location.href 返回當前加載頁面完整url
· location.hash 返回url中的hash，若是不包含則返回空字符串
· location.host 返回當前url的主機名稱和端口號
90. js的基本數據類型？判斷數據類型使用哪一個？
· 基本數據類型： undefined，null，string，number，boolean，一個複雜數據類型：object
· 判斷數據類型：typeof
91. instanceof 和typeof兩個有什麼區別？
· typeof判斷函數數據類型 -> typeof方法返回一個字符串，來表示數據的類型
· instanceof 判斷構造函數原型 -> 判斷一個構造函數的prototype屬性所指向的對象是否存在另外一個要檢測對象的原型鏈上
92. instanceof 能判斷出什麼
判斷函數的prototype屬性所指向的對象是否存在另外一個要檢測對象的原型鏈上
93. webpack和gulp的區別
· gulp嚴格上來講，模塊不是他強調的東西
· webpack更是強調模塊化開發，而那些文件壓縮合並，預處理等功能
94. webpcak使用的好處
· 最大的做用確實是把一切當成模塊，以及模塊打包能力
· 按需加載
· 處理文件的擴展名
· 加載器和插件
95. webpack打包過的包比較大，會怎樣？
· 打出的包打後面進行按需加載
· 去除沒必要要的插件
· 代碼的分割
· 代碼壓縮
累死人了，敲的這麼多字！好難過，這不是我想要的那種結果~
一下午寫了三篇，真的手都不知道該放哪裏了。
如今17：00我還有一個小時就下班了，再看這篇文章的大家呢。
我曾經看過這樣一句話，能夠不吃生活中的苦，但不能不吃奮鬥的苦。
不知道未來會發生什麼樣子的事情，不知道下一秒會出現什麼問題，但作好當前的事情，避免出現更多沒必要要的事情。
其實我是一個多麼活波愛說話的人，新入職這家人都不認識，天天說話都不會說太多，我很懷念我上一家的同桌（ios）~
2018-11-22/23
- 1. 2019年4月份面試筆試題
- 2. 2018年5月份
- 3. 2018年7月份，Spring經典面試題和答案
- 4. 2018年5月前端面試題
- 5. 2018年9月面試題彙總
- 6. 2020年五月份面試題總結
- 7. 2018面試總結（10月-11月）
- 8. 2018年10月自學考試總結
- 9. 2018年6月份總結
- 10. 2018年6月份安排
- 更多相關文章...
- • Lua 調試(Debug) - Lua 教程
- • Markdown 標題 - Markdown 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • PHP Ajax 跨域問題最佳解決方案
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 2019年4月份面試筆試題
- 2. 2018年5月份
- 3. 2018年7月份，Spring經典面試題和答案
- 4. 2018年5月前端面試題
- 5. 2018年9月面試題彙總
- 6. 2020年五月份面試題總結
- 7. 2018面試總結（10月-11月）
- 8. 2018年10月自學考試總結
- 9. 2018年6月份總結
- 10. 2018年6月份安排