更多課程 選擇中心

Web培訓
美國上市教育機構

400-111-8989

Web培訓

Web前端面試題整理

  • 發布:Web前端培訓
  • 來源:web前端面試
  • 時間:2019-08-30 16:35

今天小編要跟大家分享的文章是關于Web前端面試題。正準備參加Web前端面試的小伙伴們快來看一看小編為大家準備的Web前端面試題吧!

Web前端面試題整理

一、一個頁面上兩個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.瀏覽器顯示 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設計模式

總體來說設計模式分為三大類:

· 創建型模式,共五種:工廠方法模式、抽象工廠模式、單例模式、建造者模式、原型模式。

· 結構型模式,共七種:適配器模式、裝飾器模式、代理模式、外觀模式、橋接模式、組合模式、享元模式。

· 行為型模式,共十一種:策略模式、模板方法模式、觀察者模式、迭代子模式、責任鏈模式、命令模式、備忘錄模式、狀態模式、訪問者模式、中介者模

十一、圖片預覽

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

· 以上就是小編今天為大家分享的Web前端面試題,希望本篇文章能夠對正準備參加Web前端面試的小伙伴們有所幫助。想要了解更多Web前端知識記得關注達內Web培訓官網。最后祝愿小伙伴們面試成功。

原文鏈接:spademan segmentfault.com/a/1190000008322096

【免責聲明:本文圖片及文字信息均由小編轉載自網絡,旨在分享提供閱讀,版權歸原作者所有,如有侵權請聯系我們進行刪除。】

預約申請免費試聽課

填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

上一篇:2019Web前端面試準備方向有哪些
下一篇:參加Web前端面試要知道的HTML基礎面試題

Web前端面試之HTML5相關面試題及答案匯總

Web前端面試題之JavaScript部分

Web前端面試題之HTML/CSS部分

Web前端工程師參加面試要會的JavaScript測試題

選擇城市和中心
黑龍江省

吉林省

河北省

貴州省

云南省

廣西省

海南省

开心激情五月天