前端面試會問什麼問題,web前端面試經常問到的面試題有哪些

時間 2021-09-02 09:22:37

1樓:匿名使用者

面試就像相親,一看緣分,二看眼緣,三看是否能滿足雙方的要求。

推薦閱讀 前端開發面試經    ,從面試官角度談面試。

2樓:匿名使用者

如何解決不同瀏覽器之間的相容性問題,或者是否有遇到過相容性問題,如何解決?

這一問題主要想考察面試者對於不同核心和不同版本(如css3和css,html5和html)的瞭解,所以主要聊一下知道的不同瀏覽器之前一些差異(如空格大小不同等)及不同版本如何相容(做多種處理方法)之類的即可;(

瀏覽器相容問題一:不同瀏覽器的標籤預設的外補丁和內補丁不同

問題症狀:隨便寫幾個標籤,不加樣式控制的情況下,各自的margin 和padding差異較大。

碰到頻率:100%

解決方案:css裡    *

備註:這個是最常見的也是最易解決的一個瀏覽器相容性問題,幾乎所有的css檔案開頭都會用萬用字元*來設定各個標籤的內外補丁是0。

瀏覽器相容問題二:塊屬性標籤float後,又有橫行的margin情況下,在ie6顯示margin比設定的大

問題症狀:隨便寫幾個標籤,不加樣式控制的情況下,各自的margin 和padding差異較大。

碰到頻率:100%

解決方案:css裡    *

備註:這個是最常見的也是最易解決的一個瀏覽器相容性問題,幾乎所有的css檔案開頭都會用萬用字元*來設定各個標籤的內外補丁是0。

瀏覽器相容問題三:設定較小高度標籤(一般小於10px),在ie6,ie7,遨遊中高度超出自己設定高度

問題症狀:ie6、7和遨遊裡這個標籤的高度不受控制,超出自己設定的高度

碰到頻率:60%

解決方案:給超出高度的標籤設定overflow:hidden;或者設定行高line-height 小於你設定的高度。

備註:這種情況一般出現在我們設定小圓角背景的標籤裡。出現這個問題的原因是ie8之前的瀏覽器都會給標籤一個最小預設的行高的高度。

即使你的標籤是空的,這個標籤的高度還是會達到預設的行高。

瀏覽器相容問題四:行內屬性標籤,設定display:block後採用float佈局,又有橫行的margin的情況,ie6間距bug

問題症狀:ie6裡的間距比超過設定的間距

碰到機率:20%

解決方案:在display:block;後面加入display:inline;display:table;

備註:行內屬性標籤,為了設定寬高,我們需要設定display:block;(除了input標籤比較特殊)。

在用float佈局並有橫向的margin後,在ie6下,他就具有了塊屬性float後的橫向margin的bug。不過因為它本身就是行內屬性標籤,所以我們再加上display:inline的話,它的高寬就不可設了。

這時候我們還需要在display:inline後面加入display:talbe。

瀏覽器相容問題五:**預設有間距

問題症狀:幾個img標籤放在一起的時候,有些瀏覽器會有預設的間距,加了問題一中提到的萬用字元也不起作用。

碰到機率:20%

解決方案:使用float屬性為img佈局

備註:因為img標籤是行內屬性標籤,所以只要不超出容器寬度,img標籤都會排在一行裡,但是部分瀏覽器的img標籤之間會有個間距。去掉這個間距使用float是正道。

(我的一個學生使用負margin,雖然能解決,但負margin本身就是容易引起瀏覽器相容問題的用法,所以我禁止他們使用)

瀏覽器相容問題六:標籤最低高度設定min-height不相容

問題症狀:因為min-height本身就是一個不相容的css屬性,所以設定min-height時不能很好的被各個瀏覽器相容

碰到機率:5%

解決方案:如果我們要設定一個標籤的最小高度200px,需要進行的設定為:

備註:在b/s系統前端開時,有很多情況下我們又這種需求。當內容小於一個值(如300px)時。

容器的高度為300px;當內容高度大於這個值時,容器高度被撐高,而不是出現滾動條。這時候我們就會面臨這個相容性問題。

瀏覽器相容問題七:透明度的相容css設定

做相容頁面的方法是:每寫一小段**(佈局中的一行或者一塊)我們都要在不同的瀏覽器中看是否相容,當然熟練到一定的程度就沒這麼麻煩了。建議經常會碰到相容性問題的新手使用。

很多相容性問題都是因為瀏覽器對標籤的預設屬性解析不同造成的,只要我們稍加設定都能輕鬆地解決這些相容問題。如果我們熟悉標籤的預設屬性的話,就能很好的理解為什麼會出現相容問題以及怎麼去解決這些相容問題。

/* css hack*/

◆ie6認識的hacker 是下劃線_ 和星號 *

◆ie7 遨遊認識的hacker是星號 *

比如這樣一個css設定:

height:300px;*height:200px;_height:100px;

ie6瀏覽器在讀到height:300px的時候會認為高時300px;繼續往下讀,他也認識*heihgt, 所以當ie6讀到*height:200px的時候會覆蓋掉前一條的相沖突設定,認為高度是200px。

繼續往下讀,ie6還認識_height,所以他又會覆蓋掉200px高的設定,把高度設定為100px;

ie7和遨遊也是一樣的從高度300px的設定往下讀。當它們讀到*height200px的時候就停下了,因為它們不認識_height。所以它們會把高度解析為200px,剩下的瀏覽器只認識第一個height:

300px;所以他們會把高度解析為300px。因為優先順序相同且想衝突的屬性設定後一個會覆蓋掉前一個,所以書寫的次序是很重要的

2.一個網頁從位址列輸入url到最後在瀏覽器中顯示,中間經過了那些過程?

這個是網上比較多人認為問得較有水平的一個問題,需要了解整個從域名到ip到具體請求的整個流程,原理可以一兩句話簡單概括,也可以講得比較細緻,但之後一般會牽引出面試官想要問的其他問題;(請參考:http://www.

3.cookie、session、localstorage的區別和用法;

主要為了考察對於前端內容儲存的一些問題,三者的明顯區別,三者應該用在什麼地方,什麼情況應該用那種,可從這些方面進行回答;

(sessionstorage 、localstorage 和 cookie 之間的區別

共同點:都是儲存在瀏覽器端,且同源的。

區別:cookie資料始終在同源的http請求中攜帶(即使不需要),即cookie在瀏覽器和伺服器間來回傳遞。

而sessionstorage和localstorage不會自動把資料發給伺服器,僅在本地儲存。cookie資料還有路徑(path)的概念,可以限制cookie只屬於某個路徑下。

儲存大小限制也不同,

cookie資料不能超過4k,同時因為每次http請求都會攜帶cookie,所以cookie只適合儲存很小的資料,如會話標識。

sessionstorage和localstorage 雖然也有儲存大小的限制,但比cookie大得多,可以達到5m或更大。

cookie只在設定的cookie過期時間之前一直有效,即使視窗或瀏覽器關閉。

作用域不同,sessionstorage不在不同的瀏覽器視窗中共享,即使是同一個頁面;

localstorage 在所有同源視窗中都是共享的;

cookie也是在所有同源視窗中都是共享的。

使用html5 web儲存的localstorage和sessionstorage方式進行web頁面資料本地儲存。

頁面參考如下圖,能將頁面上的資料進行本地儲存。並能讀取儲存的資料顯示在頁面上。

localstorage(本地儲存),可以長期儲存資料,沒有時間限制,一天,一年,兩年甚至更長,資料都可以使用。

sessionstorage(會話儲存),只有在瀏覽器被關閉之前使用,建立另一個頁面時同意可以使用,關閉瀏覽器之後資料就會消失。)

4.盒模型;

盒模型基本是前端學習的入門課,所以這也是比較多面試官想問的問題,考察基礎;

(請參考

5.doctype的意義、作用和具體內容;

doctype用於宣告dtd型別,但在html5中已不再使用,所以這個問題會逐漸比較少問及。

望採納,謝謝。

web前端面試經常問到的面試題有哪些

3樓:杭州有碼

1、 列舉web效能優化?

1)減少http請求次數。合併檔案、利用css sprite把零散的**整合到一張圖上。

2)減少dns查詢。

3)減少從定向。

4)響應時間。使用ajax進行快取,減少http請求。

5)延遲載入元件.

6)預載入元件。

7)減少節點的數量。

8)切分元件到多個域。

9)最小化iframe。

10)杜絕http404錯誤。

2、 介紹一下xmlhttprequest物件的常用方式和屬性?

open(“method”,”url”) 建立對伺服器的呼叫,第一個引數是http請求方式

可以為get,post或任何伺服器所支援的您想呼叫的方式。

第二個引數是請求頁面的url。

send()方法,傳送具體請求

abort()方法,停止當前請求

readystate屬性 請求的狀態 有5個可取值 0=未初始化 ,1=正在載入

2=以載入,3=互動中,4=完成

responsetext 屬性 伺服器的響應,表示為一個串

repon***ml 屬性 伺服器的響應,表示為xml

status 伺服器的http狀態碼,200對應ok 400對應not found

4樓:碼匠

行元素與塊元素的區別;

如何清除浮動;

定位方式當中,absolute與fixed、relative的區別;

事件的相容問題;

ajax是什麼;

如何優化你的頁面;

響應式佈局是什麼等等。

經典的前端面試題至少有近百道,在這裡也沒辦法全部給你列出來,你可以看看這個(小-程-序)“決勝前端”,裡面有好幾百道面試真題,也有比較好的答案解析。

面試時候作為候選人,在前端面試中最怕被問什麼問題

凋零的楓葉 最怕被問到私生活,尤其是關於孩子的情況,如果你說要生二胎的話,可能就會被淘汰。 影子 考官問,你期望的薪資待遇多少合適,為啥這麼說呢,因為所有的待遇不是公司給,是自己去創造出來,難道你只滿足於保底嗎? 沉夜孤星 面試作為候選人在前端面試中最害怕被問到的問題就是在工作中如果遇到怎樣怎樣的問...

面試生活老師考官會問什麼問題,馬上要要面試生活指導老師, 會問什麼樣的問題?

付費內容限時免費檢視 回答生活老師主要是注重細節,說話談吐,舉止大方,為人處事要隨和。因為職位是生活指導老師所以你的以後的工作很單調主要是為人處事方面注意。1 面試是通過書面或面談的形式來考察乙個人的工作能力與否,物以類聚,通過面試可以初步判斷應聘者是否可以融入自己的團隊。是一種經過組織者精心策劃的...

團委面試的問題,去團委面試一般會問什麼問題?

溫暖的弦 1.一分鐘的自我介紹 2.你為什麼加入我們部門。3.你知道本部門的工作是要做什麼嗎。4.跟來面試的人相比你有什麼優勢。5.如果部門裡面有你不喜歡的人,部長安排你們一起工作,你會如何處理。6.如果你的部長有一個錯誤的決定讓你執行,你知道是錯誤的,你會怎樣做。7.宣傳部門的工作都很煩瑣,有時會...