『壹』 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="
}
『貳』 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前端工程師。
『叄』 2020年Web前端面試題及答案匯總
今天小編要跟大家分享的文章是關於2020年Web前端面試題及答案匯總。正准備參加Web前端面試的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。 『肆』 前端面試 問什麼問題 web前端面試會問人事方面的內容和web前端技術的內容； web前端人事面試方面，需要注意如何自我介紹、性格有哪些優劣勢、職業規劃方向是什麼、你的特長是什麼、對於加班之類你是怎麼看待等人事面試內容； 技術面試，需要注意HTML+CSS+JavaScript以及JS主流框架的使用，比如Vue、React等，前端相關技術，比如tcp握手協議、網路安全、後端技術等； 對於web前端面試准備，建議你去看「決勝前端」（min app），它裡麵包含了很多web前端技術面試、人事面試等面試真題，而且針對面試題做了詳細的分析與解答。 我給你截圖看一下例子吧 『伍』 前端hr面試常問的問題 面試其實就是一個不斷選擇與被選擇的過程(不知道說的對不對)。不同公司的面試方式都有所不同，大多數人都有過多次面試的經歷，前端面試也不外乎那麼一些啦(好像有些廢話的感覺)。 面試之前的小故事 HR會打電話過來我是××公司的，在××上看到你投到我們公司的簡歷，問你何時候有空約一個唄，然後說就星期*吧，既然都打電話請我面試了，好吧，那就約一個! 然後有些人會精心准備，不停刷面試題，整夜整夜的看著HTML/JS/CSS知識點，還有那些最新的、時髦的技術，看看到時候能不能唬住面試官;而有些人對自己胸有成竹，哥那麼多年的前端經驗了，啥項目沒有經歷過，不就一個面試，怕啥呢。 很快或者很慢的來到那天。你打扮的清清爽爽漂漂亮亮的，打扮的好會有加分不，沒錯，第一印象也是挺重要的。途中有些人可能會還一直想著面試官會問啥題目呢，那啥**屬性是什麼來著呢，再次拿出手機默默的看起資料;有些人可能就會想著公司不知道妹子多不多漂亮不呢，環境和福利不知道咋樣，最好別碰到傻逼一樣的面試官哎，不然這以後咋相處好呢。 來到公司，大小公司大家都見多了嘛，也是得看發展是吧，我們也不是膚淺的人，見到前台妹妹，喲，還不錯哦。領你進會議室里，讓你稍等一下，她去通知面試官，過了一會兒，不是面試官進來，那就是前台妹妹給您送來一杯水。面試官踱步向前，咦~，我是繼續坐著呢，還是站著呢，還是站起來顯禮貌一些嗯。 給面試的一般會是Team Leader或者非常資深的工程師。首先會讓你自我介紹下，然後巴拉巴拉介紹自己，途中或者聊到面試官喜歡的`部分那就會中斷問幾個問題吧，介紹完自己，就進入正式的戰鬥了吧，一般會有2-3輪的回合。遇知戰斗詳情，請聽下回分解。 哈哈， 開玩笑。以上瞎編胡造，如有雷同，純屬巧合。 這里就只談談前端技術的戰斗回合吧，寫的不好，請多見諒。 普通型 面試中問題會比較的零碎，html/js/css肯定都會有涉及。知識點不會有太大的規律，可能幾個公司面試下來你遇到的問題一個都不帶重復的。哎，前端的知識點就是乍一看深似海，仔細一看深似黑洞啊。問題好的話，一方面考察了面試人對前端接觸的廣度，深度的話也可以從中接觸到一些。因為面試的時間有限，其實也非常考驗面試官對一個人的洞察能力。 一般如果不是應屆生的話，也就是會跟你交流你之前的項目，你擔當的角色，你遇到的難題，怎麼解決問題，用的框架，與其他工程師的交流溝通協作等等。 這些其實你心裡肯定是有答案的(可能也有懵逼的)，就看你的表達，能不能對上面試官的胃口。 進階型 除了基本的問題，面試中會有一些明顯設計過的題目。針對某幾個知識點，或讓你手寫代碼，或讓你提供演算法或思路。如果之前沒有遇到過這類問題的話其實一下子真的挺難回答，或者直接懵逼了，或者回答不出面試官滿意的答案。這其實對工程師的要求也是比較的高，不能只是單純的切切頁面，用用插件，需要對某一類問題或者模式或者演算法有深入的了解，對問題的解決思路有很好的把握。 演算法可能不是前端工程師的長項，但作為優秀的工程師，對演算法的了解應該會只深不淺。 這種面試的題目既提現了公司對面試者的要求，也相對而言的會有所體現公司的水平。 出題型 題目比較的綜合，會通過郵件發給你，或者有專門的頁面提供，在面試之前讓你2-3天的時間做完。題目可能是很有名的某一類交互，或游戲，或頁面，或公司自己出的一類小東西。 因為非當場面試，所有有比較充足的時間來思考，來寫一些代碼。一般都會完成，所以其實比較的關注點就是對代碼的質量，通過代碼來考察面試者的思路以及代碼**慣等等。 其未知性也比較多，可能因為有些東西可能沒法通過代碼來傳遞，溝通，其他的思路，或者題目的缺陷等等。所以這只是面試途中的一個小部分，大多數人其實都會能做的很好。 直接上機型 還有的就會直接給你某一個交互，或者一張靜態頁面，或者一個布局等等，直接給你台電腦讓你當場寫出來。寫完之後再有所交流，說說自己的想法或者接著談其他的。 當你寫代碼時候，其實暴露的東西也挺多的。你寫的**慣，思路清晰不清晰，對代碼的熟悉程度，可能你平時都是ctrl C + V的，這時候你咋辦呢。 這個可能遇到的比較少，但也會是有的。 結束語 許多面試可能都會結合以上的幾種類型，多方面的考察面試者，其實，大家都懂的。 『陸』 前端面試題（十五） 已知高度和寬度的元素： 設置父元素為相對定位relative，給子元素設置絕對定位absoluted，top: 0; right: 0; bottom: 0; left: 0; margin: auto; 設置父元素為相對定位，給子元素設置絕對定位，left: 50%; top: 50%; margin-left: --元素寬度的一半px; margin-top: --元素高度的一半px; 未知高度和寬度的元素： 設置父元素為相對定位，給子元素設置絕對定位，left: 50%; top: 50%; transform: translate(-50%，-50%); 設置父元素為相對定位，給子元素設置絕對定位，left: 50%; top: 50%; transform:translate(-50%，-50%); 組件中的 data 寫成一個函數，數據以函數返回值形式定義，這樣每復用一次組件，就會返回一份新的 data ，類似於給每個組件實例創建一個私有的數據空間，讓各個組件實例維護各自的數據。而單純的寫成對象形式，就使得所有組件實例共用了一份 data ，就會造成一個變了全都會變的結果。 for of： 支持 return ，並且是值 of 數組（不能遍歷對象） for in： forEach： assets文件夾里是靜態資源；components是放組件；router是定義路由相關的配置；view視圖；app.vue是一個應用主組件；main.js是入口文件 在組件切換過程中將狀態保留在內存中，防止重復渲染DOM，減少載入時間及性能消耗，提高用戶體驗性。 生命周期函數： activated（ 組件激活時調用 ）、deactivated（ 組件停用時調用 ） 常見的使用場景可以分為三類: 當頻繁執行條件時，不適合使用 v-if ,用 v-show ; v-if 和 v-for ,不推薦兩者一起使用在同一個元素上，雖然也能運行，但是編輯器會報警告；兩者一起使用時，v-for比v-if具有更高的優先順序， 『柒』 web前端經典面試題
為大家帶來一些web前端的面試題，希望可以幫助到大家啊。 『捌』 你遇到的前端面試題都有什麼 大家好，我是王我。 隨著春節的結束，各個行業也普遍開始了上班的節奏， 不過本人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數據放在伺服器上。 2、cookie不是很安全，別人可以分析存放在本地的COOKIE並進行COOKIE欺騙 考慮到安全應當使用session。 3、session會在一定時間內保存在伺服器上。當訪問增多，會比較佔用你伺服器的性能 考慮到減輕伺服器性能方面，應當使用COOKIE。 4、單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。 MVVM： m:model數據模型層 v:view視圖層 vm:ViewModel 圖片說明一下： 說到MVVM就要說一下雙向綁定和數據劫持的原理， MVC： m:model數據模型層 v:view視圖層 c:controller控制器 原理： c層需要控制model層的數據在view層進行顯示 MVC兩種方式，圖片說明： 總結： mvvm與mvc最大的區別： 不懂得可以復制鏈接查看： https://www.pianshen.com/article/3716256399/ localStorage 的生命周期是永久性的。假若使用localStorage存儲數據，即使關閉瀏覽器，也不會讓數據消失，除非主動的去刪除數據，使用的方法如上所示。localStorage有length屬性 sessionStorage 的生命周期是在瀏覽器關閉前。也就是說，在整個瀏覽器未關閉前，其數據一直都是存在的。sessionStorage也有length屬性，其基本的判斷和使用方法和localStorage的使用是一致的 有一個文本框 通過v-bind綁定了value屬性 值為myname 是我們在vue實例中定義的屬性 【數據為尊 ----數據映射到瀏覽器 如果數據v-model後修改（肯定input）然後到數據在有數據映射到瀏覽器頁面 ----映射關系統稱】 緩存路由組件 使用的是vue的一個組件，參考vue的官方文檔 使用這個東西可以保證我們在切換組件的時候，原來顯示的組件不被銷毀 -----【保障組件的數據不會被切換路由而銷毀數據】 Home是對應的組件對象的名字，不是路由的名字 數組拍平也稱數組扁平化，就是將數組裡面的數組打開，最後合並為一個數組 一紅六種方法吧…… 了解的請看： https://www.cnblogs.com/guan-shan/p/10165737.html 跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源，這里跨域是廣義的。 這樣就可以說同源策略----協議---埠---域名 原生的src和href可以解決跨域 代理可以解決 請求頭也可以攜帶瀏覽器提示的也可以解決 一般都是後端解決跨域問題 【別的需要了解看下方鏈接】 https://blog.csdn.net/qq_41604383/article/details/100770100 § 如果你使用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編譯器在升級為新的自定義組件模式後，同時保留了對老編譯模式的向下兼容。 § 如果你使用其他ide開發uni-app，會經常因為拼錯單詞而運行失敗，因為經過webpack編譯一道，很多錯誤反應的不夠直觀，排錯時間很長，不如從開始就依賴有良好提示的HBuilderX，避免敲錯單詞。 § 雲打包的引擎版本說明 【詳情請看】 https://ask.dcloud.net.cn/article/35845 HTML書寫規范 H5新增標簽 HTML渲染過程 css盒子模型概念 css彈性布局概念 事件模型 DOM2級事件模型 閉包 原型鏈 常見的布局方案 移動端前端常見的觸摸相關事件touch、tap、swipe等整理 移動端前端手勢事件 移動端頁面渲染優化 GPU渲染 GPU核心渲染過程 常用的調試工具 Chrome控制台調試js使用 移動端測試 常見的HTTP狀態碼 不同請求類型的區別 WEB緩存方案 —————————— 牛客網（www.nowcoder.com） - 專業IT筆試面試備考平台 - 最全C++JAVA前端等互聯網技術求職題庫 - 全面提升IT編程能力 - 程序員交友聖地 分享了一些Web前端的面試題，限時一小時，你看看自己能夠答出多少道！ 放心，這些面試題都是一些非常基礎的知識，只要你在平時認真聽課、學習了，那麼這些面試題肯定不會難道你。 建議：雖然沒有人監督你，但還是希望你不要去尋找答案，脫離網路，拿起紙筆，你試一下自己究竟能夠答出個什麼水平！有沒有真本領？答案盡在這些面試題里！那麼，你准備好了嗎？OK！計時開始！ 01、Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義？ 02、HTML5為什麼只需要寫？ 03、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？ 04、頁面導入樣式時，使用link和@import有什麼區別？ 05、介紹一下你對瀏覽器內核的理解？ 06、常見的瀏覽器內核有哪些？ 07、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？ 08、如何區分HTML和HTML5？ 09、簡述一下你對HTML語義化的理解？ 10、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？ 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創建一個三角形的原理是什麼？ 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.項目經驗，讓你講講做過的項目，遇到的問題和解決之道 『玖』 Web前端崗位面試題有哪些 前端面試題匯總，基本上會有四大類問題，具體如下： 2、CSS選擇符有哪些？哪些屬性可以繼承？ 11、一個滿屏 品 字布局 如何設計? 三、常見兼容性問題？ Definition）規范區別？ 『拾』 一份超全的Web前端工程師面試題!收藏~
今天小編為大家准備了一份超全的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前端技術的面試
1. 可以避免所有 for-in 循環的陷阱
2. 不同於 forEach()，可以使用 break, continue 和 return
3. for-of 循環不僅僅支持數組的遍歷。同樣適用於很多類似數組的對象
4. 它也支持字元串的遍歷
5. for-of 並不適用於處理原有的原生對象
反之執行條件的次數很少，使用 v-if 即可。
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).真機上的微信裡面調試。
vue中採用的是mvvm模式，這是從mvc衍生過來的
MVVM讓視圖與viewmodel直接的關系特別的緊密，就是為了解決mvc反饋不及時的問題
MVVM實現了view與model的自動同步，也就是model屬性改變的時候， 我們不需要再自己手動操作dom元素去改變view的顯示，而是改變屬性後該屬性對應的view層會自動改變。
傳統我們獲取文本框值方法 可能通過getElementById找到文本框 然後獲取其value屬性
但是vue中直接通過v-bind綁定了value屬性 所以不需要像之前那樣獲取值
所以在後面的按鈕中獲取name值 直接獲取vue實例對象data裡面的myname屬性即可
在HBuilderX alpha版中，App端一定會使用新編譯器，不理會manifest配置。
在HBuilderX 正式版中，新創建的項目會使用新編譯器，老項目不會強制使用，而是開發者自己在manifest里配置開啟。
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個大版本的雲打包機）
一、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的盒子模型有什麼不同的？
3、CSS優先順序演算法如何計算？
4、CSS3新增偽類有那些？
5、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
6、display有哪些值？說明他們的作用。
7、position的值relative和absolute定位原點是？
8、CSS3有哪些新特性？
9、請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？
10、用純CSS創建一個三角形的原理是什麼？
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
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同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然後會先執行冒泡還是捕獲
一、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前端工程師!
§