當前位置:首頁 » 網頁前端 » 前端開發工程師面試生僻題
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端開發工程師面試生僻題

發布時間: 2022-10-04 08:31:56

『壹』 2019Web前端面試題及答案匯總-Jquery篇

今天小編要跟大家分享的文章是關於2019Web前端面試題及答案匯總-Jquery篇。相信最近准備參加Web前端面試的小夥伴一定不在少數,為了幫助大家順利的通過面試成為一名優秀的Web前端工程師,小編為大家准備了前端面試題系列,通過Web知識的整理以及經驗的總結,希望能幫到更多的前端面試者。

Jquery相關


1、jQuery庫中的$()是什麼?


$()函數是jQuery()函數的別稱。$()函數用於將任何對象包裹成jQuery對象,接著你就被允許調用定義在jQuery
對象上的多個不同方法。你可以將一個選擇器字元串傳入$()函數,它會返回一個包含所有匹配的DOM元素數組的jQuery對象。


2、如何找到所有HTMLselect標簽的選中項?


$('[name=selectname]:selected')


3、$(this)和this關鍵字在jQuery中有何不同?


$(this)返回一個jQuery對象,你可以對它調用多個jQuery方法,比如用text()獲取文本,用val()
獲取值等等。


而this代表當前元素,它是JavaScript關鍵詞中的一個,表示上下文中的當前DOM元素。你不能對它調用jQuery方法,直到它被
$()函數包裹,例如$(this)。


4、jquery怎麼移除標簽onclick屬性?


獲得a標簽的onclick屬性:$("a").attr("onclick")


刪除onclick屬性:$("a").removeAttr("onclick")


設置onclick屬性:$("a").attr("onclick","test();")


5、jquery中addClass、removeClass、toggleClass的使用。


$(selector).addClass(class):為每個匹配的元素添加指定的類名


$(selector).removeClass(class):從所有匹配的元素中刪除全部或者指定的類,刪除class中某個值;


$(selector).toggleClass(class):如果存在(不存在)就刪除(添加)一個類


$(selector).removeAttr(class);刪除class這個屬性;


6、JQuery有幾種選擇器?


(1)、基本選擇器:#id,class,element,*;


(2)、層次選擇器:parent>child,prev+next,prev~siblings


(3)、基本過濾器選擇器::first,:last,:not,:even,:odd,:eq,:gt,:lt


(4)、內容過濾器選擇器::contains,:empty,:has,:parent


(5)、可見性過濾器選擇器::hidden,:visible


(6)、屬性過濾器選擇器:[attribute],[attribute=value],[attribute!=value]
,[attribute^=value],[attribute$=value],[attribute*=value]


(7)、子元素過濾器選擇器::nth-child,:first-child,:last-child,:only-child


(8)、表單選擇器::input,:text,:password,:radio,:checkbox,:submit等;


(9)、表單過濾器選擇器::enabled,:disabled,:checked,:selected


7、jQuery中的Delegate()函數有什麼作用?


delegate()會在以下兩個情況下使用到:


1)、如果你有一個父元素,需要給其下的子元素添加事件,這時你可以使用delegate()了,代碼如下:


$("ul").delegate("li","click",function(){$(this).hide();});


2)、當元素在當前頁面中不可用時,可以使用delegate()


8、$(document).ready()方法和window.onload有什麼區別?


(1)、window.onload方法是在網頁中所有的元素(包括元素的所有關聯文件)完全載入到瀏覽器後才執行的。


(2)、$(document).ready()方法可以在DOM載入就緒時就對其進行操縱,並調用執行綁定的函數。


9、如何用jQuery禁用瀏覽器的前進後退按鈕?


實現代碼如下:



$(document).ready(function(){

window.history.forward(1);

//ORwindow.history.forward(-1);

});



10、jquery中$.get()提交和$.post()提交有區別嗎?


相同點:都是非同步請求的方式來獲取服務端的數據;


異同點:


1、請求方式不同:$.get()方法使用GET方法來進行非同步請求的。$.post()方法使用POST方法來進行非同步請求的。


2、參數傳遞方式不同:get請求會將參數跟在URL後進行傳遞,而POST請求則是作為HTTP消息的實體內容發送給Web伺服器的,這種傳遞是對用戶不可見的。


3、數據傳輸大小不同:get方式傳輸的數據大小不能超過2KB而POST要大的多


4、安全問題:GET方式請求的數據會被瀏覽器緩存起來,因此有安全問題。


11、寫出一個簡單的$.ajax()的請求方式?

$.ajax({

url:'http://www..com',

type:'POST',

data:data,

cache:true,

headers:{},

beforeSend:function(){},

success:function(){},

error:function(){},

complete:function(){}

});

ja

以上就是小編今天為大家分享的關於2019Web前端面試題及答案匯總-a
Jquery篇的文章,希望本篇文章中的面試題能夠對正准備參加Web前端面試的小夥伴們有所幫助。想要了解更多Web前端方面的知識記得關注北大青鳥Web前端培訓官網。最後祝願小夥伴們面試成功成為一名優秀的Web前端工程師。


『貳』 一份超全的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前端工程師!


§

『叄』 前端開發面試回答,你怎麼回答

我面試過很多 前端程序員,非常了解面試者和面試官的心理,我可以很負責的告訴你:

就算面試你的人說你只能拿8K,但是你完全可以通過各種方法去拿到10K以上的薪資!

面試的時候面試官都是什麼樣的心理?

大多數公司的領導都會通過給你構造一個宏偉的藍圖以及對你進行技術打擊,來讓你降低標准,因為任何一家公司都希望花最少的錢請到最NB的技術人才,其實雙方就是一個周旋的過程,看誰的情商更高一些,但往往都是面試者被面試官拿下的情況比較多。

我給面試經驗不多的 前端程序員4個建議:

1、說工資時千萬不要說自己的理想工資,在這個之上虛高一點!

假設你預期的薪資是10k,你很實在的說要10k,那麼按照常理來說,你的工資標準是一定會被往下進行打壓的。

你可以先說自己以前的工作的薪資在11K左右,現在換份工作想要13K的薪資,這個時候面試官就會想,這個人以前的工資是11k,現在給他10k他肯定是不會來的,但他還是會跟你進行壓價,但是壓價肯定都是在10k以上的,所以你和面試官談判的時候,如果他認可你,那麼你的薪資應該就會在10k-13k之間,無論最終是10k還是11k或者12k,我們的目標都已經達到了。你可以進行一番思考,最終同意對方的開價。

但是你不要跟輕易的答應,一定要拿捏一下,讓對方覺得你也在考慮,最終你選擇了他們公司,要表達出對他們公司的願景,自己中意的是職業發展,喜歡的是公司氛圍等等因素,這樣對方才會認為你是看重公司的發展,而不是因為工資。關於這點我只能說,華夏民族的人和人交流的關系是世界最微妙的,這些套路大家心知肚明,但是你用和不用還真的是兩種效果。

2、設置一個自己的心理價位

如果對方說的薪資低於這個心理價位,我們一定要果斷拒絕,保持我們的原則性,不要因為對方說了而讓你降低了自己的心理價位,這樣也會讓面試官覺得你非常的有原則,非常自信,人們都尊重這樣的人,如果你一味的做舔狗,下場會非常悲慘。

根據我十年多的IT從業經驗來看,即使是做同樣的工作,也會存在著很多工資高低差距較多的情況,所以不要掉在一棵樹上,現在社會工作機會這么多,只要有實實在在的技術,工作是很容易找的,一定要多去嘗試。

3、凸顯自己的價值,讓對方覺得你是個人才

如果之前兩點沒有達到預期成效,但你又非常看好這家公司,就該盡力爭取了;

用自己之前做成的事情說事情,最好是用數據給面試官說明,表達清楚自己為什麼要這樣的薪資,讓對方感覺到你值這么多錢,如果對方公司現在比較缺人,而且你要的薪資沒有特別離譜,還有有希望拿下的。

4、公司一般都有獎金福利可以彌補工資的欠缺

大多數人都想不到那麼遠,都是盯著眼前的薪資,但其實很多公司都有項目提成、獎金,這也是錢啊,有一些不錯的公司都是14薪往上,所以在跟公司談的時候,一定要去問他們是否有獎金、年終獎之類的福利。


除了被壓榨薪資的問題,還有以下幾點是必須要注意的!

1、項目作品

面試的時候,除了基礎的知識技術外,一個項目經驗是非常重要的,面試官會著重去問你的項目過程,所以准備好一份好的項目實戰,不只是證明你對這次面試的重視,更是證明你有能力勝任這份工作的利器。

2、去背那些常問的面試題

面試題對於以下幾個問題都會問:

·自我介紹(建議30s-60s)

·了解我們公司的基本情況嗎?

·你上家公司離職的原因是什麼?

·你自己的職業規劃是什麼?

·自我評價一下自己的優缺點?

以上問題都是大部分公司都會問到的,其實面試官只是想多了解你一些,而這些回答在網上有非常標準的答案,如果你覺得自己回答不好,你可以去網上找一些標準的答案背一下,還是非常有必要的,做到萬無一失。

3、假設面試官沒有跟你說薪資的問題,那麼我們也不要主動去提及,這樣會顯得你非常的著急,最好是先拿到offer之後再去談薪資,這樣對於我們來說是非常有利的,經驗之談。

4、面試的時候不要對方問一句你就答一句,你一定要明白面試的本質是什麼,在短時間內展示你的才華,方方面面的才能,給對方留下一個好的印象。

5、面試的過程中,是你展現的時候,所以80%的時間都應該你來主導,你來展示自己的才能,一定要非常著重的表現自己。

6、在回答面試官時,換位思考幾秒鍾:

·他為什麼要問這個問題?

·他想知道什麼答案?

·他想通過這個答案判斷出什麼?

所謂知己知彼才能百戰不殆,你一定要換位思考對方問的問題,想要知道什麼,從你的回答中他是否可以得到他想要的答案,所以面試是一門非常深的學問,人與人之間心理的博弈。

總結:

以上全部都是面試技巧方面,這屬於細活,而真正掌握技術才是根本,如果你沒有掌握良好的技術,技巧也幫助不了你找到一份工作,當你的技術達標,在加上好的面試技巧,就是如虎添翼,工作隨便你選擇。

常在這里回答問題,熱愛技術,喜歡幫別人解答行業技術問題和行業知識。

如果大家對於學習前端有任何不懂的可以隨時來問我,我給你提供一個非常不錯的前端交流學習qun:前面是二九六,中間是二一二,後面是五六二。有問題就在裡面問我,這樣你可以少走很多彎路,做起來有效率,記得多跟有經驗的人交流,別閉門造車。如果沒有比較好的教程,也可以管我要。

『肆』 Web前端面試的常見面試題匯總

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

1.漸進增強與優雅降級


漸進增強
並不是一種技術,而是一種設計思想。各個瀏覽器的渲染能力各不相同,要做一個每個人都能看到的網頁、感受到的體驗都一致的網站幾乎不可能。但還是得網站的可訪問性,保證用戶在任何環境下都能正常訪問網頁得核心內容或能使用基本功能(避免網頁打不開、排版錯誤等),並為他們提供當前條件下最好的體驗,這就是漸進增強得核心思想。


優雅降級也是一種設計思想,為了保證在高版本瀏覽器中提供最好的體驗,碰到低版本瀏覽器再降級進行兼容處理,使其能正常瀏覽。


這兩種思想的區別在於:


1.漸進增強是向上兼容,優雅降級是向下兼容;


2.漸進增強是從簡單到復雜,優雅降級是從復雜到簡單;


3.漸進增強關注的是內容(保證核心內容),優雅降級關注的是瀏覽體驗(為了兼容低版本瀏覽器)


2.DOCTYPE














作用


DTD(DocumentTypeDefinition,文檔類型定義)是一系列的語法規則,用來定義XML或(X)HTML
的文檔類型。瀏覽器會使用它來判斷文檔類型,決定何種協議來解析,以及切換瀏覽模式。


DOCTYPE是用來聲明文檔類型和DTD
規范的,一個主要的用途便是文件的合法性驗證。如果文檔代碼不合法,那麼瀏覽器解析時便會出現一些差錯。


HTML5的文檔類型聲明:





HTML4.01Strict(HTML4.01嚴格模式)的DTD包含所有HTML
元素和屬性,但不包括展示性的和棄用的元素(如font),它的文檔類型聲明:


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


標准模式與怪異模式


怪異模式(Quirks
Mode)用於模擬舊瀏覽器的行為。早期的網站並不會遵循完整的規范,隨著瀏覽器支持越來越多的規范,在那些舊的瀏覽器中開發的頁面在顯示時會被破壞。為了向後兼容,瀏覽器發明了怪異模式,一行錯誤或無效的
DOCTYPE都會觸發怪異模式。


瀏覽器使用文件開頭的DOCTYPE來決定用怪異模式處理或標准模式處理。DOCTYPE
可以確保不同瀏覽器以相同的方式解析文檔,以及執行相同的渲染模式。


怪異模式與標准模式的主要區別:


1.怪異模式的寬度和高度會包含padding和border。標准模式不包含,標准模式下可以通過設置box-sizing:
border-box將標准盒模型轉化成怪異模式下的盒模型。


2.怪異模式下,當內容超出容器高度時,會將容器拉伸,而不是溢出。


3.怪異模式下,在表格中的字體樣式(如font-size)不會繼承。


4.怪異模式下顏色值必須使用十六進制標記法。


3.語義化


HTML5
中的語義化就是讓元素、屬性或屬性值有含義,更准確地標記特定類型的內容。對元素語義化的目的是為了讓元素的語義和呈現分離,元素只負責文檔內容的結構與含義,而CSS
樣式控制內容的呈現,像元素,沒有語義但卻能將字體變粗,這類元素違背了語義化的目的,將會被廢棄。


優點


·使得HTML文檔結構清晰、布局合理、主體突出、可讀性更強。


·有利於SEO,搜索引擎根據標簽來確定上下文和各個關鍵字的權重。


·方便其他設備解析,如盲人閱讀器根據語義渲染網頁。


·有利於開發和維護,語義化更具可讀性,代碼更好維護,與CSS3關系更和諧。


語義化標簽


·
定義文檔的頁眉區域,應作為介紹內容或者導航鏈接欄的容器;


·footer內容的頁腳,通常包含該章節作者、版權數據或者與文檔相關的鏈接等信息;


·article
文檔、頁面、應用或網站中的獨立結構,是可獨立分配的、可復用的結構,如在發布中,它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評論、互動式組件,或者其他獨立的內容項目;


·nav描述一個含有多個超鏈接的區域,該區域包含跳轉到其他頁面或頁面內部其他部分的鏈接列表;


·section表示文檔中的一個區域(或節),比如,內容中的一個專題組;


·main定義文檔的主要內容,該內容在文檔中應當是獨一無二的,不包含任何在文檔中重復的內容,比如側邊欄,導航欄鏈接,版權信息,網站
logo,搜索框(搜索框作為文檔的主要內容);


·aside
表示一個和其餘頁面內容幾乎無關的部分,被認為是獨立於該內容的一部分且可以被單獨的拆分出來而不會影響整體。通常表現為側邊欄或嵌入內容。


4.超鏈接偽類


:link、:visited、:active和:hover的聲明順序是怎樣的?


:link表示未訪問的鏈接狀態;


:visited表示已訪問狀態;:active表示激活狀態(滑鼠按下);:hover表示懸停狀態。


推薦順序是LVHA,即:link:visited:hover:active。理由如下:


·當滑鼠懸停在未訪問的鏈接上時,:link和:hover都會命中,如果:hover在:link
之前聲明,那麼(:hover)就會被覆蓋;


·當滑鼠懸停在已訪問的連接上時,:visited和:hover都會命中,如果:hover在:visited
之前聲明,那麼(:hover)就會被覆蓋;


·當滑鼠單擊鏈接時,:active和:hover都會命中,我們大多是想讓:hover只在懸停時展示樣式,按下滑鼠時使用:active
樣式,因此:active在:hover之後聲明;


·綜上,:hover應在:link和:visited之後,在:active之前,因此active在最後。而:link和
:visited兩者的順序無所謂,互不影響。


5.CSS常見的長度單位


CSS中除了px長度單位之外,還有下面幾個長度單位:


·pc六分之一英寸,1pc=12pt=1/6*1in=16px;


·pt一磅,72分之一英寸。1pt=1/12_1pc=1/72_1in≈1.33px;


·in一英寸,1in=2.54cm=96px;


·ex在含有「X」字母的字體中,它是該字體的小寫字母的高度。對於很多字體來說,1ex≈0.5em;


·em1em等於父級元素的字體大小,2em就是父級元素字體大小的二倍;


·rem當用在根元素()的font-size上面時,它代表了它的初始值;


·ch代表元素所用字體font中「0」這一字形的寬度;


·vh1vh相當於視口高度的1%,100vh就是視口的高度;


·vw1vw相當於視口寬度的1%,100vw就是視口的寬度;


·vmax視口高度vw和寬度vh兩者中的最小值


·vmin視口高度vw和寬度vh兩種中的最大值;


·%相對於父級元素的大小來確定;


參考:CSS[1]


CSSpercentage[2]


6.事件對象


冒泡與捕獲


事件冒泡與捕獲是事件處理的兩種機制,主要描述當在一個元素上有兩個相同類型的事件處理器被激活會發生什麼。


在點擊子元素時,瀏覽器運行了兩種不同的階段:捕獲階段和冒泡階段。捕獲階段的行為:


·瀏覽器檢查元素的最外層祖先,是否在捕獲階段中注冊了一個onclick事件處理程序,如果是,則運行它;


·
然後,它移動到中單擊元素的下一個祖先元素,並執行相同的操作,然後是單擊元素再下一個祖先元素,依此類推,直到到達實際點擊的元素;


而冒泡與捕獲恰恰相反:


·瀏覽器檢查實際點擊的元素是否在冒泡階段中注冊了一個onclick事件處理程序,如果是,則運行它;


·然後它移動到下一個直接的祖先元素,並做同樣的事情,然後是下一個,等等,直到它到達元素;


而現代瀏覽器在默認情況下,所有事件處理程序都在冒泡階段進行注冊。因此上面代碼在點擊子元素時會先執行子元素綁定的事件,然後向上冒泡,觸發父元素綁定的事件。


addEventListener函數的第三個參數是個布爾值。含義:


·當布爾值是false時(這也是默認值),表示向上冒泡觸發事件;


·當布爾值是true時,表示向下捕獲觸發事件;


不能冒泡的事件


有些事件是不會冒泡的。比如:


·blur元素失去焦點時觸發,focusout事件也是失去焦點時觸發,但可以冒泡;


·focus元素獲取焦點時觸發;


·mouseenter滑鼠移動到元素上時會觸發該事件,與之對應的是mouseover事件,但會冒泡;


·mouseleave滑鼠離開元素時觸發,與之對應的是mouseout,但會冒泡;


事件冒泡可以讓我們利用事件委託,尤其是處理大量子元素時,如果給每個子元素都綁定事件,這是不優雅的,可以將事件綁定到父元素上,並讓子節點上發生的事件冒泡到父節點上,利用
e.target屬性可以獲取到當前觸發事件的子元素。


事件對象中的方法


·stopPropagation()阻止事件冒泡,當設置後,點擊該元素時父元素綁定的事件就不會再觸發;


·preventDefault()阻止默認事件的發生;


·stopImmediatePropagation()它用來阻止監聽同一事件的其他事件監聽器被調用以及阻止事件冒泡,比如給同一個div
元素綁定多個click事件(使用addEventListener方法可以注冊多個),當在第二個事件函數中調用
stopImmediatePropagation方法時,點擊div元素時,後面注冊的click將不會被觸發,而且還會阻止事件冒泡;


比如下面的例子,給p綁定多個click事件,在第二個事件函數中調用stopImmediatePropagation,第三個click
事件就不會觸發,因為也阻止了冒泡,因此父元素的click事件也不會觸發。





paragraph




『伍』 Web前端面試題匯總之JavaScript篇

今天小編要跟大家分享的文章是關於web前端面試題匯總之JavaScript篇。正在從事web前端學習和准備找工作的小夥伴們來和小編一起看一看吧,希望本篇文章能夠對大家有所幫助。

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


Undefined、Null、Boolean、Number、String


2,介紹js有哪些內置對象?


Object是JavaScript中所有對象的父對象


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


其他對象:Function、Arguments、Math、Date、RegExp、Error


3,說幾條寫JavaScript的基本規范?,


1.不要在同一行聲明多個變數。


2.請使用===/!==來比較true/false或者數值


3.使用對象字面量替代newArray這種形式


4.不要使用全局函數。


5.Switch語句必須帶有default分支


6.函數不應該有時候有返回值,有時候沒有返回值。


7.For循環必須使用大括弧


8.If語句必須使用大括弧


9.for-in循環中的變數應該使用var關鍵字明確限定作用域,從而避免作用域污染。


4,JavaScript原型,原型鏈?有什麼特點?


每個對象都會在其內部初始化一個屬性,就是prototype(原型),當我們訪問一個對象的屬性時,


如果這個對象內部不存在這個屬性,那麼他就會去prototype里找這個屬性,這個prototype又會有自己的prototype,


於是就這樣一直找下去,也就是我們平時所說的原型鏈的概念。


關系:instance.constructor.prototype=instance.__proto__


特點:


JavaScript對象是通過引用來傳遞的,我們創建的每個新對象實體中並沒有一份屬於自己的原型副本。當我們修改原型時,與之相關的對象也會繼承這一改變。


當我們需要一個屬性的時,Javascript引擎會先看當前對象中是否有這個屬性,如果沒有的話,


就會查找他的Prototype對象是否有這個屬性,如此遞推下去,一直檢索到Object內建對象。


functionFunc(){}


Func.prototype.name="Sean";


Func.prototype.getInfo=function(){returnthis.name;}


varperson=newFunc();


//現在可以參考


varperson=Object.create(oldObject);


console.log(person.getInfo());


//它擁有了Func的屬性和方法//"Sean"console.log(Func.prototype);


//Func{name="Sean",getInfo=function()}復制代碼


5,JavaScript有幾種類型的值?,你能畫一下他們的內存圖嗎?


棧:原始數據類型(Undefined,Null,Boolean,Number、String)


堆:引用數據類型(對象、數組和函數)


兩種類型的區別是:存儲位置不同;


原始數據類型直接存儲在棧(stack)中的簡單數據段,占據空間小、大小固定,屬於被頻繁使用數據,所以放入棧中存儲;


引用數據類型存儲在堆(heap)中的對象,占據空間大、大小不固定,如果存儲在棧中,將會影響程序運行的性能;引用數據類型在棧中存儲了指針,該指針指向堆中該實體的起始地址。當解釋器尋找引用值時,會首先檢索其


在棧中的地址,取得地址後從堆中獲得實體


6,Javascript如何實現繼承?


1、構造繼承


2、原型繼承


3、實例繼承


4、拷貝繼承


原型prototype機制或apply和call方法去實現較簡單,建議使用構造函數與原型混合方式。


functionParent(){this.name='wang'}functionChild(){this.age=28;}
Child.prototype=newParent();//繼承了Parent,通過原型vardemo=newChild();
alert(demo.age);alert(demo.name);//得到被繼承的屬性復制代碼


7,Javascript作用鏈域?


作用域鏈的作用是保證執行環境里有權訪問的變數和函數是有序的,作用域鏈的變數只能向上訪問,變數訪問到window對象即被終止,作用域鏈向下訪問變數是不被允許的。


8,談談This對象的理解。


this總是指向函數的直接調用者(而非間接調用者);


如果有new關鍵字,this指向new出來的那個對象;


在事件中,this指向觸發這個事件的對象,特殊的是,IE中的attachEvent中的this總是指向全局對象Window;


this就是指的是當前對象


9,null,undefined的區別?


null表示一個對象被定義了,值為「空值」;


undefined表示不存在這個值。


typeofundefined//"undefined"


undefined:是一個表示"無"的原始值或者說表示"缺少值",就是此處應該有一個值,但是還沒有定義。當嘗試讀取時會返回
undefined;


例如變數被聲明了,但沒有賦值時,就等於undefined


typeofnull//"object"


null:是一個對象(空對象,沒有任何屬性和方法);


例如作為函數的參數,表示該函數的參數不是對象;


注意:


在驗證null時,一定要使用===,因為==無法分別null和undefined


undefined表示"缺少值",就是此處應該有一個值,但是還沒有定義。典型用法是:


(1)變數被聲明了,但沒有賦值時,就等於undefined。


(2)調用函數時,應該提供的參數沒有提供,該參數等於undefined。


(3)對象沒有賦值的屬性,該屬性的值為undefined。


(4)函數沒有返回值時,默認返回undefined。


null表示"沒有對象",即該處不應該有值。典型用法是:


(1)作為函數的參數,表示該函數的參數不是對象。


(2)作為對象原型鏈的終點。


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


[1,NaN,NaN]因為parseInt需要兩個參數(val,radix),


其中radix表示解析時用的基數。


map傳了3個(element,index,array),對應的radix不合法導致解析失敗。


以上就是小編今天為大家分享的關於web前端面試題匯總之JavaScript篇的文章,希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助,想要了解更多web前端知識記得關注北大青鳥web培訓官網,最後祝願小夥伴們工作順利,成為一名優秀的web前端工程師。


『陸』 hr如何面試web前端工程師,該問哪些技術問題

一、基本知識

我們生活在互聯網時代,你想知道的任何事情幾乎都能在15分鍾內找到相關信息。可是,能找到信息並不等於你會使用它。我認為所有前端工程師至少都應 該掌握某些基本的知識,才能有效地完成自己的工作。如果一遇到問題,就停下工作上網四處搜索解決方案,怎麼可能保證按期完成工作呢?聽聽,還有誰在說「我 不知道,但我可以上網搜到。」請這些同學把手舉起來,讓大家認識一下(immediately raises a flag for me.)。下面我列出一些基本的知識點,這些都是我認為一名前端工程師(無論工作年頭長短)在沒有任何外來幫助的情況應該知道的。
[list][*]
DOM結構——兩個節點之間可能存在哪些關系以及如何在節點之間任意移動。
[*]
DOM操作——怎樣添加、移除、移動、復制、創建和查找節點。
[*]
事件——怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別。
[*]
XMLHttpRequest——這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。
[*]
嚴格模式與混雜模式——如何觸發這兩種模式,區分它們有何意義。
[*]
盒模型——外邊距、內邊距和邊框之間的關系,IE 8以下版本的瀏覽器中的盒模型有什麼不同。
[*]
塊級元素與行內元素——怎麼用CSS控制它們、它們怎樣影響周圍的元素以及你覺得應該如何定義它們的樣式。
[*]
浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。
[*]
HTML與XHTML——二者有什麼區別,你覺得應該使用哪一個並說出理由。
[*]
JSON——它是什麼、為什麼應該使用它、到底該怎麼使用它,說出實現細節來。
[/list]
重申一下,上述這些知識點都應該是你應該「想都不用想」的東西。我一開始問的所有問題都是想摸清你對所有這些領域知識的掌握程度。雖然上面列出的這些知識點並沒有面面俱到,但我覺得你至少應該掌握這些,才有可能跟我坐到一間辦公室里來。

二、少量提問

我非常贊同面試者問的問題越少越好。反復問應聘者各種問題既不公平,也很無聊。我在任何一次面試中,通常只問三個大問題,但每個問題又會涉及我所能想到的多個方面。回答每個大問題一般要經過幾個步驟,這樣我就可以在每個步驟中穿插著問一些小問題。比如說:

現在有一個正顯示著Yahoo!股票價格的頁面。頁面上有一個按鈕,你可以單擊它來刷新價格,但不會重新載入頁面。請你描述一下實現這個功能的過程,假設伺服器會負責准備好正確的股票價格數據。

這個問題牽扯到一組我想要考察的基本知識點:DOM結構、DOM操作、事件處理、XHR和JSON。如果我要求你對換一種處理股票價格的方式,或者 讓你在頁面中顯示其他信息,就可以把更多的知識點包括進來。對於經驗比較豐富應聘者,我也可以自如地擴展要考察的知識范圍,最簡單像JOSN與XML的區 別、安全問題、容量問題,等等。
我還希望應聘者給出的任何解決方案中都不要使用庫。我想看到最原生態的代碼,你就當頁面中沒有包含任何庫。你說你對哪個庫了解多少多少,但我不能把 關於庫的知識作為評判能力的因素,因為庫是會隨時間變化的。我需要的是真正理解庫背後的機制,特別是能夠徒手寫出一個自己的庫的人。

三、解決問題

做為一名前端工程師,最值得高興的事莫過於解決同一個問題會有很多種不同的方法,而你要做的就是找出最合適的方法來。我在提問的時候,經常會在應聘 者解釋完一種方法後問他們還有沒有第二種方法。此時我會跟他們說,假設你的這個方法由於種種原因被否決了,那麼你還能不能給出另一種方法。這樣做可以達到 兩個目的。
首先,可以測試出他們是否在毫無意義地復述書本中的東西。不能不承認,某些人確實有過目不忘的天賦,聽他們在那裡滔滔不絕地講,你會覺得他們什麼都 明白。可是,只要一跟這些人談到怎麼查找方案無效的原因,以及能否拿出一個新方案來,他們往往就傻眼了。這時候,如果我聽到「我不明白這個方案為什麼不夠 好」之類的反問,心裡立刻就明白我的問題已經超出了他們的能力范圍,而他們只是想拿自己死記硬背的結論來矇混過關。
其次,可以測試出他們已經掌握的(還是那句話,「想都不用想」)瀏覽器技術知識。如果他們對瀏覽器平台的核心知識有較好的理解,想出解決同一問題的不同方案根本沒有那麼難。
對一名前端工程師來說,這絕對是最重要的能力。前端工程師在工作中遇到本該如此卻並未如此的難題(說你啦,IE6),應該說是一件很平常的事。一個方案無效就無計可施的人,做不了前端工程師。
考核應聘者解決問題能力的另一層原因,與我的個人喜好有關。在搞清楚應聘者知道什麼不知道什麼之後,我就會想著問一個他們知識領域之外的問題。這樣 做的目的,就是想看看他們怎樣運用已有的知識解決新問題。在解決問題的每一步,我也准備了一些提示,以防有人會卡殼打艮(在我面前15分鍾一言不發,對我 評價這個人毫無幫助)。我真正感興趣的,是他們能夠從上一步前進到下一步。我希望看到一個人就在我眼前學到新知識。
注意:所有問題都與瀏覽器技術相關。我不相信出幾道抽象的邏輯題,就能夠考出某人解決Web技術問題的能力。在我看來,這無異於讓素描大師畫肖像(或者讓劉翔跟博爾特同場競技),沒有意義,也得不到任何有價值的信息。

『柒』 2020年Web前端面試題匯總(一)

今天小編要跟大家分享的文章是關於2020年Web前端面試題匯總。由於內容較多小編分開為大家介紹,今天首先來和小編一起看一看第一部分的內容,希望這些面試題能夠對正准備找Web前端相關工作的小夥伴們有所幫助。

1.說幾條寫JavaScript的基本規范?


1)不要在同一行聲明多個變數;


2)請使用===/!==來比較true/false或者數值;


3)使用對象字面量替代newObject這種形式;


4)減少使用全局函數,全局變數;


5)switch語句必須帶有default分支;


6)if語句必須使用大括弧;


7)for-in循環中的變數;


應該使用var關鍵字明確限定作用域;


從而避免作用域全局污染。


2.說說平衡二叉樹?


平衡二叉搜索樹(Self-balancingbinarysearchtree)


又被稱為AVL樹。


具有以下性質:


1)它是一棵空樹或它的左右兩個子樹


的高度差的絕對值不超過1,


並且左右兩個子樹都是一棵平衡二叉樹。


2)平衡二叉樹必定是二叉搜索樹,反之則不一定。


3)平衡二叉樹的常用實現方法有紅黑樹、AVL、


替罪羊樹、Treap、伸展樹等。


最小二叉平衡樹的節點的公式如下:


F(n)=F(n-1)+F(n-2)+1備註:1是根節點,


F(n-1)是左子樹的節點數量,


F(n-2)是右子樹的節點數量。


3.清除浮動和解決垂直外邊距重疊的解決方案?


問題描述:


1)父元素沒有設置寬高,尺寸由子元素撐起;


子元素一旦浮動,父元素高度會發生塌陷。


2)子元素設置margin-top會作用的父元素的margin-top;


此時會造成垂直外邊距重疊。


.clearfix::after,.clearfix::before{


content:''


display:table;


clear:both;


}


4.sessionStorage、localStorage和cookie?


相同點:


都用於瀏覽器端存儲的緩存數據;


不同點:


1)存儲內容是否發送到伺服器端


當設置了Cookie後,數據會發送到伺服器端,


造成一定的寬頻浪費;xxxstorage則會將數據保存


到本地,不會造成寬頻浪費;


2)數據存儲大小不同


Cookie數據不能超過4K,適用於會話標識;


xxxstorage數據存儲可以達到5M;


3)數據存儲的有效期限不同


cookie只在設置了Cookid過期時間


之前一直有效,即使關閉窗口或者瀏覽器;


sessionStorage,僅在關閉瀏覽器之前有效;


localStorage,數據存儲永久有效;


4)作用域不同


cookie和localStorage是在同源同窗口中


都是共享的;


sessionStorage不在不同的瀏覽器窗口


中共享,即使是同一個頁面;


5.判斷一個單詞是否是迴文?


迴文是指把相同的詞彙或句子,


在下文中調換位置或顛倒過來,


產生首尾回環的情景,


叫做迴文,也叫回環。


比如cacac,redivider。


letcheckPalindrom=(str)=>{


returnstr===


str.split('').reverse().join('');


}


6.不藉助臨時變數,進行兩個整數的交換?


輸入a=3,b=1,


輸出a=1,b=3


letswap=(a,b)=>{


b=b-a;


a=a+b;


b=a-b;


return[a,b];


}


7.請寫出至少5個html5新增的標簽,並說明其語義和應用場景?


section:定義文檔中的一個章節;


nav:定義只包含導航鏈接的章節;


header:定義頁面或章節的頭部;


它經常包含logo、頁面標題和導航性的目錄。


footer:定義頁面或章節的尾部;


它經常包含版權信息、法律信息鏈接和反饋建議用的地址。


aside:定義和頁面內容關聯度較低的內容,


如果被刪除,剩下的內容仍然很合理。


8.get和post請求在緩存方面的區別?


get請求類似於查找的過程,用戶獲取數據,


可以不用每次都與資料庫連接,所以可以使用緩存。


post不同,post做的一般是修改和刪除的工作,


所以必須與資料庫交互,所以不能使用緩存。


因此get請求適合於請求緩存。


9.如何解決非同步回調地獄?


promise、generator、async/await


10.圖片的懶載入和預載入?


預載入:提前載入圖片,


當用戶需要查看時可直接


從本地緩存中渲染。


懶載入:懶載入的主要目的


是作為伺服器前端的優化,


減少請求數或延遲請求數。


兩種技術的本質:


兩者的行為是相反的,


一個是提前載入,


一個是遲緩甚至不載入。


懶載入對伺服器前端有一定


的緩解壓力作用,


預載入則會增加伺服器前端壓力。


11.bind,apply,call的區別?


通過apply和call改變函數的this指向,


這兩個函數的第一個參數都是一樣的,


表示要改變指向的那個對象,


第二個參數,apply是數組,


而call則是arg1,arg2...這種形式。


通過bind改變this作用域


會返回一個新的函數,


這個函數不會馬上執行。


12.js怎麼控制一次載入一張圖片,載入完後再載入下一張?


方法一:





varobj=newImage();


obj.src="#/21.jpg";


obj.onload=function(){


document.getElementById("pic")


.innnerHTML="";


}


載入中

『捌』 誰能給我出一兩道 web前端筆試題 上機題啥的,呵呵,比較常考的

[面試題] 某企業前端開發面試題

【HTML & CSS】

1. Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式,區分它們有何意義?

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

3. CSS引入的方式有哪些? link和@import的區別是?

4. CSS選擇符有哪些?哪些屬性可以繼承?優先順序演算法如何計算?內聯和important哪個優先順序高?

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

6. css的基本語句構成是?

7. 你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?經常遇到的瀏覽器的兼容性有哪些?怎麼會出現?解決方法是什麼?

8. 如何居中一個浮動元素?

9. 有沒有關注HTML5和CSS3?如有請簡單說一些您對它們的了解情況!

10. 你怎麼來實現下面這個設計圖,主要講述思路 (效果圖省略)

11. 如果讓你來製作一個訪問量很高的大型網站,你會如何來管理所有CSS文件、JS與圖片?

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

【Javascript】

1. js是什麼,js和html 的開發如何結合?

2. 怎樣添加、移除、移動、復制、創建和查找節點

3. 怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別

4. 面向對象編程:b怎麼繼承a

5. 看看下面alert的結果是什麼
view sourceprint?1.function b(x, y, a) {
.arguments[2] = 10;
.alert(a);
}
b(1, 2, 3);
如果函數體改成下面,結果又會是什麼?
a = 10;
alert(arguments[2] );

6. 請編寫一個JavaScript函數 parseQueryString,它的用途是把URL參數解析為一個對象
var obj = parseQueryString(url);
alert(obj.key0) // 輸出0

7. ajax是什麼? ajax的交互模型? 同步和非同步的區別? 如何解決跨域問題?

8. 什麼是閉包?下面這個ul,如何點擊每一列的時候alert其index?
<ul id=」test」>
<li>這是第一條</li><li>這是第二條</li><li>這是第三條</li>
</ul>

9. 最近看的一篇Javascript的文章是?

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

11.說說YSlow(可以詳細一點)

答案在參考資料裡面可以找到,答案在參考資料裡面可以找到,答案在參考資料裡面可以找到

『玖』 面試Web前端需要注意什麼會面試哪些問題

作為一名HTML5前端工程師,為了工作,為了就業我們免不了要參加各種各樣的面試。為此總結了面試前的注意事項:

第一:注意自己的儀容儀表

面試之前,一定要再次從頭到腳地將自己的儀容儀表檢查一遍。檢查時主要包括,自己的牙縫是不是還有食物殘渣,所以你需要就近找一個衛生間,如果沒有衛生間就近找一個角落也是可以的,但是切記一定不要在大庭廣眾之下。因此,為了給自己整理出著裝的時間請在約定時間前20分鍾到達。

第二:再次檢查面試時所需的資料是否都已帶全

這些資料主要包括:身份證明、學歷文憑證明、個人簡歷、以往作品等等,如果這些東西齊全之後,需要對這些資料做一個整理與排序。因為沒有哪個面試官希望看到面試者拿出一堆「莫名其妙」的東西塞給他,讓他自己再一頁一頁的翻找自己需要的內容,如果說這些資料在面試官手中不小心散落一地,結果可想而知。這樣的求職者在面試官眼中也一定不是一個讓人放心、有條不紊的員工。當然如果檢查時發現資料沒有帶全,也不要緊張。反而你要慶倖幸虧及時檢查,也有足夠的時間組織語言去向面試官解釋。

第三:面試之前將通信工具調成振動或關閉狀態

雖然說面試者與面試官之間是一個平等的關系,但畢竟你是去人家公司求職的,始終處於一個被動的狀態,所以最起碼的尊重還是要做到的。曾經有調查顯示,對於面試過程中接電話或是被電話打斷的求職者,會被HR減分。

第四:等候面試官時,仔細觀察多了解面試公司

在等候面試官時,可以暗自觀察一下公司的大體情況比如員工的著裝風格、公司的LOGO或是貼在牆上的企業文化、公司的環境等等,一來可以在接下來的面試過程中表現出自己對公司的認同感,二來也可以讓自己對求職公司多些了解,以確定是否要接受這里的工作。如果你身邊有公司的資料宣傳架,不妨取一本翻看一下,也會增加HR對你的好感。

第五:放鬆心情,保持自信

面試時一定要保持一定的自信,這樣也會給面試官留下很好的印象。面試只是你步入工作的第一步,即便是失敗了那也是人生重要的經歷。失敗是為了更好的迎接下一個挑戰。

作為一名web前端工程師千萬不要覺得懂技術面試就能萬事大吉了,像以上五點細節性的東西也是一定要掌握的。

面試題系列:

網頁鏈接

『拾』 hr如何面試web前端工程師,該問哪些技術問題

近來幾個月,一直在努力尋找前端戰友,未果,一路的招聘經歷下來,心生不少感慨, 一直都很小心翼翼的,怕錯失了高人,又更加怕失誤把關不夠招到不合格的同學進來公司,對公司對項目造成某些影響。
面試前端工程師對我來說是一件非常有意思的事,因為面試過程很大程度上也是自我提升的過程。無論大公司還是小公司,之所以在如何招聘到真正有能力的 前端工程師方面會遇到同樣的問題,就是因為負責招聘的那些人不知道自己公司需要什麼樣的人,結果問問題時也問不到點子上。經過這幾年在行業里的摸索,我總 結出了自己的一套很有效的面試前端工程的方法。
有的應聘者說我不好對付,但留給他們這樣的印象也並非我所願。我覺得之所以他們說我不好對付,主要是因為我問他們問題時問得太細了。以前我曾專門寫過一些 東西,告訴應聘者怎麼才能通過我的面試(Surviving an interview with me)以及優秀的前面工程師應該具備什麼樣的素質(What makes a good front end engineer?),而我的面試可以說完全是按照那兩篇文章的標准進行的。我不會問一些特別偏門的問題,也不認為出幾道邏輯題就能考出人的真實水平。我 唯一的想法就是確定你能否勝任我們要招的這個職位。為此,我需要簡單地考察如下幾個方面。
基本知識
我們生活在互聯網時代,你想知道的任何事情幾乎都能在15分鍾內找到相關信息。可是,能找到信息並不等於你會使用它。我認為所有前端工程師至少都應 該掌握某些基本的知識,才能有效地完成自己的工作。如果一遇到問題,就停下工作上網四處搜索解決方案,怎麼可能保證按期完成工作呢?聽聽,還有誰在說「我 不知道,但我可以上網搜到。」請這些同學把手舉起來,讓大家認識一下(immediately raises a flag for me.)。下面我列出一些基本的知識點,這些都是我認為一名前端工程師(無論工作年頭長短)在沒有任何外來幫助的情況應該知道的。
DOM結構——兩個節點之間可能存在哪些關系以及如何在節點之間任意移動。
DOM操作——怎樣添加、移除、移動、復制、創建和查找節點。
事件——怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別。
XMLHttpRequest——這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。
嚴格模式與混雜模式——如何觸發這兩種模式,區分它們有何意義。
盒模型——外邊距、內邊距和邊框之間的關系,IE 8以下版本的瀏覽器中的盒模型有什麼不同。
塊級元素與行內元素——怎麼用CSS控制它們、它們怎樣影響周圍的元素以及你覺得應該如何定義它們的樣式。
浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。
HTML與XHTML——二者有什麼區別,你覺得應該使用哪一個並說出理由。
JSON——它是什麼、為什麼應該使用它、到底該怎麼使用它,說出實現細節來。
重申一下,上述這些知識點都應該是你應該「想都不用想」的東西。我一開始問的所有問題都是想摸清你對所有這些領域知識的掌握程度。雖然上面列出的這些知識點並沒有面面俱到,但我覺得你至少應該掌握這些,才有可能跟我坐到一間辦公室里來。
少量提問
我非常贊同面試者問的問題越少越好。反復問應聘者各種問題既不公平,也很無聊。我在任何一次面試中,通常只問三個大問題,但每個問題又會涉及我所能想到的多個方面。回答每個大問題一般要經過幾個步驟,這樣我就可以在每個步驟中穿插著問一些小問題。比如說:

現在有一個正顯示著Yahoo!股票價格的頁面。頁面上有一個按鈕,你可以單擊它來刷新價格,但不會重新載入頁面。請你描述一下實現這個功能的過程,假設伺服器會負責准備好正確的股票價格數據。
這個問題牽扯到一組我想要考察的基本知識點:DOM結構、DOM操作、事件處理、XHR和JSON。如果我要求你對換一種處理股票價格的方式,或者 讓你在頁面中顯示其他信息,就可以把更多的知識點包括進來。對於經驗比較豐富應聘者,我也可以自如地擴展要考察的知識范圍,最簡單像JOSN與XML的區 別、安全問題、容量問題,等等。
我還希望應聘者給出的任何解決方案中都不要使用庫。我想看到最原生態的代碼,你就當頁面中沒有包含任何庫。你說你對哪個庫了解多少多少,但我不能把 關於庫的知識作為評判能力的因素,因為庫是會隨時間變化的。我需要的是真正理解庫背後的機制,特別是能夠徒手寫出一個自己的庫的人。
解決問題
做為一名前端工程師,最值得高興的事莫過於解決同一個問題會有很多種不同的方法,而你要做的就是找出最合適的方法來。我在提問的時候,經常會在應聘 者解釋完一種方法後問他們還有沒有第二種方法。此時我會跟他們說,假設你的這個方法由於種種原因被否決了,那麼你還能不能給出另一種方法。這樣做可以達到 兩個目的。
首先,可以測試出他們是否在毫無意義地復述書本中的東西。不能不承認,某些人確實有過目不忘的天賦,聽他們在那裡滔滔不絕地講,你會覺得他們什麼都 明白。可是,只要一跟這些人談到怎麼查找方案無效的原因,以及能否拿出一個新方案來,他們往往就傻眼了。這時候,如果我聽到「我不明白這個方案為什麼不夠 好」之類的反問,心裡立刻就明白我的問題已經超出了他們的能力范圍,而他們只是想拿自己死記硬背的結論來矇混過關。
其次,可以測試出他們已經掌握的(還是那句話,「想都不用想」)瀏覽器技術知識。如果他們對瀏覽器平台的核心知識有較好的理解,想出解決同一問題的不同方案根本沒有那麼難。
對一名前端工程師來說,這絕對是最重要的能力。前端工程師在工作中遇到本該如此卻並未如此的難題(說你啦,IE6),應該說是一件很平常的事。一個方案無效就無計可施的人,做不了前端工程師。
考核應聘者解決問題能力的另一層原因,與我的個人喜好有關。在搞清楚應聘者知道什麼不知道什麼之後,我就會想著問一個他們知識領域之外的問題。這樣 做的目的,就是想看看他們怎樣運用已有的知識解決新問題。在解決問題的每一步,我也准備了一些提示,以防有人會卡殼打艮(在我面前15分鍾一言不發,對我 評價這個人毫無幫助)。我真正感興趣的,是他們能夠從上一步前進到下一步。我希望看到一個人就在我眼前學到新知識。
注意:所有問題都與瀏覽器技術相關。我不相信出幾道抽象的邏輯題,就能夠考出某人解決Web技術問題的能力。在我看來,這無異於讓素描大師畫肖像(或者讓劉翔跟博爾特同場競技),沒有意義,也得不到任何有價值的信息。
有激情
要成為一名優秀的前端工程師,最重要的莫過於對自己做的事要有激情。我們技能都不是從學校中或者從研討會上學來的,因此前端工程師必須具備自學能 力。瀏覽器技術的變化可謂日新月異,所以也只有不斷提升自己的技能才做得到與時俱進。我雖然不能強迫誰必須多看博客、不斷學習,但想應聘前端工程師的人恐 怕還是必須這么做的。
你怎麼知道誰對這種工作有沒有激情?實際上非常簡單。我只問一個簡單的問題:「目前你對什麼Web技術最感興趣?」這個問題永遠不會過期,而且也幾 乎不可能出錯……除非你答不上來。就眼下來說,我希望你對這個問題給出的技術中包括WebSocket、HTML、WebGL、客戶端資料庫,等等。只有 對Web開發充滿激情的人,才會堅持不懈地學習新知識、掌握新技能;這些人才是我真正想要的。當然,我會讓他們詳細解釋自己提到的技術,以保證他們不是隨 口說了幾個時髦的新詞彙。
最後一點
計算機科學或者Web設計方面的知識當然也有用,但那都是基本知識之外的東西。只要基本知識在那兒了,一切就都有了基礎,想擴充知識面也不難。可 是,如果等到正式上班以後,還得從頭學習基本技能,那種難度是不可同日而語的。另外,高級前端工程師與一般工程師相比,肯定需要掌握更多的技能。而面試幾 乎沒有經驗大學畢業生,同樣也會有一套完全不同的程序。我在這篇文章里列出來的都是一些最基本的東西。
對於那些還沒有多少面試經驗的人,我總是喜歡告訴他們,面試完了只要問自己一個問題就行:你想以後跟這個人在一起共事嗎?如果不管為什麼,回答是不,那就是不。