前端常見面試題（二）————前端

小小的提一下，面試時，面試官很喜歡看你的專案實踐，就看你做過什麼專案，如果一個都不寫，可能會跪，然後圍著你的專案去問細節。（自己做些專案很重要）

正文部分：

1.var,let,const的區別：

(1).var可以變數提升：啥是變數提升？

var a=10   //全域性變數
function fn() {
  console.log(a);//輸出undefined
  var a=20;//var會把a這個宣告提到作用域的頂端，var a；
  console.log(a);//20
}
fn()
console.log(a);//10

//上面的程式碼與下面的等同！

var a=10   //全域性變數
function fn() {
  var a;  //只是宣告放在頂端，值還在原來的位置！！！！而且以宣告就把a區域性重置了！！！
  console.log(a);//輸出undefined，a區域性重置了，重置了還沒有值！！！
  a=20;//var會把a這個宣告提到作用域的頂端，var a；
  console.log(a);//20
}
fn()
console.log(a);//10
 

變數提升：只提宣告，不提數值的！

注：class宣告類時，不存在變數提升。

(2).let和const宣告只在他宣告的程式碼塊裡面有效果。

(3).const聲明後不能修改，宣告必賦值！

注：const宣告一物件，可以使用Object.freeze()來鎖死數值。

2.js的基本資料型別：

boolean，null，number，underfined，string，Object，symbol（es6新增）

那麼symbol是啥呢？

• 表示獨一無二的值
• 宣告時可以加引數，用與描述
• 作為key時不能被遍歷

3.移動端如何實現自適應？

1. bootstrap 等ui框架
2. rem
3. vw和vh

4.你是怎麼學前端的，你是怎麼學某某技術（vue）的？

一般這題應該是看看你是不是培訓班出來的。其實我也不知道，他問這個的具體意義。

5.如何解決跨域問題：

跨域問題是每一個前後端分離都會遇到的。

無法跨域一般都會報錯：。。。。cors。。。。

說明cors這就是問題所在。主要是通過設定，access-control-allow-origin來實現的。

我用的是node，通過安裝cors依賴。

//cors跨域問題
const cors = require('cors');  
app.use(cors({  
    origin:['http://localhost:8080'],
    methods:['GET','POST'],
}));

//跨域問題解決方面
app.all('*',function (req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
　next();　
});
 

兩種都行，你不確定就一起用了吧。

6.xml與json的區別：

個人喜歡json，資料簡潔明瞭，而且還好呼叫，小程式，web應用，網站用這資料很方便。

• 體積：json相對於xml來說，體積更小，傳遞速度更快。
• 互動：json與js的互動更加方便，更加容易解析處理，更好的資料互動。
• 級別：xml是重量級的，json是輕量級的。
• 描述：json對資料描述性比xml的差。
• 解析：json可用jackson，gson等方法解析，xml可用dom，sax，demo4j等方式解析。

7.Vue 有哪些指令？

v-html，v-show，v-if（v-else-if，v-else），v-for，v-cloak，v-text，v-bind，v-model，v-pre

8.前端如何優化網站效能？

1. 減少 HTTP 請求數量
   • CSS Sprites：國內俗稱 CSS 精靈，這是將多張圖片合併成一張圖片達到減少 HTTP 請求的一種解決方案，可以通過 CSS background 屬性來訪問圖片內容。這種方案同時還可以減少圖片總位元組數。
   • 合併 CSS 和 JS 檔案：現在前端有很多工程化打包工具，如：grunt、gulp、webpack等。為了減少 HTTP 請求數量，可以通過這些工具再發布前將多個 CSS 或者 多個 JS 合併成一個檔案。
   • 採用 lazyLoad：俗稱懶載入，可以控制網頁上的內容在一開始無需載入，不需要發請求，等到使用者操作真正需要的時候立即加載出內容。這樣就控制了網頁資源一次性請求數量。
2. 控制資原始檔載入優先順序
   • 瀏覽器在載入HTML內容時，是將HTML內容從上至下依次解析，解析到link或者script標籤就會載入href或者src對應連結內容，為了第一時間展示頁面給使用者，就需要將CSS提前載入，不要受 JS 載入影響。
   • 一般情況下都是CSS在頭部，JS在底部
3. 減少DOM操作和圖示使用iconfont代替。多利用瀏覽器快取。

9.對以後自己的前端職業路線，怎麼規劃？

這東西都是自由發揮的，可能說好點能加印象分。

10.前端頁面有哪三層構成， 分別是什麼?作用是什麼?

結構層 Html ，表示層 CSS ，行為層 js。

11.行內元素有哪些?塊級元素有哪些?CSS 的盒模型?

塊級元素： div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
Css 盒模型:內容， border ,margin， padding

12簡介盒子模型：

CSS 的盒子模型有兩種： IE 盒子模型、 標準的 W3C 盒子模型模型
盒模型： 內容、 內邊距、 外邊距（ 一般不計入盒子實際寬度） 、 邊框

13.Sass、 LESS 是什麼？ 大家為什麼要使用他們？

他們是 CSS 前處理器。 他們是 CSS 上的一種抽象層。 他們是一種特殊的語法/語言編譯成 CSS。
例如 Less 是一種動態樣式語言. 將 CSS 賦予了動態語言的特性， 如變數， 繼承， 運算， 函式. LESS 既可以在客戶端上執行 (支援 IE 6+, Webkit, Firefox)， 也可一在服務端執行(藉助 Node.js)。
為什麼要使用它們？
結構清晰， 便於擴充套件。
可以方便地遮蔽瀏覽器私有語法差異。 這個不用多說， 封裝對瀏覽器語法差異的重複處理，減少無意義的機械勞動。可以輕鬆實現多重繼承。

完全相容 CSS 程式碼， 可以方便地應用到老專案中。 LESS 只是在 CSS 語法上做了擴充套件， 所以老的 CSS 程式碼也可以與 LESS 程式碼一同編譯。

14.CSS 中 link 和@import 的區別是：

Link 屬於 html 標籤， 而@import 是 CSS 中提供的
在頁面載入的時候， link 會同時被載入， 而@import 引用的 CSS 會在頁面載入完成後才會載入引用的 CSS
@import 只有在 ie5 以上才可以被識別， 而 link 是 html 標籤， 不存在瀏覽器相容性問題
Link 引入樣式的權重大於@import 的引用（ @import 是將引用的樣式匯入到當前的頁面中