什么是XSS

• XSS（跨站腳本攻擊）：是指在向網(wǎng)頁中注入惡意代碼，當(dāng)用戶瀏覽網(wǎng)頁的時(shí)候執(zhí)行惡意腳本的攻擊方式
• 跨站腳本攻擊的兩種方式：
  • 反射性攻擊：誘使用戶點(diǎn)擊一個(gè)嵌入惡意腳本的鏈接以達(dá)到攻擊的目標(biāo)，目前有很多攻擊者利用論壇、微博發(fā)布含有惡意腳本的URL就屬于這種方式
  • 持久性攻擊：將惡意腳本提交到被攻擊網(wǎng)站的數(shù)據(jù)庫中，用戶瀏覽網(wǎng)頁時(shí)，惡意腳本從數(shù)據(jù)庫中被加載到頁面執(zhí)行
• 預(yù)防XSS的方式：
  • 通過消毒的方式危險(xiǎn)字符進(jìn)行轉(zhuǎn)義，httpOnly(js無法獲取cookie數(shù)據(jù))

CSRF(跨站請求偽造)

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

移動(dòng)端300ms延遲問題

• 產(chǎn)生的原因：一般情況下，如果沒有做特殊的處理，移動(dòng)端的瀏覽器在派發(fā)事件的時(shí)候會(huì)有一個(gè)300ms 的延遲，因?yàn)槭謾C(jī)端事件 touchstart –> touchmove –> touchend or touchcancel –> click，因?yàn)樵趖ouch事件觸發(fā)之后，瀏覽器要判斷用戶是否會(huì)做出雙擊屏幕的操作，所以會(huì)等待300ms來判斷，再做出是否觸發(fā)click事件的處理，所以就會(huì)有300ms的延遲
• 解決的方式：
  • FastClick庫它是專門為移動(dòng)端瀏覽器300ms問題設(shè)計(jì)的輕量級的庫，實(shí)現(xiàn)的原理是：當(dāng)設(shè)備檢測到touchEnd事件的時(shí)候會(huì)通過DOM自定義事件立即觸發(fā)一個(gè)click事件，并把300ms延時(shí)的click阻止 掉,把它作用到document上面是因?yàn)槭录嬖诿芭菪袨?#xff0c;會(huì)冒泡到document上面
  • 禁用瀏覽器的縮放功能：禁用此功能后瀏覽器的縮放功能就會(huì)禁用，此時(shí)瀏覽器就會(huì)禁用默認(rèn)的雙擊縮放功能并且去掉300ms的延時(shí)
  • 更改默認(rèn)的視口寬度我設(shè)備寬度：會(huì)默認(rèn)禁用瀏覽器的默認(rèn)縮放功能，因?yàn)殡p擊縮放主要是用來改善桌面站點(diǎn)在移動(dòng)端瀏覽體驗(yàn)的。

正則表達(dá)式

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

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

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

var s1 = 'abc'; var s2 = new String('abc'); typeof s1;//string typeof s2;//Object s2.valueOf();//'abc' 復(fù)制代碼

• 上面代碼中s1是字符串，而s2是字符串對象，s2.valueOf()返回的就是對應(yīng)的原始字符串，字符串對象是一個(gè)類似數(shù)組的對象，

箭頭函數(shù)

• 箭頭函數(shù)和普通函數(shù)的區(qū)別：
  • 箭頭函數(shù)沒有prototype(原型)，所以箭頭函數(shù)本身是沒有this關(guān)鍵字的
  • 箭頭函數(shù)中的this是在定義的時(shí)候，繼承外層普通函數(shù)的this，如果外層函數(shù)的this發(fā)生變化，箭頭函數(shù)的this也是會(huì)發(fā)生變化的。
  • 箭頭函數(shù)外層如果沒有普通函數(shù)，嚴(yán)格模式或非嚴(yán)格模式下它的this指向window，
  • 箭頭函數(shù)中不能使用arguments

移動(dòng)端擴(kuò)大點(diǎn)擊區(qū)域的設(shè)置

• 為了增加用戶體檢，我們可以給按鈕設(shè)置一個(gè)隱藏的擴(kuò)大區(qū)域點(diǎn)擊

.btn{width: 30px;height: 30px;position:relative;//設(shè)置父元素為相對定位 } .btn::before{content: ''position:absolution;top: -10px;right: -10px;bottom: -10px;left: -10px; } <button class='btn'>我是按鈕</button> 復(fù)制代碼

babel-runtime 和babel-polyfill

• 如果我們沒有設(shè)置一些規(guī)則babel只會(huì)轉(zhuǎn)換新的js語法，而不會(huì)轉(zhuǎn)換新的api
• babel-polyfill:原理是當(dāng)運(yùn)行運(yùn)行環(huán)境中并沒有實(shí)現(xiàn)的一些方法，babel-polyfill會(huì)做兼容，但是這樣做事會(huì)污染全局變量的，而且項(xiàng)目打包以后體積會(huì)增大

自定義事件

//創(chuàng)建時(shí)間對象 let myEvent = new customEvent('customEventName',{detail: {//將需要傳遞的數(shù)據(jù)寫在detail中，便于在EventListener中獲取到a: 1} }); 分派事件：由于自定義事件不是js內(nèi)置事件，所以我們需要手動(dòng)的觸發(fā)它 if(window.dispatchEvent) { //兼容低版本的IEwindow.dispatchEvent(myEvent); } else {window.fireEvent(myEvent); }//監(jiān)聽事件 window.addEventListener('customEventName', e => {console.log(e)console.log(e.detail.a) // 1 }) 復(fù)制代碼

CDN

• CDN(content delivery network)內(nèi)容分發(fā)網(wǎng)絡(luò)，CDN是構(gòu)建在網(wǎng)絡(luò)之上的內(nèi)容分發(fā)網(wǎng)絡(luò)，依靠部署在各地的邊緣服務(wù)器，通過中心平臺(tái)的負(fù)載均衡，內(nèi)容分發(fā)，調(diào)度等功能模塊，使用戶就近獲取內(nèi)容，降低網(wǎng)絡(luò)擁塞，挺高用戶訪問響應(yīng)和命中率。
• CDN的關(guān)鍵技術(shù)在于內(nèi)容存儲(chǔ)和分發(fā)技術(shù)
• 負(fù)載均衡是整合CDN的核心，負(fù)載均衡的準(zhǔn)確性和效率直接決定了整個(gè)CDN的性能和效率
• 負(fù)載均衡技術(shù)：是指將網(wǎng)絡(luò)的流量盡可能的分配到幾個(gè)能完成相同功能的服務(wù)器和網(wǎng)絡(luò)節(jié)點(diǎn)上進(jìn)行處 理，避免部分網(wǎng)絡(luò)節(jié)點(diǎn)過載而另一部分網(wǎng)絡(luò)節(jié)點(diǎn)空閑的不利狀況，這樣既可以挺好網(wǎng)絡(luò)的流量，又可 以提高網(wǎng)絡(luò)的性能。
• 負(fù)載均衡基礎(chǔ)知識(shí)
• 高并發(fā)之負(fù)載均衡
• 防護(hù)墻：防火墻是位于內(nèi)部網(wǎng)和外部網(wǎng)之間的屏障，它按照系統(tǒng)管理員預(yù)先定義好的規(guī)則來控制數(shù)據(jù)包的進(jìn)出。防火墻是系統(tǒng)的第一道防線，其作用是防止非法用戶的進(jìn)入

數(shù)據(jù)扁平化常見的幾種方式

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

垃圾回收機(jī)制

• 首先是全局變量不會(huì)被回收
• 局部變量會(huì)被回收，也就是一個(gè)函數(shù)一但被運(yùn)行，函數(shù)內(nèi)的變量是會(huì)被回收的
• 只要被另一個(gè)作用域引用就不會(huì)被回收

iframe

• iframe元素會(huì)創(chuàng)建包含另一個(gè)文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）
• iframe常見的屬性：
• iframe框架原理1
• iframe框架原理2

轉(zhuǎn)載于:https://juejin.im/post/5c925b156fb9a07103548995

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。