2018前端個人面試總結
前言：
最近一直在面試，我把面試的5家公司面試題，選擇了一些來總結說明，如有問題，歡迎各位小夥伴給與指正
有些題的答案是百度，有些則是我自己的理解，有些題是開放題，沒有標準答案，根據自己實際情況回答即可
下面這些題都很基礎，更多更全的面試題我會在最後把鏈接發出來，那些鏈接是我準備面試收集的不錯的面試題合集
HTML
問題1：你怎麽理解web語義化？
要合理使用語義化的標簽，比如，段落用P標簽，標題用H1-H6；這樣不僅利於SEO，也利於後期維護
問題2：HTML5新增語義化 / 結構元素有哪些？
header, main, nav, side, article, section, footer
問題3：<img>標簽的title和alt屬性有什麽區別？
前者是在圖片正常加載，鼠標指上去顯示的文本值；後者是在圖片加載失敗以後顯示的提示文字信息
CSS
問題1：display:none和visibility:hidden;的區別？
前者讓元素從DOM樹中消失，不占據任何空間；後者不會讓元素從DOM樹中消失，仍占據空間，只是內容不可見。
問題2：css定位有幾種方式？分別是什麽？有什麽區別？
4種；static,relative,absolute,fixed；
static：是默認值（靜態定位）;
relative：相對定位，相對於自身偏移，不會脫離文檔流
absolute：絕對定位，相對於父元素偏移，脫離文檔流
fixed：固定定位，相對於瀏覽器可視區域定位，脫離文檔流
問題3：什麽是css的盒子模型？
盒子模型是指：外邊距（margin）+ border（邊框） + 內邊距（padding）+ content（內容）
可以把每一個容器，比如div，都看做是一個盒子模型
比如你給一個div設置寬高為500px，但實際你設置的只是content
之後你又設置了padding:10px;border:1px solid red;
這時div的寬高就會變為544px（content 500px + padding 40px + border 4px）
相當於一個元素的實際寬高是由： padding + border + content 組成
JS
問題1：location.replace()和location.assign()有什麽區別？
前者是直接替換原來的URL地址，沒有返回；後者是在原來的URL地址後面插入新的URL地址，有返回
問題2：創建JavaScript對象的三種方法？
1??：創建一個空對象
var obj = {};
2??：對象字面量
var obj = {
name: "Tom",
age: 21
}
3??：使用new關鍵字（不推薦，盡量不要用這種方式創建對象）
var obj = new Object();
問題3：事件綁定的三種方法？
1??：直接綁定在HTML元素上，不推薦這種，耦合太高
<div onclick="doSomeThing()"></div>
2??: 通過DOM獲取到元素，然後綁定事件（綁定多個事件時不適用）
var ele = document.getElementById("element");
ele.click = function(){}
3??: 綁定多個事件時推薦這種方式
addEventListener(‘click‘，‘element‘，function(){})
問題4： 說一說你對閉包的理解（什麽是閉包，用處）
我的理解是閉包可以看作是一種方法，這個方法可以幫助我們從外部獲取到函數內部的變量
閉包的用處主要有2個
一是可以從外部獲取到函數內部的變量；
二是讓變量一直存在，不被js的回收機制回收，但濫用閉包會造成內存泄漏
問題5：typeof null 和 typeof undefiind 的結果是什麽？它們的區別？
結果都是object
前者表示一個空值，是一個特殊的對象，但null成為對象是歷史遺留造成的（感興趣的小夥伴可自行百度）
後者的出現也是為了和null做區分，表示未定義，比如一個變量只聲明沒有賦值 var x;
問題6：es6的 let 和 const 的區別？
let用於聲明變量，相當於es5裏的 var，並且有塊級作用域
const用於聲明常量
問題7：說一說你對promise對象的認識（es6）
Promise是 CommonJS 提出來的這一種規範，有多個版本，在 ES6 當中已經納入規範，原生支持 Promise 對象；
非 ES6 環境可以用類似 Bluebird、Q 這類庫來支持。
詳見：http://es6.ruanyifeng.com/?search=promise&x=4&y=2#docs/promise （阮一峰）
問題8：在瀏覽器輸入地址按回車以後，發生了什麽？（簡述）
1：DNS服務器對該域名進行解析（這個域名解析出來的IP地址就是要請求資源的服務器地址）
2：嘗試向該服務器建立連接，經過三次握手成功建立連接
3：向服務器發送 HTTP 請求
3：服務器收到、處理並返回 HTTP 請求
4：瀏覽器得到返回內容（這個時候返回的內容都是字符串，需要瀏覽器解析，也就是瀏覽器渲染的過程）
問題9：簡述瀏覽器渲染的過程？（這個說起來文字較多，所以就說幾個要點）
1：根據 HTML 結構生成 DOM 樹
2：根據 CSS 生成 CSSOM
3：將 DOM 和 CSSOM 整合形成 RenderTree（渲染樹）
4：根據 RenderTree 開始渲染和展示
5：遇到<script>時，會執行並阻塞渲染
註：這也是為什麽link引入的CSS文件要放在<head>頭部，這樣便於瀏覽器快速解析完成css樣式，生CSSOM；
而引入的js文件要放在底部就是為了避免阻塞頁面加載，導致頁面空白
問題10：new操作符到底做了什麽？
1：創建一個空對象，用來返回實例對象
2：把這個空對象的原型指向構造函數的prototype屬性
3：讓構造函數的this指向實例對象
4：返回創建的實例對象
性能優化
什麽是SEO？SEO要怎麽做？
https://www.cnblogs.com/tu-0718/p/9545372.html 這是我之前寫的一篇關於seo基礎的博客
如果讓你從前端的角度做性能優化，你會怎麽做
https://www.cnblogs.com/tu-0718/p/6170463.html 這是我之前寫的一篇關於前端性能優化的博客
HTTP
問題1：說一說狀態碼301和302的區別？
301：永久重定向，訪問的地址永久被遷移到其它地址
302：臨時重定向，訪問的地址臨時被遷移到其它地址
詳見：https://blog.csdn.net/u013474436/article/details/48138707
問題2：cookie 和 localStorage 有何區別？
cookie
1：存儲量太小，只有 4KB
2：所有 HTTP 請求都帶著，會影響獲取資源的效率
3：API 簡單，需要封裝才能用
localStorage
1：存儲量增大到 5MB
2：不會帶到 HTTP 請求中
3：API 適用於數據存儲 localStorage.setItem(key, value)localStorage.getItem(key)
問題3：sessionStorage和 localStorage 有何區別？
前者為臨時存儲，當網頁或瀏覽器關閉時，緩存會自動清除
後者為永久存儲，除非手動自行清除緩存，否則，緩存永久有效
問題4：什麽是同源策略？
同源策略就是指協議，端口，域名全部都要相同。這是瀏覽器為安全性考慮實施的安全策略
詳見：http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
開放性問題（沒有答案）
1： 你覺得JS有哪些優點？你怎麽理解JS的面向對象編程？
2：能否一個人獨立開發？
3：如果和另一個人一起開發，怎麽讓工作效率更高？
4：如果和另一個人一起開發，他技術比你好，你會怎麽辦？
5：如果和另一個人一起開發，你技術比他好，你會怎麽辦？
6：有沒有了解過小程序，說說你對小程序的認識？
7：你覺得vue和原生js相比有什麽好處？
8：說一說你遇到過的兼容性問題（PC和移動端各說一個）
9：使用過flex布局嗎，有什麽優點？
10：你對加班是怎麽看的？
附：個人收集的不錯的面試題鏈接分享
1：https://blog.csdn.net/xm1037782843/article/details/80708533 2018面試題
2：https://blog.csdn.net/xllily_11/article/details/70899191 2017年前端面試題最新匯總
3：https://blog.csdn.net/kebi007/article/details/54882425 2017年前端面試題整理匯總100題
4：https://segmentfault.com/a/1190000011091907 我遇到的前端面試題2017
5：https://segmentfault.com/a/1190000015863923 JavaScript面試
6：https://segmentfault.com/a/1190000011038090 你不能錯過的前端面試題合集
7：https://segmentfault.com/a/1190000015861382 VUE合集面試題
8：https://www.jianshu.com/p/e54a9a34a773 VUE合集面試題
9： https://www.qdfuns.com/article/47855/dad8d910a0a6ea455a8319a827aaad7b.html （沒有答案）
10： https://www.cnblogs.com/nuannuan7362/p/6070401.html 別的程序員是怎樣讀你的簡歷的（僅供參考）
2018前端個人面試總結