【高併發】的前端面試題彙總及解析—（I）

時間 2019-11-24

標籤高併發端面試題彙總解析简体版

原文原文鏈接

廢話很少說，直接奔主題

1、圖片優化

項目中圖片處理相關的優化，項目中用到的優化方案，圖片大小達到多少的時候選擇處理？javascript

1. 首先了解在web開發中常見的圖片有那些格式。css

JPG 一般使用的背景圖片，照片圖片，商品圖片等等。這一類型的圖片都屬於大尺寸圖片或較大尺寸圖片通常使用的是這種格式。html

PNG 這種格式的又分爲兩種一種PNG-8 一種 PNG-24java

PNG-8格式不支持半透明，也是IE6兼容的圖片存儲方式。css3

PNG-24圖片質量要求較高的半透明或全透明背景，保存成PNG-24更合適（爲了兼容IE6能夠試用js插件pngfix）通常是背景圖標中試用的多。git

GIF 這種格式顯而易見的是在須要gif動畫的時候試用了。github

2．優化方案web

l 樣式代替圖片bootstrap

例如：半透明、圓角、陰影、高光、漸變等。這些效果主流的瀏覽器都可以完美支持，而對於那些低端瀏覽器，咱們並不會徹底拋棄他們，「漸進加強」則是一個很好的解決方案。移動web開發

l 精靈圖

CSS Sprites，將同類型的圖標或按鈕等背景圖合到一張大圖中，減小頁面請求。

l 字體圖標

Icon Font，將圖標作成字體文件。優勢是圖標支持多個尺寸，兼容全部瀏覽器，減小頁面請求等。美中不足的是隻支持純色的icon。SVG，對於絕大多數圖案、圖標等，矢量圖更小，且可縮放而無需生成多套圖。如今主流瀏覽器都支持SVG了，因此可放心使用！

l Base64

將圖片轉化爲base64編碼格式，資源內嵌於CSS或HTML中，沒必要單獨請求。

Base64格式

data:[][;charset=][;base64],

Base64 在CSS中的使用

.demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."); }複製代碼

Base64 在HTML中的使用

<img width="40"
height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."
/>複製代碼

l 圖片響應式

一般圖片加載都是能夠經過lazy加載的形式來的，那麼能夠在加載的時候來判斷屏幕的尺寸來達到加載大圖仍是小圖的目的來達到優化。

2、提升網站的性能

你知道有哪些方法能夠提升網站的性能？

咱們從兩個方面來說：

1. 資源加載

CSS頂部, JS底部

CSS JS文件壓縮

儘可能使用圖片使用精靈圖，字體圖標

圖片加載可經過懶加載的方式。

總之就是減小資源體積減小資源請求次數。

2. 代碼性能

CSS:

使用CSS縮寫，減小代碼量；

減小查詢層級：如.header .logo要好過.header .top .logo；

減小查詢範圍：如.header>li要好過.header li；

避免tag標籤與class或id並存：如a.top、button#submit；

刪除重複的CSS；

….

html:

減小DOM節點：加速頁面渲染；

正確的閉合標籤：如避免使用<div/>，瀏覽器會多一個將它解析成<div\></div\>的過程；

減小頁面重繪。好比給圖片加上正確的寬高值：這能夠減小頁面重繪，

……

js：

儘可能少用全局變量；

使用事件代理綁定事件，如將事件綁定在body上進行代理；

避免頻繁操做DOM節點；

減小對象查找，如a.b.c.d這種查找方式很是耗性能，儘量把它定義在變量裏；

….

3、 z-index

說說z-index的工做原理及適用範圍?

原理：

z-index 這個屬性控制着元素在z軸上的表現形式。

該屬性僅適用於定位元素。即擁有 relative , absolute , fixed 屬性的position 元素。

堆疊順序（Stacking Level）

堆疊順序是當前元素位於 z 軸上的值。數值越大代表元素的堆疊順序越高，越靠近屏幕。

未定義時後來居上

若是未指定 z-index 的屬性，元素的堆疊順序基於它所在的文檔樹。默認狀況下，文檔中後來聲明的元素具備更高的堆疊順序

當父元素的堆疊順序被設置的時候，這也意味着，它的子元素的堆疊順序不能高於或低於這一順序 (相對於父元素的堆疊上下文)。。

適用範圍：

1.網頁兩側浮動窗口(播放器,置頂按鈕,浮動廣告，功能按鈕等)
2.導航欄浮動置頂。
3.隱藏div實現彈窗功能(經過設置div的定位和z-index控制div的位置和出現隱藏)

4、響應式開發

可否簡述一下如何使一套設計方案，適應不一樣的分辨率，有哪些方法能夠實現？

流式佈局：

使用非固定像素來定義網頁內容，也就是百分比佈局，經過盒子的寬度設置成百分比來根據屏幕的寬度來進行伸縮，不受固定像素的限制，內容向兩側填充。

這樣的佈局方式就是移動web開發使用的經常使用佈局方式

這樣的佈局能夠適配移動端不一樣的分辨率設備。

響應式開發：

那麼Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站可以兼容多個終端。

愈來愈多的設計師也採用了這種設計。

• CSS3中的Media Query（媒介查詢）

• 經過查詢screen的寬度來指定某個寬度區間的網頁佈局。

• 超小屏幕（移動設備） 768px如下

• 小屏設備 768px-992px

• 中等屏幕 992px-1200px

• 寬屏設備 1200px以上

因爲響應式開發顯得繁瑣些，通常使用第三方響應式框架來完成，好比bootstrap來完成一部分工做，固然也能夠本身寫響應式。

5、事件封裝和自定義

如何實現事件的封裝、如何實現自定義事件？

什麼是事件：

JavaScript 使咱們有能力建立動態頁面。事件是能夠被 JavaScript 偵測到的行爲。

網頁中的每一個元素均可以產生某些能夠觸發 JavaScript 函數的事件。比方說，咱們能夠在用戶點擊某按鈕時產生一個 onClick 事件來觸發某個函數。事件在 HTML 頁面中定義。

事件的封裝：

function addEvent(dom,type,callback){
    if(dom.addEventListener){
        dom.addEventListener(type,callback,false);
    }else if(dom.attachEvent){
        dom.attachEvent('on'+type,callback);
    }
};
function removeEvent(dom,type,callback){
    if(dom.removeEventListener){
        dom.removeEventListener(type);
    }else if(dom.detachEvent){
        dom.detachEvent('on'+type);
    }
};複製代碼

事件封裝：

好比zepto中的touch事件都是自定義事件。

6、漸進堅強、優雅降級

你能描述一下漸進加強和優雅降級之間的不一樣嗎？

優雅降級和漸進加強印象中是隨着css3流出來的一個概念。因爲低級瀏覽器不支持css3，但css3的效果又太優秀不忍放棄，因此在高級瀏覽中使用css3而低級瀏覽器只保證最基本的功能。咋一看兩個概念差很少，都是在關注不一樣瀏覽器下的不一樣體驗，關鍵的區別是他們所側重的內容，以及這種不一樣形成的工做流程的差別。

舉個例子：

a{

    display: block;

    width: 200px;

    height: 100px;

    background:aquamarine;

    /*我就是要用這個新css屬性*/

    transition: all 1s ease 0s;

    /*但是發現了一些低版本瀏覽器不支持怎麼吧*/

    /*往下兼容*/

    -webkit-transition:all 1s ease 0s;

    -moz-transition:all 1s ease 0s;

    -o-transition: all 1s ease 0s;

    /*那麼一般這樣考慮的和這樣的側重點出發的css就是優雅降級*/

}

a:hover{

    height: 200px;

}
複製代碼

/*那若是咱們的產品要求咱們要重低版本的瀏覽器兼容開始*/

a{

    /*優先考慮低版本的*/

    -webkit-transition:all 1s ease 0s;

    -moz-transition:all 1s ease 0s;

    -o-transition: all 1s ease 0s;

    /*高版本的就確定是漸進漸強*/

    transition: all 1s ease 0s;

}複製代碼

「優雅降級」觀點認爲應該針對那些最高級、最完善的瀏覽器來設計網站。

「漸進加強」觀點則認爲應關注於內容自己。

7、客戶端數據存儲

請描述一下cookies，sessionStorage和localStorage的區別？

cookies兼容全部的瀏覽器，Html5提供的storage存儲方式。

Document.cookie


Window.localstorage


Window.sessionstorage
複製代碼

cookie數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

存儲大小限制也不一樣，cookie數據不能超過4k，同時由於每次http請求都會攜帶cookie，因此cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

數據有效期不一樣，sessionStorage：僅在當前瀏覽器窗口關閉前有效，天然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，所以用做持久數據；cookie只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。

做用域不一樣，sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。

8、重置瀏覽器的CSS默認屬性

描述一個」reset」的CSS文件並如何使用它。知道normalize.css嗎？你瞭解他們的不一樣之處？

由於瀏覽器的品種不少，每一個瀏覽器的默認樣式也是不一樣的，好比<button>標籤，在IE瀏覽器、Firefox瀏覽器以及Safari瀏覽器中的樣式都是不一樣的，因此，經過重置button標籤的CSS屬性，而後再將它統必定義，就能夠產生相同的顯示效果。

你可能會用Normalize來代替你的重置樣式文件。它沒有重置全部的樣式風格，但僅提供了一套合理的默認樣式值。既能讓衆多瀏覽器達到一致和合理，但又不擾亂其餘的東西（如粗體的標題）。

9、 IE和DOM事件流的區別

首先咱們得搞懂 IE和DOM 是指的啥？

這裏主要問的是你IE瀏覽器和DOM兼容的瀏覽器也就是非IE瀏覽器或IE的高版本瀏覽器的事件方面的兼容性問題。

而後要搞明白的是什麼是事件流

IE5.5順序是div --body--document.
在IE6中div-body--html--document.
mozilla的順序是div--body- -html--document--window.

在IE中只有冒泡事件類型的事件流。

而在DOM兼容的瀏覽器中還有事件捕獲

首先window--document--body--div--click.
而後click--div--body--document--window.

處理函數的區別

在IE 中,每一個元素和window對象都有2個方法:attachEvent()和detachEvent();attachEvent用來給一個事件附加事件處理函數.

dom中對應的方法是addEventListener()和removeEventListener ,這兩個方法有3個參數,事件名稱,要分配的函數和處理函數是用於冒泡階段仍是捕獲階段.若是事件處理函數是用在捕獲階段,第三個參數爲true

<div>

    <a href="javascript:;">dddd</a>

</div>

<script>

    window.onload = function(){

        document.getElementsByTagName('a')[0].addEventListener('click',function(e){

            console.log('a');

        },true);

        /*處理函數在捕獲階段執行*/

       
document.getElementsByTagName('div')[0].addEventListener('click',function(e){

            console.log('div');

            /*在捕獲的時候  禁止冒泡*/

            e.stopPropagation();

        },true);

        /*處理函數在捕獲階段執行*/

    }

</script>複製代碼

10、 call和apply的區別

Javascript的每一個Function對象中有一個apply方法：

1	`function.apply([thisObj[,argArray]])`

還有一個相似功能的call方法：

1	`function.call([thisObj[,arg1[, arg2[, [,.argN]]]]])`

它們各自的定義：

apply：應用某一對象的一個方法，用另外一個對象替換當前對象。

call：調用一個對象的一個方法，以另外一個對象替換當前對象。

它們的共同之處：

都「能夠用來代替另外一個對象調用一個方法，將一個函數的對象上下文從初始的上下文改變爲由 this 指定的新對象。」

它們的不一樣之處：

apply：最多隻能有兩個參數——新this對象和一個數組 argArray。若是給該方法傳遞多個參數，則把參數都寫進這個數組裏面，固然，即便只有一個參數，也要寫進數組裏面。若是 argArray 不是一個有效的數組或者不是 arguments 對象，那麼將致使一個 TypeError。若是沒有提供 argArray 和 thisObj 任何一個參數，那麼 Global 對象將被用做 thisObj，而且沒法被傳遞任何參數。

call：則是直接的參數列表，主要用在js對象各方法互相調用的時候，使當前this實例指針保持一致,或在特殊狀況下須要改變this指針。若是沒有提供 thisObj 參數，那麼 Global 對象被用做 thisObj。

更簡單地說，apply和call功能同樣，只是傳入的參數列表形式不一樣：如 func.call(func1,var1,var2,var3)對應的apply寫法爲：func.apply(func1,[var1,var2,var3])

var func1 = function(a,b,c){

    this.name = 'func1';

    //func2.call(this,a,b,c);

    //func2.apply(this,arguments);

};

var func2 = function(){

    console.log(this.name);

    console.log(arguments);

};

func1(1,2,3);複製代碼

此次就先整理這麼多了，畢竟還得勞逸結合啊，欲知更多知識，請待下次更新。