天天射天天,精品在线视频一区,欧美色图一区

前端開發(fā)中不可忽視的知識(shí)點(diǎn)匯總（一）

本文結(jié)合自己前端日常開發(fā)中，經(jīng)常用到的且非常重要的一些知識(shí)點(diǎn)，進(jìn)行了匯總，這是本系列第一篇。

1.css禁用鼠標(biāo)事件

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

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

http

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

http方法：

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

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

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

GET和POST的區(qū)別

GET 請(qǐng)求可被緩存 GET 請(qǐng)求保留在瀏覽器歷史記錄中 GET 請(qǐng)求可被收藏為書簽 GET 請(qǐng)求不應(yīng)在處理敏感數(shù)據(jù)時(shí)使用 GET 請(qǐng)求有長度限制(2048字符),IE和Safari瀏覽器限制2k;Opera限制4k;Firefox，Chrome限制8k GET 請(qǐng)求只應(yīng)當(dāng)用于取回?cái)?shù)據(jù)
POST 請(qǐng)求不會(huì)被緩存 POST 請(qǐng)求不會(huì)保留在瀏覽器歷史記錄中 POST 不能被收藏為書簽 POST 請(qǐng)求對(duì)數(shù)據(jù)長度沒有要求

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

nth-child(even/odd)

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

nth-of-type(odd)

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

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

// 數(shù)據(jù)可以以數(shù)組方式存儲(chǔ)，也可以是對(duì)象方式
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實(shí)現(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++) {
// 如果是第一個(gè)元素或者相鄰的元素不相同
if (!i || seen !== sortedArray[i]) {
res.push(sortedArray[i])
}
seen = sortedArray[i];
}
return res;
}
console.log(unique(array));
// filter實(shí)現(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鍵值對(duì)
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實(shí)現(xiàn)
var unique = (a) => [...new Set(a)]

7.什么是CDN和CDN的好處

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

好處：

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

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

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

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

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

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

8.正則表達(dá)式匹配手機(jī)號(hào)

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

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

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

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

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

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

瀏覽器渲染過程

1)解析：一個(gè)是HTML/SVG/XHTML，事實(shí)上，Webkit有三個(gè)C++的類對(duì)應(yīng)這三類文檔。解析這三種文件會(huì)產(chǎn)生一個(gè)DOM Tree。CSS，解析CSS會(huì)產(chǎn)生CSS規(guī)則樹。Javascript，腳本，主要是通過DOM API和CSSOM API來操作DOM Tree和CSS Rule Tree。
2)渲染：瀏覽器引擎會(huì)通過DOM Tree 和 CSS Rule Tree 來構(gòu)造 Rendering Tree。注意：Rendering Tree 渲染樹并不等同于DOM樹，因?yàn)橐恍┫馠eader或display:none的東西就沒必要放在渲染樹中了。CSS 的 Rule Tree主要是為了完成匹配并把CSS Rule附加上Rendering Tree上的每個(gè)Element。也就是DOM結(jié)點(diǎn)。也就是所謂的Frame。然后，計(jì)算每個(gè)Frame(也就是每個(gè)Element)的位置，這又叫l(wèi)ayout和reflow過程。
3)繪制：最后通過調(diào)用操作系統(tǒng)Native GUI的API繪制。

優(yōu)化建議

減少reflow和repaint

1)不要一條一條地修改DOM的樣式。還不如預(yù)先定義好css的class，然后修改DOM的className。
2)把DOM離線后修改。如：使用documentFragment 對(duì)象在內(nèi)存里操作DOM 先把DOM給display:none(有一次reflow)，然后你想怎么改就怎么改。比如修改100次，然后再把他顯示出來。clone一個(gè)DOM結(jié)點(diǎn)到內(nèi)存里，然后想怎么改就怎么改，改完后，和在線的那個(gè)的交換一下。
3)不要把DOM結(jié)點(diǎn)的屬性值放在一個(gè)循環(huán)里當(dāng)成循環(huán)里的變量。不然這會(huì)導(dǎo)致大量地讀寫這個(gè)結(jié)點(diǎn)的屬性
4)為動(dòng)畫的HTML元件使用fixed或absoulte的position，盡量使用transfoem，那么修改他們的CSS是不會(huì)reflow的 5)盡量少使用table布局。因?yàn)榭赡芎苄〉囊粋€(gè)小改動(dòng)會(huì)造成整個(gè)table的重新布局

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

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

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

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

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

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

15. iframe有那些缺點(diǎn)?

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

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

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

17. 介紹一下標(biāo)準(zhǔn)的CSS的盒子模型?低版本IE的盒子模型有什么不同的?

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

18. position的值relative和absolute定位原點(diǎn)是?

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

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

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

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

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

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