什么是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) { //兼容低版本的IEwindow.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

轉載于:https://juejin.im/post/5c925b156fb9a07103548995

總結

以上是生活随笔為你收集整理的web前端—面试2的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。