如何掌握性能優(yōu)化、Web安全、Linux常用命令

本篇內(nèi)容介紹了“如何掌握性能優(yōu)化、Web安全、Linux常用命令”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

 1.性能優(yōu)化
1.1 原則

• ①多使用內(nèi)存、緩存、或其他方法

• ②減少CPU計(jì)算量，減少網(wǎng)絡(luò)加載耗時(shí)

• ③適應(yīng)于所有編程的性能優(yōu)化——空間換時(shí)間

1.2 讓加載更快

• ①減少資源體積：壓縮代碼

• ②減少訪問(wèn)次數(shù)：合并代碼、SSR服務(wù)器端渲染，緩存

• ③使用更快的網(wǎng)絡(luò)：CDN

1.3 讓渲染更快

• ①CSS放在head，JS放在body最下面

• ②盡早開(kāi)始執(zhí)行JS，用DOMContentLoaded觸發(fā)

• ③懶加載（圖片懶加載、下滑加載更多、分頁(yè)器）

• ④對(duì)DOM查詢進(jìn)行緩存

• ⑤頻繁的DOM操作，合并到一起插入到DOM結(jié)構(gòu)

• ⑥節(jié)流、防抖等常用性能優(yōu)化方法

1.4 緩存

• ①靜態(tài)資源加hash后綴，根據(jù)文件內(nèi)容計(jì)算hash

• ②文件內(nèi)容不變，則hash不變，則url不變

• ③url和文件不變，則會(huì)自動(dòng)觸發(fā)Http緩存機(jī)制，返回304

1.5 SSR

• ①服務(wù)器端渲染：將網(wǎng)頁(yè)和數(shù)據(jù)一起加載，一起渲染

• ②非SSR（前后端分離）：先加載網(wǎng)頁(yè)，再加載數(shù)據(jù)，再渲染數(shù)據(jù)

1.6 懶加載

• 頁(yè)面內(nèi)容數(shù)據(jù)過(guò)多，可以做分頁(yè)器，這樣即可以節(jié)省某個(gè)頁(yè)面加載時(shí)間

• 滑動(dòng)懶加載，當(dāng)滑到底部沒(méi)數(shù)據(jù)的時(shí)候再加載新的內(nèi)容

• 點(diǎn)擊懶加載，點(diǎn)擊按鈕，類似加載更多觸發(fā)加載新的內(nèi)容

1.7 防抖及其封裝
「防抖」

• 防抖，顧名思義，防止抖動(dòng)，以免把一次事件誤以為多次事件，敲鍵盤就是一個(gè)每天都會(huì)接觸到的防抖操作

• 「【防抖重在清零】」 （看完防抖節(jié)流再體會(huì)一下這個(gè)重點(diǎn)）

「應(yīng)用場(chǎng)景」（幫助你更好理解防抖）

• ①登錄、發(fā)短信等按鈕避免用戶點(diǎn)擊太快，以至于發(fā)送了多次請(qǐng)求，需要防抖

• ②調(diào)整瀏覽器窗口大小時(shí)，resize次數(shù)過(guò)于頻繁，造成計(jì)算過(guò)多，此時(shí)需要一次到位

• ③文本編輯器實(shí)時(shí)保存，當(dāng)無(wú)任何更改操作1秒后進(jìn)行保存

• ④用戶輸入結(jié)束或暫停時(shí)，才會(huì)觸發(fā)change事件，類似搜索框中輸入信息停下來(lái)1秒后才會(huì)出現(xiàn)可能要搜索的內(nèi)容

「手寫防抖封裝」

function debounce ( fn , delay = 500 ) {       let timer = null // timer在閉包中，不對(duì)外暴露，以免不小心獲取進(jìn)行修改造成錯(cuò)誤      return function () {         if( timer ){             clearTimeout( timer )         } // 清空定時(shí)器          timer = setTimeout( () => {              fn.apply( this , arguments )              timer = null          } , delay )     }  }

1.8 節(jié)流及其封裝
「節(jié)流」

• 顧名思義，控制水的流量?？刂剖录l(fā)生的頻率，如控制為1秒發(fā)生一次，甚至1分鐘發(fā)生一次。與服務(wù)端及網(wǎng)關(guān)控制的限流類似

• 「【節(jié)流重在加鎖】」

「應(yīng)用場(chǎng)景」（幫助你更好理解防抖）

• ①scroll事件，控制每隔一秒計(jì)算一次位置信息

• ②瀏覽器播放事件，控制每隔一秒計(jì)算一次進(jìn)度信息

• ③拖拽一個(gè)元素時(shí)，要隨時(shí)拿到該元素的被拖拽的位置，直接用drag事件，會(huì)頻繁觸發(fā)，很容易導(dǎo)致卡頓。此時(shí)采用節(jié)流，無(wú)論拖拽速度多快，都控制在每隔100ms觸發(fā)一次

「手寫節(jié)流封裝」

function throttle ( fn , delay = 100 ) {      let timer = null      return function (){          if( timer ){             return         }          timer = setTimeout( () => {              fn.apply( this , arguments ) // 這里不能用fn（），會(huì)報(bào)錯(cuò)，無(wú)法獲得事件源對(duì)象event              timer = null          } , delay ) // delay設(shè)置的時(shí)間內(nèi)重復(fù)執(zhí)行的定時(shí)任務(wù)會(huì)被清空     } }

1.9 為什么防抖的是clearTimeout(timer)，而節(jié)流的是return？

• 防抖是觸發(fā)間隔大于time觸發(fā)，所以每次在小于間隔time要清除上個(gè)定時(shí)器，而節(jié)流是不管time內(nèi)觸發(fā)多少次，只會(huì)每隔time時(shí)間觸發(fā)一次，所以用return

• 假設(shè)time=100ms，一個(gè)人每50ms輸入一個(gè)字符，連續(xù)10次，即500ms后防抖只會(huì)觸發(fā)一次，而節(jié)流會(huì)觸發(fā)5次。為什么呢？因?yàn)榉蓝兜囊馑技摧斎胪晖Ｖ?00ms后觸發(fā)事件，而節(jié)流是控制100ms觸發(fā)一次事件，所以防抖觸發(fā)一次，節(jié)流會(huì)觸發(fā)五次。（結(jié)合「體會(huì)防抖重在清零，節(jié)流重在加鎖」這兩句話）

2.Web安全
2.1 XSS攻擊
「XSS跨站請(qǐng)求攻擊」
以下都是可能發(fā)生的XSS注入攻擊

• 在 HTML 中內(nèi)嵌的文本中，惡意內(nèi)容以 script 標(biāo)簽形成注入

• 在內(nèi)聯(lián)的 JavaScript中，拼接的數(shù)據(jù)突破了原本的限制（字符串，變量，方法名等）

• 在標(biāo)簽屬性中，惡意內(nèi)容包含引號(hào)，從而突破屬性值的限制，注入其他屬性或者標(biāo)簽

• 在標(biāo)簽的 href、src 等屬性中，包含 javascript: 等可執(zhí)行代碼

• 在 onload、onerror、onclick 等事件中，注入不受控制代碼

• 在 style 屬性和標(biāo)簽中，包含類似 background-image:url("javascript:..."); 的代碼（新版本瀏覽器已經(jīng)可以防范）

• 在 style 屬性和標(biāo)簽中，包含類似 expression(...) 的 CSS 表達(dá)式代碼（新版本瀏覽器已經(jīng)可以防范）

• 「XSS攻擊場(chǎng)景」

• 一個(gè)博客網(wǎng)站，我發(fā)表一篇博客，其中嵌入<script>腳本，腳本內(nèi)容：獲取cookie，發(fā)送到我的服務(wù)器（服務(wù)器配合跨域）閱讀了的人的cookie就會(huì)被盜取

「XSS預(yù)防」

• ①替換特殊字符，如<變?yōu)?amp;lt;，>變?yōu)?amp;gt;

• ②那么<script>就會(huì)變?yōu)?amp;lt;script&gt;，直接顯示，而不會(huì)作為腳本執(zhí)行

• ③前端要替換，后端也要做替換，雙保險(xiǎn)

• ④主流的前端框架已做好預(yù)防

2.2 XSRF攻擊
「XSRF跨站請(qǐng)求偽裝」
「XSRF攻擊場(chǎng)景」

• 你正在購(gòu)物，看中了某個(gè)商品，商品id是100。付費(fèi)接口是xxx.com/pay?id=100，但沒(méi)有任何驗(yàn)證（現(xiàn)在的付費(fèi)都會(huì)有驗(yàn)證，這里作為講解，所以假設(shè)沒(méi)有驗(yàn)證）。我是攻擊者，我看中了一個(gè)商品，id是200。我想你發(fā)送了一封電子郵件，郵件標(biāo)題很吸引人。但其實(shí)郵件正文隱藏著<img src='xxx.com/pay?id=200'>（并附帶有別的執(zhí)行付費(fèi)腳本）你點(diǎn)擊查看了這封郵件，就幫我購(gòu)買了id是200的商品。

「XSRF預(yù)防」

• 使用post接口

• 增加驗(yàn)證，例如密碼、短信驗(yàn)證碼、指紋等

3.描述從輸入url到渲染出頁(yè)面的整個(gè)過(guò)程
「加載過(guò)程」

• ①DNS解析：域名 -> IP地址

• ②瀏覽器根據(jù)IP地址向服務(wù)器發(fā)起Http請(qǐng)求

• ③服務(wù)器處理Http請(qǐng)求，并返回給瀏覽器

「渲染過(guò)程」

• ①根據(jù)HTML代碼生成DOM Tree

• ②根據(jù)CSS代碼生成CSSOM

• ③將DOM Tree 和 CSSOM 整合形成 Render Tree

• ④根據(jù)Render Tree渲染頁(yè)面

• ⑤遇到<script>則暫停渲染，優(yōu)先加載并執(zhí)行JS代碼（JS代碼有可能改變DOM結(jié)構(gòu)而重新渲染），完成再繼續(xù)

• ⑥直至把Render Tree渲染完成

4.Linux常用命令
「文件及文件夾操作」

• ls xxx 查看文件夾（平鋪展開(kāi)）

• ls -a （all的意思，包括以.開(kāi)頭的隱藏文件）

• ll 查看文件夾（列表）

• ll xxx （查看xxx文件夾下的文件）

• mkdir xxx （創(chuàng)建xxx文件夾）

• rm -rf xxx （把xxx及其所有子文件全部刪除）

• cd xxx （進(jìn)入xxx目錄）

• mv abc xxx （把a(bǔ)bc文件重命名為xxx文件）

• mv xxx sss路徑 （把xxx文件移到sss路徑目錄）

• cp a.js a1.js （拷貝、復(fù)制a.js為a1.js）rm a1.js （直接刪除單個(gè)文件）

• touch d.js （新建文件d.js）

• vi d.js （新建或進(jìn)入一個(gè)文件d.js并且進(jìn)入編輯）

• cat xxx （查看xxx文件所有內(nèi)容但不進(jìn)入）

• head xxx （查看xxx文件前面幾行也不進(jìn)入）

• grep "babel" xxx （在xxx文件里查找babel內(nèi)容）

「Vim編輯器操作」

• 按 i 開(kāi)始編輯

• Esc 可退出編輯模式

• :w 保存寫入:q 退出

• :wq （保存后退出）

• :q! （強(qiáng)制退出，不保存）

“如何掌握性能優(yōu)化、Web安全、Linux常用命令”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！