二十家公司前端面試題（一）
題目1:CSS實現垂直水平居中
1.彈性盒子方法
給父容器設置dispaly: flex; justify-content: center; align-items: center
2.絕對定位居中
1 .box2 {
2 position: relative;
3 }
4 .con2 {
5 margin: auto;
6 position: absolute;
7 top: 0;
8 right: 0;
9 bottom: 0;
10 left: 0;
11 }3負邊距居中
設外盒子100px寬高，內盒子50px寬高
1 .box3 {
2 position: relative;
3 }
4 .con3 {
5 position: absolute;
6 top: 50%;
7 left: 50%;
8 margin-left: -25px;
9 margin-top: -25px;
10 }4變形
原理同3，把margin換成transform: translate(-50%, -50%)
題目2.寫出原生js 或者 JQ框架循環出下面的li內容
1 <ul> 2 <li>text1</li> 3 <li>text2</li> 4 <li>text3</li> 5 <li>text4</li> 6 <li>text5</li> 7 <li>text6</li> 8 </ul>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>題目2.寫出原生js 或者 JQ框架循環出下面的li內容</title>
8 </head>
9 <body>
10 <h3>題目2. 寫出原生js 或者 JQ框架循環出下面的li內容</h3>
11 <ul></ul>
12 <script type="text/javascript">
13 var oUl = document.querySelector('ul');
14 for (var i = 0; i < 5; i++) {
15 var oLi = document.createElement('li');
16 oLi.innerHTML = 'test' + (i+1);
17 oUl.appendChild(oLi);
18 }
19 </script>
20 </body>
21 </html>題目3.get和post請求區別
1.GET請求將參數跟在url後進行傳遞， 而POST請求則是作為HTTP消息的實體內容發送給web服務器。當然在ajax請求中，這種區別對用戶不可見；
2.GET方式對傳輸的數據大小有限制，通常不能大於2KB， 而POST方式傳遞的數據量要比GET方式大得多，理論上不受限制
3.GET方式請求的數據會被瀏覽器緩存起來，因此其他人就可以從瀏覽器的歷史記錄中讀取到這些數據，例如賬號和密碼等。在某種情況下get會帶來嚴重的安全問題，而post方式相對來說可以避免這些問題。
4.GET方式和POST方式傳遞的數據在服務器端的獲取也不同
題目4.js中的函數 split join 的區別
1.split方法能把字符串反序列化為數組
2.split兩個參數 以第一個參數進行分割，第2個參數用來限制數組的大小
3.join方法能把數組序列化為字符串, join方法後面可以跟match方法進行模式匹配
題目5.dom結點的深度優先遍歷和廣度優先搜索
1、深度優先遍歷的遞歸寫法
1 function deepTraversal(node) {
2 var nodes = ;
3 if (node != null) {
4 nodes.push(node);
5 var children = node.children;
6 for (var i = 0; i < children.length; i++)
7 deepTraversal(children[i]);
8 }
9 return nodes;
10 }2、深度優先遍歷的非遞歸寫法
1 function deepTraversal(node) {
2 var nodes = ;
3 if (node != null) {
4 var stack = ;
5 stack.push(node);
6 while (stack.length != 0) {
7 var item = stack.pop;
8 nodes.push(item);
9 var children = item.children;
10 for (var i = children.length - 1; i >= 0; i--)
11 stack.push(children[i]);
12 }
13 }
14 return nodes;
15 }3、廣度優先遍歷的遞歸寫法：
1 function wideTraversal(node) {
2 var nodes = ;
3 var i = 0;
4 if (!(node == null)) {
5 nodes.push(node);
6 wideTraversal(node.nextElementSibling);
7 node = nodes[i++];
8 wideTraversal(node.firstElementChild);
9 }
10 return nodes;
11 }4、廣度優先遍歷的非遞歸寫法
1 function wideTraversal(selectNode) {
2 var nodes = ;
3 if (selectNode != null) {
4 var queue = ;
5 queue.unshift(selectNode);
6 while (queue.length != 0) {
7 var item = queue.shift;
8 nodes.push(item);
9 var children = item.children;
10 for (var i = 0; i < children.length; i++)
11 queue.push(children[i]);
12 }
13 }
14 return nodes;
15 }
相關推薦
'2019前端面試經典（html5+css3+JavaScript）'
"前端目錄HTML相關CSS相關JAVASCRIPT相關DOM相關HTTP相關VUE相關算法相關網絡安全相關webpack相關其他Html相關1 html語義化意義：根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化）便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的...
'通殺 Event Loop 面試題'
"03-JS單線程, event loop徹底搞懂代碼執行順序瀏覽器工作原理單線程的含義瀏覽器是 multi-process，一個瀏覽器只有一個 Browser Process，負責管理 Tabs、協調其他 process 和 Renderer process 存至 mem...
'程序員警惕，這樣的公司千萬不要去！能救一個是一個'
"很多人都在寫如何選擇一個好公司，如果辨別一個好公司，我，作為一名在程序猿界混了5年的職場老鳥，來告訴大傢什麼樣的公司程序員不要去。分享一下自己這麼多年浪跡職場的一些經歷，讓後來者避免採坑，早點踏上人生巔峰的幸福道路！怎麼避免進入一個火坑？當你滿心歡喜的拿到一份Offer的...
'為什麼建議大家一定要會 C 語言'
"喜歡的話可以收藏轉發加關注在如今 Python 和 Java 大火的市場前景下，我還是建議，如果你還在學校讀書，或者你有大把的空閒時間，不著急去找工作，那就靜下心來，好好學習一下 C 語言，會讓你受益終生，也會讓你的編程之路走的更遠C 的認識1、C 語言作為編程最古老的語...
'面試官：一個 TCP 連接可以發多少個 HTTP 請求？你真的造麼？'
"曾經有這麼一道面試題：從 URL 在瀏覽器被被輸入到頁面展現的過程中發生了什麼？相信大多數準備過的同學都能回答出來，但是如果繼續問：收到的 HTML 如果包含幾十個圖片標籤，這些圖片是以什麼方式、什麼順序、建立了多少連接、使用什麼協議被下載下來的呢？ #pgc-ca...
'前端程序員飽和了嗎？我們公司給初級前端開到了12K'
"故事起因：最近我有個剛畢業的學生問我說：我感覺現在前端行業已經飽和了，也不是說飽和了，是初級的前端根本就沒有公司要，哪怕你不要工資也沒公司要你，前端剛學出來，沒有任何的項目經驗和工作經驗，根本就不會有公司要你啊，這是最大的一個問題，而且現在也沒有任何公司找初級前端，實習前...
'揭開情報機構神祕面紗——美國國家安全局'
"本文轉自《週末畫報》總第1066期美國國家安全局監視著全世界，從恐怖分子到網絡黑客，從大工業家到基層員工，從國家首腦到尋常市民……它的運行機制是怎樣的？它承擔著哪些任務？它的目標又是什麼？它曾經爆發過哪些醜聞？斯諾登事件對它又會產生哪些影響？本書作者回顧了美國國家安全局的...
'瘋了吧！面試官 5 連問一個 TCP 連接可以發多少個 HTTP 請求？'
"第一個問題第二個問題第三個問題第四個問題第五個問題曾經有這麼一道面試題：從 URL 在瀏覽器被被輸入到頁面展現的過程中發生了什麼？相信大多數準備過的同學都能回答出來，但是如果繼續問：收到的 HTML 如果包含幾十個圖片標籤，這些圖片是以什麼方式、什麼順序、建立了多少連接、...
'會搞砸你的面試：你知道一個TCP連接上能發起多少個HTTP請求嗎？'
"本文由原作者鬆若章原創發佈，作者主頁：zhihu.com/people/hrsonion/posts，感謝原作者的無私分享。1、引言一道經典的面試題是：從 URL 在瀏覽器被被輸入到頁面展現的過程中發生了什麼？大多數回答都是說請求響應之後 DOM 怎麼被構建，被繪製出來。...
'面試官問：一個 TCP 連接可以發多少個 HTTP 請求？你學到了嗎？'
"曾經有這麼一道經典面試題：從 URL 在瀏覽器被被輸入到頁面展現的過程中發生了什麼？相信大多數準備過的同學都能回答出來，但是如果繼續問：收到的 HTML 如果包含幾十個圖片標籤，這些圖片是以什麼方式、什麼順序、建立了多少連接、使用什麼協議被下載下來的呢？來自：鬆若章 鏈接...
'前端JavaScript：20道大公司面試題，全都是經典，你都掌握了嗎？'
"劉小夕:https://juejin.im/post/5d124a12f265da1b9163a28d#comment1. new的實現原理是什麼？new 的實現原理:創建一個空對象，構造函數中的this指向這個空對象這個新對象被執行 [[原型]] 連接執行構造函數方法，...
'一個合格的中級前端工程師必須要掌握的 20 個 JavaScript 技巧'
"1.判斷對象的數據類型使用 Object.prototype.toString 配合閉包，通過傳入不同的判斷類型來返回不同的判斷函數，一行代碼，簡潔優雅靈活（注意傳入 type 參數時首字母大寫）不推薦將這個函數用來檢測可能會產生包裝類型的基本數據類型上,因為 call ...
推薦中...