1. 程式人生 > >2018前端個人面試總結

2018前端個人面試總結

小程序 工作效率 ria 定向 總結 結構 聲明變量 def hidden

 前言:

   最近一直在面試,我把面試的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前端個人面試總結