看到很多朋友都在求前端的筆試題,我就給大家收集了一些面試題。都是2017年最新的題目,希望有助於大家提升自己的水品,也祝福各位能如願以償的進入自己想進的公司。
本文較為詳細的收集並且分析了最新的2017前端筆試題。分享給大家供大家參考。具體如下:
一、一個頁面上兩個div左右鋪滿整個瀏覽器,要確保左邊的div一直為100px,右邊的div跟隨瀏覽器大小變化(例如瀏覽器為500,右邊div為400,瀏覽器為900,右邊div為800),請寫出大概的css程式碼。
1.使用flex
//html <div class='box'><div class='left'></div> <div class='right'></div></div> //css .box { width: 400px; height: 100px; display: flex; flex-direction: row; align-items: center; border: 1px solid #c3c3c3; } .left { flex-basis:100px; -webkit-flex-basis: 100px; /* Safari 6.1+ */ background-color: red; height: 100%; } .right { background-color: blue; flex-grow: 1; }
2.浮動佈局
<div id="left">Left sidebar</div> <div id="content">Main Content</div> <style type="text/css"> * { margin: 0; padding: 0; } #left { float: left; width: 220px; background-color: green; } #content { background-color: orange; margin-left: 220px; /*==等于左边栏宽度==*/ } </style>
二、請寫出一些前端效能最佳化的方式,越多越好
1.減少dom操作
2.部署前,圖片壓縮,程式碼壓縮
3.最佳化js程式碼結構,減少冗餘程式碼
4.減少http請求,合理設定HTTP快取
5.使用內容分發cdn加速
6.靜態資源快取
7.圖片延遲載入
三、一個頁面從輸入URL 到頁面載入顯示完成,這個過程中都發生了什麼事? (流程說的越詳細越好)
輸入位址
#1.瀏覽器尋找網域的IP 位址
2.這一步包括DNS 具體的查找過程,包括:瀏覽器快取->系統快取->路由器快取…
3.瀏覽器向web 伺服器發送HTTP 請求
4.伺服器的永久重定向回應(從http://example.com 到http://www.example.com)
#5.瀏覽器追蹤重定向位址
##6.伺服器處理請求7.伺服器回傳一個HTTP 回應8.瀏覽器顯示HTML9.瀏覽器發送請求取得嵌入在HTML 中的資源(如圖片、音訊、影片、CSS、JS等等)10.瀏覽器發送非同步請求// 不好的写法 var left = 1; var top = 1; el.style.left = left + "px"; el.style.top = top + "px"; // 比较好的写法 el.className += " className1"; // 比较好的写法 el.style.cssText += "; left: " + left + "px; top: " + top + "px;";
##整體來說設計模式分為三大類:
創建型模式,共五種:工廠方法模式、
抽象工廠模式、單例模式、建造者模式、原型模式。 結構型模式,共七種:
適配器模式、裝飾器模式、代理模式、外觀模式、橋接模式、組合模式、享元模式。 行為型模式,共十一種:策略模式、範本方法模式、
觀察者模式、迭代子模式、責任鏈模式、指令模式、備忘錄模式、狀態模式、訪客模式、中介者模
十一、圖片預覽
<input type="file" name="file" onchange="showPreview(this)" /> <img id="portrait" src="" width="70" height="75"> function showPreview(source) { var file = source.files[0]; if(window.FileReader) { var fr = new FileReader(); fr.onloadend = function(e) { document.getElementById("portrait").src = e.target.result; }; fr.readAsDataURL(file); } }
十二、扁平化多維數組
#1、舊方法
var result = [] function unfold(arr){ for(var i=0;i< arr.length;i++){ if(typeof arr[i]=="object" && arr[i].length>1) { unfold(arr[i]); } else { result.push(arr[i]); } } } var arr = [1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]]; unfold(arr)
2、使用tostring
var c=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]]; var b = c.toString().split(',')
3、使用es6的reduce函数
var arr=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]]; const flatten = arr => arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []); var result = flatten(arr)
十三、iframe有那些缺点?
iframe会阻塞主页面的Onload事件;
搜索引擎的检索程序无法解读这种页面,不利于SEO;
iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript动态给iframe添加src属性值,这样可以绕开以上两个问题。
以上就是我收集的前端笔试题以及答案,所述对大家有所帮助。
推荐阅读:
以上是最新前端筆試題小結的詳細內容。更多資訊請關注PHP中文網其他相關文章!