成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端知識雜談

Cruise_Chan / 1142人閱讀

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

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

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

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

H5 新特性

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

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

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

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

音頻視頻：audio、video

繪畫：canvas

地理定位：geolocation

拖拽：drag事件+dataTransfer+FileReader

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

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

WebSocket：單個 TCP 連接上進(jìn)行全雙工通訊的協(xié)議

前端安全問題 CSRF

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

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

對于任何重要的請求都需要重新驗證用戶的身份；

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

XSS

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

協(xié)議

http

CSS CSS3 新特性

選擇器

背景和邊框

文本效果

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

動畫、過渡

多列布局

用戶界面

兩欄分布

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

JavaScript this指向

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

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

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

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

柯里化

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

// 普通的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)典面試題 
// 實現(xiàn)一個add方法，使計算結(jié)果能夠滿足如下預(yù)期：
add(1)(2)(3) = 6;
add(1, 2, 3)(4) = 10;
add(1)(2)(3)(4)(5) = 15;

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

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

    // 利用toString隱式轉(zhuǎn)換的特性，當(dāng)最后執(zhí)行時隱式轉(zhuǎn)換，并計算最終的值返回
    _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聲明一個只讀的常量，一旦聲明，常量的值就不能改變。

2、解構(gòu)賦值

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/54178.html

相關(guān)文章

  • 前端隨筆（雜談）

    摘要：經(jīng)過對前端技術(shù)的學(xué)習(xí)，感觸良多，雖然之前也接觸過前端的知識，但是沒有進(jìn)行系統(tǒng)的學(xué)習(xí)過，在大三上學(xué)期學(xué)過和簡單的，老師也沒有深度講解，知識也沒有形成體系，經(jīng)過一段時間的學(xué)習(xí)，有以下感觸與大家分享整個前端知識就像一座房子，而是磚，建一個網(wǎng)頁，里經(jīng)過對前端技術(shù)的學(xué)習(xí)，感觸良多，雖然之前也接觸過前端的知識，但是沒有進(jìn)行系統(tǒng)的學(xué)習(xí)過，在大三上學(xué)期學(xué)過h5和簡單的css，老師也沒有深度講解，知識也沒有形...

    caohaoyu 評論0 收藏0

  • 前端知識雜談

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

    lingdududu 評論0 收藏0

  • 前端知識雜談

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

    fobnn 評論0 收藏0

  • [雜談]了解一些額外知識，讓前端開發(fā)錦上添花

    摘要：對的請求，也是要有一個了解，比如協(xié)議，請求方式，請求過程，結(jié)果狀態(tài)碼等。教程協(xié)議詳解經(jīng)典面試題一個故事講完響應(yīng)狀態(tài)碼上面提到響應(yīng)狀態(tài)碼，在這里也簡單寫下。 勸了別人無數(shù)次，讓別人喝了雞湯，幫別人填坑，自己卻掉了坑 1.前言 在前端學(xué)習(xí)里面，很多人都是注重學(xué)習(xí)代碼（html，css，js）?；蛘呤且恍┛蚣?，庫（jquery，vue，react）,或者是各種工具（webpack，gulp）...

    vvpvvp 評論0 收藏0

  • [雜談]了解一些額外知識，讓前端開發(fā)錦上添花

    摘要：對的請求，也是要有一個了解，比如協(xié)議，請求方式，請求過程，結(jié)果狀態(tài)碼等。教程協(xié)議詳解經(jīng)典面試題一個故事講完響應(yīng)狀態(tài)碼上面提到響應(yīng)狀態(tài)碼，在這里也簡單寫下。 勸了別人無數(shù)次，讓別人喝了雞湯，幫別人填坑，自己卻掉了坑 1.前言 在前端學(xué)習(xí)里面，很多人都是注重學(xué)習(xí)代碼（html，css，js）?；蛘呤且恍┛蚣?，庫（jquery，vue，react）,或者是各種工具（webpack，gulp）...

    張率功 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<