前端面試題

時間  2019-11-24
標籤 端面 試題 简体版
原文   原文鏈接

HTML面試問題

  1. Doctype做用？標準模式和兼容模式有什麼區別？javascript

    1. doctype寫在html第一行，doctype規定了瀏覽器的解析器用什麼標準去解析文檔，doctype缺失或者或者格式不正確,會致使文檔以兼容模式呈現。
    2. 標準模式的排版和js運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，瀏覽器以較寬鬆的向後兼容的方式顯示，以確保能在舊版本的瀏覽器上也能運行。

  2. html5爲何只須要寫？css

    1. html5不是基於SGML的，不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲。
    2. html4是基於SGML的，須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

  3. 行內元素有哪些？塊級元素有哪些？空元素有哪些？html

    1. 行內元素：input、span、img、a
    2. 塊級元素：div、p、h1
    3. 空元素：input、img

  4. 頁面導入樣式時，使用link和@import有什麼區別？前端

    1. link屬於xhtml標籤，不只能引入css,還能引入RSS,定義rel鏈接屬性等做用。@import是css提供的，只能用來引入css。
    2. 引入的時間點不同：link是在頁面加載時同時加載，@import引入的css是等頁面加載完再加載的。
    3. imprt是css2.1提出的，只有在ie5以上的瀏覽器支持，link是xhtml標籤，無兼容問題。
    4. link支持使用js控制DOM去改變樣式，而@import不支持。

  5. 介紹一下你對瀏覽器內核的理解？html5

    主要分爲渲染引擎和js引擎。java

    渲染引擎：負責取得網頁的內容,引入css,計算網頁的顯示方式，輸出到顯示器。node

    js引擎：解析和執行js來實現網頁的動態效果。jquery

  6. 常見的瀏覽器內核有哪些？android

    1. Trident：IE、360、搜狗
    2. Gecko：Netscape6及以上，FireFox
    3. Presto：Opera7及以上(原爲Presto,現爲Blink)
    4. Webkit內核：Safari，Chrome(Chrome:Blink是Webkit的分支)

  7. html5有哪些新特性，移除了哪些元素？如何處理html5新標籤的瀏覽器兼容問題？如何區分HTML和HTML5?ios

    1. 新增了語義化標籤和其餘一些標籤例如canvas、video、audio,新增了localStorage、sessionStorage、Geolocation、WebSocket
    2. 去除了一些純表現元素big、center 和對可用性產生負面影響的元素frame
    3. 經過doctype區分

  8. 簡述一下你對html語義化的理解？

    1. 用正確的標籤作正確的事。
    2. 頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析。
    3. 沒有css的狀況下，也以文檔格式顯示，容易閱讀。
    4. 搜索引擎的爬蟲也依賴於HTML標記來肯定上下文和各個關鍵字權重，有利於seo
    5. 使閱讀源代碼的人對網站更容易的分塊，便於閱讀維護。

  9. html5的離線存儲怎麼使用，工做原理能不能解釋一下？

    1. 在html標籤上添加上manifest="cache.manifest"

    2. 在cache.manifest文件中配置

      #CACHE MANIFEST
#v0.11

CACHE:
js/app.js
css/style.css

NETWORK:
net.png

FALLBACK:
//offline.html
複製代碼

    3. 工做原理：

      1. 在線狀況下，瀏覽器會發現html上有manifest屬性，它會請求manifest文件，第一次進入app時,瀏覽器會根據manifest配置文件的內容下載相應的資源並進行離線存儲。若是已經訪問過app而且資源已經離線存儲，那麼瀏覽器就會使用離線的資源進行加載頁面，瀏覽器會對比新舊manifest文件，若是文件有改變，那麼就會從新下載全部的資源文件並進行離線存儲。
      2. 離線狀態下，直接使用離線下載好的資源文件。

    4. 會出現的問題：

      1. 若是有一個資源文件下載失敗，那麼全部的資源文件仍是會用原先舊的資源文件
      2. 若是manifest沒有更新，那麼仍是會使用舊的資源文件
      3. manifest更新了，可是http的緩存規則告訴瀏覽器本地緩存的manifest文件沒有過時，這種狀況下仍是會使用舊的manifest文件，因此不會下載新的資源文件，仍是使用舊的資源文件。
      4. 更新資源以後，只有下次打開才生效，若是要立刻生效，可使用window.applicationCache.swapCache()方法來使之生效。瀏覽器會先使用離線存儲的資源，而後再會去檢查manifest文件有沒有更新，因此須要到下次打開頁面才能生效。

  10. 請描述一下cookies,sessionStorage和localStorage的區別？

  11. cookie數據始終在同源的http請求中攜帶，在客戶端和終端之間來回傳遞的，通常會加密，是用來驗證身份的。sessionStorage和localStorage僅保存在客戶端。

  12. 存儲量大小：cookie不超過4kb；其餘2個在5M或者更大。

  13. 什麼時候銷燬：cookie會設置有效期，過了有效期就過時了；sessionStorage窗口關閉就銷燬了；localStorage窗口除非手動刪除，否則一直會保存在瀏覽器中。

  14. iframe有哪些缺點？

  15. label的做用是什麼？是怎麼用的？

    label的做用是當用戶選擇標籤時，瀏覽器會將焦點自動指向label所指向的表單控件。

  16. html5的form如何關閉自動完成功能？

    給form或者須要關閉自動完成功能的標籤添加autocomplete=off。

  17. 如何實現瀏覽器內多個標籤頁之間的通訊？

    1. 使用localStorage、事件監聽。
    2. 使用cookie、setInterval。
    3. ShareWorker（同源）
    4. WebSocker（長連接）

  18. webSocket如何兼容低瀏覽器？

  19. 頁面可見性(Page Visibility API)能夠有哪些用途？

  20. 如何在頁面上實現一個圓形的可點擊區域？

    1. border-radius
    2. js獲取座標點
    3. map+area或者svg

  21. 實現不使用border畫出1px高的線，在不一樣瀏覽器的標準模式和怪異模式下都能保持同樣的效果。

    .line{
  height:1px;
  overflow:hidden;
  background:red;
}
複製代碼

  22. 網頁驗證碼是幹嗎的，是爲了解決什麼問題。

    1. 爲了區分是計算機仍是人的公共全自動程序，防止破解密碼，刷票、論壇灌水。
    2. 有效防止黑客對某一特定的註冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試。

  23. title與h1的區別，b與strong的區別，i與em的區別

css面試題

  1. 介紹一下標準的css盒子模型？

    1. css盒子模型：IE盒模型和w3c標準盒模型。
    2. 盒模型：content+padding+border+margin。
    3. IE盒模型，content+padding+border;w3c標準盒模型，content。

  2. css選擇符有哪些？哪些屬性能夠繼承？

    1. id選擇器、類選擇器、標籤選擇器、後代選擇器、子選擇器、相鄰選擇器、通配符選擇器、屬性選擇器、僞類選擇器
    2. 可繼承的樣式：font-size、color、font-family
    3. 不可繼承的樣式：border、padding、margin、width、height

  3. css優先級算法如何計算？

    同權重：標籤內部>style標籤中>外部樣式表

    ​ ！important>id>class>tag

    ​ ！important比內聯優先級高

  4. css新增僞類有哪些？

    after、before、enabled、disabled、checked、first-type-of

  5. 如何居中div？

    1. 水平居中：
      1. 行內元素：text-align:center;
      2. margin:0 auto;
    2. 水平垂直居中：
      1. flex佈局：justify-content:center;+align-items:center;
      2. absolute+margin（子元素寬高的一半的負值）
      3. absolute+margin:auto;
      4. absolute+translate
      5. display:table-cell;+text-align:center;+vertical-align:middle;+父元素有具體的寬高

  6. display有哪些值？說明他們的做用。

    1. none：不顯示，並從文檔流中移除。
    2. block：塊級元素類型，默認寬度是父元素的寬度，能夠設置寬高，先後要換行。
    3. inline：行內元素類型，默認寬度是內容寬度，不能夠設置寬高，同行顯示。
    4. inline-block：默認寬度是內容寬度，能夠設置寬高，同行顯示。
    5. list-item：像塊元素類型同樣顯示，並添加樣式列表標記。
    6. table：此元素會做爲塊級表格來顯示。
    7. inherit：繼承父元素屬性的值。

  7. position的值relative和absolute定位原點是？

    1. absolute：生成絕對定位元素，相對於position不是static的第一個父元素進行定位。
    2. relative：生成相對定位元素，相對正常位置進行定位。
    3. fixed：生成絕對定位元素，相對於瀏覽器窗口進行定位。（老IE不支持）
    4. static：默認值，沒有定位。元素出如今正常的流中。（忽略top/bottom/left/right/z-index）
    5. inherit：從父元素繼承position的值。

  8. css3有哪些新特性？

    1. 新增了不少選擇器
    2. transition過渡、animation動畫、transform形狀轉換
    3. 邊框：border-radius、box-shadow、border-image
    4. 背景：background-clip、background-origin、background-size、background-break
    5. 文字效果：word-wrap、text-overflow、text-shadow、text-decoration
    6. 漸變：線性漸變、徑向漸變、圓錐漸變。
    7. 字體：@font-face
    8. 用戶界面：盒模型、resize、outline-offset
    9. 反射
    10. 顏色
    11. 混合模式
    12. 媒體查詢
    13. 佈局：flex佈局、grid佈局、多列布局

  9. 請解釋一下css3的flex佈局，以及適用場景。

    1. ​

  10. 用純css建立一個三角形的原理是什麼？

利用border，三個面的border-color設置爲transparent

  1. 一個滿屏「品」字佈局如何設計？

  2. css多列等高如何實現？

  3. 常常遇到的瀏覽器的兼容性問題有哪些？緣由，解決方法？經常使用的hack技巧？

    1. 瀏覽器默認的margin/padding不一樣。統一設置*{margin:0;padding:0;}
    2. Chrome瀏覽器中文界面下會將小於12px的字體強制按照12px顯示。-webkit-text-size-adjust:none;
    3. IE下event對象有x/y屬性，可是沒有pageX/pageY屬性。firefox下則反之。用條件註釋的方式解決。

  4. li和li之間有看不見的空白間隔是什麼緣由引發的？有什麼解決辦法？

  5. 爲何要初始化css樣式？

    由於瀏覽器兼容問題，不一樣瀏覽器之間的標籤默認屬性值不一樣。

  6. absolute的containing block(容器塊)計算方式跟正常流有什麼不一樣？

  7. css裏的visibility屬性有個collapse屬性值是幹嗎用的?在不一樣瀏覽器下有什麼區別？

  8. position跟display、margin、overflow、float這些特性相互疊加後會怎麼樣？

  9. 對BFC規範(塊級格式化上下文)的理解？

    Block Formatting Context,BFC外部元素和內部元素互不影響。

  10. css定義的權重。

  11. 請解釋一下爲何須要清除浮動？清除浮動的方式。

    1. 是爲了清除使用浮動元素以後產生的影響，不影響其餘元素的佈局。浮動的元素，高度會坍塌，高度的坍塌會使頁面後面的佈局不能正常顯示。
    2. 清除浮動的方式：overflow:hidden; clear:both;

  12. 什麼是外邊距合併？

    2個相鄰塊級元素的垂直外邊距會合並。合併的原則是取二者邊距的最大值。

  13. zoom:1的清除浮動原理？

  14. 移動端的佈局用過媒體查詢嗎？

  15. 使用css預處理器嗎？喜歡哪一個？

  16. css優化、提升性能的方法有哪些？

  17. 瀏覽器是怎麼樣解析css選擇器的？

  18. 在網頁中應該使用奇數仍是偶數字體？爲何？

  19. margin和padding分別適合什麼場景使用？

  20. 抽離樣式模塊怎麼寫

  21. 元素豎向的百分比設定是相對於容器的高度嗎？

  22. 全屏滾動的原理是什麼?用到了css的哪些屬性？

  23. 什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的ie?

  24. 視差滾動效果，如何給每頁作不一樣的動畫？（回到頂部，向下滑動再次出現，和只出現一次分別怎麼作？）

  25. ::before和:after中雙冒號和單冒號有什麼區別？解釋一下這2個僞元素的做用。

  26. 如何修改chrome記住密碼後自動填充表單的黃色背景?

  27. 對line-height的理解。

  28. 設置元素浮動後，該元素的display值是多少？

  29. 怎麼讓chrome支持小於12px的文字。

  30. 讓頁面的字體變清晰，變細，用css怎麼作？

  31. font-style屬性可讓它賦值爲「oblique」,oblique是什麼意思？

  32. position:fixed;在android、ios下無效怎麼處理？

    fixed元素是相對於整個頁面固定位置的，移動端當頁面滾動時，滾動的是viewport。

    在html頭部添加viewport的設置。

  33. 若是須要手動寫動畫，你認爲最小時間間隔是多久？爲何？

    多數顯示器的頻率是60hz，也就是1秒鐘60幀，1000/60=16.67ms。

  34. display:inline-block何時會顯示間隙？

  35. overflow:scroll不能平滑滾動的問題怎麼處理？

  36. 有一個高度自適應的div，裏面有2個div,1個高度100px,但願另一個填滿剩下的高度。

  37. png、jpg、gif這些圖片格式解釋一下，分別何時用。有沒有了解過webp?

  38. 什麼是cookie隔離？

  39. style標籤寫在body後與body前有什麼區別？

  40. 什麼是css預處理器/後處理器？

  41. rem佈局的優缺點？

  42. rem和em有什麼區別？

    rem是根據根元素的font-size大小定的；em是根據父元素的font-size大小定的。

javascript面試題

  1. 介紹js的基本數據類型。

    1. number
    2. string
    3. boolean
    4. undefined
    5. null
    6. ECMAScript2015新增了Symbol(建立後獨一無二且不可變的數據類型)

  2. 介紹js有哪些內置對象？

    Object是javascript中全部對象的父對象。

    數據封裝類對象：Object、Number、String、Boolean、Array

    其餘對象：Function、Arguments、Math、Date、RegExp、Error

  3. 說幾條javascript的基本規範？

  4. javascript有幾種類型的值？你能畫一下他們的內存圖嗎？

    1. 基本數據類型:number、string、boolean、undefined、null、symbol，在棧內存中
    2. 引用類型:Object、Function，在堆內存中

  5. 如何將字符串轉化爲數字，例如‘12.3b’?

  6. 如何實現數組的隨機排序？

    1. sort
    2. 冒泡排序：遍歷數組中的元素，一次比較2個，若是順序錯誤，就交換位置。
    3. 快速排序：將數組分爲2部分，一部分是大於某個值，另外一部分是小於此值。(須要遞歸，這個值是數組中的值)
    4. 插入排序：
    5. 希爾排序：

  7. javascript建立對象的幾種方式？

    1. 對象字面量：
    2. new
    3. Object.create()

  8. eval是作什麼的？

  9. 什麼是window對象？什麼是document對象？

    1. window對象，全局對象。
    2. document對象，表明整個html文檔，能夠用來訪問頁面中的全部元素。

  10. null、undefined的區別？

null 表示一個對象是「沒有值」的對象，也就是值爲「空」。

undefined 表示一個變量聲明瞭，沒有賦值。

  1. 寫一個通用的事件偵聽器函數。

  2. ["1","2","3"].map(parseInt)答案是什麼？

  3. 什麼是閉包？爲何要用它？

    1. 閉包就是將函數內部和函數外部鏈接起來的一座橋樑。
    2. 閉包的做用：
      1. 在函數外部讀取函數內部的變量
      2. 將建立的變量的值始終保存在內存中，以供本地環境使用。

  4. javascript代碼中的「use strict」;是什麼意思？使用它的區別是什麼？

    1. 是一種ECMAScript5添加的嚴格運行模式，這種模式使得javascript在更嚴格的條件下運行，可以提升編譯器效率，增長運行速度。也爲將來新版本的Javascript標準化作鋪墊。
    2. 使js編碼更加規範化的模式，消除javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲。默認之處的糟糕特性都會被禁用，好比不能用with，也不能在乎外的狀況下給全局變量賦值；全局變量的顯式聲明，函數必須聲明在頂層，不容許在非函數代碼塊中聲明函數，arguments.call也不容許使用；消除代碼運行的一些不安全之處，保證代碼運行的安全，限制函數中的arguments修改，嚴格模式下的eval函數的行爲和非嚴格模式的也不相同。

  5. 如何判斷一個對象是否屬於某個類？

    if(a instanceOf Person){
  alert("yes");
} 
複製代碼

  6. new操做符具體幹了什麼？

  7. javascript,有一個函數，執行時對象查找時，永遠不會去查找原型。

    hasOwnProperty。

  8. 對json的瞭解。

    json是輕量級的數據交換格式。它是javascript的一個子集，數據格式簡單，易於讀寫，佔用帶寬小。

  9. ajax是什麼？如何建立一個ajax?

    1. ajax全稱，Asynchronous Javascript And Xml
    2. 建立XMLHttpRequest對象，也就是建立一個異步調用對象。
    3. 建立一個新的http請求，並指定請求地址，請求方法。
    4. 設置響應Http請求狀態變化的函數
    5. 發送http請求
    6. 獲取異步調用返回的數據
    7. 使用js和dom實現局部刷新

  10. ajax解決瀏覽器緩存問題？

    1. 在ajax發送請求前加上 anyAjaxObj.setRequestHeader("If-Modifier-Since","0");
    2. anyAjaxObj.setRequestHeader("Cache-Control","no-cache");
    3. url後添加隨機數
    4. url後添加時間戳
    5. jquery的話$.ajaxSetup({cache:false})

  11. 同步和異步的區別？

    同步，所有在一個線程上完成，不一樣進程爲協同完成某項工做而在前後次序上調整(經過阻塞,喚醒等方式).同步強調的是順序性.誰先誰後.異步則不存在這種順序性.

  12. 如何解決跨域問題看這

    1. 設置document.domain
    2. 有src的標籤
    3. JSONP
    4. navigation ie6/7
    5. 跨域資源共享(CORS) Access-Control-Allow-Origin
    6. window.postMessage()

  13. 頁面編碼和被請求的資源編碼不一致怎麼處理？

  14. 服務器代理轉發時，如何處理cookie?

  15. 模塊化開發怎麼作？AMD、CMD規範區別？requireJS核心原理是什麼？（如何動態加載的？如何避免屢次加載？如何緩存的？）

    1. CommonJS,用在服務器端規範，node.js用的就是CommonJS
    2. AMD，Asynchronous Module Definition,異步模塊定義，推崇依賴前置，RequireJs加載模塊後會緩存，屢次加載後獲得同一個對象。
    3. CMD，Common Module Definition,通用模塊定義，推崇依賴就近，SeaJs

  16. JS模塊加載器的輪子怎麼造，如何實現一個模塊加載器？

  17. 談談你對ECMAScript6的瞭解。

    1. 參數設置默認值
    2. 模板對象
    3. 多行字符串
    4. 解構賦值
    5. 箭頭函數
    6. Promise
    7. let和const let限制塊級做用域 var限制函數做用域 const限制塊級做用域+定義常量
    8. Class
    9. Module export import

  18. Promise的理解？

    Promise對象有2個特色：

    1. 對象的狀態不受外界影響，有3種狀態：pending(進行中)、fulfilled(已成功)、rejected(已失敗)。
    2. 一旦狀態改變，就不會再變。

    Promise構造函數接受一個函數做爲參數，該函數的兩個參數分別是resolve和reject。它們是兩個函數，由javascript引擎提供，不用本身部署。

    const promise = new Promise(function(resolve,reject){
  //somecode
  if(/**異步操做成功*/){
     return resolve();
  }else{
  	return reject();
  }
})
複製代碼

    Promise實例生成後，可使用then方法分別指定resolved狀態和rejected狀態的回調函數。

    promise.then(function(value){
  
},function(error){
  
})
複製代碼

  19. 異步加載JS方式有哪些？

    1. script標籤添加async="async"，異步加載
    2. script標籤添加defer="defer"，延時加載
    3. 動態建立script標籤
    4. 使用jquery:$document.ready(function(){})

  20. document.write和innerHTML的區別。

    1. document.write會重繪整個頁面。
    2. innerHTML只會重繪部分頁面

  21. DOM操做——怎樣添加、移除、替換、插入、複製、建立和查找節點？

    1. 添加節點：appendChild()
    2. 移除節點：removeChild()
    3. 替換節點：replaceChild()
    4. 插入節點：insertBefore()
    5. 複製節點：importNode()
    6. 建立節點：createElement()、createTextNode()
    7. 查找節點：getElementById()、getElementsByClassName()、getElementsByTagName()、getElementsByName()、querySelector()、querySelectorAll()

  22. 什麼是僞數組？怎麼轉換成數組？

    1. 僞數組是一個含有length屬性的json對象，它是按照索引的方式存儲數據，它並不具備數組的一些方法。
    2. 經過 var 數組= Array.prototype.slice.call(僞數組); 轉換成真正的數組。

  23. call()和apply()的區別？還有bind()？

    1. 三者都是用來改變this對象的指向。
    2. 第一個參數都是this要指向的對象。
    3. 三者均可以利用後續參數傳參。
    4. call()和apply()對函數直接調用,當即執行；bind()返回的是函數，回調執行。
    5. call()的第二個參數開始後續參數是一一對應的，apply()第二個參數是一個數組，數組中的值和後續參數一一對應。所以當參數不肯定數量時，使用apply();

  24. 數組和對象有哪些原生方法？

    1. 數組

      方法 描述
      concat() 鏈接2個或更多的數組，並返回結果
      join() 把數組的全部元素放入字符串，並用指向的分隔符分隔
      pop() 刪除並返回數組的最後一個元素
      push() 向數組末尾添加一個或更多的元素，並返回新的長度
      reverse() 將數組反轉
      shift() 刪除並返回數組的第一個元素
      slice() 從某個已有的數組返回選定的元素
      sort() 數組排序
      splice() 刪除元素，並向數組添加新元素
      unshift() 向數組開頭添加一個或更多元素，並返回新的數組長度
      toString() 把數組轉換爲字符串，並返回
      toLocaleString() 把數組轉換爲本地數組，並返回結果
      toSource() 返回該對象的源代碼
      valueOf() 返回數組對象的原始值

    2. Object對象實例方法

      方法 描述
      valueOf() 返回當前對象對應的值。
      toString() 返回當前對象對應的字符串形式。
      toLocaleString() 返回當前對象對應的本地字符串形式。
      hasOwnProperty() 判斷某個屬性是否爲當前對象自身的屬性，仍是繼承自原型對象的屬性。
      isPrototypeOf() 判斷當前對象是否爲另外一個對象的原型。
      propertyIsEnumerable() 判斷某個屬性是否可枚舉。

  25. ECMAScript6怎麼寫class,爲何會出現class這東西？

    class Cat{
  constructor(name){
    this.name=name;
  }
  makeSound(){
    alert("喵喵喵");
  }
}
//必定要new
const cat = new Cat("貓");
cat.makeSound();

//表達式
const Cat = class{
  makeSound(){
    alert("喵喵喵");
  }
}

//不存在變量提高,與繼承有關 
new Foo(); //ReferenceError
class Foo{}

//靜態方法 靜態方法中的this指向的是類，不是類的實例
//靜態屬性和和實例屬性 尚未靜態屬性 提案中
複製代碼

  26. JS怎麼實現一個類？怎麼實例化這個類？看這

    1. 構造函數法

      function Cat(){
  this.name="貓";
}

//類的屬性和方法能夠定義在構造函數的prototype對象上
//爲何不用this.makeSound?
//若是用this.makeSound每次建立對象都會複製makeSound到這個對象上，開銷大
Cat.prototype.makeSound = function(){
   alert("喵喵喵");
}

var cat = new Cat();
alert(cat.name)；
cat.makeSound();
複製代碼

    2. Object.create()法 變量聲明法

      var Cat = {
  name:"貓",
  makeSound:function(){
    alert('喵喵喵');
  }
}

var cat = Object.create(Cat);
alert(cat.name);
cat.makeSound();

//不兼容的老瀏覽器
if(!Object.create()){
  Object.create = function(o){
    function F(){
    }
    F.prototype = o;
    return new F();
  }   
}
複製代碼

    3. 極簡主義法

      var Cat = {
         createNew:function(){
           var cat = {};
           cat.name="貓";
           car.makeSound=function(){
             alert("喵喵喵");
           }
           return cat； 
         }
       }
    
       var cat1 = Cat.createNew();
       alert(cat1.name);
       cat1.makeSound();
複製代碼

  27. 繼承？

    var Animal = {
  createNew:function(){
    var animal = {};
    animal.sleep = function(){
      alert("睡覺");
    }
    return animal;
  }
}

var Cat = {
  sound:'喵喵喵',//靜態屬性 共享
  createNew:function(){
    var cat = Animal.createNew();
    var name = "貓";//私有屬性
    cat.name= name;
    cat.makeSound = function(){
      alert(Cat.sound);
    };
    cat.changeSound = function(x){
      Cat.sound = x;
    };
    return cat;
  }
}

var cat1 = Cat.createNew();
var cat2 = Cat.createNew();
cat1.sleep();
cat1.makeSound();
cat2.makeSound();
cat1.changeSound("汪汪汪");
cat1.makeSound();
cat2.makeSound();
複製代碼

  28. javascript原型、原型鏈？有什麼特色。

    每一個對象都會在其內部初始化一個屬性，就是prototype(原型)，當咱們訪問一個對象的屬性時，若是這個對象內部不存在這個屬性，那麼他就會去prototype裏找這個屬性，這個prototype又會有本身的prototype，因而就這樣一直找下去，也就是咱們平時所說的原型鏈的概念。
關係：instance.constructor.prototype = instance.__proto__

特色：
JavaScript對象是經過引用來傳遞的，咱們建立的每一個新對象實體中並無一份屬於本身的原型副本。當咱們修改原型時，與之相關的對象也會繼承這一改變。

 當咱們須要一個屬性的時，Javascript引擎會先看當前對象中是否有這個屬性， 若是沒有的話，
 就會查找他的Prototype對象是否有這個屬性，如此遞推下去，一直檢索到 Object 內建對象。
	function Func(){}
	Func.prototype.name = "Sean";
	Func.prototype.getInfo = function() {
	  return this.name;
	}
	var person = new Func();//如今能夠參考var person = Object.create(oldObject);
	console.log(person.getInfo());//它擁有了Func的屬性和方法
	//"Sean"
	console.log(Func.prototype);
	// Func { name="Sean", getInfo=function()}
複製代碼

  29. javascript做用域鏈？

    當查找變量的時候，會先從當前上下文的變量對象中查找，若是沒有找到，就會從父級(詞法層面上的父級)執行上下文的變量對象中查找，一直找到全局上下文的變量對象，也就是全局對象。這樣由多個執行上下文的變量對象構成的鏈表就叫作做用域鏈。

  30. javascript中的做用域與變量聲明提高?

    全局做用域和局部做用域。

    變量聲明提高，變量會先聲明，在任意代碼執行前先聲明。

  31. 談談對this的理解。

    1. this,指向函數的直接調用者。
    2. 若是有new關鍵字，this指向new出來的那個對象
    3. 在事件中，this指向觸發這個事件的對象，在IE的attachEvent中this老是指向全局對象。
    4. 在箭頭函數中，沒有本身的this,它使用執行上下文（函數或全局）的this值。
    5. apply/call/bind，this指向傳遞的第一個參數，若是第一個參數不傳或者爲null/undefined，則指向全局對象。
    6. html中，this指向html元素。

  32. 如何編寫高性能的javascript？

    1. 避免循環引用，防止內存泄漏
    2. 儘可能不要使用for...in，使用for
    3. 建議對象緩存處理，特別是DOM訪問
    4. 不要在函數內進行過深的嵌套判斷
    5. 建議避免在函數內部返回一個未聲明的變量，會污染外部變量
    6. var聲明變量，建議寫在多行。

  33. 哪些操做會形成內存泄漏？

    內存泄漏指的是因爲疏忽或錯誤形成程序未能釋放已經再也不使用的內存。

    垃圾回收機制2種方式：標記清除和引用計數。

    意外的全局變量引發的內存泄漏、閉包的使用不當、沒有清理DOM元素的引用、被遺忘的定時器或回調、子元素存在引用父元素刪除引發的內存泄漏、循環、控制檯日誌、EventListener

  34. What is a Polyfill?

    polyfill是一個js庫，是爲了撫平不一樣瀏覽器內核之間對js實現的差別。

  35. 咱們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡。會執行幾回事件，會先執行冒泡仍是捕獲？

    會執行2次事件，先執行捕獲事件，再執行冒泡事件。

  36. 什麼是事件？IE與火狐的事件機制有什麼區別？

    IE事件對象只有x、y,沒有pageX、pageY。

    火狐反之。

  37. 冒泡事件和捕獲事件。

    1. 事件捕獲是從上至下觸發事件。
    2. 事件冒泡是從下至上觸發事件。
    3. 綁定事件方法的第三個參數是否爲事件捕獲。默認爲false,事件冒泡。
    4. event.stopPropagation()會阻止冒泡

  38. 什麼是JS的函數節流和函數防抖？

    1. 函數節流指的是js函數必定時間內只跑一次。應用場景：頁面滾動
    2. 函數防抖，頻繁觸發的狀況下，只有足夠的空閒時間，才執行代碼一次。應用場景：用戶註冊時手機號驗證和郵箱驗證。

ECMAScript6相關

  1. Object.is()與原來的比較操做符「===」、「==」的區別？
  2. ES6是如何編譯成ES5的？
  3. css-loader的原理？

前端框架

  1. angular2+中的編譯模式？有什麼區別？

    1. jit編譯模式

      1. 使用typescript開發angular應用
      2. 使用tsc來編譯這個應用的typescript代碼
      3. 打包
      4. 壓縮
      5. 部署
      6. 瀏覽器端下載全部代碼
      7. angular啓動
      8. angular在瀏覽器中開始jit編譯過程，例如生成app中各個組件的js代碼
      9. 應用頁面渲染

    2. aot編譯模式

      1. 使用typescript開發angular應用
      2. 使用ngc來編譯應用
        1. 使用angular編譯器對模板進行編譯，生成typescript代碼
        2. typescript代碼編譯成js代碼
      3. 打包
      4. 壓縮
      5. 部署
      6. 瀏覽器端下載全部代碼
      7. angular啓動
      8. 應用頁面渲染

      二者的區別在於：

      1. 編譯過程發生的時機
      2. jit生成的是js代碼，aot生成的是ts代碼。這是由於jit在瀏覽器中編譯，沒有必要生成ts代碼，而是直接生成js代碼。

其餘問題

  1. Webpack熱更新實現原理？
  2. Node.js的適用場景？
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程