一、一個頁面上兩個div左右鋪滿整個瀏覽器，要保證左邊的div一直為100px，右邊的div跟隨瀏覽器大小變化（比如瀏覽器為500，右邊div為400，瀏覽器為900，右邊div為800），請寫出大概的css程式碼。
1.使用flex
|
1 2 3 4 5 |
//html <div class="box"> <div class="left"></div> <div class="right"></div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
//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; } |
線上demo
2.浮動佈局
|
1 2 |
<div id="left">Left sidebar</div> <div id="content">Main Content</div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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.瀏覽器顯示 HTML
9.瀏覽器傳送請求獲取嵌入在 HTML 中的資源（如圖片、音訊、視訊、CSS、JS等等）
10.瀏覽器傳送非同步請求
四、請大概描述下頁面訪問cookie的限制條件
1.跨域問題2.設定了HttpOnly
五、描述瀏覽器重繪和迴流，哪些方法能夠改善由於dom操作產生的迴流
1.直接改變className，如果動態改變樣式，則使用cssText
|
1 2 3 4 5 6 7 8 9 10 11 |
// 不好的寫法 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;"; |
2.讓要操作的元素進行”離線處理”，處理完後一起更新
a) 使用DocumentFragment進行快取操作,引發一次迴流和重繪；
b) 使用display:none技術，只引發兩次迴流和重繪；
c) 使用cloneNode(true or false) 和 replaceChild 技術，引發一次迴流和重繪
六、vue生命週期鉤子
1.beforcreate
2.created
3.beformount
4.mounted
5.beforeUpdate
6.updated
7.actived
8.deatived
9.beforeDestroy
10.destroyed
七、js跨域請求的方式，能寫幾種是幾種
1、通過jsonp跨域
2、通過修改document.domain來跨子域
3、使用window.name來進行跨域
4、使用HTML5中新引進的window.postMessage方法來跨域傳送資料（ie 67 不支援）
5、CORS 需要伺服器設定header ：Access-Control-Allow-Origin。
6、nginx反向代理 這個方法一般很少有人提及，但是他可以不用目標伺服器配合，不過需要你搭建一箇中轉nginx伺服器，用於轉發請求
八、對前端工程化的理解
開發規範
模組化開發
元件化開發
元件倉庫
效能優化
專案部署
開發流程
開發工具
九, js深度複製的方式
|
1 2 3 |
1.使用jq的$.extend(true, target, obj) 2.newobj = Object.create(sourceObj)，// 但是這個是有個問題就是 newobj的更改不會影響到 sourceobj但是 sourceobj的更改會影響到newObj 3.newobj = JSON.parse(JSON.stringify(sourceObj)) |
十、js設計模式
總體來說設計模式分為三大類：
建立型模式，共五種：工廠方法模式、抽象工廠模式、單例模式、建造者模式、原型模式。
結構型模式，共七種：介面卡模式、裝飾器模式、代理模式、外觀模式、橋接模式、組合模式、享元模式。
行為型模式，共十一種：策略模式、模板方法模式、觀察者模式、迭代子模式、責任鏈模式、命令模式、備忘錄模式、狀態模式、訪問者模式、中介者模
詳細說明 請移步alloyteam的文章
十一、圖片預覽
|
1 2 |
<input type="file" name="file" onchange="showPreview(this)" /> <img id="portrait" src="" width="70" height="75"> |
|
1 2 3 4 5 6 7 8 9 10 |
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、老方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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
|
1 2 |
var c=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]]; var b = c.toString().split(',') |
3、使用es6的reduce函式
|
1 2 3 |
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屬性值，這樣可以繞開以上兩個問題。