前端面試題小集

bawn 發布于2019-08-20 14:15 / 2934人閱讀

摘要：一一個頁面上兩個左右鋪滿整個瀏覽器，要保證左邊的一直為，右邊的跟隨瀏覽器大小變化比如瀏覽器為，右邊為，瀏覽器為，右邊為，請寫出大概的代碼。如果需要使用，最好是通過動態給添加屬性值，這樣可以繞開以上兩個問題。

一、一個頁面上兩個div左右鋪滿整個瀏覽器，要保證左邊的div一直為100px，右邊的div跟隨瀏覽器大小變化（比如瀏覽器為500，右邊div為400，瀏覽器為900，右邊div為800），請寫出大概的css代碼。

1.使用flex

//html

//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.浮動布局

Left sidebar
Main Content

demo
更多布局栗子請移步

二、請寫出一些前端性能優化的方式，越多越好

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

// 不好的寫法
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.使用jq的$.extend(true, target, obj)
2.newobj = Object.create(sourceObj)，// 但是這個是有個問題就是 newobj的更改不會影響到 sourceobj但是 sourceobj的更改會影響到newObj
3.newobj = JSON.parse(JSON.stringify(sourceObj))

十、js設計模式

總體來說設計模式分為三大類：
創建型模式，共五種：工廠方法模式、抽象工廠模式、單例模式、建造者模式、原型模式。
結構型模式，共七種：適配器模式、裝飾器模式、代理模式、外觀模式、橋接模式、組合模式、享元模式。
行為型模式，共十一種：策略模式、模板方法模式、觀察者模式、迭代子模式、責任鏈模式、命令模式、備忘錄模式、狀態模式、訪問者模式、中介者模

詳細說明 請移步alloyteam的文章

十一、圖片預覽

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、使用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屬性值，這樣可以繞開以上兩個問題。

GPU云服務器云服務器面試題棧面試題筆試面試題面試題內容

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81487.html

2017-10-09 前端日報

摘要：前端日報精選傳送門瀏覽器性能優化渲染性能在生產中的使用發送推送第期巧用匿名函數重構你的代碼中文可持久化數據結構以及結構分享眾成翻譯學習筆記的模板學習筆記教程的作用域插槽教程移動助手實踐一基于的換膚功能掘金網站壓力及性能測試一篇 2017-10-09 前端日報精選傳送門：React Portal瀏覽器性能優化-渲染性能在生產中的Progressive Web App使用Service...

WilsonLiu95 2019-08-21 16:55 評論0 收藏0
Java 知識小集

摘要：鎖的兩種主要特性互斥同一時間只允許一個線程持有某個特定的鎖。可見性線程釋放鎖之前對共享數據做出的更改對于隨后獲得該鎖的另一個線程是可見的。在商業上的成功奠定了字符存儲以位即一個字節為單位的基礎。 1.鎖的兩種主要特性：互斥：同一時間只允許一個線程持有某個特定的鎖。線程持有該鎖相當于令牌去訪問線程共享的數據。可見性：線程釋放鎖之前對共享數據做出的更改對于隨后獲得該鎖的另一個線程是可見的...

XBaron 2019-08-15 12:18 評論0 收藏0
你不能錯過的前端面試題合集

摘要：收集的一些前端面試題從面試題發現不足，進而查漏補缺，比通過面試更難得及各大互聯網公司前端筆試面試題篇及各大互聯網公司前端筆試面試題篇面試題個和個經典面試題前端開發面試題如何面試前端工程師很重要個變態題解析如何通過餓了么面試輕收集的一些前端面試題從面試題發現不足，進而查漏補缺，比通過面試更難得 1 BAT及各大互聯網公司2014前端筆試面試題--Html,Css篇 2 BAT...

ninefive 2019-08-21 16:18 評論0 收藏0
你不能錯過的前端面試題合集

摘要：收集的一些前端面試題從面試題發現不足，進而查漏補缺，比通過面試更難得及各大互聯網公司前端筆試面試題篇及各大互聯網公司前端筆試面試題篇面試題個和個經典面試題前端開發面試題如何面試前端工程師很重要個變態題解析如何通過餓了么面試輕收集的一些前端面試題從面試題發現不足，進而查漏補缺，比通過面試更難得 1 BAT及各大互聯網公司2014前端筆試面試題--Html,Css篇 2 BAT...

darkbaby123 2019-07-30 14:38 評論0 收藏0
前端開發面試題鏈接

摘要：手冊網超級有用的前端基礎技術面試問題收集前端面試題目及答案匯總史上最全前端面試題含答案常見前端面試題及答案經典面試題及答案精選總結前端面試過程中最容易出現的問題前端面試題整理騰訊前端面試經驗前端基礎面試題部分最新前端面試題攻略前端面試前端入手冊網：http://www.shouce.ren/post/index 超級有用的前端基礎技術面試問題收集：http://www.codec...

h9911 2019-08-02 16:11 評論0 收藏0