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

  • 2019 年 10 月 18 日
  • 筆記

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

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

正文部分：

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 程式碼一同編譯。

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

VirMach 便宜 VPS

QNews

QNews