前端知識(shí)雜談

lingdududu 發(fā)布于2019-08-23 18:39 / 3159人閱讀

摘要：整理一些常用前端知識(shí)點(diǎn)，忘記的時(shí)候可以翻出來(lái)回憶下瀏覽器渲染從輸入網(wǎng)址到顯示網(wǎng)頁(yè)的過(guò)程分析應(yīng)用層解析域名客戶端先檢查本地是否有對(duì)應(yīng)的地址，若找到則返回響應(yīng)的地址。是高階函數(shù)的一種一個(gè)特殊用法。

整理一些常用前端知識(shí)點(diǎn)，忘記的時(shí)候可以翻出來(lái)回憶下

瀏覽器渲染 從輸入網(wǎng)址到顯示網(wǎng)頁(yè)的過(guò)程分析

1、應(yīng)用層DNS解析域名：客戶端先檢查本地是否有對(duì)應(yīng)的IP地址，若找到則返回響應(yīng)的IP地址。若沒(méi)找到則請(qǐng)求上級(jí)DNS服務(wù)器，直至找到或到根節(jié)點(diǎn)。
2、瀏覽器與服務(wù)器建立TCP連接（默認(rèn)端口80）(詳細(xì)點(diǎn)可以說(shuō)下三次握手的過(guò)程)
3、應(yīng)用層客戶端發(fā)送HTTP請(qǐng)求。
4、服務(wù)器響應(yīng)請(qǐng)求：查找客戶端請(qǐng)求的資源，并返回響應(yīng)報(bào)文，響應(yīng)報(bào)文中包括一個(gè)重要的信息——狀態(tài)碼（200-300，成功；304使用緩存）。
5、服務(wù)器返回相應(yīng)文件給瀏覽器。
6、Tcp連接釋放(可以說(shuō)下四次揮手的過(guò)程)。
7、瀏覽器對(duì)HTML文件進(jìn)行解析構(gòu)建DOM樹(shù) ，構(gòu)建渲染樹(shù) ，js根據(jù)DomAPI操作執(zhí)行綁定事件等，頁(yè)面顯示完成。

H5 新特性

語(yǔ)義化標(biāo)簽：header、footer、section、nav、aside、article

增強(qiáng)型表單：input 的多個(gè) type

新增表單元素：datalist、keygen、output

新增表單屬性：placehoder、required、min 和 max

音頻視頻：audio、video

繪畫(huà)：canvas

地理定位：geolocation

拖拽：drag事件+dataTransfer+FileReader

本地存儲(chǔ)：localStorage - 沒(méi)有時(shí)間限制的數(shù)據(jù)存儲(chǔ)；sessionStorage - 針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ)，當(dāng)用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會(huì)被刪除

新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause

WebSocket：?jiǎn)蝹€(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議

前端安全問(wèn)題 CSRF

CSRF（Cross-site request forgery），中文名稱：跨站請(qǐng)求偽造，也被稱為：one click attack/session riding，縮寫為：CSRF/XSRF。
你這可以這么理解CSRF攻擊：攻擊者盜用了你的身份，以你的名義發(fā)送惡意請(qǐng)求。CSRF能夠做的事情包括：以你名義發(fā)送郵件，發(fā)消息，盜取你的賬號(hào)，甚至于購(gòu)買商品，虛擬貨幣轉(zhuǎn)賬......造成的問(wèn)題包括：個(gè)人隱私泄露以及財(cái)產(chǎn)安全。

檢查報(bào)頭中的Referer參數(shù)確保請(qǐng)求發(fā)自正確的網(wǎng)站（但XHR請(qǐng)求可調(diào)用setRequestHeader方法來(lái)修改Referer報(bào)頭）；

對(duì)于任何重要的請(qǐng)求都需要重新驗(yàn)證用戶的身份；

創(chuàng)建一個(gè)唯一的令牌（Token），將其存在服務(wù)端的session中及客戶端的cookie中，對(duì)任何請(qǐng)求，都檢查二者是否一致。

XSS

XSS的預(yù)防可以從多方面著手：
xss表示Cross Site Scripting(跨站腳本攻擊)，它與SQL注入攻擊類似，SQL注入攻擊中以SQL語(yǔ)句作為用戶輸入，從而達(dá)到查詢/修改/刪除數(shù)據(jù)的目的，而在xss攻擊中，通過(guò)插入惡意腳本，實(shí)現(xiàn)對(duì)用戶游覽器的控制。
（1）如前面所述，瀏覽器自身可以識(shí)別簡(jiǎn)單的XSS攻擊字符串，從而阻止簡(jiǎn)單的XSS攻擊；
（2）從根本上說(shuō)，解決辦法是消除網(wǎng)站的XSS漏洞，這就需要網(wǎng)站開(kāi)發(fā)者運(yùn)用轉(zhuǎn)義安全字符等手段，始終把安全放在心上；
（3）對(duì)于普通網(wǎng)民，需要注意盡量抵擋誘惑，別去點(diǎn)擊非知名網(wǎng)站的鏈接。

協(xié)議

http

CSS CSS3 新特性

選擇器

背景和邊框

文本效果

2D/3D 轉(zhuǎn)換

動(dòng)畫(huà)、過(guò)渡

多列布局

用戶界面

兩欄分布

第一種采用calc；
第二種采用:都設(shè)置position:absolute; 然后設(shè)置右邊的left:309px; width:auto;

JavaScript this指向

js中this的一般再函數(shù)中使用，但它的指向要小心了，this永遠(yuǎn)指向的是最后調(diào)用它的對(duì)象
系統(tǒng)提供修改this指向的方法是new,每當(dāng)new一個(gè)實(shí)例時(shí)，系統(tǒng)會(huì)自動(dòng)修改this指向
我們也可以手動(dòng)修改this指向，通過(guò)call,apply,bind方法，三者第一個(gè)參數(shù)都是this要指向的對(duì)象，也就是想指定的上下文

call：立即調(diào)用，第二個(gè)參數(shù)按順序傳遞

apply：立即調(diào)用，第二個(gè)參數(shù)放在數(shù)組里

bind：返回對(duì)應(yīng)函數(shù)，便于稍后調(diào)用；

柯里化

高階函數(shù)：英文叫Higher-order function，即將函數(shù)作為參數(shù)的函數(shù)
柯里化：英語(yǔ)叫Currying，是把接受多個(gè)參數(shù)的函數(shù)變換成接受一個(gè)單一參數(shù)（最初函數(shù)的第一個(gè)參數(shù)）的函數(shù)，并且返回接受余下的參數(shù)而且返回結(jié)果的新函數(shù)的技術(shù)。是高階函數(shù)的一種一個(gè)特殊用法。

// 普通的add函數(shù)
function add(x, y) {
    return x + y
}

// Currying后
function curryingAdd(x) {
    return function (y) {
        return x + y
    }
}

add(1, 2)           // 3
curryingAdd(1)(2)   // 3

好處

參數(shù)復(fù)用

提前確認(rèn)

延遲運(yùn)行

經(jīng)典面試題

// 實(shí)現(xiàn)一個(gè)add方法，使計(jì)算結(jié)果能夠滿足如下預(yù)期：
add(1)(2)(3) = 6;
add(1, 2, 3)(4) = 10;
add(1)(2)(3)(4)(5) = 15;

function add() {
    // 第一次執(zhí)行時(shí)，定義一個(gè)數(shù)組專門用來(lái)存儲(chǔ)所有的參數(shù)
    var _args = Array.prototype.slice.call(arguments);

    // 在內(nèi)部聲明一個(gè)函數(shù)，利用閉包的特性保存_args并收集所有的參數(shù)值
    var _adder = function() {
        _args.push(...arguments);
        return _adder;
    };

    // 利用toString隱式轉(zhuǎn)換的特性，當(dāng)最后執(zhí)行時(shí)隱式轉(zhuǎn)換，并計(jì)算最終的值返回
    _adder.toString = function () {
        return _args.reduce(function (a, b) {
            return a + b;
        });
    }
    return _adder;
}

add(1)(2)(3)                // 6
add(1, 2, 3)(4)             // 10
add(1)(2)(3)(4)(5)          // 15
add(2, 6)(1)                // 9

ES6 新特性 1、關(guān)鍵字: let 和 const

let聲明的變量只在 let 命令所在的代碼塊內(nèi)有效，不可提升變量，不能重復(fù)定義
const聲明一個(gè)只讀的常量，一旦聲明，常量的值就不能改變。

2、解構(gòu)賦值