前端開發中不可忽視的知識點匯總（一）

作者：徐小夕 2020-12-28 08:16:30

本文結合自己前端日常開發中，經常用到的且非常重要的一些知識點，進行了匯總，這是本系列第一篇。

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.實現條紋網格的方式

nth-child(even/odd)

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

nth-of-type(odd)

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

漸變實現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是將源站內容分發至最接近用戶的節點，使用戶可就近取得所需內容，提高用戶訪問的響應速度和成功率。解決因分布、帶寬、服務器性能帶來的訪問延遲問題，適用于站點加速、點播、直播等場景。

好處：

1、多域名加載資源一般情況下，瀏覽器都會對單個域名下的并發請求數(文件加載)進行限制，通常最多有4個，那么第5個加載項將會被阻塞，直到前面的某一個文件加載完畢。因為CDN文件是存放在不同區域(不同IP)的，所以對瀏覽器來說是可以同時加載頁面所需的所有文件(遠不止4個)，從而提高頁面加載速度。

2、文件可能已經被加載過并保存有緩存一些通用的js庫或者是css樣式庫，如jQuery，在網絡中的使用是非常普遍的。當一個用戶在瀏覽你的某一個網頁的時候，很有可能他已經通過你網站使用的CDN訪問過了其他的某一個網站，恰巧這個網站同樣也使用了jQuery，那么此時用戶瀏覽器已經緩存有該jQuery文件(同IP的同名文件如果有緩存，瀏覽器會直接使用緩存文件，不會再進行加載)，所以就不會再加載一次了，從而間接的提高了網站的訪問速度

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

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

5、使用情況分析一般情況下CDNs提供商(如百度云加速)都會提供數據統計功能，可以了解更多關于用戶訪問自己網站的情況，可以根據統計數據對自己的站點適時適當的做出些許調整。

6、有效防止網站被攻擊一般情況下CDNs提供商也是會提供網站安全服務的

8.正則表達式匹配手機號

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

9.如何提高首頻加載速度

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.使用異步腳本，動態創建腳本

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

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

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

瀏覽器渲染過程

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

1)不要一條一條地修改DOM的樣式。還不如預先定義好css的class，然后修改DOM的className。
2)把DOM離線后修改。如：使用documentFragment 對象在內存里操作DOM 先把DOM給display:none(有一次reflow)，然后你想怎么改就怎么改。比如修改100次，然后再把他顯示出來。clone一個DOM結點到內存里，然后想怎么改就怎么改，改完后，和在線的那個的交換一下。
3)不要把DOM結點的屬性值放在一個循環里當成循環里的變量。不然這會導致大量地讀寫這個結點的屬性
4)為動畫的HTML元件使用fixed或absoulte的position，盡量使用transfoem，那么修改他們的CSS是不會reflow的 5)盡量少使用table布局。因為可能很小的一個小改動會造成整個table的重新布局

12. 頁面導入樣式時，使用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不支持;

13. 簡述一下你對HTML語義化的理解?

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

14. 請描述一下 cookies，sessionStorage 和 localStorage 的區別?

cookie是網站為了標示用戶身份而儲存在用戶本地終端(Client Side)上的數據(通常經過加密)。cookie數據始終在同源的http請求中攜帶(即使不需要)，記會在瀏覽器和服務器間來回傳遞。sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
存儲大小：cookie數據大小不能超過4k。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
有期時間：localStorage 存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據;sessionStorage 數據在當前瀏覽器窗口關閉后自動刪除。cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉

15. iframe有那些缺點?

*iframe會阻塞主頁面的Onload事件;*搜索引擎的檢索程序無法解讀這種頁面，不利于SEO; *iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript 動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。

16. 網頁驗證碼是干嘛的，是為了解決什么安全問題?

區分用戶是計算機還是人的公共全自動程序。可以防止惡意破解密碼、刷票、論壇灌水;有效防止黑客對某一個特定注冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試。

17. 介紹一下標準的CSS的盒子模型?低版本IE的盒子模型有什么不同的?

(1)有兩種， IE 盒子模型、W3C 盒子模型;(2)盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border);(3)區別：IE的content部分把 border 和 padding計算了進去;

18. position的值relative和absolute定位原點是?

absolute 生成絕對定位的元素，相對于值不為 static的第一個父元素進行定位。fixed (老IE不支持) 生成絕對定位的元素，相對于瀏覽器窗口進行定位。relative 生成相對定位的元素，相對于其正常位置進行定位。static 默認值。沒有定位，元素出現在正常的流中(忽略 top, bottom, left, right z-index 聲明)。inherit 規定從父元素繼承 position 屬性的值。

19. 經常遇到的瀏覽器的兼容性有哪些?原因，解決方法是什么，常用hack的技巧 ?

png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.
瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。
IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大。
浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}
這種情況之下IE會產生20px的距離，解決方案是在float的標簽樣式控制中加入 ——_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別)
漸進識別的方式，從總體中逐漸排除局部。
首先，巧妙的使用“\9”這一標記，將IE游覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。
css .bb{ background-color:red;/所有識別/ background-color:#00deff\9; /IE6、7、8識別/ +background-color:#a200ff;/IE6、7識別/ _background-color:#1e0bd1;/IE6識別/ }
IE下,可以使用獲取常規屬性的方法來獲取自定義屬性, 也可以使用getAttribute()獲取自定義屬性; Firefox下,只能使用getAttribute()獲取自定義屬性。解決方法:統一通過getAttribute()獲取自定義屬性。
IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性; Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性。解決方法：(條件注釋)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。
超鏈接訪問過后hover樣式就不出現了被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

20. CSS優化、提高性能的方法有哪些?

關鍵選擇器(key selector)。選擇器的最后面的部分為關鍵選擇器(即用來匹配目標元素的部分);如果規則擁有 ID 選擇器作為其關鍵選擇器，則不要為規則增加標簽。過濾掉無關的規則(這樣樣式系統就不會浪費時間去匹配它們了);提取項目的通用公有樣式，增強可復用性，按模塊編寫組件;增強項目的協同開發性、可維護性和可擴展性; 使用預處理工具或構建工具(gulp對css進行語法檢查、自動補前綴、打包壓縮、自動優雅降級);

21. 如何修改chrome記住密碼后自動填充表單的黃色背景 ?

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { 
   background-color: rgb(250, 255, 189); /* #FAFFBD; */ 
   background-image: none; 
   color: rgb(0, 0, 0); 
 }

責任編輯：姜華來源：趣談前端

前端開發技術熱點