web前端—基礎知識02講

什麼是XSS

• XSS（跨站腳本攻擊）：是指在向網頁中注入惡意代碼，當用戶瀏覽網頁的時候執行惡意腳本的攻擊方式
• 跨站腳本攻擊的兩種方式：
  • 反射性攻擊：誘使用戶點擊一個嵌入惡意腳本的連接以達到攻擊的目標，目前有不少攻擊者利用論壇、微博發佈含有惡意腳本的URL就屬於這種方式
  • 持久性攻擊：將惡意腳本提交到被攻擊網站的數據庫中，用戶瀏覽網頁時，惡意腳本從數據庫中被加載到頁面執行
• 預防XSS的方式：
  • 經過消毒的方式危險字符進行轉義，httpOnly(js沒法獲取cookie數據)

CSRF(跨站請求僞造)

• 是攻擊者經過跨域請求，已合法的用戶身份進行非法的操做，其原理是利用瀏覽器的cookie和服務器的session盜取用戶信息
• 解決攻擊的主要方式是經過識別請求者身份
  • 在表單中添加令牌token
  • 驗證碼
  • 檢查請求頭中的referer
• 架設防火牆是保證web安全的重要保障

移動端300ms延遲問題

• 產生的緣由：通常狀況下，若是沒有作特殊的處理，移動端的瀏覽器在派發事件的時候會有一個300ms 的延遲，由於手機端事件 touchstart –> touchmove –> touchend or touchcancel –> click，由於在touch事件觸發以後，瀏覽器要判斷用戶是否會作出雙擊屏幕的操做，因此會等待300ms來判斷，再作出是否觸發click事件的處理，因此就會有300ms的延遲
• 解決的方式：
  • FastClick庫它是專門爲移動端瀏覽器300ms問題設計的輕量級的庫，實現的原理是：當設備檢測到touchEnd事件的時候會經過DOM自定義事件當即觸發一個click事件，並把300ms延時的click阻止 掉,把它做用到document上面是由於事件存在冒泡行爲，會冒泡到document上面
  • 禁用瀏覽器的縮放功能：禁用此功能後瀏覽器的縮放功能就會禁用，此時瀏覽器就會禁用默認的雙擊縮放功能而且去掉300ms的延時
  • 更改默認的視口寬度我設備寬度：會默認禁用瀏覽器的默認縮放功能，由於雙擊縮放主要是用來改善桌面站點在移動端瀏覽體驗的。

正則表達式

• 正則表達式的兩種方式：
  • var reg = /xyz/;
  • var reg = new RegExp('xyz');
  • 它們兩種表達方式的區別：字面量的表達方式是在引擎編譯代碼的時就會新建正則表達式，效率是比較高的，第二種方式是在運行時新建正則表達式
• 實例屬性：
  • 與修飾符相關的屬性
  • RegExp.prototype.ignoreCase():返回一個布爾值，表示是否設置了i修飾符
  • RegExp.prototype.global():返回一個布爾值，表示是否設置了g修飾符
  • RegExp.prototype.multiline():返回一個布爾值表示是否設置了m修飾符
  • 與修飾符無關的屬性
  • RegExp.prototype.lastIndex():返回一個整數表示下一次開始搜索的位置
  • RegExp.prototype.source():返回正則表達式的字符串形式，不包括斜杆
• 實例方法
  • RegExp.prototype.test();返回一個布爾值，表示當前模式是否能匹配參數字符串,加不加g修飾符是有差異的
  • RegExp.prototype.exec();用來返回匹配結果，若是發現可以匹配就返回一個數組，成員是匹配成功的字字符串，若是不能就返回一個null，加不加g修飾符也是有很大的區別的
• 字符串的實例方法
  • String.prototype.match();返回一個數組，數組成員是全部匹配的結果
  • String.prototype.search();返回一個整數，結果是匹配成功時的索引
  • String.prototype.replace();
  • String.prototype.split();
• 匹配規則
  • 字面量字符和元字符
    • 字面量字符：例如/a/就表示匹配a
    • 元字符：
      • (.)點字符：匹配會車換行行分割符段分割符之外的全部字符，注意點：碼點大於0XFFF 的點字符不能正確匹配
      • 位置字符：用來提示字符所處的位置，^表示字符串的開始位置，$表示字符串的結束位置
      • | 表示選擇符，或的關係
      • \ 表示
      • \*
      • +
      • ?
      • ()
      • []
      • {}
    • 特殊字符：正則表達式對一些特殊的不能打印的字符提供了表單方式
    • 字符類
      • [^]:若是方括號內的第一個字符是^，表示除了字符類之中的字符，/[^abc]/表示除了abc不能匹配，其餘的都是能夠的
      • [^]:若是方括號中只有一個^，表示匹配一切字符，與(.)相比，它是能夠匹配換行符的，注意點：脫字符只有字字符串的第一個位置纔是有效的
      • -：表示字符的連續範圍，例如：[a-z],[0-9],[1-31]，注意點：最後一個只表示匹配1-3,問不是1-31
    • 預約義字符
      • \d :匹配0-9之間的任意一個數，至關於：[0-9]
      • \D :至關於：[^0-9]
      • \w :匹配任意的字母、數字、下滑線、至關於：[a-zA-Z0-9_]
      • \W :至關於：[^A-Za-z0-9_]
      • \s :匹配空格
      • \S :匹配非空格的字符
      • \b :匹配詞的邊界，也就是說詞首必須獨立，詞尾是否獨立未指定
      • \B :匹配非詞邊界
    • 重複類
      • 模式的精確匹配次數，使用{}表示，{n}表示剛好重複n次，{n,}表示至少重複n次，{n,m}表示至少重複n次，之多重複m次
    • 量詞符:用來設定某個模式出現的次數
      • ?：表示某個模式出現0次或1次，至關於：{0,1}
      • *：表示某個模式出現0次或屢次，至關於：{0,}
      • +：表示某個模式出現1次或屢次，至關於：{1,}
    • 貪婪模式：三個量詞符，默認狀況下是最大可能的匹配，即匹配知道下一個字符不知足匹配 規則爲止，若是咱們自三個量詞符的後面加上一個？就表示是非貪婪模式，只要知足條件就 中止
    • 修飾符：修飾符能夠單個使用也能夠一塊兒使用
      • g:表示全局匹配
      • i:默認狀況下，正則是區分大小寫的，可是加了i修飾符就不會區分大小寫了
      • m:修飾符表示多行模式，會改變^和$的行爲，默認狀況下匹配的是字符串的開始位置和結束位置，加m修飾符表示，^和$還會匹配行首和行尾
    • 組匹配：正則表達式的括號表示分組匹配，括號中的模式能夠用來匹配分組的內容，還可使用\n，n是從1開始的整數，表示引用括號匹配的內容
    • 非捕獲組:(?:x)表示不返回該組匹配的內容，即匹配的結果中不計入這個括號
    • 先行斷言：x(?=y),x只有在y前面才匹配，y不會被計入返回結果
    • 先行否認斷言：x(?!y):表示x只有不在y前面匹配，y不會被計入返回結果

\b的基本使用：
/\bworld/.test('hello world');//true
/\bworld/.test('hello-world');//true
/\bworld/.test('helloworld');//false
//組匹配
/fred+/.test('fredd');//true
/(fred)+/.test('fredfred');//true
複製代碼

字符串字面量和new String()之間的區別：

var s1 = 'abc';
var s2 = new String('abc');
typeof s1;//string
typeof s2;//Object
s2.valueOf();//'abc'
複製代碼

• 上面代碼中s1是字符串，而s2是字符串對象，s2.valueOf()返回的就是對應的原始字符串，字符串對象是一個相似數組的對象，

箭頭函數

• 箭頭函數和普通函數的區別：
  • 箭頭函數沒有prototype(原型)，因此箭頭函數自己是沒有this關鍵字的
  • 箭頭函數中的this是在定義的時候，繼承外層普通函數的this，若是外層函數的this發生變化，箭頭函數的this也是會發生變化的。
  • 箭頭函數外層若是沒有普通函數，嚴格模式或非嚴格模式下它的this指向window，
  • 箭頭函數中不能使用arguments

移動端擴大點擊區域的設置

• 爲了增長用戶體檢，咱們能夠給按鈕設置一個隱藏的擴大區域點擊

.btn{
    width: 30px;
    height: 30px;
    position:relative;//設置父元素爲相對定位
}
.btn::before{
    content: ''
    position:absolution;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
}
<button class='btn'>我是按鈕</button>
複製代碼

babel-runtime 和babel-polyfill

• 若是咱們沒有設置一些規則babel只會轉換新的js語法，而不會轉換新的api
• babel-polyfill:原理是當運行運行環境中並無實現的一些方法，babel-polyfill會作兼容，可是這樣作事會污染全局變量的，並且項目打包之後體積會增大

自定義事件

//建立時間對象
let myEvent = new customEvent('customEventName',{
    detail: {//將須要傳遞的數據寫在detail中，便於在EventListener中獲取到
        a: 1
      }
});
分派事件：因爲自定義事件不是js內置事件，因此咱們須要手動的觸發它
if(window.dispatchEvent) {  //兼容低版本的IE
    window.dispatchEvent(myEvent);
} else {
    window.fireEvent(myEvent);
}

//監聽事件
window.addEventListener('customEventName', e => {
    console.log(e)
    console.log(e.detail.a) // 1
})
複製代碼

CDN

• CDN(content delivery network)內容分發網絡，CDN是構建在網絡之上的內容分發網絡，依靠部署在各地的邊緣服務器，經過中心平臺的負載均衡，內容分發，調度等功能模塊，使用戶就近獲取內容，下降網絡擁塞，提升用戶訪問響應和命中率。
• CDN的關鍵技術在於內容存儲和分發技術
• 負載均衡是整合CDN的核心，負載均衡的準確性和效率直接決定了整個CDN的性能和效率
• 負載均衡技術：是指將網絡的流量儘量的分配到幾個能完成相同功能的服務器和網絡節點上進行處 理，避免部分網絡節點過載而另外一部分網絡節點空閒的不利情況，這樣既能夠挺好網絡的流量，又可 以提升網絡的性能。
• 負載均衡基礎知識
• 高併發之負載均衡
• 防禦牆：防火牆是位於內部網和外部網之間的屏障，它按照系統管理員預先定義好的規則來控制數據包的進出。防火牆是系統的第一道防線，其做用是防止非法用戶的進入

數據扁平化常見的幾種方式

• 第一種方式：join & split
• 第二種方式：toString() & split

垃圾回收機制

• 首先是全局變量不會被回收
• 局部變量會被回收，也就是一個函數一但被運行，函數內的變量是會被回收的
• 只要被另外一個做用域引用就不會被回收

iframe

• iframe元素會建立包含另外一個文檔的內聯框架（即行內框架）
• iframe常見的屬性：

  

• iframe框架原理1
• iframe框架原理2