前端知識雜談

fobnn 發布于2019-08-30 11:23 / 3054人閱讀

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

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

瀏覽器渲染 從輸入網址到顯示網頁的過程分析

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

H5 新特性

語義化標簽：header、footer、section、nav、aside、article

增強型表單：input 的多個 type

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

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

音頻視頻：audio、video

繪畫：canvas

地理定位：geolocation

拖拽：drag事件+dataTransfer+FileReader

本地存儲：localStorage - 沒有時間限制的數據存儲；sessionStorage - 針對一個 session 的數據存儲，當用戶關閉瀏覽器窗口后，數據會被刪除

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

WebSocket：單個 TCP 連接上進行全雙工通訊的協議

前端安全問題 CSRF

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

檢查報頭中的Referer參數確保請求發自正確的網站（但XHR請求可調用setRequestHeader方法來修改Referer報頭）；

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

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

XSS

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

協議

http

CSS CSS3 新特性

選擇器

背景和邊框

文本效果

2D/3D 轉換

動畫、過渡

多列布局

用戶界面

兩欄分布

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

JavaScript this指向

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

call：立即調用，第二個參數按順序傳遞

apply：立即調用，第二個參數放在數組里

bind：返回對應函數，便于稍后調用；

柯里化

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

// 普通的add函數
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

好處

參數復用

提前確認

延遲運行

經典面試題

// 實現一個add方法，使計算結果能夠滿足如下預期：
add(1)(2)(3) = 6;
add(1, 2, 3)(4) = 10;
add(1)(2)(3)(4)(5) = 15;

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

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

    // 利用toString隱式轉換的特性，當最后執行時隱式轉換，并計算最終的值返回
    _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、關鍵字: let 和 const

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

2、解構賦值

云服務器 GPU云服務器前端知識前端知識阿里云 html前端知識前端開發基礎知識

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114962.html

前端隨筆（雜談）

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

caohaoyu 2019-04-23 13:25 評論0 收藏0
前端知識雜談

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

Cruise_Chan 2019-08-02 15:31 評論0 收藏0
前端知識雜談

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

lingdududu 2019-08-23 18:39 評論0 收藏0
[雜談]了解一些額外知識，讓前端開發錦上添花

摘要：對的請求，也是要有一個了解，比如協議，請求方式，請求過程，結果狀態碼等。教程協議詳解經典面試題一個故事講完響應狀態碼上面提到響應狀態碼，在這里也簡單寫下。勸了別人無數次，讓別人喝了雞湯，幫別人填坑，自己卻掉了坑 1.前言在前端學習里面，很多人都是注重學習代碼（html，css，js）。或者是一些框架，庫（jquery，vue，react）,或者是各種工具（webpack，gulp）...

vvpvvp 2019-08-22 18:15 評論0 收藏0
[雜談]了解一些額外知識，讓前端開發錦上添花

摘要：對的請求，也是要有一個了解，比如協議，請求方式，請求過程，結果狀態碼等。教程協議詳解經典面試題一個故事講完響應狀態碼上面提到響應狀態碼，在這里也簡單寫下。勸了別人無數次，讓別人喝了雞湯，幫別人填坑，自己卻掉了坑 1.前言在前端學習里面，很多人都是注重學習代碼（html，css，js）。或者是一些框架，庫（jquery，vue，react）,或者是各種工具（webpack，gulp）...

張率功 2019-08-02 10:45 評論0 收藏0