當前位置:首頁 » 網頁前端 » 二六三網路通信前端面試
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

二六三網路通信前端面試

發布時間: 2023-05-13 11:06:26

1. 如何面試前端開發

自我介紹,可以簡單介紹你畢業什麼學校,什麼專業,工作經歷簡明扼要的說出來就可以了,不要詳細到你哪年進入公司,哪年離開公司,負責項目做什麼的,說一大通。這個對面試官來說,想讓你自我簡單介紹,其實考察點有兩方面:1面試者的表達能力和概括能力,2面試者目前掌握什麼技術,做過什麼項目,在項目中的角色來初步判定這個人的能力
有些面試者回答問題,在介紹項目的時候,很大概的說,或者一句話前端都是我做的,這些都是我設計的;這樣肯定是不行的,面試官讓你介紹項目的時候肯定是希望你詳細介紹你的項目,這個項目使用者是誰,讓我知道誰在使用這個項目;你負責哪些模塊,哪些組件,那些模塊實現什麼業務邏輯,用到什麼技術,這個能讓面試官更加知道你項目的業務,才能從你描述中知道這類的業務會遇到什麼問題,以及你使用的技術是否合理,能更加判定你的能力,才能更好的提出問題,才能更好的面試下去。
前端技能在問到很多面試者的時候感覺自己都懂前端,其實他們只是懂使用js敲代碼而已,很多前端知識,以及前端原理都不懂,只會使用的話,那麼永遠只會走來人家的後面。就那一個比喻來說吧,如果你只是一個會開車的司機,不會修車或者造車,那麼如果哪天車出了毛病,你都不知道,到時候才去學習車的構造原理。或者你會說我直接給維修廠不就可以了,如果維修廠關門了呢怎麼辦。所以我們前端開發人員還是要腳踏實地,不要說我會使用vuejs,react前端框架,問你一個mvvm模式是什麼,你都說不知道,怎麼實現mvvm框架,在不使用別人開發mvvm框架,自己可以開發一個簡單的mvvm框架?

2. 前端面試題整理(一)

進程是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到頁面載入的過程?如何由一道題完善自己的前端知識體系!

3. 面試Web前端需要注意什麼會面試哪些問題

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

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

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

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

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

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

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

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

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

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

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

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

面試題系列:

網頁鏈接

4. 前端常見面試題

前端開發可能問到的問題:
自我介紹(一定要對項目很熟悉)
ui-app web前端技術體系?

響應式怎麼做?

render跟狀態的差異
類組件的生命周期?
阻止冒泡,阻止事件默認行為
文本垂直居中。 line-height設置為元素高度。

用rece講數組中的對象進行合並
解釋localstorage sessionstorage cookie
eventbus滿足event.on('eventname', callback)

display有幾個值?默認值?
position有幾個值?默認值?
div水平垂直居中?
position有哪些值

react相關問題(概念理解、通訊組件等)、react常用內置
React-router
html+css

頁面增刪改查

position的值 absolute relative fixed static

工作中是怎麼聯調和上線的(現場想合適的前後端聯調方式,能和webpack環境切換聯系起來)
antd的Form shouldUpdate增量更新方式,性能優化。
對Hooks的理解

3:操作dom點擊事件向伺服器上傳數據,在上傳未完成之前不可重復操作事件
4:日期格式化,日期不足前兩位補0(2021-06-06 06:06:00)

用css寫一個布局,左側固定寬度,右側自適應

你看

5. 前端面試題目難嗎 如何輕松面對前端面試

從以下五個方面做,可以輕松面對前端面試:
一、基本知識
DOM結構——兩個節點之間可能存在哪些關系以及如何在節點之間任意移動。
DOM操作——怎樣添加、移除、移動、復制、創建和查找節點。
事件——怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別。
XMLHttpRequest——這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。
嚴格模式與混雜模式——如何觸發這兩種模式,區分它們有何意義。
盒模型——外邊距、內邊距和邊框之間的關系,IE8以下版本的瀏覽器中的盒模型有什麼不同。
塊級元素與行內元素——怎麼用CSS控制它們、它們怎樣影響周圍的元素以及你覺得應該如何定義它們的樣式。
浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。
HTML與XHTML——二者有什麼區別,你覺得應該使用哪一個並說出理由。
JSON——它是什麼、為什麼應該使用它、到底該怎麼使用它,說出實現細節來。
二、少量提問
現在有一個正顯示著Yahoo!股票價格的頁面。頁面上有一個按鈕,你可以單擊它來刷新價格,但不會重新載入頁面。請你描述一下實現這個功能的過程,假設伺服器會負責准備好正確的股票價格數據。
這個問題牽扯到一組我想要考察的基本知識點:DOM結構、DOM操作、事件處理、XHR和JSON。如果我要求你對換一種處理股票價格的方式,或者 讓你在頁面中顯示其他信息,就可以把更多的知識點包括進來。對於經驗比較豐富應聘者,我也可以自如地擴展要考察的知識范圍,最簡單像JOSN與XML的區別、安全問題、容量問題等等。
我還希望應聘者給出的任何解決方案中都不要使用庫。我想看到最原生態的代碼,你就當頁面中沒有包含任何庫。你說你對哪個庫了解多少多少,但我不能把關於庫的知識作為評判能力的因素,因為庫是會隨時間變化的。
三、解決問題
做為一名前端工程師,最值得高興的事莫過於解決同一個問題會有很多種不同的方法,而你要做的就是找出最合適的方法來。我在提問的時候,經常會在應聘者解釋完一種方法後問他們還有沒有第二種方法。此時我會跟他們說,假設你的這個方法由於種種原因被否決了,那麼你還能不能給出另一種方法。這樣做可以達到 兩個目的。
首先,可以測試出他們是否在毫無意義地復述書本中的東西。不能不承認,某些人確實有過目不忘的天賦,聽他們在那裡滔滔不絕地講,你會覺得他們什麼都明白。可是,只要一跟這些人談到怎麼查找方案無效的原因,以及能否拿出一個新方案來,他們往往就傻眼了。這時候,如果我聽到「我不明白這個方案為什麼不夠 好」之類的反問,心裡立刻就明白我的問題已經超出了他們的能力范圍,而他們只是想拿自己死記硬背的結論來矇混過關。
其次,可以測試出他們已經掌握的(還是那句話,「想都不用想」)瀏覽器技術知識。如果他們對瀏覽器平台的核心知識有較好的理解,想出解決同一問題的不同方案根本沒有那麼難。
注意:所有問題都與瀏覽器技術相關。我不相信出幾道抽象的邏輯題,就能夠考出某人解決Web技術問題的能力。在我看來,這無異於讓素描大師畫肖像,沒有意義,也得不到任何有價值的信息。
四、有激情
要成為一名優秀的前端工程師,最重要的莫過於對自己做的事要有激情。我們技能都不是從學校中或者從研討會上學來的,因此前端工程師必須具備自學能力。瀏覽器技術的變化可謂日新月異,所以也只有不斷提升自己的技能才做得到與時俱進。我雖然不能強迫誰必須多看博客、不斷學習,但想應聘前端工程師的人恐怕還是必須這么做的。
你怎麼知道誰對這種工作有沒有激情?實際上非常簡單。我只問一個簡單的問題:「目前你對什麼Web技術最感興趣?」這個問題永遠不會過期,而且也幾乎不可能出錯……除非你答不上來。就眼下來說,我希望你對這個問題給出的技術中包括WebSocket、HTML、WebGL、客戶端資料庫,等等。只有 對Web開發充滿激情的人,才會堅持不懈地學習新知識、掌握新技能;
五、最後一點
計算機科學或者Web設計方面的知識當然也有用,但那都是基本知識之外的東西。只要基本知識在那兒了,一切就都有了基礎,想擴充知識面也不難。可是,如果等到正式上班以後,還得從頭學習基本技能,那種難度是不可同日而語的。

6. 你遇到的前端面試題都有什麼

大家好,我是王我。

隨著春節的結束,各個行業也普遍開始了上班的節奏, 不過本人17號才上班。為什麼?因為長得帥的都上班比較晚。 當然,每到新年結束,又迎來了一批招聘者與面試者,我來說說作為一年工作經驗應該知道的面試題。

HTML篇

1.doctype是什麼?有哪些類型?

2.input有哪些新類型?簡要說明其8用法。

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

4.bootstrap響應式的原理是什麼?

5.多移動終端頁面適配是如何實現的?

CSS篇

1.如何實現兩列布局,左邊自適應,右邊固定寬度?

2.用CSS畫一個三角形

3.CSS實現字體大寫

4.display有哪些常用的屬性值?分別是什麼意思?

5.position為absolute,relative,fixed的定點位置

6.用三種方法清除浮動

7.請介紹一下margin塌陷問題

js篇

1.什麼是事件冒泡和捕獲?如何阻止事件冒泡?(分別用原生和jquery實現)

2.js創建對象,至少使用三種方法

3.簡述一下事件穿透以及解決辦法

4.用三種方式判斷變數類型是否是數組

5.如何實現對象的拷貝?

6.什麼是閉包?閉包的優缺點。

7.簡述一下ajax請求的過程。

8.簡述一下new一個人構造函數的人過程。

9.為什麼會有跨域?是怎麼解決跨域問題的?簡述一下原理。

10.js原始數據類型有哪些?

11.學一個函數,判斷一個變數是否是字元串

12.typeof有哪些結果?

13.剪頭函數和普通函數有什麼區別?

14.請用三種方法實現數組去重

15.href和src有什麼區別?

jquery篇

1.attr()和prop()有什麼區別?

2.on和bind有什麼區別?js動態添加的dom元素是通過on還是bind?

3.touch和click有什麼區別?

4.window.onload和jquery的ready有什麼區別?

vue篇

1.簡述一下vue的生命周期及其特點

2.vue雙向綁定的原理是什麼?

3.vue的特點有哪些?和jquery有什麼區別?

4.父子組件之間傳遞數據的方法

5.子組件如何共享數據?

6.一般有什麼工具進行數據交互?

7.webpack的原理是什麼?

8.簡述一下$nextTick的用法

瀏覽器篇

1.cookie、sessionStorage、localStorage的區別是什麼?

2.有用過瀏覽器緩存嗎?簡述一下基本的緩存機制

網路篇

1.http和https之間的區別

2.從伺服器的安全考慮,是使用get請求還是post請求?

3.URL請求的過程有哪些?

項目經驗篇

1.項目中遇到的最大挑戰以及解決辦法

2.常見的網頁優化有哪些?

作為一個面試一年以內工作經驗的前端程序員來說,以上的問題能夠倒答如流月薪6k應該不成問題啦。這些面試題也是我在很多面試中感覺經常被問到的題目。

希望大家年後找工作能夠順順利利, 千萬不要跟我一樣哦,只有帥氣就一無所有了。

大家好,我是王我,中國最帥的前端程序員。

前幾次都是各種培訓公司,各種忽悠就不提了,說說後面4次面試的經歷。

第一次是面一個小公司,不過他們好像沒有厲害的前端,來面我的是個後端,一來沒有問我關於js的知識,直接問我以前做過什麼,有沒有經驗,我本人不會吹牛,簡歷也沒怎麼包裝,就是自己把自學的知識和做的幾個小demo弄在上面,也用github掛在頁面上了,不過他根本不點開看,也不問,問我會不會vue,我當時對框架還不了解,他就說他們需要能直接上手開始寫的,所以我第一個就直接掛了。

第二次面試是一個國企,這個問了很多問題,都很基礎,js數據類型,數組操作,事件,大概就是高程的前面幾章看看就差不多都能答到,然後因為他們主要用jq,所以問了很多jq的操作,關於節點的,動畫的,我看鋒利的jq大概看了3遍,也練過多次,所以我答的很熟。然後問了些布局方面的,bootstrap我了解過,又看過css3,所以這方面也沒啥問題,最後在現場做了個題目,主要就是布局然後通過ajax呈現數據。後面聽介紹我面試的說面試官比較滿意,說我jq很熟,一面就過了。可惜後面電話面試不知怎麼回事可能表現的不夠自信,雖然沒問技術,但是我沒啥自信,把沒項目經驗什麼的也不知怎麼就一五一十交代了,估計因為這個掛掉了。

第三次沒問問題,直接就是一套題開做,我在那做了一個多小時。題目就是按照要求一步一步做一個頁面出來,我也搞忘了我當時卡在哪個地方了,坐在那得時候就是做不出來,沒有設計圖,要根據他的描述自己找個設計圖然後做,我第一次遇到這個有點懵,雖然當時沒做出來,不過回來我自己花了幾個小時把它做了。所以這個也是涼了。

第四個問的比較多,數據類型,數組操作,跨域,ajax,閉包,原型鏈,繼承,深拷貝,淺拷貝,模塊amd cmd,基本都是問的js。然後問了html5的新特性 css3 的新特性,遇到過什麼瀏覽器的兼容性問題,怎麼解決的,以後想往什麼方面發展。這個時候我已經會點vue了,照著做了個小demo,不過後來知道公司用的angularjs,面試官也沒看我做的,問也沒問。。以前聽網上說要帶上自己的項目去面試感覺沒起多大效果。

最後總結下如果面的比較初級的崗位,應該主要問js,原型鏈,繼承,閉包,深淺拷貝,ajax,跨域,然後js的基礎知識,對了還有apply和call也問了,html5的新特性了解下就行。主要就是看你js掌握的程度,如果稍微要求高一點的,暫時還沒面過,等以後面過在來回答

1. cookie session 的用途和區別,以及有效期

1、cookie數據存放在客戶的瀏覽器上,session數據放在伺服器上。

2、cookie不是很安全,別人可以分析存放在本地的COOKIE並進行COOKIE欺騙

考慮到安全應當使用session。

3、session會在一定時間內保存在伺服器上。當訪問增多,會比較佔用你伺服器的性能

考慮到減輕伺服器性能方面,應當使用COOKIE。

4、單個cookie保存的數據不能超過4K,很多瀏覽器都限制一個站點最多保存20個cookie。

2. vue的數據綁定原理,mvvm與mvc的區別

MVVM:

m:model數據模型層 v:view視圖層 vm:ViewModel
vue中採用的是mvvm模式,這是從mvc衍生過來的
MVVM讓視圖與viewmodel直接的關系特別的緊密,就是為了解決mvc反饋不及時的問題

圖片說明一下:


說到MVVM就要說一下雙向綁定和數據劫持的原理,

MVC:

m:model數據模型層 v:view視圖層 c:controller控制器

原理: c層需要控制model層的數據在view層進行顯示

MVC兩種方式,圖片說明:


總結:

mvvm與mvc最大的區別:
MVVM實現了view與model的自動同步,也就是model屬性改變的時候, 我們不需要再自己手動操作dom元素去改變view的顯示,而是改變屬性後該屬性對應的view層會自動改變。

不懂得可以復制鏈接查看:

https://www.pianshen.com/article/3716256399/

3. storage 的區別 sessionStorage localStorage

localStorage 的生命周期是永久性的。假若使用localStorage存儲數據,即使關閉瀏覽器,也不會讓數據消失,除非主動的去刪除數據,使用的方法如上所示。localStorage有length屬性


sessionStorage 的生命周期是在瀏覽器關閉前。也就是說,在整個瀏覽器未關閉前,其數據一直都是存在的。sessionStorage也有length屬性,其基本的判斷和使用方法和localStorage的使用是一致的


4.v-model雙向數據原理

有一個文本框 通過v-bind綁定了value屬性 值為myname 是我們在vue實例中定義的屬性
傳統我們獲取文本框值方法 可能通過getElementById找到文本框 然後獲取其value屬性
但是vue中直接通過v-bind綁定了value屬性 所以不需要像之前那樣獲取值
所以在後面的按鈕中獲取name值 直接獲取vue實例對象data裡面的myname屬性即可

【數據為尊 ----數據映射到瀏覽器 如果數據v-model後修改(肯定input)然後到數據在有數據映射到瀏覽器頁面 ----映射關系統稱】



5.keepAlive用過嗎?什麼作用?

緩存路由組件


使用的是vue的一個組件,參考vue的官方文檔

使用這個東西可以保證我們在切換組件的時候,原來顯示的組件不被銷毀

-----【保障組件的數據不會被切換路由而銷毀數據】

Home是對應的組件對象的名字,不是路由的名字

6.多維數組拍平

數組拍平也稱數組扁平化,就是將數組裡面的數組打開,最後合並為一個數組

一紅六種方法吧……

了解的請看: https://www.cnblogs.com/guan-shan/p/10165737.html

7.跨域的原因 解決方案

跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源,這里跨域是廣義的。

這樣就可以說同源策略----協議---埠---域名

原生的src和href可以解決跨域

代理可以解決

請求頭也可以攜帶瀏覽器提示的也可以解決

一般都是後端解決跨域問題

【別的需要了解看下方鏈接】

https://blog.csdn.net/qq_41604383/article/details/100770100

8.uniApp兼容問題

§ 如果你使用cli創建項目(即項目根目錄是package.json),不管用什麼ide,即便是用HBuilderX,切記cli項目的編譯器是在項目下的,HBuilderX不管怎麼升級都不會影響編譯器版本。你需要手動npm update來升級編譯器。以及如果你想要安裝less、scss等預編譯器,也需要自己npm安裝在項目下,而不是在HBuilderX的插件管理里安裝。

§ 如果你使用離線打包,請注意HBuilderX升級後,真機運行基座和雲打包對應引擎跟隨HBuilderX升級,而你的sdk需要手動升級。sdk的版本升級一般滯後HBuilderX正式版升級一兩天。

§ 如果你使用自定義基座,之前製作的自定義基座是不會跟隨HBuilderX升級的,升級HBuilderX後你應該重新製作新版自定義基座。

§ 如果你使用wgt升級,新版HBuilderX編譯的wgt,運行到之前的runtime上,一定要先測試好,看有沒有兼容性問題。如果有問題,就不要wgt升級,整包升級。

§ 考慮到向下兼容,uni-app編譯器在升級為新的自定義組件模式後,同時保留了對老編譯模式的向下兼容。
在HBuilderX alpha版中,App端一定會使用新編譯器,不理會manifest配置。
在HBuilderX 正式版中,新創建的項目會使用新編譯器,老項目不會強制使用,而是開發者自己在manifest里配置開啟。

§ 如果你使用其他ide開發uni-app,會經常因為拼錯單詞而運行失敗,因為經過webpack編譯一道,很多錯誤反應的不夠直觀,排錯時間很長,不如從開始就依賴有良好提示的HBuilderX,避免敲錯單詞。

§ 雲打包的引擎版本說明
HBuilderX Alpha,只有1套雲打包機,不管你的HBuilderX alpha版本多少,對應的打包機一定是最新的alpha版的客戶端引擎。
HBuilderX正式版,有2套打包機,一個是最新正式版,一個是次新正式版。
中間的緊急更新版本沒有獨立打包機。
舉個例子:
HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1這幾個正式版。
那麼當前可用的打包機有1.9.1和1.8.2這2台。(即每個大版本的最後一個版本)
除了這2個HBuilderX版本外,其他版本的雲打包都指向最新的1.9.1版對應的打包機。(即只保留2個大版本的雲打包機)

【詳情請看】

https://ask.dcloud.net.cn/article/35845

一、HTML

HTML書寫規范

H5新增標簽

HTML渲染過程

二、CSS

css盒子模型概念

css彈性布局概念

三、JavaScript

事件模型

DOM2級事件模型

閉包

原型鏈

四、移動Web開發

常見的布局方案

移動端前端常見的觸摸相關事件touch、tap、swipe等整理

移動端前端手勢事件

移動端頁面渲染優化

GPU渲染

GPU核心渲染過程

五、調試

常用的調試工具

Chrome控制台調試js使用

移動端測試

六、HTTP網路知識

常見的HTTP狀態碼

不同請求類型的區別

WEB緩存方案

——————————

牛客網(www.nowcoder.com)

- 專業IT筆試面試備考平台

- 最全C++JAVA前端等互聯網技術求職題庫

- 全面提升IT編程能力

- 程序員交友聖地

分享了一些Web前端的面試題,限時一小時,你看看自己能夠答出多少道!

放心,這些面試題都是一些非常基礎的知識,只要你在平時認真聽課、學習了,那麼這些面試題肯定不會難道你。

建議:雖然沒有人監督你,但還是希望你不要去尋找答案,脫離網路,拿起紙筆,你試一下自己究竟能夠答出個什麼水平!有沒有真本領?答案盡在這些面試題里!那麼,你准備好了嗎?OK!計時開始!

一、HTML常見題目

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

02、HTML5為什麼只需要寫?

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

04、頁面導入樣式時,使用link和@import有什麼區別?

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

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

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

08、如何區分HTML和HTML5?

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

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

二、CSS類的題目

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

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

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

04、CSS3新增偽類有那些?

05、如何居中p?如何居中一個浮動元素?如何讓絕對定位的p居中?

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

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

08、CSS3有哪些新特性?

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

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

三、Java類的題目

01、介紹Java的基本數據類型。

02、說說寫Java的基本規范?

03、Java原型,原型鏈?有什麼特點?

04、Java有幾種類型的值?(堆:原始數據類型和棧:引用數據類型),你能畫一下他們的內存圖嗎?

05、Java如何實現繼承?

06、Java創建對象的幾種方式?

07、Java作用鏈域?

08、談談This對象的理解。

09、eval是做什麼的?

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

OK,一小時到了,這個時間可不算短了,那麼這些面試題你答出了幾道呢?你寫的答案正確了嗎?現在你可以去翻看答案了。

如果你答出了絕大多數的或者是全部的題,並且答案也正確了,那麼恭喜你……

你這時心裡是不是有點小竊喜,認為自己有能力拿高薪了?雖然我也很想這么告訴你,但事實上這只能表明你的基礎扎實,畢竟這只是一些非常基礎的面試題。騷年~繼續努力吧!

如果你只答出了小部分或者答出了大部分題但答案不正確,那麼我只想說:「騷年,你的水平還差的遠呢。」連這么基礎的題你都打不出來,還想拿高薪?回去再練一段時間吧!

扎實的基礎是你拿高薪的重要武器,如果你連基礎都不扎實,那麼想要攻克「高薪」這個厚實的堡壘,那隻是痴人說夢罷了。

1.前端框架類問題,問你會不會用vue react啊

2.語言類,問你一些JavaScript語言的問題

3.項目經驗,讓你講講做過的項目,遇到的問題和解決之道

7. 前端面試要點

想要通過前端面試順利進入一線大廠成就高薪前端夢。那麼首先,我們得知道前端面試中,社招和校招究竟有啥區別?

對於前端開發來說,如果說社招更看重對前端技術體系的深入理解,以及解決問題的能力話,那校招更看重的其實是基本功和學習能力(或者說是潛力)。

但其實,無論是社招還是校招,面試的時候都會問到一些曾經操作過的項目,尤其是大廠,或者熱門高薪部門,面試官除必問的技術經驗外,也會對技術深度進行一個基礎的考核,那在這種情況下如何hold住大廠面試呢?

前端面試三要素:簡歷、個人介紹、技術能力。下面,就來分別聊一聊。

1、簡歷篩選關:

HR一般會去看簡歷中所提的技術棧是否匹配,怎麼看呢?我們可以抓住簡歷中的技術名詞,一般來說如果一點技術名詞都沒有提到,那麼大概有以下幾種可能:很水、很牛但概率很小、不會寫簡歷。所以,一部分人可能會因為簡歷的問題沒有了面試機會,這點是需要非常注意的。

2、個人介紹關:

通過了簡歷篩選階段,就真正到了面試環節。這時候一定要准備好一段最多3分鍾的個人介紹。請注意,最多3分鍾!言簡意賅的說明自己的工作時間,擅長技術棧和自己的工作預期。

3、項目經驗表達:

對前端開發學習者而言,JS並不陌生,但大廠的JS面試題卻總是顯得很「陌生」,怎麼樣能夠真正做到深入理解與高級應用?這不僅是面試過程中對前端求職者的要求,也是大多數前端開發者的痛點。

大廠面試中,面試官除了關注你的項目經驗外,還往往喜歡和面試者深入探討前端某些技術領域成體系的前端知識。比如:模塊化、非同步解決方案、網路、框架及原理、線程等,但在與面試官的正面battle中,求職者總會敗下陣來。

所以,建議大家在Web前端面試前一定要注重這三個方面的內容。注重了這些想找找到一份適合的Web前端開發工作並不是難事。

8. 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同時綁定兩個點擊事件,一個用捕獲,一個用冒泡,你來說下會執行幾次事件,然後會先執行冒泡還是捕獲

9. 前端面試一般問什麼

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

人事的面試

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

web前端技術的面試

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

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

我給你截圖看一下例子吧

10. 前端面試題目匯總(一年經驗)

部分題目 有些面試完忘記了,面試真的不能安排太緊湊啊,腦子完全不夠用,血的教訓😂

寒冬期前端准備總結---JS篇
寒冬期前端准備總結---瀏覽器篇
寒冬期前端准備總結---伺服器和網路篇
寒冬期前端准備總結---CSS篇
寒冬期前端准備總結---框架篇
寒冬期前端准備總結---演算法篇

(當時一個下午現場面試兩家,累趴了,這家面的很差)