初級走向中級前端(帶答案)

最近面試了 不少1-2年的前端，網上手機了一些 問題和答案，發出來 但願能幫助到你們~

CSS篇

IOS手機瀏覽器字體齒輪

修改-webkit-font-smoothing屬性

結果是：-webkit-font-smoothing: none: 無抗鋸齒-webkit-font-smoothing: antialiased | subpixel-antialiased | default: 灰度平滑

怎麼讓Chrome支持小於12px 的文字？

咱們的作法是：

針對谷歌瀏覽器內核，加webkit前綴，用transform:scale()這個屬性進行縮放！ p span {font-size:10px;-webkit-transform:scale(0.8);display:block;}

CSS預處理器(Sass/Less/Postcss)

CSS預處理器的原理： 是將類 CSS 語言經過 Webpack 編譯 轉成瀏覽器可讀的真正 CSS。

在這層編譯之上，即可以賦予 CSS 更多更強大的功能，經常使用功能： 嵌套 變量 循環語句 條件語句 自動前綴 單位轉換 mixin複用

JS

網站js和css如何壓縮？有哪些方法？

概念性知識點： 在線壓縮js/css

http請求問題，HTTP請求信息由哪3部分組成？

1. 請求方法URI協議/版本 （例如：GET/haorooms.jspHTTP/1.1）
2. 請求頭(Request Header)（例如：Accept:image/gif.image/jpeg./ Accept-Language:zh-cn Connection:Keep-Alive Host:localhost等等）
3. 請求正文

前端性能優化問題，你是如何處理前端性能問題的？

www.haorooms.com/post/web_xn… 及 前端性能優化補充篇

寫出最簡單JS的去重方式 （重災區）

• es6的new Set()方式

let array = [0, 3, 4, 5, 3, 4, 7, 8, 2, 2, 5, 4, 6, 7, 8, 0, 2, 0, 90];
[...new Set(array)]
複製代碼

• es5的Array filter()

[1, 3, 4, 5, 1, 2, 3, 3, 4, 8, 90, 3, 0, 5, 4, 0].filter(function (elem, index, Array) {
  return index === Array.indexOf(elem);
})
複製代碼

谷歌瀏覽器運行下面代碼，並解釋！

[].forEach.call($$("*"), function (a) {
  a.style.outline = "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16)
})
複製代碼

運行上面代碼以後，會發現HTML層都被使用不一樣的顏色添加了一個高亮的邊框。爲何會這樣呢？

• 原理解析：

1. $$("*") 以數組的形式返回頁面全部元素
2. .forEach 。這是一種簡寫，完整的寫法應該是這樣：Array.prototype.forEach.call(...);很顯然，簡寫更方便。
3. .call 是一個prototype，JavaScript函數內置的。 .call 使用它的第一個參數替換掉上面說的這個 this ，也就是你要傳人的數組
4. 所以, [].forEach.call() 是一種快速的方法訪問 forEach ，並將空數組的 this 換成想要遍歷的list。

如何處理緩存？如何清除緩存。

ajax隨機數、ajax參數、meta中設置等。. 能夠看下我寫的 js清除瀏覽器緩存的幾種方法

• meta方法

//不緩存
   <META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
   <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> 
   <META HTTP-EQUIV="expires" CONTENT="0">
複製代碼

• jquery ajax清除瀏覽器緩存

1. 用ajax請求服務器最新文件，並加上請求頭If-Modified-Since和Cache-Control,以下:
    beforeSend :function(xmlHttp){ 
        xmlHttp.setRequestHeader("If-Modified-Since","0"); 
        xmlHttp.setRequestHeader("Cache-Control","no-cache");
     },
2. 直接用cache:false
3. 用隨機數，隨機數也是避免緩存的一種很不錯的方法！
    URL 參數後加上 "?ran=" + Math.random(); //固然這裏參數 ran能夠任意取了
4. 用隨機時間，和隨機數同樣。
    在 URL 參數後加上 "?timestamp=" + new Date().getTime();
複製代碼

Websocket

Websocket 是一個 持久化的協議， 基於 http ， 服務端能夠 主動 push

• 兼容：

FLASH Socket 長輪詢： 定時發送 ajax long poll： 發送 --> 有消息時再 response

let ws = new WebSocket(url);
 /* 收到消息回調 */
  ws.onmessage = onMessage;
  /* 鏈接斷開回調 */
  ws.onclose = onClose;
  /* 鏈接成功回調 */
  ws.onopen = onOpen;
複製代碼

解決跨域問題

1. JSONP：利用<script>標籤不受跨域限制的特色，缺點是隻能支持 get 請求
2. 服務端設置請求頭： CORS: Access-Control-Allow-Origin：*
3. postMessage

框架：Vue全家桶

vue-router 如何作歷史返回提示？

能夠查看我以前發佈的文章

vue-router 如何作用戶登陸權限等？

實際上就是應用了vue-router提供的router.beforeEach來註冊一個全局鉤子 官網導航守衛介紹

vue組件通訊

不少人都說不全，不知道是 不用仍是不看重. 這個帖子寫的很全

1. props和$emit
2. listeners
3. 中央事件總線
4. provide和inject
5. v-model
6. children
7. boradcast和dispatch
8. vuex處理組件之間的數據交互

vue服務器渲染

vue性能優化

vue-router 模塊的 router-link 組件。

官網詳情介紹

vue-router有哪幾種導航鉤子？

三種：

1. 是全局導航鉤子：router.beforeEach(to,from,next)，做用：跳轉前進行判斷攔截。
2. 組件內的鉤子
3. 單獨路由獨享組件

scss是什麼？在vue.cli中的安裝使用步驟是？有哪幾大特性？css的預編譯。

使用步驟：

• 第一步：用npm 下三個loader（sass-loader、css-loader、node-sass）
• 第二步：在build目錄找到webpack.base.config.js，在那個extends屬性中加一個拓展.scss
• 第三步：仍是在同一個文件，配置一個module屬性
• 第四步：而後在組件的style標籤加上lang屬性 ，例如：lang=」scss」

有哪幾大特性:

1. 能夠用變量，例如（$變量名稱=值）
2. 能夠用混合器，例如（）
3. 能夠嵌套

Vue的雙向數據綁定原理是什麼？###

vue.js 是採用數據劫持 結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。

請詳細說下你對vue生命週期的理解？

總共分爲8個階段 建立前/後，載入前/後，更新前/後，銷燬前/後

1. 建立前/後： 在beforeCreated階段，vue實例的掛載元素 $el 和數據對象data都爲undefined，還未初始化。 在created階段，vue實例的數據對象data有了，$el尚未。

2. 載入前/後： 在beforeMount階段，vue實例的$el和data都初始化了，但仍是掛載以前爲虛擬的dom節點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message成功渲染。

3. 更新前/後： 當data變化時，會觸發beforeUpdate和updated方法。

4. 銷燬前/後： 在執行destroy方法後，對data的改變不會再觸發周期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，可是dom結構依然存在

請說出vue.cli項目中src目錄每一個文件夾和文件的用法？

• assets文件夾是放靜態資源；
• components是放組件；
• router是定義路由相關的配置;
• view視圖；
• app.vue是一個應用主組件；
• main.js是入口文件

自動化測試相關、mock數據相關、 webpack相關

這個考察你對webpack的理解是使用程度。

例如可能考察以下知識點：

1. hash（contenthash, chunkhash）
2. 多頁面配置
3. 發佈上線流程
4. 如何加快打包速度，減小打包體積
5. 和其餘工具的區別（grunt,glup,rollup,parcel,Browserify）

若是能看到這裏的朋友都很不錯~

前端面試基礎(1年之內需掌握)

有get到幫助的，能夠 圈一下~ 謝謝！