金三銀四求職季,前端面試題小梳理(HTML、CSS、JS)

很久沒寫學習記錄，最近太多事，又到一年求職季，都說金三銀四求職季，本身也作一下最近學習的一些前端面試題梳理，仍是個小白，寫的不對請指正，不勝感激。

_HTML篇

html語義化
　　用語義化的代碼標籤書寫，便於開發者閱讀同時對搜索引擎的查詢也更友好。

例如不濫用div；p標籤等，段落使用P，表頭使用thead包裹，內容使用tbody，尾部使用tfoot。

須要強調的文本，能夠包含在strong或者em標籤中（瀏覽器預設樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）等等

 

css篇

盒模型
　　ie盒模型：怪異模式；box-sizing：border-box
　　標準模型：標準模式；box-sizing：content-box

css reset和normalize.css的區別
　　都是重置瀏覽器css樣式，reset幾乎爲全部html標籤重置樣式，normalize保持了許多樣式
normalize修復了常見的桌面端和移動端的bug，reset有大量的繼承鏈，normalize模塊化，reset較normalize文檔豐富

居中方法

　　水平居中 ：①text-algin: center,

　　　　　 　　②margin: 0 auto //須要設置父級寬度,

　　垂直居中：①line-height: 高度,

　　　　   　　 ②position: absolute, top: 50%, margin-top: -50px,//已知寬度的一半

　　　　   　　③display: flex,flex-direction: colum, justify-content: center

　　　　 　　 ④父元素設置display: table,

　　　　　　　子元素設置vertical-algin:center,text-algin:center,display:table-cell

css優先級
　　!important > id > class > 標籤 > *；權值相同時，靠近元素的樣式優先級高 順序爲內聯樣式表（標籤內部）> 內部樣式表（當前文件中）> 外部樣式表（外部文件中）

清除浮動
　　目前用的最多的僞類清除

clearfix:after {
    content: '';
    display: block;
    height:0;
    overflow: hidden;
    clear: both;
}
clearfix {
    zoom: 1
}

自適應佈局
　　使用flex佈局
　　左側浮動或者絕對定位，而後右側margin撐開
　　使用div包含，而後靠負margin造成bfc佈局

寫一個三角形
頭朝上： 

{
    width: 0;
    height: 0;
    border-bottom: 140px solid red;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}

頭朝下：

 {
    width: 0;
    height: 0;
    border-top: 140px solid red;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}

頭朝右：

 {
    width: 0;
    height: 0;
    border-left: 140px solid red;
    border-top: 70px solid transparent;
    border-bottom: 70px solid transparent;
}

頭朝左：

 {
    width: 0;
    height: 0;
    border-right: 140px solid red;
    border-top: 70px solid transparent;
    border-bottom: 70px solid transparent;
}

link @import導入css
　　link能夠一邊加載一邊解析，後者須要等頁面載入了才能加載
　　link無兼容問題，後者不兼容低版本瀏覽器

動畫 animation
　　太多了，不作贅述

 

Javascript篇

let，const使用
　　都是在es6提出，有塊級做用域，使用不當會造成暫時性死區。例如

console.log(x)
let x = 2

　　這麼使用會直接報錯，由於在未聲明前使用了變量X，要注意let，const不和var同樣，並不存在變量提高。使用前要先聲明

並且const在聲明時須要先賦值，否則會報錯，並且它不容許聲明後修改變量。兩者都是在聲明後不容許重複聲明同一個變量

數組求和，數組長度爲100，求數組中全部項的和

　　有不少方法，這裏我使用es6中的reduce方法

var arr2 = Array.from(new Array(100), (num,index) =>{
      return index 
})//建立長度100的數組

var result = arr2.reduce((a, b) => {return a + b}) //4950

reduce接收2個參數，第一個參數a是前面兩個數的和，b是第3個數，依次類推。此方法對於數組求和求乘積在方便不過。

數組去重，數組長度爲100，對數組去重

　　方法不少，例如循環判斷，返回新數組之類等等，這裏我使用es6的new Set方法

var arr1 = Array.from(new Array(50), (num,index) =>{
    return index 
})
var arr2 = Array.from(new Array(50), (num,index) =>{
    return index 
})
arr1 = arr1.concat(arr2) //先建立兩個個數組長度是50，而後合併

arr1 = new Set(...[arr1])//去重只須要下面一行代碼

　　去重返回獲得的set結構是es6的提供的數據結構。它相似於數組，可是成員的值都是惟一的，沒有重複的值。結束後再轉換成數組就能夠了。

也能夠簡寫成下面這樣

arr1 = Array.from(new Set(...[arr1], ...[arr2]))

"..."是擴展操做符，能夠了解一下，vue中一些有用到。

求一個數組中每一個項的平方，並返回

　　能夠直接循環數組，而後乘於他自身，不過es6給咱們提供了更方便快捷的方法，就是map()。接下來咱們使用這個方法來完成問題

var arr1 = Array.from(new Array(50), (num,index) =>{
    return index 
})
arr1 = arr1.map((x) => {return x *x })

什麼是當即執行函數？爲何使用當即執行函數？

(function fn() {
    console.log(123)
})() //第一種

(function fn() {
    console.log(123)
}())//第二種

須要傳入參數的話也是同樣的調用，使用當即執行函數是防止變量污染全局，執行完自行銷燬

什麼是事件捕獲，什麼是事件冒泡

　　這個以前我簡單寫過一篇隨筆，不知道能不能解答疑惑。冒泡捕獲，沒毒使勁戳

正則匹配空格，匹配字符

　　這個也有一篇小文，都是練習題，個人正則也很差呀。正則題，正則元字符，能夠稍微看一下。

判斷字符串是否是迴文字符串

　　首先了解什麼是迴文字符串，便是一個正讀和反讀都同樣的字符串，好比「level」或者「noon」等等就是迴文串，那麼怎麼判斷呢，其實也很簡單

function fn(str) {
  var str1 = str.split('').reverse().join('')
  return str == str1
}

將字符串拆分紅數組，翻轉一遍再從新合併，返回布爾值就能夠了。

JS數據類型

　　1.number;  2.string;  3.boolean;  4.undefined;  5.null;  6.symbol(es6新增)；7.Object（複雜類型）

讓咱們來看一下第6個，es6新增的數據類型是什麼。其表示獨一無二的值。

// 沒有參數
var a = Symbol();
var b = Symbol();

a === b // false

// 有參數
var a = Symbol("biu");
var b = Symbol("biu");

a === b // false

能夠看出獨一無二的話那麼就意味着Symbol值能夠做爲標識符，用於對象的屬性名，就能夠保證不會出現同名的屬性了。這對於一個對象由多個模塊構成的狀況頗有用，能防止某一個鍵名被不當心改寫或覆蓋。因爲用的很少，並無作很深的探討。

promise的用法

var promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 異步操做成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

使用

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

 

重繪與迴流
　　迴流一定重繪，重繪不必定迴流。重繪只是修改頁面上color，background-color等，不改變佈局
　　迴流改變了佈局，致使頁面dom樹從新排列
　　減小回流：
　　　　css：tranfrom代替top
　　　　　　減小內聯樣式，減小樣式多層嵌套
　　　　　　position代替動畫
　　　　　　visibility代替diplay：none
　　　　　　減小table佈局
　　　　js：
　　　　　　減小修改dom結構，不可避免的修改儘可能在一次修改完

 

　　　　　　避免頻繁讀取會引起迴流/重繪的屬性

能夠去了解一下算法，好比二分查找、快速排序，遞歸等等。以前記錄過兩個，不過如今也忘得差很少

更多的瞭解es6的一些新方法，好比文中未說起的解構賦值、proxy等等

 

HTTP篇

三次握手，四次揮手（借用網上的敘述，形象生動）

　　例如A、B通訊，三次握手：
　　　　A：你好，我來了
　　　　B：收到
　　　　A：那麼開始鏈接
　　四次揮手：
　　　　A：我要關閉了
　　　　B：稍等，還有一個包
　　　　B：能夠關閉
　　　　A：你關閉吧，不用回覆
　　　　等待2ms，無反應關閉

http常見狀態碼

　　2開頭 （請求成功）表示成功處理了請求的狀態代碼。200 （成功） 服務器已成功處理了請求，204 （無內容） 服務器成功處理了請求，但沒有返回任何內容

　　3開頭 （請求被重定向）表示要完成請求，須要進一步操做。301 （永久移動）

　　4開頭 （請求錯誤）這些狀態代碼表示請求可能出錯。403 （禁止） 服務器拒絕請求。 404 （未找到） 服務器找不到請求的網頁

　　5開頭（服務器錯誤）這些狀態代碼表示服務器在嘗試處理請求時發生內部錯誤

get、post的區別

　　搜索出來不少看似標準答案，當你看到這個問題是否是以爲很簡單，隨便都能答上來，下面是w3c提供的說法

　　　　GET在瀏覽器回退時是無害的，而POST會再次提交請求。

　　　　GET產生的URL地址能夠被Bookmark，而POST不能夠。

　　　　GET請求會被瀏覽器主動cache，而POST不會，除非手動設置。

　　　　GET請求只能進行url編碼，而POST支持多種編碼方式。

　　　　GET請求參數會被完整保留在瀏覽器歷史記錄裏，而POST中的參數不會被保留。

　　　　GET請求在URL中傳送的參數是有長度限制的，而POST麼有。

　　　　對參數的數據類型，GET只接受ASCII字符，而POST沒有限制。

　　　　GET比POST更不安全，由於參數直接暴露在URL上，因此不能用來傳遞敏感信息。

　　　　GET參數經過URL傳遞，POST放在Request body中。

其實我我的認爲這些回答都太官方了，有時間的話仍是去看一下這些答案具體所說，面試時所有人的回答都是千篇一概，要是你忽然給個耳目一新的答案是否是很加分呢。

URL到網頁徹底加載顯示這中間發生了什麼

　　一道經典的面試題，至今我也沒有很懂，由於我http知識並非很牢固，哈哈。來總結一下吧

　　　　一、瀏覽器的地址欄輸入URL並按下回車。

　　　　二、瀏覽器查找當前URL是否存在緩存，並比較緩存是否過時。

　　　　三、DNS解析URL對應的IP。

　　　　四、根據IP創建TCP鏈接（三次握手）。

　　　　五、HTTP發起請求。

　　　　六、服務器處理請求，瀏覽器接收HTTP響應。

　　　　七、渲染頁面，構建DOM樹。

　　　　八、關閉TCP鏈接（四次揮手）。

而後能夠針對這些點展開敘述說一下

談一談強緩存和協商緩存

　　緩存是一種保存資源副本以供下次請求時能夠直接使用該副本的技術，當web發現該資源已經被緩存了，就會攔截請求，使用已保存的資源副本。這樣能夠緩解服務器端的壓力，提升性能。對於網站來講緩存是提升性能的重要部分。

緩存分爲兩部分私有緩存和共享緩存。共享緩存能被多個用戶使用，私有緩存只能用於單獨用戶。

強緩存 ( Cache-Control 和 Expires )

強緩存主要是響應頭用於Cache-Control和Expires兩個字段來控制。其中Expires是Http1.0提出的，他指定了一個絕對過時時間，Cache-Control是http1.1提出的緩存字段。兩個字段同時使用的時候，後者的優先級更高。

協商緩存 ( Last-Modified 和 Etag )

　　協商緩存是瀏覽器去服務器端詢問本次請求是使用緩存仍是從瀏覽器從新請求新的資源，當服務器端返回請求的資源未改動，那麼瀏覽器就會從新定位到緩存的資源副本，這種狀況http狀態碼是304。

當瀏覽器從新向服務器發送請求時，會在請求頭添加if-Modified-since的字段，值就是Last-Modified，若是未過時命中緩存那麼就使用緩存好的資源副本，若是已過時那麼就從新請求新的資源。

　　服務器端返回的報文頭中帶有Etag字段，瀏覽器接收資源時會將其存儲起來，當下次瀏覽器向服務器端發送請求時會附帶上一次存儲的Etag字段，服務器端會將其作對比，若是相同則使用本地緩存的資源副本，狀態碼304，若是不相同就返回新的資源同時返回新的Etag字段，狀態碼是200。

 

Vue篇

談一談什麼是MVVM

　　MVVM是Model-View-ViewModel的縮寫。mvvm是一種設計思想。Model 層表明數據模型，也能夠在Model中定義數據修改和操做的業務邏輯；View 表明UI 組件，它負責將數據模型轉化成UI 展示出來，ViewModel 是一個同步View 和 Model的對象。

在MVVM架構下，View 和 Model 之間並無直接的聯繫，而是經過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的， 所以View 數據的變化會

同步到Model中，而Model 數據的變化也會當即反應到View 上。

ViewModel 經過雙向數據綁定把 View 層和 Model 層鏈接了起來，而View 和 Model 之間的同步工做徹底是自動的，無需人爲干涉，所以開發者只需關注業務邏輯，不須要手動操做DOM, 不須要關注數據狀態的同步問題，複雜的數據狀態維護徹底由 MVVM 來統一管理。

談一談MVVM和MVC的區別　　

　　兩種設計模式區別並不大，只是MVC中的Controller變成了view-model，再也不是頻繁的操做dom結構，下降用戶體驗

組件之間的傳值

　　父子組件傳值：父組件向子組件傳值——props，子組件向父組件傳值——$emit方法

　　兄弟組件傳值：bus

v-show和v-if的區別

　　v-if是使其dom重建或銷燬，而v-show是使其顯示或隱藏，似display：none/block。前者引發迴流，後者引發重繪

 

<keep-alive></keep-alive>的做用是什麼?

　　包裹動態組件時，會緩存不活動的組件實例,主要用於保留組件狀態或避免從新渲染。

談談vuex的理解

　　我的的理解是全局狀態管理更合適；簡單的理解就是你在state中定義了一個數據以後，你能夠在所在項目中的任何一個組件裏進行獲取、進行修改，而且你的修改能夠獲得全局的響應變動。

vuex有五個屬性：state，getter，mutation，action，module。

　　  state存放全局能夠訪問的變量或者屬性

 　　 mutattions是一個對象，這個對象裏面能夠放改變state的初始值的方法，具體的用法就是給裏面的方法傳入參數state或額外的參數,而後利用vue的雙向數據驅動進行值的改變，用 this.$store.commit('') 方法在別的組件裏面進行改變state的值

　　  vuex官方API還提供了一個actions，這個actions也是個對象變量，最大的做用就是裏面的Action方法 能夠包含任意異步操做，這裏面的方法是用來異步觸發mutations裏面的方法，actions裏面自定義的函數接收一個context參數和要變化的形參

this.$store.dispatch('')方法來更改狀態

 

待續，持續更新