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

去哪兒前端面試題

發布時間: 2022-09-11 03:36:37

① 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前端經典面試題

為大家帶來一些web前端的面試題,希望可以幫助到大家啊。


1.css3有哪些新特性?


選擇器、圓角、動畫、多重背景、背景的寬度高度flex布局響應式布局邊框陰影文本陰影


2.響應式布局怎麼理解的,響應式布局是通過什麼實現?


根據不同的屏幕載入不同的css樣式


1).移動端適配


2).一套代碼適配pc端移動端多個


3.js創建對象有哪幾種方式?


1).自面量


2).newObject


3).構造函數


4.es6有哪些新特性?


1).letconst


2).模板字元串


3).方法的簡寫屬性的簡寫


4).三點運算符


5).解構賦值


6).箭頭函數


7).setmap


8).class類


9).模塊化


5.箭頭函數和普通的方法有什麼區別?


1).箭頭函數省略了function


2).箭頭函數裡面的this指向上下文(可以改變this指向)


6.gulp可以干什麼


gulp自動化構建工具。


壓縮代碼合並代碼壓縮圖片自動處理前綴創建web服務處理sass


7.清除浮動有哪些方法。


1).浮動元素的父元素overflow:hiddenoverflow:auto


2).浮動元素的最後面加一個空div給他clear:both


3).after偽類清除浮動


.clearfix:after{


content:"";


dislpay:block;


height:0px;


clear:both;


}


4)、給父元素設置高度。


8.行內元素塊元素的區別?


1)塊元素默認獨佔一行,行內元素默認情況不獨佔一行,行內元素的的寬度就是內容的寬度


2)默認情況塊元素可以設置寬度高度默認情況行內元素不可以設置寬度高度


3)默認可以margin上下左右,行內默認只能margin左右不能上下。


9.網站載入速度優化?


1).圖片不失真盡量小


2).多個背景圖片合並


3).代碼壓縮代碼合並


4).js寫到頁面最底部


5).懶載入


6).不要有冗餘代碼


7).伺服器帶寬款一些


8).伺服器固態硬碟


9).開啟緩存


10.以前寫代碼什麼情況會成出現亂碼怎麼解決?


解決亂碼文件保存的編碼和設置的編碼必須保持一致


11.以前如何測試調試移動端頁面


1).首先在瀏覽器自帶的調試工具模擬器裡面調試


2).真機的內置瀏覽器調試


3).真機上面的UC裡面調試


4).真機上的微信裡面調試。

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

Web前端經常被問到的面試題及答案

一、HTML+CSS

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

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

2.xhtml和html有什麼區別

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

最主要的不同:

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

XHTML 元素必須被關閉。

標簽名必須用小寫字母。

XHTML 文檔必須擁有根元素。

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

用於聲明文檔使用那種規范(html/Xhtml)一般為 嚴格 過度 基於框架的html文檔

加入XMl聲明可觸發,解析方式更改為IE5.5 擁有IE5.5的bug

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

塊級元素:div p h1 h2 h3 h4 form ul

行內元素: a b br i span input select

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

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

內聯 內嵌 外鏈 導入

區別 :同時載入

前者無兼容性,後者CSS2.1以下瀏覽器不支持

Link 支持使用javascript改變樣式,後者不可

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

標簽選擇符 類選擇符 id選擇符

繼承不如指定 Id>class>標簽選擇

後者優先順序高

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

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

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

選擇器{屬性1:值1;屬性2:值2;……}

9.你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?

Ie(Ie內核) 火狐(Gecko) 谷歌(webkit) opear(Presto)

二、Javascript

1.javascript的typeof返回哪些數據類型

Object number function boolean underfind

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

強制(parseInt,parseFloat,number)

隱式(== – ===)

3.split() join() 的區別

前者是切割成數組的形式,後者是將數組轉換成字元串

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

Push()尾部添加 pop()尾部刪除

Unshift()頭部添加 shift()頭部刪除

5.事件綁定和普通事件有什麼區別

6.IE和DOM事件流的區別

1.執行順序不一樣、

2.參數不一樣

3.事件加不加on

4.this指向問題

7.IE和標准下有哪些兼容性的寫法

Var ev = ev || window.event

document.documentElement.clientWidth || document.body.clientWidth

Var target = ev.srcElement||ev.target

8.ajax請求的時候get 和post方式的區別

一個在url後面 一個放在虛擬載體裡面

有大小限制

安全問題

應用不同 一個是論壇等只需要請求的,一個是類似修改密碼的

9.call和apply的區別

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

10.ajax請求時,如何解釋json數據

使用eval parse 鑒於安全性考慮 使用parse更靠譜

11.b繼承a的方法

12.寫一個獲取非行間樣式的函數

function getStyle(obj,attr,value)

{

if(!value)

{

if(obj.currentStyle)

{

return obj.currentStyle(attr)

}

else

{

obj.getComputedStyle(attr,false)

}

}

else

{

obj.style[attr]=value

}

}

④ 前端面試題整理(一)

進程是CPU資源分配的最小單位,線程是CPU調度的最小單位

其中GUI渲染線程和JS引擎是無法同時工作的

默認情況下, TCP 連接會啟用延遲傳送演算法 (Nagle 演算法), 在數據發送之前緩存他們. 如果短時間有多個數據發送, 會緩沖到一起作一次發送 (緩沖大小見 socket.bufferSize), 這樣可以減少 IO 消耗提高性能.

如果是傳輸文件的話, 那麼根本不用處理粘包的問題, 來一個包拼一個包就好了. 但是如果是多條消息, 或者是別的用途的數據那麼就需要處理粘包.

可以參見網上流傳比較廣的一個例子, 連續調用兩次 send 分別發送兩段數據 data1 和 data2, 在接收端有以下幾種常見的情況:

A. 先接收到 data1, 然後接收到 data2 .
B. 先接收到 data1 的部分數據, 然後接收到 data1 餘下的部分以及 data2 的全部.
C. 先接收到了 data1 的全部數據和 data2 的部分數據, 然後接收到了 data2 的餘下的數據.
D. 一次性接收到了 data1 和 data2 的全部數據.
其中的 BCD 就是我們常見的粘包的情況. 而對於處理粘包的問題, 常見的解決方案有:

多次發送之前間隔一個等待時間
關閉 Nagle 演算法
進行封包/拆包

通過滑動窗口協議(連續ARQ協議)實現,保證了分組無差錯、有序接收、流量控制。接收方返回的ACK中會包含自己的接收窗口的大小,並且利用大小來控制發送方的數據發送。

當發送者收到了一個窗口為0的應答,發送者便停止發送,等待接收者的下一個應答。如果這個窗口不為0的應答在傳輸過程中丟失,發送者一直等待,接收者以為發送者收到該應答,等待接收新數據,這樣雙方就相互等待,從而產生死鎖

TCP使用了持續計時器。每當發送者收到一個0窗口的應答後就啟動該計時器。計時器到時便主動發送報文詢問接收者的窗口大小。若接收者仍然返回0窗口,則重置該計時器繼續等待;若窗口不為0,則標識應答報文丟失了,此時重置發送窗口開始發送,這樣就避免了死鎖的產生

擁塞控制是作用於網路的,防止網路負載過大,常用的方法:1.慢啟動、擁塞避免 2.快重傳、快恢復。流量控制是作用於接收者的,控制發送者的發送速度使接收者來得及接收,防止分組丟失

發送方維持一個叫做擁塞窗口CWnd的狀態變數,控制著傳輸速度,TCP開始發送報文時CWnd=1。一個傳輸輪次所經歷的時間就是往返時間RTT,每經過一個RTT並且按時收到確認,就將擁塞窗口CWnd加倍。還有一個叫慢啟動門限ssthresh的狀態變數,當CWnd<ssthresh時,使用慢啟動,當CWnd>=ssthresh改用擁塞避免演算法

每經過一個往返時間RTT就把發送方的擁塞窗口cwnd加1而不是加倍。無論在慢啟動階段還是擁塞避免階段,只要發送方沒有按時收到確認,就把慢啟動門限設置為出現擁塞時的擁塞窗口cwnd的一半(但不小於2)。然後把擁塞窗口cwnd重置為1,執行慢啟動演算法

接收方收到一個失序的報文段後就立刻發出重復確認而不是等到自己發送數據時捎帶確認。只要發送方一連收到三個重復確認就立即重傳對方尚未收到的報文段,而不是等待重傳計時器到期

當發送方連續收到三個重復確認時,把慢啟動門限ssthresh減半,但是並不執行慢開始演算法,而是將擁塞窗口cwnd設置為ssthresh減半後的值,直接執行擁塞避免演算法。快重傳配合快恢復的TCP Reno版本是目前使用最廣的版本。

幀:HTTP/2 數據通信的最小單位消息:指 HTTP/2 中邏輯上的 HTTP 消息。例如請求和響應等,消息由一個或多個幀組成。
流:存在於連接中的一個虛擬通道。流可以承載雙向消息,每個流都有一個唯一的整數ID

HTTP/1.x會在請求和響應中中重復地攜帶不常改變的、冗長的頭部數據,給網路帶來額外的負擔。

服務端可以在發送頁面HTML時主動推送其它資源,而不用等到瀏覽器解析到相應位置,發起請求再響應。例如服務端可以主動把JS和CSS文件推送給客戶端,而不需要客戶端解析HTML時再發送這些請求。

服務端可以主動推送,客戶端也有權利選擇是否接收。如果服務端推送的資源已經被瀏覽器緩存過,瀏覽器可以通過發送RST_STREAM幀來拒收。主動推送也遵守同源策略,伺服器不會隨便推送第三方資源給客戶端。

HTTP 1.x 中,如果想並發多個請求,必須使用多個 TCP 鏈接,且瀏覽器為了控制資源,還會對單個域名有 6-8個的TCP鏈接請求限制。

HTTP2中:

同域名下所有通信都在單個連接上完成。
單個連接可以承載任意數量的雙向數據流。
數據流以消息的形式發送,而消息又由一個或多個幀組成,多個幀之間可以亂序發送,因為根據幀首部的流標識可以重新組裝

前端面試與進階指南
從輸入URL到頁面載入的過程?如何由一道題完善自己的前端知識體系!

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

前端面試題匯總,基本上會有四大類問題,具體如下:
一、HTML

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

2、HTML5 為什麼只需要寫 <!DOCTYPE HTML>?
3、行內元素有哪些?塊級元素有哪些? 空(void)元素有那些?
4、頁面導入樣式時,使用link和@import有什麼區別?
5、介紹一下你對瀏覽器內核的理解?
6、常見的瀏覽器內核有哪些?
7、html5有哪些新特性、移除了那些元素?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分 HTML 和 HTML5?
8、簡述一下你對HTML語義化的理解?
9、HTML5的離線儲存怎麼使用,工作原理能不能解釋一下?
10、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢?
11、請描述一下 cookies,sessionStorage 和 localStorage 的區別?
12、iframe有那些缺點?
13、Label的作用是什麼?是怎麼用的?(加 for 或 包裹)
14、HTML5的form如何關閉自動完成功能?
15、如何實現瀏覽器內多個標簽頁之間的通信? (阿里)
16、webSocket如何兼容低瀏覽器?(阿里)
17、頁面可見性(Page Visibility)API 可以有哪些用途?
18、如何在頁面上實現一個圓形的可點擊區域?
19、實現不使用 border 畫出1px高的線,在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
20、網頁驗證碼是幹嘛的,是為了解決什麼安全問題?
21、tite與h1的區別、b與strong的區別、i與em的區別?

二、css

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

2、CSS選擇符有哪些?哪些屬性可以繼承?
3、CSS優先順序演算法如何計算?
4、CSS3新增偽類有那些?
5、如何居中div?如何居中一個浮動元素?如何讓絕對定位的div居中?
6、display有哪些值?說明他們的作用。
7、position的值relative和absolute定位原點是?
8、CSS3有哪些新特性?
9、請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景?
10、用純CSS創建一個三角形的原理是什麼?

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

三、常見兼容性問題?


  1. 1、li與li之間有看不見的空白間隔是什麼原因引起的?有什麼解決辦法?
    2、經常遇到的瀏覽器的兼容性有哪些?原因,解決方法是什麼,常用hack的技巧 ?
    3、為什麼要初始化CSS樣式。
    4、absolute的containing block計算方式跟正常流有什麼不同?
    5、CSS里的visibility屬性有個collapse屬性值是幹嘛用的?在不同瀏覽器下以後什麼區別?
    6、position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣?
    7、對BFC規范(塊級格式化上下文:block formatting context)的理解?
    8、CSS權重優先順序是如何計算的?
    9、請解釋一下為什麼會出現浮動和什麼時候需要清除浮動?清除浮動的方式
    10、移動端的布局用過媒體查詢嗎?
    11、使用 CSS 預處理器嗎?喜歡那個?
    12、CSS優化、提高性能的方法有哪些?
    13、瀏覽器是怎樣解析CSS選擇器的?
    14、在網頁中的應該使用奇數還是偶數的字體?為什麼呢?
    15、margin和padding分別適合什麼場景使用?
    16、抽離樣式模塊怎麼寫,說出思路,有無實踐經驗?[阿里航旅的面試題]
    17、元素豎向的百分比設定是相對於容器的高度嗎?
    18、全屏滾動的原理是什麼?用到了CSS的那些屬性?
    19、什麼是響應式設計?響應式設計的基本原理是什麼?如何兼容低版本的IE?
    20、視差滾動效果,如何給每頁做不同的動畫?(回到頂部,向下滑動要再次出現,和只出現一次分別怎麼做?)
    21、::before 和 :after中雙冒號和單冒號 有什麼區別?解釋一下這2個偽元素的作用。
    22、如何修改chrome記住密碼後自動填充表單的黃色背景 ?
    23、你對line-height是如何理解的?
    24、設置元素浮動後,該元素的display值是多少?(自動變成display:block)
    25、怎麼讓Chrome支持小於12px 的文字?
    26、讓頁面里的字體變清晰,變細用CSS怎麼做?(-webkit-font-smoothing: antialiased;)
    27、font-style屬性可以讓它賦值為「oblique」 oblique是什麼意思?
    28、position:fixed;在android下無效怎麼處理?
    29、如果需要手動寫動畫,你認為最小時間間隔是多久,為什麼?(阿里)
    30、display:inline-block 什麼時候會顯示間隙?(攜程)
    31、overflow: scroll時不能平滑滾動的問題怎麼處理?
    32、有一個高度自適應的div,裡面有兩個div,一個高度100px,希望另一個填滿剩下的高度。
    33、png、jpg、gif 這些圖片格式解釋一下,分別什麼時候用。有沒有了解過webp?
    34、什麼是Cookie 隔離?(或者說:請求資源的時候不要讓它帶cookie怎麼做)
    35、style標簽寫在body後與body前有什麼區別?

    四、JavaScript

    1、介紹JavaScript的基本數據類型。
    2、說說寫JavaScript的基本規范?
    3、JavaScript原型,原型鏈 ? 有什麼特點?
    4、JavaScript有幾種類型的值?(堆:原始數據類型和 棧:引用數據類型),你能畫一下他們的內存圖嗎?
    5、Javascript如何實現繼承?
    6、Javascript創建對象的幾種方式?
    7、Javascript作用鏈域?
    8、談談This對象的理解。
    9、eval是做什麼的?
    10、什麼是window對象? 什麼是document對象?
    11、null,undefined的區別?
    12、寫一個通用的事件偵聽器函數(機試題)。
    13、[「1」, 「2」, 「3」].map(parseInt) 答案是多少?
    14、關於事件,IE與火狐的事件機制有什麼區別? 如何阻止冒泡?
    15、什麼是閉包(closure),為什麼要用它?
    16、javascript 代碼中的」use strict」;是什麼意思 ? 使用它區別是什麼?
    17、如何判斷一個對象是否屬於某個類?
    18、new操作符具體幹了什麼呢?
    19、用原生JavaScript的實現過什麼功能嗎?
    20、Javascript中,有一個函數,執行時對象查找時,永遠不會去查找原型,這個函數是?
    21、對JSON的了解?
    22、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解釋一下這段代碼的意思嗎?
    23、js延遲載入的方式有哪些?
    24、Ajax 是什麼? 如何創建一個Ajax?
    25、同步和非同步的區別?
    26、如何解決跨域問題?
    27、頁面編碼和被請求的資源編碼如果不一致如何處理?
    28、模塊化開發怎麼做?
    29、AMD(Moles/Asynchronous-Definition)、CMD(Common Mole

    Definition)規范區別?
    30、requireJS的核心原理是什麼?(如何動態載入的?如何避免多次載入的?如何 緩存的?)
    31、讓你自己設計實現一個requireJS,你會怎麼做?
    32、談一談你對ECMAScript6的了解?
    33、ECMAScript6 怎麼寫class么,為什麼會出現class這種東西?
    34、非同步載入的方式有哪些?
    35、documen.write和 innerHTML的區別?
    36、DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?
    37、.call() 和 .apply() 的含義和區別?
    38、數組和對象有哪些原生方法,列舉一下?
    39、JS 怎麼實現一個類。怎麼實例化這個類
    40、JavaScript中的作用域與變數聲明提升?
    41、如何編寫高性能的Javascript?
    42、那些操作會造成內存泄漏?
    43、JQuery的源碼看過嗎?能不能簡單概況一下它的實現原理?
    44、jQuery.fn的init方法返回的this指的是什麼對象?為什麼要返回this?
    45、jquery中如何將數組轉化為json字元串,然後再轉化回來?
    46、jQuery 的屬性拷貝(extend)的實現原理是什麼,如何實現深拷貝?
    47、jquery.extend 與 jquery.fn.extend的區別?
    48、jQuery 的隊列是如何實現的?隊列可以用在哪些地方?
    49、談一下Jquery中的bind(),live(),delegate(),on()的區別?
    50、JQuery一個對象可以同時綁定多個事件,這是如何實現的?
    51、是否知道自定義事件。jQuery里的fire函數是什麼意思,什麼時候用?
    52、jQuery 是通過哪個方法和 Sizzle 選擇器結合的?(jQuery.fn.find()進入Sizzle)
    53、針對 jQuery性能的優化方法?
    54、Jquery與jQuery UI有啥區別?
    55、JQuery的源碼看過嗎?能不能簡單說一下它的實現原理?
    56、jquery 中如何將數組轉化為json字元串,然後再轉化回來?
    57、jQuery和Zepto的區別?各自的使用場景?
    58、針對 jQuery 的優化方法?
    59、Zepto的點透問題如何解決?
    60、jQueryUI如何自定義組件?
    61、需求:實現一個頁面操作不會整頁刷新的網站,並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案?
    62、如何判斷當前腳本運行在瀏覽器還是node環境中?(阿里)
    63、移動端最小觸控區域是多大?
    64、jQuery 的 slideUp動畫 ,如果目標元素是被外部事件驅動, 當滑鼠快速地連續觸發外部元素事件, 動畫會滯後的反復執行,該如何處理呢?
    65、把 Script 標簽 放在頁面的最底部的body封閉之前 和封閉之後有什麼區別?瀏覽器會如何解析它們?
    66、移動端的點擊事件的有延遲,時間是多久,為什麼會有? 怎麼解決這個延時?(click 有 300ms 延遲,為了實現safari的雙擊事件的設計,瀏覽器要知道你是不是要雙擊操作。)
    67、知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能講出他們各自的優點和缺點么?
    68、Underscore 對哪些 JS 原生對象進行了擴展以及提供了哪些好用的函數方法?
    69、解釋JavaScript中的作用域與變數聲明提升?
    70、那些操作會造成內存泄漏?
    71、JQuery一個對象可以同時綁定多個事件,這是如何實現的?
    72、Node.js的適用場景?
    (如果會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
    73、解釋一下 Backbone 的 MVC 實現方式?
    74、什麼是「前端路由」?什麼時候適合使用「前端路由」? 「前端路由」有哪些優點和缺點?
    75、知道什麼是webkit么? 知道怎麼用瀏覽器的各種工具來調試和debug代碼么?
    76、如何測試前端代碼么? 知道BDD, TDD, Unit Test么? 知道怎麼測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?
    77、前端templating(Mustache, underscore, handlebars)是幹嘛的, 怎麼用?
    78、簡述一下 Handlebars 的基本用法?
    79、簡述一下 Handlerbars 的對模板的基本處理流程, 如何編譯的?如何緩存的?
    80、用js實現千位分隔符?(來源:前端農民工,提示:正則+replace)
    檢測瀏覽器版本版本有哪些方式?
    81、我們給一個dom同時綁定兩個點擊事件,一個用捕獲,一個用冒泡,你來說下會執行幾次事件,然後會先執行冒泡還是捕獲

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


§

⑦ 前端面試 問什麼問題

web前端面試會問人事方面的內容和web前端技術的內容;

人事的面試

web前端人事面試方面,需要注意如何自我介紹、性格有哪些優劣勢、職業規劃方向是什麼、你的特長是什麼、對於加班之類你是怎麼看待等人事面試內容;

web前端技術的面試

技術面試,需要注意HTML+CSS+JavaScript以及JS主流框架的使用,比如Vue、React等,前端相關技術,比如tcp握手協議、網路安全、後端技術等;

對於web前端面試准備,建議你去看「決勝前端」(min app),它裡麵包含了很多web前端技術面試、人事面試等面試真題,而且針對面試題做了詳細的分析與解答。

我給你截圖看一下例子吧

⑧ 去哪兒網web前端開發工程師面試題目

去哪兒網的面試題目主要還是偏向JS方面,對JS的基礎要求比較高,側重原理方面,比如閉包原理、作用域原理、面向對象繼承原理等。

建議你去看看【決勝前端】最合適不過了,裡面有幾百道前端面試真題,而且每道題都有詳細的剖析。

⑨ 前端面試題,哪裡能找到案例或解析

如果你確定具體是什麼題目的話,可以直接拿題目網路啊,雖然有時候網路查找到的資料是重復的,但也算是最快最直接的方法。

如果你希望找到大量的面試題,或者是附帶答案,解析的問題。首先推薦小程序 —— 決勝前端。

另外,HTML5學堂,牛客,掘金等網站也有相關題目。

⑩ 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解釋器」,用於方便高效地搭建一些響應速度快、易於擴展的網路應用。它採用事件驅動、非同步編程,為網路服務而設計