前端面試----不可忽視的知識點彙總

原文連接：連接描述

1.css禁用鼠標事件

.disabled {
        pointer-events: none;
        cursor: default;
        opacity: 0.6;

}

2.get/post的理解和他們之間的區別
http

超文本傳輸協議（HTTP）的設計目的是保證客戶機與服務器之間的通訊。 HTTP 的工做方式是客戶機與服務器之間的請求-應答協議。 web
瀏覽器多是客戶端，而計算機上的網絡應用程序也可能做爲服務器端。

http方法：

HEAD: 與 GET 相同，但只返回 HTTP 報頭，不返回文檔主體 PUT: 上傳指定的 URI 表示 DELETE: 刪除指定資源
OPTIONS: 返回服務器支持的 HTTP 方法 CONNECT: 把請求鏈接轉換到透明的 TCP/IP 通道 POST:
向指定的資源提交要被處理的數據

// 查詢字符串（名稱/值對）是在 POST 請求的 HTTP 消息主體中發送的
POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2

GET: 從指定的資源請求數據

GET和POST的區別

GET 請求可被緩存 GET 請求保留在瀏覽器歷史記錄中 GET 請求可被收藏爲書籤 GET 請求不該在處理敏感數據時使用 GET
請求有長度限制(2048字符),IE和Safari瀏覽器限制2k;Opera限制4k;Firefox，Chrome限制8k GET
請求只應當用於取回數據 POST 請求不會被緩存 POST 請求不會保留在瀏覽器歷史記錄中 POST 不能被收藏爲書籤 POST
請求對數據長度沒有要求

3.實現條紋網格的方式

1.nth-child(even/odd)

// odd表示基數，此時選中基數行的樣式，even表示偶數行
.row:nth-child(odd){
    background: #eee;
}

2.nth-of-type(odd)

.row:nth-of-type(odd){
    background: #eee;
}

3.漸變實現linear-gradient

.stripe-bg{
  padding: .5em;
  line-height: 1.5em;
  background: beige;
  background-size: auto 3em;
  background-origin: content-box;
  background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);
}

4.js求平面兩點之間的距離

// 數據能夠以數組方式存儲，也能夠是對象方式
let a = {x:'6', y:10},
        b = {x: 8, y: 20};
    function distant(a,b){
        let dx = Number(a.x) - Number(b.x)
        let dy = Number(a.y) - Number(b.y)
        return Math.pow(dx*dx + dy*dy, .5)
    }

5.css禁止用戶選擇

body{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

6.數組去重

// indexOf實現
var array = [1, 1, '1'];

function unique(array) {
    var res = [];
    for (var i = 0, len = array.length; i < len; i++) {
        var current = array[i];
        if (res.indexOf(current) === -1) {
            res.push(current)
        }
    }
    return res;
}

console.log(unique(array));

// 排序後去重
var array = [1, 1, '1'];

function unique(array) {
    var res = [];
    var sortedArray = array.concat().sort();
    var seen;
    for (var i = 0, len = sortedArray.length; i < len; i++) {
        // 若是是第一個元素或者相鄰的元素不相同
        if (!i || seen !== sortedArray[i]) {
            res.push(sortedArray[i])
        }
        seen = sortedArray[i];
    }
    return res;
}

console.log(unique(array));

// filter實現
var array = [1, 2, 1, 1, '1'];
function unique(array) {
    var res = array.filter(function(item, index, array){
        return array.indexOf(item) === index;
    })
    return res;
}
console.log(unique(array));

// 排序去重
var array = [1, 2, 1, 1, '1'];
function unique(array) {
    return array.concat().sort().filter(function(item, index, array){
        return !index || item !== array[index - 1]
    })
}
console.log(unique(array));

// Object鍵值對
var array = [{value: 1}, {value: 1}, {value: 2}];

function unique(array) {
    var obj = {};
    return array.filter(function(item, index, array){
        console.log(typeof item + JSON.stringify(item))
        return obj.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (obj[typeof item + JSON.stringify(item)] = true)
    })
}

console.log(unique(array)); // [{value: 1}, {value: 2}]

// ES6 Set實現
var unique = (a) => [...new Set(a)]

7.什麼是CDN和CDN的好處

CDN:CDN是將源站內容分發至最接近用戶的節點，使用戶可就近取得所需內容，提升用戶訪問的響應速度和成功率。解決因分佈、帶寬、服務器性能帶來的訪問延遲問題，適用於站點加速、點播、直播等場景。
好處： 一、多域名加載資源
通常狀況下，瀏覽器都會對單個域名下的併發請求數（文件加載）進行限制，一般最多有4個，那麼第5個加載項將會被阻塞，直到前面的某一個文件加載完畢。
由於CDN文件是存放在不一樣區域（不一樣IP）的，因此對瀏覽器來講是能夠同時加載頁面所需的全部文件（遠不止4個），從而提升頁面加載速度。

二、文件可能已經被加載過並保存有緩存 一些通用的js庫或者是css樣式庫，如jQuery，在網絡中的使用是很是廣泛的。當一個用戶在瀏覽你的某一個網頁的時候，頗有可能他已經經過你網站使用的CDN訪問過了其餘的某一個網站，恰巧這個網站一樣也使用了jQuery，那麼此時用戶瀏覽器已經緩存有該jQuery文件（同IP的同名文件若是有緩存，瀏覽器會直接使用緩存文件，不會再進行加載），因此就不會再加載一次了，從而間接的提升了網站的訪問速度

三、高效率 你的網站作的再NB也不會NB過百度NB過Google吧？一個好的CDNs會提供更高的效率，更低的網絡延時和更小的丟包率。

四、分佈式的數據中心 假如你的站點佈置在北京，當一個香港或者更遠的用戶訪問你的站點的時候，他的數據請求勢必會很慢很慢。而CDNs則會讓用戶從離他最近的節點去加載所需的文件，因此加載速度提高就是理所固然的了。

五、使用狀況分析 通常狀況下CDNs提供商（如百度雲加速）都會提供數據統計功能，能夠了解更多關於用戶訪問本身網站的狀況，能夠根據統計數據對本身的站點適時適當的作出些許調整。

六、有效防止網站被攻擊 通常狀況下CDNs提供商也是會提供網站安全服務的

8.聖盃佈局和雙飛翼佈局
參考鏈接
9.正則表達式匹配手機號

function checkPhone(){
    if(!(/^1[34578]\d{9}$/.test(phone))){
        alert("手機號碼有誤，請重填");
        return false;
    }
}

10.如何提升首頻加載速度

1.js外聯文件放到body底部，css外聯文件放到head內 2.http靜態資源儘可能用多個子域名 3.服務器端提供html和http靜態資源時最好開啓gzip 4.在js,css,img等資源響應的http headers裏設置expires,last-modified 5.儘可能減小http requests的數量
6.js/css/html/img資源壓縮 7.使用css spirtes，能夠減小img請求次數 8.大圖使用lazyload懶加載 9.避免404，減小外聯js 10.減小cookie大小能夠提升得到響應的時間 11.減小dom elements的數量 12.使用異步腳本，動態建立腳本

11.瀏覽器內核(渲染引擎)

IE/360/搜狗瀏覽器: Trident Chrome/Safari/Opera: WebKit(KHTML的一個開源的分支)
(雖然咱們稱WebKit爲瀏覽器內核，但不太適合直接稱渲染引擎，由於WebKit自己主要是由兩個引擎構成的，一個正是渲染引擎「WebCore」，另外一個則是javascript解釋引擎「JSCore」，它們均是從KDE的渲染引擎KHTML及javascript解釋引擎KJS衍生而來。)
(在13年發佈的Chrome
28.0.1469.0版本開始，Chrome放棄Chromium引擎轉而使用最新的Blink引擎（基於WebKit2——蘋果公司於2010年推出的新的WebKit引擎），Blink對比上一代的引擎精簡了代碼、改善了DOM框架，也提高了安全性。)
(爲了減小研發成本，Opera在2013年2月宣佈放棄Presto，轉而跟隨Chrome使用WebKit分支的Chromium引擎做爲自家瀏覽器核心引擎)
Firefox/SeaMonkey: Gecko

12.瀏覽器渲染過程及優化建議

1）解析： 一個是HTML/SVG/XHTML，事實上，Webkit有三個C++的類對應這三類文檔。解析這三種文件會產生一個DOM
Tree。 CSS，解析CSS會產生CSS規則樹。 Javascript，腳本，主要是經過DOM API和CSSOM API來操做DOM
Tree和CSS Rule Tree.
2）渲染：瀏覽器引擎會經過DOM Tree 和 CSS Rule Tree 來構造
Rendering Tree。注意： Rendering Tree
渲染樹並不等同於DOM樹，由於一些像Header或display:none的東西就不必放在渲染樹中了。 CSS 的 Rule
Tree主要是爲了完成匹配並把CSS Rule附加上Rendering
Tree上的每一個Element。也就是DOM結點。也就是所謂的Frame。
而後，計算每一個Frame（也就是每一個Element）的位置，這又叫layout和reflow過程。
3）繪製：最後經過調用操做系統Native GUI的API繪製。 減小reflow和repaint
4）不要一條一條地修改DOM的樣式。還不如預先定義好css的class，而後修改DOM的className。

把DOM離線後修改。如： 使用documentFragment 對象在內存裏操做DOM 先把DOM給display:none(有一次reflow)，而後你想怎麼改就怎麼改。好比修改100次，而後再把他顯示出來。 clone一個DOM結點到內存裏，而後想怎麼改就怎麼改，改完後，和在線的那個的交換一下。 3）不要把DOM結點的屬性值放在一個循環裏當成循環裏的變量。否則這會致使大量地讀寫這個結點的屬性 4）爲動畫的HTML元件使用fixed或absoulte的position，儘可能使用transfoem，那麼修改他們的CSS是不會reflow的 5）儘可能少使用table佈局。由於可能很小的一個小改動會形成整個table的從新佈局
13. 頁面導入樣式時，使用link和@import有什麼區別？

（1）link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS,
定義rel鏈接屬性等做用；而@import是CSS提供的，只能用於加載CSS;
（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載; （3）import是CSS2.1
提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;
(4)link支持使用js控制DOM去改變樣式，而@import不支持;

14.簡述一下你對HTML語義化的理解？

用正確的標籤作正確的事情。 html語義化讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析;
即便在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的;
搜索引擎的爬蟲也依賴於HTML標記來肯定上下文和各個關鍵字的權重，利於SEO; 使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

15. 請描述一下 cookies，sessionStorage 和 localStorage 的區別？
cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。 cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

存儲大小： cookie數據大小不能超過4k。 sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

有期時間： localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據； sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。 cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

16. iframe有那些缺點？
iframe會阻塞主頁面的Onload事件； 搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO; *iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。 使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript 動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題。

最後
感謝您的閱讀！想學習前端的小夥伴們記得關注我