前端開發(fā)中不可忽視的知識點有哪些

這篇文章主要介紹“前端開發(fā)中不可忽視的知識點有哪些”，在日常操作中，相信很多人在前端開發(fā)中不可忽視的知識點有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”前端開發(fā)中不可忽視的知識點有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

1.css禁用鼠標事件

.disabled {     pointer-events: none;     cursor: default;     opacity: 0.6; }復制代碼

2.get/post的理解和他們之間的區(qū)別

http

• 超文本傳輸協(xié)議(HTTP)的設計目的是保證客戶機與服務器之間的通信。HTTP 的工作方式是客戶機與服務器之間的請求-應答協(xié)議。web  瀏覽器可能是客戶端，而計算機上的網(wǎng)絡應用程序也可能作為服務器端。

http方法：

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

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

• GET: 從指定的資源請求數(shù)據(jù)

GET和POST的區(qū)別

• GET 請求可被緩存 GET 請求保留在瀏覽器歷史記錄中 GET 請求可被收藏為書簽 GET 請求不應在處理敏感數(shù)據(jù)時使用 GET  請求有長度限制(2048字符),IE和Safari瀏覽器限制2k;Opera限制4k;Firefox，Chrome限制8k GET  請求只應當用于取回數(shù)據(jù)

• POST 請求不會被緩存 POST 請求不會保留在瀏覽器歷史記錄中 POST 不能被收藏為書簽 POST 請求對數(shù)據(jù)長度沒有要求

3.實現(xiàn)條紋網(wǎng)格的方式

nth-child(even/odd) 

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

nth-of-type(odd) 

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

漸變實現(xiàn)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求平面兩點之間的距離

// 數(shù)據(jù)可以以數(shù)組方式存儲，也可以是對象方式 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.數(shù)組去重

// indexOf實現(xiàn) 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實現(xiàn) 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實現(xiàn) var unique = (a) => [...new Set(a)]

7.什么是CDN和CDN的好處

• CDN:CDN是將源站內(nèi)容分發(fā)至最接近用戶的節(jié)點，使用戶可就近取得所需內(nèi)容，提高用戶訪問的響應速度和成功率。解決因分布、帶寬、服務器性能帶來的訪問延遲問題，適用于站點加速、點播、直播等場景。

好處：

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

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

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

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

5、使用情況分析  一般情況下CDNs提供商(如百度云加速)都會提供數(shù)據(jù)統(tǒng)計功能，可以了解更多關于用戶訪問自己網(wǎng)站的情況，可以根據(jù)統(tǒng)計數(shù)據(jù)對自己的站點適時適當?shù)淖龀鲂┰S調(diào)整。

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

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

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

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

• 1.js外聯(lián)文件放到body底部，css外聯(lián)文件放到head內(nèi) 2.http靜態(tài)資源盡量用多個子域名  3.服務器端提供html和http靜態(tài)資源時最好開啟gzip 4.在js,css,img等資源響應的http  headers里設置expires,last-modified 5.盡量減少http requests的數(shù)量 6.js/css/html/img資源壓縮  7.使用css spirtes，可以減少img請求次數(shù) 8.大圖使用lazyload懶加載 9.避免404，減少外聯(lián)js  10.減少cookie大小可以提高獲得響應的時間 11.減少dom elements的數(shù)量 12.使用異步腳本，動態(tài)創(chuàng)建腳本

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

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

11.瀏覽器渲染過程及優(yōu)化建議

瀏覽器渲染過程

• 1)解析：一個是HTML/SVG/XHTML，事實上，Webkit有三個C++的類對應這三類文檔。解析這三種文件會產(chǎn)生一個DOM  Tree。CSS，解析CSS會產(chǎn)生CSS規(guī)則樹。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)的位置，這又叫l(wèi)ayout和reflow過程。

• 3)繪制：最后通過調(diào)用操作系統(tǒng)Native GUI的API繪制。

優(yōu)化建議

減少reflow和repaint

• 1)不要一條一條地修改DOM的樣式。還不如預先定義好css的class，然后修改DOM的className。

• 2)把DOM離線后修改。如：使用documentFragment 對象在內(nèi)存里操作DOM  先把DOM給display:none(有一次reflow)，然后你想怎么改就怎么改。比如修改100次，然后再把他顯示出來。clone一個DOM結點到內(nèi)存里，然后想怎么改就怎么改，改完后，和在線的那個的交換一下。

• 3)不要把DOM結點的屬性值放在一個循環(huán)里當成循環(huán)里的變量。不然這會導致大量地讀寫這個結點的屬性

• 4)為動畫的HTML元件使用fixed或absoulte的position，盡量使用transfoem，那么修改他們的CSS是不會reflow的  5)盡量少使用table布局。因為可能很小的一個小改動會造成整個table的重新布局

12. 頁面導入樣式時，使用link和@import有什么區(qū)別?

• (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語義化讓頁面的內(nèi)容結構化，便于對瀏覽器、搜索引擎解析;  即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的; 搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關鍵字的權重，利于SEO;  使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護理解。

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

• cookie是網(wǎng)站為了標示用戶身份而儲存在用戶本地終端(Client  Side)上的數(shù)據(jù)(通常經(jīng)過加密)。cookie數(shù)據(jù)始終在同源的http請求中攜帶(即使不需要)，記會在瀏覽器和服務器間來回傳遞。sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務器，僅在本地保存。

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

• 有期時間：localStorage 存儲持久數(shù)據(jù)，瀏覽器關閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù);sessionStorage  數(shù)據(jù)在當前瀏覽器窗口關閉后自動刪除。cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉

15. iframe有那些缺點?

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

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

• 區(qū)分用戶是計算機還是人的公共全自動程序?？梢苑乐箰阂馄平饷艽a、刷票、論壇灌水;有效防止黑客對某一個特定注冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試。

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

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

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

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

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

• png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.

• 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統(tǒng)一。

• IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大。

• 浮動ie產(chǎn)生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}

• 這種情況之下IE會產(chǎn)生20px的距離，解決方案是在float的標簽樣式控制中加入  ——_display:inline;將其轉化為行內(nèi)屬性。(_這個符號只有ie6會識別)

• 漸進識別的方式，從總體中逐漸排除局部。

• 首先，巧妙的使用“\9”這一標記，將IE游覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨立識別。

• css .bb{ background-color:red;/所有識別/ background-color:#00deff\9; /IE6、7、8識別/  +background-color:#a200ff;/IE6、7識別/ _background-color:#1e0bd1;/IE6識別/ }

• IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性, 也可以使用getAttribute()獲取自定義屬性;  Firefox下,只能使用getAttribute()獲取自定義屬性。解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性。

• IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;  Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性。解決方法：(條件注釋)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)。

• Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性  -webkit-text-size-adjust: none; 解決。

• 超鏈接訪問過后hover樣式就不出現(xiàn)了 被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序: L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

20. CSS優(yōu)化、提高性能的方法有哪些?

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

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);  }

到此，關于“前端開發(fā)中不可忽視的知識點有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>