前端同學大福利,最全的面試題目整理

来源:http://www.cnblogs.com/qianduantuanzhang/archive/2017/10/31/7764361.html
-Advertisement-
Play Games

自己整理了一些關於前端這個行業面試題,好多都不會好難過,I NEED AV……. HTML&CSS 常用那幾種瀏覽器測試?有哪些內核(Layout Engine)? (Q1) 瀏覽器:IE,Chrome,FireFox,Safari,Opera。 (Q2) 內核:Trident,Gecko,Pres ...


自己整理了一些關於前端這個行業面試題,好多都不會好難過,I NEED AV…….

HTML&CSS

  1. 常用那幾種瀏覽器測試?有哪些內核(Layout Engine)? 
    (Q1) 瀏覽器:IE,Chrome,FireFox,Safari,Opera。 
    (Q2) 內核:Trident,Gecko,Presto,Webkit。

  2. 說下行內元素和塊級元素的區別?行內塊元素的相容性使用?(IE8 以下) 
    (Q1) 行內元素:會在水平方向排列,不能包含塊級元素,設置width無效,height無效(可以設置line-height),margin上下無效,padding上下無效。塊級元素:各占據一行,垂直方向排列。從新行開始結束接著一個斷行。 
    (Q2) 相容性:display:inline-block;*display:inline;*zoom:1;

  3. 清除浮動有哪些方式?比較好的方式是哪一種? 
    (Q1)(1)父級div定義height。 
    (2)結尾處加空div標簽clear:both。 
    (3)父級div定義偽類:after和zoom。 
    (4)父級div定義overflow:hidden。 
    (5)父級div定義overflow:auto。 
    (6)父級div也浮動,需要定義寬度。 
    (7)父級div定義display:table。 
    (8)結尾處加br標簽clear:both。

(Q2) 比較好的是第3種方式,好多網站都這麼用。

  1. box-sizing常用的屬性有哪些?分別有什麼作用?

(Q1)box-sizing: content-box|border-box|inherit; 
(Q2)content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框(元素預設效果)。border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

  1. Doctype作用?標準模式與相容模式各有什麼區別? 
    (Q1) 告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以相容模式呈現。 
    (Q2) 標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。在相容模式中,頁面以寬鬆的向後相容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

  2. HTML5 為什麼只需要寫 ? 
    HTML5不基於 SGML,因此不需要對DTD進行引用,但是需要doctype來規範瀏覽器的行為(讓瀏覽器按照它們應該的方式來運行)。而HTML4.01基於SGML,所以需要對DTD進行引用,才能告知瀏覽器文檔所使用的文檔類型。

  3. 頁面導入樣式時,使用link和@import有什麼區別? 
    (1)link屬於XHTML標簽,除了載入CSS外,還能用於定義RSS, 定義rel連接屬性等作用;而@import是CSS提供的,只能用於載入CSS; 
    (2)頁面被載入的時,link會同時被載入,而@import引用的CSS會等到頁面被載入完再載入; 
    (3)import是CSS2.1 提出的,只在IE5以上才能被識別,而link是XHTML標簽,無相容問題。

  4. 介紹一下你對瀏覽器內核的理解?主要分成兩部分: 
    渲染引擎(layout engineer或Rendering Engine)和JS引擎。 
    渲染引擎:負責取得網頁的內容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等),以及計算網頁的顯示方式,然後會輸出至顯示器或印表機。瀏覽器的內核的不同對於網頁的語法解釋會有不同,所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網路內容的應用程式都需要內核。 
    JS引擎則:解析和執行javascript來實現網頁的動態效果。最開始渲染引擎和JS引擎並沒有區分的很明確,後來JS引擎越來越獨立,內核就傾向於只指渲染引擎。(web前端學習交流群:328058344 禁止閑聊,非喜勿進!)

  5. html5有哪些新特性?如何處理HTML5新標簽的瀏覽器相容問題?如何區分 HTML 和 HTML5? 
    (Q1) HTML5 現在已經不是 SGML 的子集,主要是關於圖像,位置,存儲,多任務等功能的增加。 
    (1)繪畫 canvas; 
    (2)用於媒介回放的 video 和 audio 元素; 
    (3)本地離線存儲 localStorage 長期存儲數據,瀏覽器關閉後數據不丟失; 
    (4)sessionStorage 的數據在瀏覽器關閉後自動刪除; 
    (5)語意化更好的內容元素,比如 article、footer、header、nav、section; 
    (6)表單控制項,calendar、date、time、email、url、search; 
    (7)新的技術webworker, websocket, Geolocation; 
    (Q2)IE8/IE7/IE6支持通過document.createElement方法產生的標簽,可以利用這一特性讓這些瀏覽器支持HTML5新標簽,瀏覽器支持新標簽後,還需要添加標簽預設的樣式。當然也可以直接使用成熟的框架、比如html5shim,

  6. 簡述一下你對HTML語義化的理解?用正確的標簽做正確的事情。html語義化讓頁面的內容結構化,結構更清晰,便於對瀏覽器、搜索引擎解析;即使在沒有樣式CSS情況下也以一種文檔格式顯示,並且是容易閱讀的;搜索引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重,利於SEO;使閱讀源代碼的人對網站更容易將網站分塊,便於閱讀維護理解。

JavaScript

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

Undefined、Null、Boolean、Number、String

  1. js有哪些內置對象?

數據封裝類對象:Object、Array、Boolean、Number 和 String 
其他對象:Function、Arguments、Math、Date、RegExp、Error

  1. this對象的理解 
    this總是指向函數的直接調用者(而非間接調用者); 
    如果有new關鍵字,this指向new出來的那個對象; 
    在事件中,this指向觸發這個事件的對象,特殊的是,IE中的attachEvent中的this總是指向全局對象Window。

  2. eval是做什麼的? 
    它的功能是把對應的字元串解析成JS代碼並運行;

應該避免使用eval,不安全,非常耗性能(2次,一次解析成js語句,一次執行)。 
由JSON字元串轉換為JSON對象的時候可以用eval,var obj =eval(‘(‘+ str +’)’)。

  1. DOM怎樣添加、移除、移動、複製、創建和查找節點 
    // 創建新節點createDocumentFragment() //創建一個DOM片段createElement() //創建一個具體的元素createTextNode() //創建一個文本節點 
    // 添加、移除、替換、插入appendChild()removeChild()replaceChild()insertBefore() //在已有的子節點前插入一個新的子節點 
    // 查找 
    getElementsByTagName() //通過標簽名稱 
    getElementsByName() //通過元素的Name屬性的值(IE容錯能力較強,會得到一個數組,其中包括id等於name值的) 
    getElementById() //通過元素Id,唯一性

  2. null和undefined的區別?null是一個表示”無”的對象,轉為數值時為0;undefined是一個表示”無”的原始值,轉為數值時為NaN。

    undefined: 
    (1)變數被聲明瞭,但沒有賦值時,就等於undefined。 
    (2) 調用函數時,應該提供的參數沒有提供,該參數等於undefined。 
    (3)對象沒有賦值的屬性,該屬性的值為undefined。 
    (4)函數沒有返回值時,預設返回undefined。

null: 
(1) 作為函數的參數,表示該函數的參數不是對象。 
(2) 作為對象原型鏈的終點。

  1. new操作符具體幹了什麼呢?(1)創建一個空對象,並且 this 變數引用該對象,同時還繼承了該函數的原型。 
    (2)屬性和方法被加入到 this 引用的對象中。 
    (3)新創建的對象由 this 所引用,並且最後隱式的返回 this 。 
    (web前端學習交流群:328058344 禁止閑聊,非喜勿進!)

  2. JSON 的瞭解? 
    JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 占用帶寬小。 
    格式:採用鍵值對,例如:{‘age’:’12’, ‘name’:’back’}

  3. call() 和 apply() 的區別和作用?apply()函數有兩個參數: 
    第一個參數是上下文, 
    第二個參數是參數組成的數組。 
    如果上下文是null,則使用全局對象代替。 
    如:function.apply(this,[1,2,3]); 
    call()的第一個參數是上下文,後續是實例傳入的參數序列。 
    如:function.call(this,1,2,3);

  4. 如何獲取UA?function whatBrowser() { document.Browser.Name.value=navigator.appName; document.Browser.Version.value=navigator.appVersion; document.Browser.Code.value=navigator.appCodeName; document.Browser.Agent.value=navigator.userAgent; } 

其他

    1. HTTP狀態碼知道哪些? 
      100 Continue 繼續,一般在發送post請求時,已發送了http header之後服務端將返回此信息,表示確認,之後發送具體參數信息 
      200 OK 正常返回信息 
      201 Created 請求成功並且伺服器創建了新的資源 
      202 Accepted 伺服器已接受請求,但尚未處理 
      301 Moved Permanently 請求的網頁已永久移動到新位置。 
      302 Found 臨時性重定向。 
      303 See Other 臨時性重定向,且總是使用 GET 請求新的 URI。304 Not Modified 自從上次請求後,請求的網頁未修改過。 
      400 Bad Request 伺服器無法理解請求的格式,客戶端不應當嘗試再次使用相同的內容發起請求。 
      401 Unauthorized 請求未授權。 
      403 Forbidden 禁止訪問。 
      404 Not Found 找不到如何與 URI 相匹配的資源。 
      500 Internal Server Error 最常見的伺服器端錯誤。 
      503 Service Unavailable 伺服器端暫時無法處理請求(可能是過載或維護)。
    2. 你有哪些性能優化的方法? 
      (1) 減少http請求次數:CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適;網頁Gzip,CDN托管,data緩存 ,圖片伺服器。 
      (2) 前端模板 JS+數據,減少由於HTML標簽導致的帶寬浪費,前端用變數保存AJAX請求結果,每次操作本地變數,不用請求,減少請求次數 
      (3) 用innerHTML代替DOM操作,減少DOM操作次數,優化javascript性能。 
      (4) 當需要設置的樣式很多時設置className而不是直接操作style。 
      (5) 少用全局變數、緩存DOM節點查找的結果。減少IO讀取操作。 
      (6) 避免使用CSS Expression(css表達式)又稱Dynamic properties(動態屬性)。 
      (7) 圖片預載入,將樣式表放在頂部,將腳本放在底部 加上時間戳。

    3. 什麼叫優雅降級和漸進增強? 
      優雅降級:Web站點在所有新式瀏覽器中都能正常工作,如果用戶使用的是老式瀏覽器,則代碼會檢查以確認它們是否能正常工作。由於IE獨特的盒模型佈局問題,針對不同版本的IE的hack實踐過優雅降級了,為那些無法支持功能的瀏覽器增加候選方案,使之在舊式瀏覽器上以某種形式降級體驗卻不至於完全失效。漸進增強:從被所有瀏覽器支持的基本功能開始,逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時,它們會自動地呈現出來併發揮作用。

    4. 哪些常見操作會造成記憶體泄漏? 
      記憶體泄漏指任何對象在您不再擁有或需要它之後仍然存在。 
      垃圾回收器定期掃描對象,並計算引用了每個對象的其他對象的數量。如果一個對象的引用數量為 0(沒有其他對象引用過該對象),或對該對象的惟一引用是迴圈的,那麼該對象的記憶體即可回收。 
      setTimeout 的第一個參數使用字元串而非函數的話,會引發記憶體泄漏。 
      閉包、控制台日誌、迴圈(在兩個對象彼此引用且彼此保留時,就會產生一個迴圈)。

    5. 線程與進程的區別 
      一個程式至少有一個進程,一個進程至少有一個線程。 
      線程的劃分尺度小於進程,使得多線程程式的併發性高。 
      另外,進程在執行過程中擁有獨立的記憶體單元,而多個線程共用記憶體,從而極大地提高了程式的運行效率。  
      線程在執行過程中與進程還是有區別的。每個獨立的線程有一個程式運行的入口、順序執行序列和程式的出口。但是線程不能夠獨立執行,必須依存在應用程式中,由應用程式提供多個線程執行控制。  
      從邏輯角度來看,多線程的意義在於一個應用程式中,有多個執行部分可以同時執行。但操作系統並沒有將多個線程看做多個獨立的應用,來實現進程的調度和管理以及資源分配。這就是進程和線程的重要區別。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在開發的過程中,幾乎不可能一次性就能寫出毫無破綻的程式,斷點調試代碼是一個普遍的需求。 作為前端開發工程師,以往我們開發的JavaScript程式都運行在瀏覽器端,利用Chrome提供的開發者工具就可以方便的進行源碼斷點調試。其步驟有四,詳情不表,粗略概括如下: 但是,當我們用JavaScript開 ...
  • 控制項概述 Google Maps 上的地圖包含用戶界面元素,可以讓用戶通過地圖進行交互。這些元素稱為“控制項”。您可以在 Google Maps API 應用程式中添加這些控制項的多種組合。或者,您也可以不進行任何操作,讓 Google Maps API 處理所有控制項行為。 Google Maps AP ...
  • /** 日期格式化 */Date.prototype.Format = function(format) { var o = { "M+" : this.getMonth() + 1, // month "d+" : this.getDate(), // day "H+" : this.getHou ...
  • z 品牌:騰訊案例地址:http://www.199case.com/caseview.aspx?id=624 來源:199case_H5案例庫 1、內容:通過首頁的js動態按鈕進入下一界面,整個過程橫屏設置,採用了拍攝好的完整多骨諾視頻,並且在視頻的不同節點出現相應文字,可以鮮明和充分的展現TEG ...
  • 品牌:保時捷 案例地址:http://www.199case.com/caseview.aspx?id=2875 來源:199case-H5案例庫 1、內容:一個以”捕捉迅疾魅影“為主題的聲音識別類的h5,用戶可以通過聽取最大的跑車的引擎聲,然後點擊相機狀的按鈕,即可拍攝成功,最後展示類保時捷的跑車 ...
  • 複習作用域 上一節我們說到作用域:是指變數可以訪問的範圍,他規定瞭如何查找變數,以及確定當前執行代碼對變數的訪問許可權;也說到靜態作用域即詞法作用域,是在編譯階段決定變數的引用(由程式定義的位置決定,和代碼執行順序無關,用嵌套的方式解析)。 凝問 如上代碼,在執行run函數時,在run作用域中有nam ...
  • 實現效果: 實現原理: // 步驟 // 1. 獲取事件源以及相關元素 // 2. 複製第一張圖片所在的li,添加到ul的最後面 // 3. 給ol添加li,ul中的個數-1個,並點亮第一個按鈕 // 4. 滑鼠放到ol的li上切換圖片 // 5. 添加定時器 // 6. 左右切換圖片(滑鼠放上去隱 ...
  • 前端分頁的Table配置函數 根據每行數據的一個欄位的值來改變行的背景色(class好像只能調用他本來預設的那幾個,很久之前寫的忘記了是不是這樣的) 這個是根據每行數據的一個欄位的值來是否禁用選擇框(我在之前項目需要做結算,已結算的和未結算的在一起,因此需要這個),formatter還可以寫別的函數 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...