分享一篇前端面試總結文章

文章來源於https://juejin.im/post/5bee888fe51d4557fe34e356,感謝原文做者的分享。另推薦一篇文章:[前端技術清單]css

基礎知識

本部分主要從如下幾個方面來回顧前端相關的基礎知識:html

  • HTML相關
  • CSS相關
  • JAVASCRIPT相關
  • DOM相關
  • HTTP相關
  • webpack相關

Html

根據內容的結構化(內容語義化),選擇合適的標籤(代碼語義化)便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。在選擇標籤時請遵循如下原則: 1.儘量少的使用無語義的標籤div和span; 2.在語義不明顯時,既可使用div或者p時,儘可能用p, 由於p在默認狀況下有上下間距,對兼容特殊終端有利; 3.不要使用純樣式標籤,如:b、font、u等,改用css設置。 4.須要強調的文本,能夠包含在strong或者em標籤中(瀏覽器預設樣式,能用CSS指定就不用他們),strong默認樣式是加粗(不要用b),em是斜體(不用i); 5.使用表格時,標題要用caption,表頭用thead,主體部分用tbody包圍,尾部用tfoot包圍。表頭和通常單元格要區分開,表頭用th,單元格用td; 6.表單域要用fieldset標籤包起來,並用legend標籤說明表單的用途; 7.每一個input標籤對應的說明文本都須要使用label標籤,而且經過爲input設置id屬性,在lable標籤中設置for=someld來讓說明文本和相對應的input關聯起來。

2 meta viewport

<meta charset=’utf-8′> 聲明文檔使用的字符編碼
<meta http-equiv=」X-UA-Compatible」 content=」IE=edge,chrome=1″/> 優先使用 IE 最新版本和 Chrome
<meta name=」description」 content=」不超過150個字符」/> 頁面描述
<meta name=」keywords」 content=」」/> 頁面關鍵詞 
<meta name=」author」 content=」name, email@gmail.com」/> 網頁做者
<meta name=」robots」 content=」index,follow」/> 搜索引擎抓取 
<meta name=」viewport」 content=」initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no」> 爲移動設備添加 viewport
<meta name=」apple-mobile-web-app-title」 content=」標題」> iOS 設備 begin <meta name=」apple-mobile-web-app-capable」 content=」yes」/> 添加到主屏後的標題(iOS 6 新增) 是否啓用 WebApp 全屏模式,刪除蘋果默認的工具欄和菜單欄 
<meta name=」apple-itunes-app」 content=」app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL」> 添加智能 App 廣告條 Smart App Banner(iOS 6+ Safari)
<meta name=」apple-mobile-web-app-status-bar-style」 content=」black」/> 
<meta name=」format-detection」 content=」telphone=no, email=no」/> 設置蘋果工具欄顏色
<meta name=」renderer」 content=」webkit」> 啓用360瀏覽器的極速模式(webkit)
 <meta http-equiv=」X-UA-Compatible」 content=」IE=edge」> 避免IE使用兼容模式 
<meta http-equiv=」Cache-Control」 content=」no-siteapp」 /> 不讓百度轉碼
 <meta name=」HandheldFriendly」 content=」true」> 針對手持設備優化,主要是針對一些老的不識別viewport的瀏覽器,好比黑莓
<meta name=」MobileOptimized」 content=」320″> 微軟的老式瀏覽器
<meta name=」screen-orientation」 content=」portrait」> uc強制豎屏
<meta name=」x5-orientation」 content=」portrait」> QQ強制豎屏
<meta name=」full-screen」 content=」yes」> UC強制全屏
<meta name=」x5-fullscreen」 content=」true」> QQ強制全屏
<meta name=」browsermode」 content=」application」> UC應用模式
<meta name=」x5-page-mode」 content=」app」> QQ應用模式
<meta name=」msapplication-tap-highlight」 content=」no」> windows phone 點擊無高光 設置頁面不緩存
<meta http-equiv=」pragma」 content=」no-cache」><meta http-equiv=」cache-control」 content=」no-cache」><meta http-equiv=」expires」 content=」0″>複製代碼



3 canvas

經常使用api: 1.fillRect(x,y,width,height)實心矩形 2.strokeRect(x,y,width,height)空心矩形 3.fillText("Hello world",200,200);實心文字 4.strokeText("Hello world",200,300)空心文字

CSS

1.盒模型

①ie盒模型算上border、padding及自身(不算margin),標準的只算上自身窗體的大小 css設置方法以下:
前端

/* 標準模型 */vue

 box-sizing:content-box;html5

 /*IE模型*/ react

box-sizing:border-box;
webpack

幾種得到寬高的方式
css3

dom.style.width/height 
es6

這種方式只能取到dom元素內聯樣式所設置的寬高,也就是說若是該節點的樣式是在style標籤中或外聯的CSS文件中設置的話,經過這種方法是獲取不到dom的寬高的
web

dom.currentStyle.width/height 

這種方式獲取的是在頁面渲染完成後的結果,就是說無論是哪一種方式設置的樣式,都能獲取到。但這種方式只有IE瀏覽器支持。

window.getComputedStyle(dom).width/height 

這種方式的原理和2是同樣的,這個能夠兼容更多的瀏覽器,通用性好一些。


dom.getBoundingClientRect().width/height

這種方式是根據元素在視窗中的絕對位置來獲取寬高的。

dom.offsetWidth/offsetHeight 

這個就沒什麼好說的了,最經常使用的,也是兼容最好的


2,css reset 和 normalize.css 有什麼區別

  • 二者都是經過重置樣式,保持瀏覽器樣式的一致性;
  • 前者幾乎爲全部標籤添加了樣式,後者保持了許多瀏覽器樣式,保持儘量的一致;
  • 後者修復了常見的桌面端和移動端瀏覽器的bug:包含了HTML5元素的顯示設置、預格式化文字的font-size問題、在IE9中SVG的溢出、許多出如今各瀏覽器和操做系統中的與表單相關的bug。
  • 前者中含有大段的繼承鏈;
  • 後者模塊化,文檔較前者來講豐富;

3,清除浮動 不清楚浮動會發生高度塌陷:浮動元素父元素高度自適應(父元素不寫高度時,子元素寫了浮動後,父元素會發生高度塌陷)
  • clear清除浮動(添加空div法)在浮動元素下方添加空div,並給該元素寫css樣式:{clear:both;height:0;overflow:hidden;}
  • 給浮動元素父級設置高度;
  • 父級同時浮動(須要給父級同級元素添加浮動);
  • 父級設置成inline-block,其margin: 0 auto居中方式失效;
  • 利用br標籤的clear屬性;
  • 給父級添加overflow:hidden 清除浮動方法;
  • 萬能清除法 after僞類 清浮動(如今主流方法,推薦使用);

  • .float_div:after{

     content:"."; clear:both; 

     display:block; height:0;

     overflow:hidden; 

     visibility:hidden; 

    }

     .float_div{ 

     zoom:1 

    }

    4,畫三角形

    #item { width: 0; 

     height: 0; 

     border-left: 50px solid transparent; 

     border-right: 50px solid transparent;

     border-top: 50px solid transparent; 

     border-bottom: 50px solid blue; 

     background: white;

     }


    JavaScript

    1,什麼是當即執行函數?使用當即執行函數的目的是什麼?

    常見兩種方式 1.(function(){...})() (function(x){ console.log(x); })(12345) 

    2.(function(){...}()) (function(x){ console.log(x); }(12345)) 

    做用 不破壞污染全局的命名空間,若須要使用,將其用變量傳入如 (function(window){...}(window)

    2,async/await

    ES7 提出的async 函數,終於讓 JavaScript 對於異步操做有了終極解決方案。No more callback hell。 async 函數是 Generator 函數的語法糖。使用 關鍵字 async 來表示,在函數內部使用 await 來表示異步。 想較於 Generator,Async 函數的改進在於下面四點:

    • 內置執行器。Generator 函數的執行必須依靠執行器,而 Aysnc 函數自帶執行器,調用方式跟普通函數的調用同樣;
    • 更好的語義。async 和 await 相較於 * 和 yield 更加語義化;
    • 更廣的適用性。co 模塊約定,yield 命令後面只能是 Thunk 函數或 Promise對象。而 async 函數的 await命令後面則能夠是 Promise 或者 原始類型的值(Number,string,boolean,但這時等同於同步操做);
    • 返回值是 Promise。async 函數返回值是 Promise 對象,比 Generator 函數返回的 Iterator對象方便,能夠直接使用 then() 方法進行調用。

    下面是使用示例:

    做用:異步代碼的新方式 promise示例 

    const makeRequest = () => { 

     return getJSON() .then(data => {

     if (data.needsAnotherRequest) {

     return makeAnotherRequest(data) .then(moreData => { 

     console.log(moreData) return moreData }) 

     } else {

     console.log(data) return data } })

     } async/await示例 const makeRequest = async () => { 

     const data = await getJSON() if (data.needsAnotherRequest) { const moreData = await makeAnotherRequest(data); console.log(moreData) return moreData

     } else {

     console.log(data) return data 

      }

     }


    HTTP

    常見狀態碼

  • 200 (成功) 服務器已成功處理了請求。 一般,這表示服務器提供了請求的網頁。
  • 201 (已建立) 請求成功而且服務器建立了新的資源。
  • 202 (已接受) 服務器已接受請求,但還沒有處理。
  • 203 (非受權信息) 服務器已成功處理了請求,但返回的信息可能來自另外一來源。
  • 204 (無內容) 服務器成功處理了請求,但沒有返回任何內容。
  • 205 (重置內容) 服務器成功處理了請求,但沒有返回任何內容。
  • 206 (部份內容) 服務器成功處理了部分 GET 請求

  • 3開頭 (請求被重定向)表示要完成請求,須要進一步操做。 一般,這些狀態代碼用來重定向。

    • 300 (多種選擇) 針對請求,服務器可執行多種操做。 服務器可根據請求者 (user agent)選擇一項操做,或提供操做列表供請求者選擇。
    • 301 (永久移動) 請求的網頁已永久移動到新位置。 服務器返回此響應(對 GET 或 HEAD請求的響應)時,會自動將請求者轉到新位置。
    • 302 (臨時移動) 服務器目前從不一樣位置的網頁響應請求,但請求者應繼續使用原有位置來進行之後的請求。
    • 303 (查看其餘位置) 請求者應當對不一樣的位置使用單獨的 GET 請求來檢索響應時,服務器返回此代碼。
    • 304 (未修改) 自從上次請求後,請求的網頁未修改過。 服務器返回此響應時,不會返回網頁內容。
    • 305 (使用代理) 請求者只能使用代理訪問請求的網頁。 若是服務器返回此響應,還表示請求者應使用代理。
    • 307 (臨時重定向) 服務器目前從不一樣位置的網頁響應請求,但請求者應繼續使用原有位置來進行之後的請求。

    4開頭 (請求錯誤)這些狀態代碼表示請求可能出錯,妨礙了服務器的處理。
  • 400 (錯誤請求) 服務器不理解請求的語法。
  • 401 (未受權) 請求要求身份驗證。 對於須要登陸的網頁,服務器可能返回此響應。
  • 403 (禁止) 服務器拒絕請求。
  • 404 (未找到) 服務器找不到請求的網頁。
  • 405 (方法禁用) 禁用請求中指定的方法。
  • 406 (不接受) 沒法使用請求的內容特性響應請求的網頁。
  • 407 (須要代理受權) 此狀態代碼與 401(未受權)相似,但指定請求者應當受權使用代理。
  • 408 (請求超時) 服務器等候請求時發生超時。
  • 409 (衝突) 服務器在完成請求時發生衝突。 服務器必須在響應中包含有關衝突的信息。
  • 410 (已刪除) 若是請求的資源已永久刪除,服務器就會返回此響應。
  • 411 (須要有效長度) 服務器不接受不含有效內容長度標頭字段的請求。
  • 412 (未知足前提條件) 服務器未知足請求者在請求中設置的其中一個前提條件。
  • 413 (請求實體過大) 服務器沒法處理請求,由於請求實體過大,超出服務器的處理能力。
  • 414 (請求的 URI 過長) 請求的 URI(一般爲網址)過長,服務器沒法處理。
  • 415 (不支持的媒體類型) 請求的格式不受請求頁面的支持。
  • 416 (請求範圍不符合要求) 若是頁面沒法提供請求的範圍,則服務器會返回此狀態代碼。
  • 417 (未知足指望值) 服務器未知足"指望"請求標頭字段的要求。

  • 5開頭(服務器錯誤)這些狀態代碼表示服務器在嘗試處理請求時發生內部錯誤。 這些錯誤多是服務器自己的錯誤,而不是請求出錯。
  • 500 (服務器內部錯誤) 服務器遇到錯誤,沒法完成請求。
  • 501 (還沒有實施) 服務器不具有完成請求的功能。 例如,服務器沒法識別請求方法時可能會返回此代碼。
  • 502 (錯誤網關) 服務器做爲網關或代理,從上游服務器收到無效響應。
  • 503 (服務不可用) 服務器目前沒法使用(因爲超載或停機維護)。 一般,這只是暫時狀態。
  • 504 (網關超時) 服務器做爲網關或代理,可是沒有及時從上游服務器收到請求。
  • 505 (HTTP 版本不受支持) 服務器不支持請求中所用的 HTTP 協議版本。

  • GET 與POST區別



    常見面試題

    1.怎樣添加、移除、移動、複製、建立和查找節點?

    ①建立新節點

    createDocumentFragment //建立新DOM片斷

     createElement //建立一個元素

     createTextNode //建立一個文本節點

    ②添加 移除 替換 插入

    appendChild() //添加 

    removeChild //移除 

    replaceChild //替換 

    insertBofore //插入

    ③查找

    getElementsByTagName() //經過標籤名查找 

    getElementsByName() //經過元素的name屬性查找 

    getElementById() //經過元素的id查找

    querySelectorAll()和querySelector()複製代碼

    2.如何理解閉包

    定義和用法: 一個父函數裏面包含了一個子函數,子函數調用了父函數內部的變量,若是子函數在外部被調用,就產生了閉包。簡單的說,閉包就是可以讀取其餘函數內部變量的函數。

    閉包的做用:

     ①讀取其餘函數內部的變量

     ②變量保存在內存中

    注意: 使用過多的閉包會消耗大量內存,形成網頁的性能問題,能夠在函數執行完成以前把不須要的局部變量刪除。

    3.sessionStorge , localStorge , cookie , Web Storage之間的區別

    ①數據存儲大小 cookie:4kb webStorge:5mb

    ②數據存儲有效期限 cookie:根據本身的設置時間 sessionStorage:關閉窗口後失效

    localStorage:永久有效除非js刪除或者瀏覽器刪除 ③做用域 cookie和localStorage是在同源窗口,同一個瀏覽器共享的,sessionStorage只在同一個標籤頁共享。

    4.請指出document load和document ready的區別?

    ready:頁面的文檔結構加載完成,不包括圖片視頻等非文字內容。 load:全部頁面元素都加載完成 ready的速度比load快

    5.網站性能優化

    網站性能優化主要從如下幾個方面進行優化: 

    ①資源文件js css 圖片合併壓縮

     ②減小頁面dom操做,操做多的話能夠考慮使用虛擬dom 

    ③減小http請求 

    ④使用cdn加速 cdn的做用:cdn能夠處理整個網站 70%-95%的訪問量,從而解決網站的併發量,簡單的說就是經過在不一樣地點緩存內容,而後經過負載平衡等技術將用戶請求定向到最近的緩存服務器上獲取內容,提升用戶訪問網站的響應速度。 

    ⑤減小cookie大小


    6.簡述從瀏覽器地址欄輸入url到顯示頁面的步驟

    涉及的主要流程或步驟有:

     ①瀏覽器根據請求的URL,交給DNS域名解析,找到真實的ip,交給域名解析。 

    ②服務器交給後端處理完成後返回的數據,瀏覽器接收文件HTML,CSS,JS圖片等。

     ③瀏覽器對加載的資源進行語法解析,創建相應的數據內部結構。

     ④解析html,建立dom樹,自上而下的順序

     ⑤解析css,優先級:瀏覽器默認設置<用戶設置<外部樣式<內聯樣式<HTML中的style樣式;  

    ⑥將css與dom合併,構建渲染樹 

    ⑦佈局重繪重排,頁面完成渲染。


    7.對瀏覽器內核的理解

    主要分爲渲染引擎和js引擎 渲染引擎:主要負責取得網頁的(html,xml,圖片等),整理信息結合css渲染頁面,計算網頁的顯示方式,瀏覽器內核的不一樣對網頁的語法解釋也會有所不一樣,因此渲染效果也會有所不一樣,這也是咱們須要作兼容性處理的緣由。

    js引擎:解析和執行js來達到網頁的動態交互效果。


    9.html5有哪些新特性

    新增了 canvas,video,audio,nav,section,footer,header等元素。 表單控件,calendar、date、time、email、url、search 存儲技術:localStorage,sessionStorage等 新的技術:webworker, websocket, Geolocation

    10.iframe的缺點

    ①iframe會阻塞頁面的 onload事件 

    ②搜索引擎不可以解讀 iframe 頁面,不利於 seo 

    ③iframe和主頁面共享鏈接池,然而瀏覽器對相同域的連接是有限制的,因此這會影響頁面的並行加載。 

    ④若是想要繞開以上的2個問題,能夠考慮經過js動態復職給 iframe添加src值。


    11.web標準以及w3c標準

    標籤閉合,標籤小寫,不亂嵌套,使用外鍊形式的css和js,結構層,表現層,行爲層分離。

    12.xhtml和html有什麼區別

    TML與XHTML之間的差異,主要分爲功能上的差異和書寫習慣的差異兩方面。

    關於功能上的差異,主要是XHTML可兼容各大瀏覽器、手機以及PDA,而且瀏覽器也能快速正確地編譯網頁。

    因爲XHTML的語法較爲嚴謹,因此若是你是習慣鬆散結構的HTML編寫者,那須要注意XHTML的規則。

    13.Doctype做用,嚴格模式與混雜模式如何區分?它們有何意義?

    Doctype處於文檔的最前面,用來告訴瀏覽器的解析器,文檔的類型。 嚴格模式的js運行和排版是按照瀏覽器支持的最高標準的。 混雜模式就是兼容性模式,當頁面兼容很差的時候,就能夠選用這種模式,防止頁面佈局錯落沒法站點工做。

    14.行內元素有哪些,塊級元素有哪些,空(void)元素有那些?行內元素和塊級元素有什麼區別?

    行內元素:a b span img input select strong 塊級元素:div ul li ol dl dt dd h1 h2 h3 p 空元素:br hr link meta 塊級元素獨佔一行,行內元素合一併行一行

    15.html的全局屬性有哪些

    class:爲元素設置類標識 data-**:爲元素添加自定義屬性 draggable:設置元素是否能夠拖曳 id:元素的id,同一個id文檔內是惟一的 style:元素樣式 title:鼠標上移顯示信息

    16.canvas和svg的區別

    svg繪製出來的圖片有獨立dom節點,能夠綁定事件,是矢量圖,放大圖片不會有鋸齒。 canvas繪製出來的圖片是一個畫布,等於就是一張圖,放大會產生鋸齒。

    17.css sprite是什麼,有什麼優缺點

    就是將多個小圖標拼接在一張圖片上,減小對圖片的請求,使用 background-size來定位到相關圖片上。

    優勢: ①減小HTTP請求數,極大地提升頁面加載速度; ②增長圖片信息重複度,提升壓縮比,減小圖片大小; ③更換風格方便,只需在一張或幾張圖片上修改顏色或樣式便可實現;

    缺點: ①圖片合併麻煩; ②維護麻煩,修改一個圖片可能須要重新佈局整個圖片,樣式;

    18.display: none;與visibility: hidden;的區別

    總的來講,他們的做用都是讓元素不可見。區別在於: display:none會讓元素徹底從 dom 樹中消失,渲染的時候不佔據任何空間。 visibility:hidden不會讓元素從渲染樹 dom 中消失,並且仍是會佔據必定的空間,只是內容不可見而已。

    19.link與@import的區別

    1.link是html 的方式,@import是css的方式 2.link最大限度支持並行下載,@import過多嵌套致使串行下載 3.link能夠經過rel="alternate stylesheet"指定候選樣式 4.整體來講:link優於@import

    20.清除浮動的幾種方式

    1.clear:both,添加一個空標籤div 2.父級div定義僞類:after和zoom 3.父級div定義overflow:hidden 4.父級div也浮動,須要定義寬度 5.結尾處加br標籤clear:both

    例如:

    .clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}
    .clearfix{display:inline-table}
    .clearfix{height:1%}
    .clearfix{display:block;*zoom:1}複製代碼

    21.爲何要初始化css樣式

    由於瀏覽器的兼容問題,不一樣瀏覽器對有些標籤的默認值是不一樣的,若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。 固然,初始化樣式會對SEO有必定的影響,但魚和熊掌不可兼得,但力求影響最小的狀況下初始化。

    22.css3有哪些新特性

    主要的新特性有:

    • 新增各類css選擇器
    • 圓角 border-radius
    • 多列布局
    • 陰影和反射
    • 文字特效text-shadow
    • 線性漸變
    • 旋轉transform
    • 動畫效果

    23.介紹一下css盒子模型

    有兩種, IE盒子模型、W3C盒子模型; 盒模型: 內容(content)、填充(padding)、邊界(margin)、 邊框(border); 區 別: IE(低版本)的content部分把 border 和 padding計算了進去;

    24.css的優先級算法是怎麼樣的

    優先級爲: !important > id > class > tag 且important 比 內聯優先級高。

    25.base64的原理及優缺點

    優勢:能夠將二進制數據轉化爲可打印字符,方便傳輸數據,對數據進行簡單的加密,肉眼安全。 缺點:內容編碼後體積變大,編碼和解碼須要CPU額外工做量。

    26.說說你對做用於鏈的理解

    做用域鏈中的變量都是向上訪問的,變量訪問到windows對象後終止,向下訪問是不容許的。 簡單的說,做用域就是變量函數的可訪問範圍。

    27.js原型,原型鏈有什麼特色

    每一個對象在內部都是會初始化一個屬性的,prototype(原型),當咱們訪問一個對象的屬性時,若是這個對象不存在這個屬性,那麼他就會去 prototype中查找,而後 prototype中還有本身的 prototype,就這樣一直找下去,這就是原型鏈的概念。

    28.什麼是事件代理,事件委託

    假如咱們有一個 ul 列表,裏面有4個li,咱們能夠在 li 上綁定 click 事件,可是也能夠在她們的 父節點 ul上綁定,這種在 父節點上綁定事件來代替子節點事件的方法,就叫作事件委託。

    29.談談對this的理解

    this老是指向函數的直接調用者(而非間接調用者) 若是有new關鍵字,this指向new出來的那個對象 在事件中,this指向觸發這個事件的對象,特殊的是,IE中的attachEvent中的this老是指向全局對象Window

    30.事件模型是什麼

    w3c中定義的事件發生的過程的3個階段: 捕獲階段(capturing)、目標階段(targetin)、冒泡階段(bubbling)

    31.ajax的優缺點

    優勢: 經過異步模式,提高了用戶體驗. 優化了瀏覽器和服務器之間的傳輸,減小沒必要要的數據往返,減小了帶寬佔用. Ajax在客戶端運行,承擔了一部分原本由服務器承擔的工做,減小了大用戶量下的服務器負載。 Ajax能夠實現動態不刷新(局部刷新)

    缺點: 安全問題 AJAX暴露了與服務器交互的細節。 對搜索引擎的支持比較弱。 不容易調試。

    32.怎麼解決跨域問題

    跨域問題能夠從jsonp、 iframe、window.name、window.postMessage、服務器上設置代理頁面等方面來解決。通常由後臺設置容許跨域。

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

    內存泄漏是指 一些對象咱們不在使用它的時候,他任然存在 setTimeout 的第一個參數使用字符串而非函數的話,會引起內存泄漏 閉包使用不當。

    簡述vue、react、angular

    1、Angular特性: 由本身實現一套模板編譯規則,數據變化依賴髒檢查, 基本屬性包括:數據雙向綁定、基本模板指令、自定義指令、表單驗證、路由操做、依賴注入、過濾器、內置服務、自定義服務、組件、模塊。 運行效率較低,數據變動檢測方式。 學習angular會迫使你學習特有的預發,上手成本很大,代碼看起來很乾淨 依賴注入,即一個對象將依賴項提供給另外一個對象(客戶端)的模式。致使更多的靈活性和更乾淨的代碼。 Angular 最適合單頁應用(SPA),由於它可能太臃腫而不能用於微服務。 框架比較臃腫,每次用啥功能要引入一大堆東西 Angular錯誤提示不夠清晰明顯,對於初級開發者,很難看懂Angular的錯誤提示。(我的認爲這是最大的很差之處,當初學習這個遇到不少坑啊),並且定位bug很難。 面向對象編程的思想,Angular由後端開發人員設計的前端框架。 詳細比較:React和Vue的區別

    2、React特性: 單向綁定,先更新model,而後渲染UI元素,數據在一個方向流動,使得調試更加容易。代碼冗餘,各類生命週期太麻煩,剛開始接觸好難記。 用了虛擬DOM。(對虛擬DOM的理解剛開始我不是很理解概念,建議你們去看【深刻REACT技術棧】這本書有很好的講解) 更適合大型應用和更好的可測試性 Web端和移動端原生APP通吃 更大的生態系統,更多的支持和好用的工具

    3、Vue特性 模板和渲染函數的彈性選擇 簡單的語法和項目配置 更快的渲染速度和更小的體積四

    35.eval是什麼

    它的功能是把對應的字符串解析成JS代碼並運行 應該避免使用eval,不安全,很是耗性能(2次,一次解析成js語句,一次執行) 由JSON字符串轉換爲JSON對象的時候能夠用eval,var obj =eval('('+ str +')')

    36.null和undefine的區別

    undefine: 表示不存在這個值,若是變量被聲明瞭沒有賦值。 null: 變量被定義賦值了,可是爲空的狀況,沒有任何屬性方法和值 在驗證null時,必定要使用 === ,由於 ==沒法分別null 和 undefined

    37.談談對json的瞭解

    json是JavaScript Object Notation的縮寫,即JavaScript對象表示法,是一種輕量級的數據交換格式,易於閱讀和編寫,同時也易於機器解析和生成。json是存儲和交換文本信息的語法,相似於XML。json採用徹底獨立與語言的文本格式,它的語言格式相似於c語言家族。這些特性也使的json成爲理想的數據交換語言。

    JSON字符串轉換爲JSON對象:

    var obj =eval('('+ str +')');
    var obj = str.parseJSON();
    var obj = JSON.parse(str);
    複製代碼複製代碼

    JSON對象轉換爲json字符串

    var last=obj.toJSONString();
    var last=JSON.stringify(obj);
    複製代碼複製代碼

    38.同步和異步的區別

    同步:瀏覽器訪問服務器請求,用戶看獲得頁面刷新,從新發請求,等請求完,頁面刷新,新內容出現,用戶看到新內容,進行下一步操做。 異步:瀏覽器訪問服務器請求,用戶正常操做,瀏覽器後端進行請求。等請求完,頁面不刷新,新內容也會出現,用戶看到新內容。

    39.漸進加強和優雅降級

    漸進加強 :針對低版本瀏覽器進行構建頁面,保證最基本的功能,而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。 優雅降級 :一開始就構建完整的功能,而後再針對低版本瀏覽器進行兼容。

    40.attribute和property的區別是什麼?

    attribute是dom元素在文檔中做爲html標籤擁有的屬性; property就是dom元素在js中做爲對象擁有的屬性。

    41.談談對ES6的理解

    es6是一個新的標準,它包含了許多新的語言特性和庫,是JS最實質性的一次升級。 好比’箭頭函數’、’字符串模板’、’generators(生成器)’、’async/await’、’解構賦值’、’class’等等,還有就是引入module模塊的概念。

    可讓this指向固定化,這種特性頗有利於封裝回調函數

    • (1)函數體內的this對象,就是定義時所在的對象,而不是使用時所在的對象。
    • (2)不能夠看成構造函數,也就是說,不可使用new命令,不然會拋出一個錯誤。
    • (3)不可使用arguments對象,該對象在函數體內不存在。若是要用,能夠用Rest參數代替。
    • (4)不可使用yield命令,所以箭頭函數不能用做Generator函數。

    async/await 是寫異步代碼的新方式,之前的方法有回調函數和Promise。 async/await是基於Promise實現的,它不能用於普通的回調函數。async/await與Promise同樣,是非阻塞的。 async/await使得異步代碼看起來像同步代碼,這正是它的魔力所在。

    42.什麼是面向對象的編程和麪向過程的編程,以及異同和優缺點

    面向過程就是對一個問題提出解決思路,而後一步步的列出函數解決,依次調用。 面向對象就是將構成問題分解成各個對象,創建對象的目的不是爲了完成一個步驟,而是爲了描敘某個事物在整個解決問題的步驟中的行爲。 面向對象是以功能來劃分問題,而不是步驟

    43.說說你對Promise的理解

    所謂Promise,簡單說就是一個容器,裏面保存着某個將來纔會結束的事件(一般是一個異步操做)的結果。從語法上說,Promise 是一個對象,從它能夠獲取異步操做的消息。Promise 提供統一的 API,各類異步操做均可以用一樣的方法進行處理。

    Promise對象有如下兩個特色:

    • 對象的狀態不受外界影響,Promise對象表明一個異步操做,有三種狀態:Pending(進行中)、Resolved(已完成,又稱Fulfilled)和Rejected(已失敗)
    • 一旦狀態改變,就不會再變,任什麼時候候均可以獲得這個結果。
    相關文章
    相關標籤/搜索