四年前端js面試題

Ⅰ 前端開發工程師面試題目大全

HTML

Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義?


HTML5為什麼只需要寫？


行內元素有哪些？塊級元素有哪些？空(void)元素有那些？


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


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


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


html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分HTML和HTML5？


簡述一下你對HTML語義化的理解？


HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？


瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？


請描述一下cookies，sessionStorage和localStorage的區別？


iframe有那些缺點？


Label的作用是什麼？是怎麼用的？（加for或包裹）


HTML5的form如何關閉自動完成功能？


如何實現瀏覽器內多個標簽頁之間的通信?(阿里)


webSocket如何兼容低瀏覽器？(阿里)


頁面可見性（PageVisibilityAPI）可以有哪些用途？


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


實現不使用border畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。


網頁驗證碼是幹嘛的，是為了解決什麼安全問題？


title與h1的區別、b與strong的區別、i與em的區別？


CSS


介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不同的？


CSS選擇符有哪些？哪些屬性可以繼承？


CSS優先順序演算法如何計算？


CSS3新增偽類有那些？


如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？


display有哪些值？說明他們的作用。


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


CSS3有哪些新特性？


請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？


用純CSS創建一個三角形的原理是什麼？


css多列等高如何實現？


一個滿屏品字布局如何設計?


經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什麼，常用hack的技巧？


li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？


為什麼要初始化CSS樣式?


absolute的containingblock計算方式跟正常流有什麼不同？


CSS里的visibility屬性有個collapse屬性值是幹嘛用的？在不同瀏覽器下以後什麼區別？


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


對BFC規范(塊級格式化上下文：blockformattingcontext)的理解？


CSS權重優先順序是如何計算的？


請解釋一下為什麼需要清除浮動？清除浮動的方式


zoom:1的清楚浮動原理?


移動端的布局用過媒體查詢嗎？


使用CSS預處理器嗎？喜歡那個？


CSS優化、提高性能的方法有哪些？


瀏覽器是怎樣解析CSS選擇器的？


在網頁中的應該使用奇數還是偶數的字體？為什麼呢？


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


抽離樣式模塊怎麼寫，說出思路，有無實踐經驗？[阿里航旅的面試題]


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


全屏滾動的原理是什麼？用到了CSS的那些屬性？


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


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


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


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


你對line-height是如何理解的？


設置元素浮動後，該元素的display值是多少？（自動變成display:block）


怎麼讓Chrome支持小於12px的文字？


讓頁面里的字體變清晰，變細用CSS怎麼做？（-webkit-font-smoothing:antialiased;）


font-style屬性可以讓它賦值為「oblique」oblique是什麼意思？


position:fixed;在android下無效怎麼處理？


如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿里）


display:inline-block什麼時候會顯示間隙？(攜程)


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


有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度。


png、jpg、gif這些圖片格式解釋一下，分別什麼時候用。有沒有了解過webp？


什麼是Cookie隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼做）


style標簽寫在body後與body前有什麼區別？


什麼是CSS預處理器/後處理器？


JavaScript


介紹JavaScript的基本數據類型。


說說寫JavaScript的基本規范？


JavaScript原型，原型鏈?有什麼特點？


JavaScript有幾種類型的值？（堆：原始數據類型和棧：引用數據類型），你能畫一下他們的內存圖嗎？


Javascript如何實現繼承？


Javascript創建對象的幾種方式？


Javascript作用鏈域?


談談this對象的理解。


eval是做什麼的？


什麼是window對象?什麼是document對象?


null，undefined的區別？


寫一個通用的事件偵聽器函數(機試題)。


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


關於事件，IE與火狐的事件機制有什麼區別？如何阻止冒泡？


什麼是閉包（closure），為什麼要用它？


javascript代碼中的"usestrict";是什麼意思?使用它區別是什麼？


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


new操作符具體幹了什麼呢?


用原生JavaScript的實現過什麼功能嗎？


Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？


對JSON的了解？


[].forEach.call($$("*"),function(a){a.style.outline="1pxsolid#"+(~~(Math.random()*(1<<24))).toString(16)})能解釋一下這段代碼的意思嗎？


js延遲載入的方式有哪些？


Ajax是什麼?如何創建一個Ajax？


同步和非同步的區別?


如何解決跨域問題?


頁面編碼和被請求的資源編碼如果不一致如何處理？


模塊化開發怎麼做？


AMD（Moles/Asynchronous-Definition）、CMD（CommonMoleDefinition）規范區別？


requireJS的核心原理是什麼？（如何動態載入的？如何避免多次載入的？如何緩存的？）


JS模塊載入器的輪子怎麼造，也就是如何實現一個模塊載入器？


談一談你對ECMAScript6的了解？


ECMAScript6怎麼寫class，為什麼會出現class這種東西?


非同步載入的方式有哪些？


documen.write和innerHTML的區別?


DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?


.call()和.apply()的作用和區別？


數組和對象有哪些原生方法，列舉一下？


JS怎麼實現一個類。怎麼實例化這個類


JavaScript中的作用域與變數聲明提升？


如何編寫高性能的Javascript？


那些操作會造成內存泄漏？


JQuery的源碼看過嗎？能不能簡單概況一下它的實現原理？


jQuery.fn的init方法返回的this指的是什麼對象？為什麼要返回this？


jquery中如何將數組轉化為json字元串，然後再轉化回來？


jQuery的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝？


jquery.extend與jquery.fn.extend的區別？


jQuery的隊列是如何實現的？隊列可以用在哪些地方？


談一下Jquery中的bind(),live(),delegate(),on()的區別？


JQuery一個對象可以同時綁定多個事件，這是如何實現的？


是否知道自定義事件。jQuery里的fire函數是什麼意思，什麼時候用？


jQuery是通過哪個方法和Sizzle選擇器結合的？（jQuery.fn.find()進入Sizzle）


針對jQuery性能的優化方法？


Jquery與jQueryUI有啥區別？


JQuery的源碼看過嗎？能不能簡單說一下它的實現原理？


jquery中如何將數組轉化為json字元串，然後再轉化回來？


jQuery和Zepto的區別？各自的使用場景？


針對jQuery的優化方法？


Zepto的點透問題如何解決？


jQueryUI如何自定義組件?


需求：實現一個頁面操作不會整頁刷新的網站，並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案？


如何判斷當前腳本運行在瀏覽器還是node環境中？（阿里）


移動端最小觸控區域是多大？


jQuery的slideUp動畫，如果目標元素是被外部事件驅動,當滑鼠快速地連續觸發外部元素事件,動畫會滯後的反復執行，該如何處理呢?


把Script標簽放在頁面的最底部的body封閉之前和封閉之後有什麼區別？瀏覽器會如何解析它們？


移動端的點擊事件的有延遲，時間是多久，為什麼會有？怎麼解決這個延時？（click有300ms延遲,為了實現safari的雙擊事件的設計，瀏覽器要知道你是不是要雙擊操作。）


知道各種JS框架(Angular,Backbone,Ember,React,Meteor,Knockout...)么?能講出他們各自的優點和缺點么?


Underscore對哪些JS原生對象進行了擴展以及提供了哪些好用的函數方法？


解釋JavaScript中的作用域與變數聲明提升？


那些操作會造成內存泄漏？


JQuery一個對象可以同時綁定多個事件，這是如何實現的？


Node.js的適用場景？


(如果會用node)知道route,middleware,cluster,nodemon,pm2,server-siderendering么?


解釋一下Backbone的MVC實現方式？


什麼是「前端路由」?什麼時候適合使用「前端路由」?「前端路由」有哪些優點和缺點?


知道什麼是webkit么?知道怎麼用瀏覽器的各種工具來調試和debug代碼么?


如何測試前端代碼么?知道BDD,TDD,UnitTest么?知道怎麼測試你的前端工程么(mocha,sinon,jasmin,qUnit..)?


前端templating(Mustache,underscore,handlebars)是幹嘛的,怎麼用?


簡述一下Handlebars的基本用法？


簡述一下Handlerbars的對模板的基本處理流程，如何編譯的？如何緩存的？


用js實現千位分隔符?(提示：正則+replace)


檢測瀏覽器版本版本有哪些方式？


WhatisaPolyfill?


做的項目中，有沒有用過或自己實現一些polyfill方案（兼容性處理方案）？


我們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡。會執行幾次事件，會先執行冒泡還是捕獲？


使用JS實現獲取文件擴展名？


答案自己先慢慢找哈。

Ⅱ 前端面試題整理

JavaScript：

1.介紹一下isNaN函數？

如果參數不是數字類型的話isNaN返回true（函數名稱：isnan函數功能：判斷數組的元素是否是NaN。）


2.javascript都支持哪些布爾型的操作？


&&,||和！（&&邏輯與，||邏輯或，！邏輯非）


3.「1″+2+4在javascript中得到什麼？


因為「1」是String類型，所以所有的操作數都是String,結果為124


4.2+5+」8″得到的結果是什麼？


因為2和5是數字類型，8是字元串，所以得到的結果是78


5.javascript有幾種loop（循環）方法？


for,while,do-while，for...in語句用於遍歷數組或者對象的屬性（對數組或者對象的屬性進行循環操作）。


6.javascript如何創建一個新的對象？


varobj=newObject()或者varobj={}


7.如何為一個對象屬性賦值？


obj["age"]=17或者obj.age=17


8.如何為一個數組添加一個值？


arr[arr.length]=value;


9.javascript基本數據類型/javascript中的typeof返回哪些數據類型


Number類型、Boolean類型、Object類型、String類型、Null、Undefined類型/


10.例舉3種強制類型轉換和2種隱式類型轉換?


強制（parseInt,parseFloat,number）隱式（==_===）


11.數組方法pop()push()unshift()shift()


Push()尾部添加pop()尾部刪除Unshift()頭部添加shift()頭部刪除


12.閉包是什麼，有什麼特性，對頁面有什麼影響


閉包就是能夠讀取其他函數內部變數的函數。


13.添加刪除替換插入到某個接點的方法


obj.appendChild()obj.innersetBefore()obj.replaceChild()obj.removeChild()


14.javascript的本地對象，內置對象和宿主對象


本地對象為arrayobjregexp等可以new實例化


內置對象為gloadMath等不可以實例化的


宿主為瀏覽器自帶的document,window等


15.介紹一下eval()函數


eval()函數可計算某個字元串，並執行其中的的JavaScript代碼。


16.介紹一下JSON


JSON：JavaScript對象表示法（JavaScriptObjectNotation）。


JSON是存儲和交換文本信息的語法。類似XML。


JSON比XML更小、更快，更易解析。


17.jQueryUI與jquery的主要區別是：


(1)jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。


(2)jQueryUI則是在jQuery的基礎上，利用jQuery的擴展性，設計的插件。提供了一些常用的界面元素，諸如對話框、拖動行為、改變大小行為等等。


(3)jQuery本身注重於後台，沒有漂亮的界面，而jQueryUI則補充了前者的不足，他提供了華麗的展示界面，使人更容易接受。既有強大的後台，又有華麗的前台。


html+css:


1.對WEB標准以及W3C的理解與認識:


標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維護、改版方便，不需要變動頁面內容、提供列印版本而不需要復制內容、提高網站易用性；


2.xhtml和html有什麼區別:


HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言


最主要的不同：


XHTML元素必須被正確地嵌套。


XHTML元素必須被關閉。


標簽名必須用小寫字母。


XHTML文檔必須擁有根元素。


3.行內元素有哪些?塊級元素有哪些?CSS的盒模型?


塊級元素：divph1h2h3h4formul


行內元素:abbrispaninputselect


Css盒模型:內容，border,margin，padding


4.前端頁面有哪三層構成，分別是什麼?作用是什麼?


結構層Html表示層CSS行為層js


5.寫出幾種IE6BUG的解決方法:


雙邊距BUGfloat引起的使用display


3像素問題使用float引起的使用dislpay:inline-3px


超鏈接hover點擊後失效使用正確的書寫順序linkvisitedhoveractive


Iez-index問題給父級添加position:relative


Png透明使用js代碼改


Min-height最小高度！Important解決』


select在ie6下遮蓋使用iframe嵌套


為什麼沒有辦法定義1px左右的寬度容器（IE6默認的行高造成的，使用over:hidden,zoom:0.08line-height:1px）


6.解釋csssprites，如何使用。


Css精靈把一堆小的圖片整合到一張大的圖片上，減輕伺服器對圖片的請求數量


7.你如何對網站的文件和資源進行優化?期待的解決方案包括：


文件合並


文件最小化/文件壓縮


使用CDN託管


緩存的使用


8.清除浮動的幾種方式，各自的優缺點：


使用空標簽清除浮動clear:both（理論上能清楚任何標簽，，，增加無意義的標簽）


使用overflow:auto（空標簽元素清除浮動而不得不增加無意代碼的弊端,,使用zoom:1用於兼容IE）


是用afert偽元素清除浮動(用於非IE瀏覽器)


9.瀏覽器內核


1、Trident內核：IE最先開發或使用的，也稱IE內核，360瀏覽器使用的也是IE內核；


2、Webkit內核：谷歌chrome瀏覽器最先開發或使用，也叫谷歌內核，楓樹瀏覽器、太陽花使用的也是谷歌內核；


3、Gecko內核：Netscape6開始採用的內核，後來的MozillaFireFox(火狐瀏覽器)也採用了該內核，K-Meleon瀏覽器也是使用這種內核；


4、Presto內核：目前只有Opera瀏覽器採用該內核

Ⅲ 一份超全的Web前端工程師面試題!收藏~

今天小編為大家准備了一份超全的Web前端工程師面試題,准備換工作參加Web前端工程師面試的小夥伴們快來和小編一起看一看這些題目吧，希望能夠對你的面試有所幫助!

一、HTML


§Doctype作用?嚴格模式與混雜模式如何區分?它們有何意義?


§HTML5為什麼只需要寫?


§行內元素有哪些?塊級元素有哪些?空(void)元素有那些?


§頁面導入樣式時，使用link和@import有什麼區別?


§介紹一下你對瀏覽器內核的理解?


§常見的瀏覽器內核有哪些?


§html5有哪些新特性、移除了那些元素?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分HTML和HTML5?


§簡述一下你對HTML語義化的理解?


§HTML5的離線儲存怎麼使用，工作原理能不能解釋一下?


§瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢?


§請描述一下cookies，sessionStorage和localStorage的區別?


§iframe有那些缺點?


§Label的作用是什麼?是怎麼用的?(加for或包裹)


§HTML5的form如何關閉自動完成功能?


§如何實現瀏覽器內多個標簽頁之間的通信?(阿里)


§webSocket如何兼容低瀏覽器?(阿里)


§頁面可見性(PageVisibility)API可以有哪些用途?


§如何在頁面上實現一個圓形的可點擊區域?


§實現不使用border畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。


§網頁驗證碼是幹嘛的，是為了解決什麼安全問題?


§tite與h1的區別、b與strong的區別、i與em的區別?


二、CSS


§介紹一下標準的CSS的盒子模型?與低版本IE的盒子模型有什麼不同的?


§CSS選擇符有哪些?哪些屬性可以繼承?


§CSS優先順序演算法如何計算?


§CSS3新增偽類有那些?


§如何居中div?如何居中一個浮動元素?如何讓絕對定位的div居中?


§display有哪些值?說明他們的作用。


§position的值relative和absolute定位原點是?


§CSS3有哪些新特性?


§請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景?


§用純CSS創建一個三角形的原理是什麼?


§一個滿屏品字布局如何設計?


§常見兼容性問題?


§li與li之間有看不見的空白間隔是什麼原因引起的?有什麼解決辦法?


§經常遇到的瀏覽器的兼容性有哪些?原因，解決方法是什麼，常用hack的技巧?


§為什麼要初始化CSS樣式。


§absolute的containingblock計算方式跟正常流有什麼不同?


§CSS里的visibility屬性有個collapse屬性值是幹嘛用的?在不同瀏覽器下以後什麼區別?


§position跟display、margincollapse、overflow、float這些特性相互疊加後會怎麼樣?


§對BFC規范(塊級格式化上下文：blockformattingcontext)的理解?


§CSS權重優先順序是如何計算的?


§請解釋一下為什麼會出現浮動和什麼時候需要清除浮動?清除浮動的方式


§移動端的布局用過媒體查詢嗎?


§使用CSS預處理器嗎?喜歡那個?


§CSS優化、提高性能的方法有哪些?


§瀏覽器是怎樣解析CSS選擇器的?


§在網頁中的應該使用奇數還是偶數的字體?為什麼呢?


§margin和padding分別適合什麼場景使用?


§抽離樣式模塊怎麼寫，說出思路，有無實踐經驗?[阿里航旅的面試題]


§元素豎向的百分比設定是相對於容器的高度嗎?


§全屏滾動的原理是什麼?用到了CSS的那些屬性?


§什麼是響應式設計?響應式設計的基本原理是什麼?如何兼容低版本的IE?


§視差滾動效果，如何給每頁做不同的動畫?(回到頂部，向下滑動要再次出現，和只出現一次分別怎麼做?)


§::before和:after中雙冒號和單冒號有什麼區別?解釋一下這2個偽元素的作用。


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


§你對line-height是如何理解的?


§設置元素浮動後，該元素的display值是多少?(自動變成display:block)


§怎麼讓Chrome支持小於12px的文字?


§讓頁面里的字體變清晰，變細用CSS怎麼做?(-webkit-font-smoothing:antialiased;)


§font-style屬性可以讓它賦值為「oblique」oblique是什麼意思?


§position:fixed;在android下無效怎麼處理?


§如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼?(阿里)


§display:inline-block什麼時候會顯示間隙?(攜程)


§overflow:scroll時不能平滑滾動的問題怎麼處理?


§有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度。


§png、jpg、gif這些圖片格式解釋一下，分別什麼時候用。有沒有了解過webp?


§什麼是Cookie隔離?(或者說：請求資源的時候不要讓它帶cookie怎麼做)


§style標簽寫在body後與body前有什麼區別?


三、JavaScript


§介紹JavaScript的基本數據類型。


§說說寫JavaScript的基本規范?


§JavaScript原型，原型鏈?有什麼特點?


§JavaScript有幾種類型的值?(堆：原始數據類型和棧：引用數據類型)，你能畫一下他們的內存圖嗎?


§Javascript如何實現繼承?


§Javascript創建對象的幾種方式?


§Javascript作用鏈域?


§談談This對象的理解。


§eval是做什麼的?


§什麼是window對象?什麼是document對象?


§null，undefined的區別?


§寫一個通用的事件偵聽器函數(機試題)。


§[「1」,「2」,「3」].map(parseInt)答案是多少?


§關於事件，IE與火狐的事件機制有什麼區別?如何阻止冒泡?


§什麼是閉包(closure)，為什麼要用它?


§javascript代碼中的」usestrict」;是什麼意思?使用它區別是什麼?


§如何判斷一個對象是否屬於某個類?


§new操作符具體幹了什麼呢?


§用原生JavaScript的實現過什麼功能嗎?


§Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是?


§對JSON的了解?


§[].forEach.call($$("*"),function(a){a.style.outline="1pxsolid
#"+(~~(Math.random()*(1<<24))).toString(16)})能解釋一下這段代碼的意思嗎?


§js延遲載入的方式有哪些?


§Ajax是什麼?如何創建一個Ajax?


§同步和非同步的區別?


§如何解決跨域問題?


§頁面編碼和被請求的資源編碼如果不一致如何處理?


§模塊化開發怎麼做?


§AMD(Moles/Asynchronous-Definition)、CMD(CommonMole
Definition)規范區別?


§requireJS的核心原理是什麼?(如何動態載入的?如何避免多次載入的?如何緩存的?)


§讓你自己設計實現一個requireJS，你會怎麼做?


§談一談你對ECMAScript6的了解?


§ECMAScript6怎麼寫class么，為什麼會出現class這種東西?


§非同步載入的方式有哪些?


§documen.write和innerHTML的區別?


§DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?


§.call()和.apply()的含義和區別?


§數組和對象有哪些原生方法，列舉一下?


§JS怎麼實現一個類。怎麼實例化這個類


§JavaScript中的作用域與變數聲明提升?


§如何編寫高性能的Javascript?


§那些操作會造成內存泄漏?


§JQuery的源碼看過嗎?能不能簡單概況一下它的實現原理?


§jQuery.fn的init方法返回的this指的是什麼對象?為什麼要返回this?


§jquery中如何將數組轉化為json字元串，然後再轉化回來?


§jQuery的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝?


§jquery.extend與jquery.fn.extend的區別?


§jQuery的隊列是如何實現的?隊列可以用在哪些地方?


§談一下Jquery中的bind(),live(),delegate(),on()的區別?


§JQuery一個對象可以同時綁定多個事件，這是如何實現的?


§是否知道自定義事件。jQuery里的fire函數是什麼意思，什麼時候用?


§jQuery是通過哪個方法和Sizzle選擇器結合的?(jQuery.fn.find()進入Sizzle)


§針對jQuery性能的優化方法?


§Jquery與jQueryUI有啥區別?


§JQuery的源碼看過嗎?能不能簡單說一下它的實現原理?


§jquery中如何將數組轉化為json字元串，然後再轉化回來?


§jQuery和Zepto的區別?各自的使用場景?


§針對jQuery的優化方法?


§Zepto的點透問題如何解決?


§jQueryUI如何自定義組件?


§需求：實現一個頁面操作不會整頁刷新的網站，並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案?


§如何判斷當前腳本運行在瀏覽器還是node環境中?(阿里)


§移動端最小觸控區域是多大?


§jQuery的slideUp動畫，如果目標元素是被外部事件驅動,當滑鼠快速地連續觸發外部元素事件,
動畫會滯後的反復執行，該如何處理呢?


§把Script標簽放在頁面的最底部的body封閉之前和封閉之後有什麼區別?瀏覽器會如何解析它們?


§移動端的點擊事件的有延遲，時間是多久，為什麼會有?怎麼解決這個延時?(click有300ms
延遲,為了實現safari的雙擊事件的設計，瀏覽器要知道你是不是要雙擊操作。)


§知道各種JS框架(Angular,Backbone,Ember,React,Meteor,Knockout)么?
能講出他們各自的優點和缺點么?


§Underscore對哪些JS原生對象進行了擴展以及提供了哪些好用的函數方法?


§解釋JavaScript中的作用域與變數聲明提升?


§那些操作會造成內存泄漏?


§JQuery一個對象可以同時綁定多個事件，這是如何實現的?


§Node.js的適用場景?


§(如果會用node)知道route,middleware,cluster,nodemon,pm2,server-side
rendering么?


§解釋一下Backbone的MVC實現方式?


§什麼是「前端路由」?什麼時候適合使用「前端路由」?「前端路由」有哪些優點和缺點?


§知道什麼是webkit么?知道怎麼用瀏覽器的各種工具來調試和debug代碼么?


§如何測試前端代碼么?知道BDD,TDD,UnitTest么?知道怎麼測試你的前端工程么(mocha,sinon,jasmin,
qUnit..)?


§前端templating(Mustache,underscore,handlebars)是幹嘛的,怎麼用?


§簡述一下Handlebars的基本用法?


§簡述一下Handlerbars的對模板的基本處理流程，如何編譯的?如何緩存的?


§用js實現千位分隔符?(來源：前端農民工，提示：正則+replace)


§檢測瀏覽器版本版本有哪些方式?


§我們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然後會先執行冒泡還是捕獲。


四、其他問題


§原來公司工作流程是怎麼樣的，如何與其他人協作的?如何誇部門合作的?


§你遇到過比較難的技術問題是?你是如何解決的?


§設計模式知道什麼是singleton,factory,strategy,decrator么?


§常使用的庫有哪些?常用的前端開發工具?開發過什麼應用或組件?


§頁面重構怎麼操作?


§列舉IE與其他瀏覽器不一樣的特性?


§99%的網站都需要被重構是那本書上寫的?


§什麼叫優雅降級和漸進增強?


§是否了解公鑰加密和私鑰加密。


§WEB應用從伺服器主動推送Data到客戶端有那些方式?


§對Node的優點和缺點提出了自己的看法?


§你有用過哪些前端性能優化的方法?


§http狀態碼有那些?分別代表是什麼意思?


§一個頁面從輸入URL到頁面載入顯示完成，這個過程中都發生了什麼?(流程說的越詳細越好)


§部分地區用戶反應網站很卡，請問有哪些可能性的原因，以及解決方法?


§從打開app到刷新出內容，整個過程中都發生了什麼，如果感覺慢，怎麼定位問題，怎麼解決?


§除了前端以外還了解什麼其它技術么?你最最厲害的技能是什麼?


§你用的得心應手用的熟練地編輯器&開發環境是什麼樣子?


§對前端界面工程師這個職位是怎麼樣理解的?它的前景會怎麼樣?


§你怎麼看待WebApp、hybridApp、NativeApp?


§你移動端前端開發的理解?(和Web前端開發的主要區別是什麼?)


§你對加班的看法?


§平時如何管理你的項目?


§說說最近最流行的一些東西吧?常去哪些網站?


§如何設計突發大規模並發架構?


§說說最近最流行的一些東西吧?常去哪些網站?


§是否了解開源的工具bower、npm、yeoman、grunt、gulp，一個npm的包里的package.json
具備的必要的欄位都有哪些?(名稱、版本號，依賴)


§每個模塊的代碼結構都應該比較簡單，且每個模塊之間的關系也應該非常清晰，隨著功能和迭代次數越來越多，你會如何去保持這個狀態的?


§Git知道branch,diff,merge么?


§如何設計突發大規模並發架構?


§當團隊人手不足，把功能代碼寫完已經需要加班的情況下，你會做前端代碼的測試嗎?


§說說最近最流行的一些東西吧?平時常去哪些網站?


§知道什麼是SEO並且怎麼優化么?知道各種metadata的含義么?


§移動端(AndroidIOS)怎麼做好用戶體驗?


§簡單描述一下你做過的移動APP項目研發流程?


§你在現在的團隊處於什麼樣的角色，起到了什麼明顯的作用?


§你認為怎樣才是全端工程師(FullStackdeveloper)?


§介紹一個你最得意的作品吧?


§你有自己的技術博客嗎，用了哪些技術?


§對前端安全有什麼看法?


§是否了解Web注入攻擊，說下原理，最常見的兩種攻擊(XSS和CSRF)了解到什麼程度?


§項目中遇到國哪些印象深刻的技術難題，具體是什麼問題，怎麼解決?。


§最近在學什麼東西?


§你的優點是什麼?缺點是什麼?


§如何管理前端團隊?


§最近在學什麼?能談談你未來3，5年給自己的規劃嗎?


§
以上就是小編今天為大家分享的關於web前端工程師面試題的文章，希望本篇文章能夠對正准備學習編程技術的小夥伴們有所幫助。想要了解更多web前端相關知識記得關注北大青鳥web前端培訓官網哦!最後希望小夥伴們能夠好好准備這些問題的答案，在面試中取得好成績，成為一名優秀的web前端工程師!


§

Ⅳ 2020年Web前端面試題及答案匯總

今天小編要跟大家分享的文章是關於2020年Web前端面試題及答案匯總。正准備參加Web前端面試的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。

一、Mysql資料庫


1.MySQL中varchar與char的區別以及varchar(50)中的50代表的涵義?


答案：


Varchar是變長字元串，最多存儲的大小是65535位元組，查詢速度相對較慢;Char
是定常字元串，最多存儲的大小是255位元組，查詢速度相對較快;


varchar(50)表示：Mysql4.0表示存放50個位元組，5.0存放50個字元。


2.簡述瀏覽器打開#顯示頁面，中間都經過哪些過程?


答案：


向DNS伺服器獲取域名對應的IP地址並返回瀏覽器，通過IP地址向Web伺服器發請求，Web伺服器從文件伺服器獲取網頁中所需要的文件，從資料庫伺服器獲取網頁中所需要的數據，最後講完整的網頁相應給瀏覽器。


3.如何解決MySQL中存儲中文亂碼問題?


答案：


腳本文件採用UTF8編碼


客戶端連接資料庫使用UTF8編碼


伺服器端創建資料庫使用UTF8編碼


4.Float和Double的區別是什麼?


答案：


FLOAT(單精度浮點數)類型數據可以存儲至多8位十進制數，並在內存中佔4位元組。


DOUBLE(雙精度浮點數)類型數據可以存儲至多18位十進制數，並在內存中佔8位元組。


5.把數據id等於1的名字oldboy更改為oldgirl?


答案：


updatetestsetname='oldgirl'whereid=1;


6.如何登錄mysql數據?


答案：


mysql-uroot。


二、JS基礎


1.continue和break有什麼區別?


答案：


break和continue都是用來控制循環結構的：


break終止循環，跳出循環體執行循環後面的語句。


continue跳過本次循環，執行下一次循環。


2.i++和++i的區別?


答案：


i++：先用i值後加1,


++i：先加1後用i值，


計算：varn=5;求varnum=n+++++n+n+++++n+n;//37


3.JavaScript都有哪些數據類型?


答案：


原始類型：數值型/字元串型/布爾型/undefined/null


引用類型：對象


4.自調用函數是什麼?用於什麼地方?


答案：立即執行的函數。(function(){//函數體})();


用於創建一個局部作用域。


5.slice和splice有什麼區別?


答案：


slice截取子數組，從指定的數組中，截取幾個連續的元素組成一個新數組


splice允許從指定數組中，刪除一部分元素，同時再添加另一部分元素


6.typeof返回的類型有哪些?


答案：


number、string、boolean、undefined、object、function


ex:


vararr=[1,2,3,4,5];


console.log(typeof(arr));//object


functionmyDemo(){


returnfunctiontest(){};


}


console.log(typeof(myDemo()));//function


7.取1~11之間的隨機數(即包括1不包括11)?


答案：


Math.floor(Math.random()*10+1)


parseInt(Math.random()*10+1)


8.什麼是變數聲明提前?


答案：


使用var關鍵字聲明的變數，會將聲明提升到所在作用域的最前邊。。


9.push、pop、shift和unshift區別?


答案：


這兩組同為對數組的操作，並且會改變數組的本身的長度及內容。


不同的是push()、pop()是從數組的尾部進行增減，unshift()、shift()是從數組的頭部進行增減。。


10.例舉4種強制類型轉換和3種隱式類型轉換?


答案：


強制轉換：parseInt/parseFloat/Number/toString


隱式轉換：


字元串+數值數值轉字元串


數值+布爾型布爾型中true轉為1，false轉為0


字元串+布爾型布爾型轉為字元串。


11.函數聲明與函數表達式的區別?


答案：


相同點：兩者都可以創建函數。


不同點：函數聲明可以存在函數提升(前)，函數表達式不存在函數提升(前)。


//函數聲明


functionmyFunction(){


functioninnerFunction(){}


}


//以下為函數表達式


varmyFunc=function(){};


myFunc(function(){


returnfunction(){};


});


12.請指出JavaScript宿主對象和原生對象的區別?


答案：


宿主對象：指JavaScript解釋器提供的對象，由解釋器廠家自定義並提供實現，不同的解釋器提供的擴展對象存在較大的差異(DOM和BOM對象)。


原生對象：JavaScript語言本身預定義的對象，在ECMAScript標准中定義，由所有的解釋器廠家來提供具體實現(Array,Date,Math,Number,String,Boolean等)。


13.js中有哪些內置函數?


答案：Object,Array,Boolean,Number,String,Function,Date,Math,RegExp,
Error,Global


14.列舉出獲取日期相關函數


答案：


console.log(Date.now());//返回當前日期和時間񟬢/01/0100:00:00'之間的毫秒值


vardt=newDate();//獲取當前時間---年月日時分秒


console.log(dt.getTime());//返回當前日期和時間񟬢/01/0100:00:00'之間的毫秒值


console.log(dt.getFullYear());//年份


console.log(dt.getMonth()+1);//月份(0-11)


console.log(dt.getDate());//日期(0/1-31)


console.log(dt.getDay());//星期(0-6)


console.log(dt.getHours());//小時(0-23)


console.log(dt.getMinutes());//分鍾(0-59)


console.log(dt.getMilliseconds);//返回毫秒(0-999)


console.log(dt.getSeconds());//秒(0-59)


15.Math相關函數


答案：


Math.random()-返回0~1之間的隨機數


Math.abs(x)-返回數的絕對值


Math.ceil(x)-向上取整


Math.floor(x)-向下取整


Math.round()四捨五入


Math.max()和Max.min()獲取一組數據中的最大值和最小值


Math.PI獲取圓周率π的值Math.pow()獲取一個值的多少次冪


Math.sqrt()對數值開方


Math.pow(10，2)=100;


Math.sqrt(100)=10;


16.null和undefined的區別?


答案：


undefined是訪問一個未初始化的變數時返回的值，


null是訪問一個尚不存在的對象時所返回的值。因此，可以把undefined看作是空的變數，而null看作是空的對象。


17.==和===有什麼不同?


答案：


==抽象相等，比較時，會先進行類型轉換，然後再比較值;


===嚴格相等，判斷兩個值相等同時數據類型也得相同。


18.setTimeout和setInterval的區別是什麼?


答案：


二者都是用來設置定時操作的。


setTimeout:設置一個定時器，在定時器到期後執行一次函數或代碼段


setInterval:設置一個定時器，以固定的時間間隔重復調用一個函數或者代碼段


19.請說出以下代碼執行結果


for(vari=0;i<3;i++){


setTimeout(function(){


console.log(i);


},0);


console.log(i);


}


答案：012333，執行過程如下


vari=0;


console.log(i);i++;


console.log(i);i++;


console.log(i);i++;


setTimeout(function(){console.log(i);


},0);s


etTimeout(function(){


console.log(i);


},0);


setTimeout(function(){


console.log(i);


},0);//輸出012333


20.請說出(true+flase)>2+true的執行結果


答案：false


21.當前代碼塊輸出結果是什麼?


varz=10;


functionfoo(){console.log(z);}


(function(funArg){varz=20;funArg();})(foo);


答案：10，自調用函數。


22.setTimeout(function(){},10)表示什麼意思?


答案：每隔10毫秒調用一次函數。


23.程序中捕獲異常的方法?


答案：


try{


}catch(e){


}finally{


}


24.以下代碼執行結果?


varuname='jack'


functionchange(){


alert(uname)//?


varuname='lily'


alert(uname)//?


}


change()


答案：undefinedlily


25.如何使用npm下載express模塊?


答案：npminstallexpress


26.split和join的區別?


答案：split()將字元串按照指定的字元分割成一個數組，並返回


join()將數組用指定的字元連接成一個字元串，並返回


27.看下列代碼會有什麼樣的輸出?


varfoo="11"+2-"1";


console.log(foo);


console.log(typeoffoo);


答案：111number


28.foo=foo||bar，這行代碼是什麼意思?為什麼要這樣寫?


答案：這種寫法稱之為短路表達式


相當於：


varfoo;


if(foo){


foo=foo;


}else{


foo=bar;


}


常用於函數參數的空判斷


29.用js實現隨機選取10_100之間的10個數字，存入一個數組，並排序


答案：


functiongetRandom(istart,iend){


variChoice=iend-istart+1;


returnMath.floor(Math.random()*iChoice+istart);


}variArray=[];


for(vari=0;i<10;i++){


varresult=getRandom(10,100);


iArray.push(result);


}iArray.sort();


30.如何獲取javascript三個數中的最大值和最小值?


答案：Math.max(a,b,c);//最大值


Math.min(a,b,c)//最小值


31.實現冒泡排序?


vararray=[5,4,3,2,1];


vartemp=0;


for(vari=0;i

for(varj=0;j

if(array[j]>array[j+1]){


temp=array[j+1];


array[j+1]=array[j];


array[j]=temp;


}


}


三、NODEJS


1.同步和非同步有何區別?


答案：


同步：指發送一個請求,需要等待返回,然後才能夠發送下一個請求，有等待過程(在一個任務進行中時不能開啟其他的任務)。


非同步：指發送一個請求,不需要等待返回,隨時可以再發送下一個請求，即不需要等待(在一個任務進行中時可以開啟其他的任務)。


2.NodeJS中有哪些類型模塊，文件操作用哪一個模塊?


答案：


模塊類型：核心模塊、自定義模塊、第三方模塊。


文件操作：fs模塊


3.對NodeJS的優點和缺點提出自己的看法?


答案：CPU密集型任務的特點是進行大量的計算，消耗CPU資源，比如計算圓周率(上千位)、對視頻進行編碼等,全靠CPU的運算能力
(一般用C語言，java)IO(Input/
Output)密集型任務，這類任務的特點是CPU消耗很少，大部分時間都在等待IO操作。常見的大部分任務都是IO密集型任務，比如Web應用(一般用腳本語言：python/Nodejs)。Nodejs設計思想中以事件驅動、非同步、非堵塞I/O密集型為核心，他提供的大多數api都是基於事件的、非同步的風格。所以非常適合處理高並發請求。此外，與Node伺服器交互的客戶端代碼是由js語言編寫的，因此客戶端和伺服器端都用同一種語言編寫，減少了成本。


4.使用NodeJS完成登錄功能(編寫HTML頁面和路由介面中的代碼)?


答案：


HTML頁面：





用戶：



密碼：









user.js路由


constexpress=require('express');


constpool=require('../pool.js');


varrouter=express.Router();


router.post('/login',(req,res)=>{


varobj=req.body;


var$uname=obj.uname;


if(!$uname){


res.send({code:401,msg:'unamerequired'});


return;


}


var$upwd=obj.upwd;


if(!$upwd){res.send({code:402,msg:'upwdrequired'});


return;


}


varsql='SELECT*FROMxz_userWHEREuname=?ANDupwd=?'
pool.query(sql,[$uname,$upwd],(err,result)=>{


if(err)throwerr;


if(result.length>0){


res.send({code:200,msg:'loginsuccess'});


}else{


res.send({code:301,msg:'loginerror'});


}});


});


//路由器導出


mole.exports=router;


5.什麼是Nodejs?


Nodejs是一個JavaScript的運行環境，是一個伺服器端的「JavaScript解釋器」，用於方便高效地搭建一些響應速度快、易於擴展的網路應用。它採用事件驅動、非同步編程，為網路服務而設計

Ⅳ Web前端崗位面試題有哪些