建站
咨詢
售后
建站咨詢
新聞中心
本篇內(nèi)容介紹了“如何掌握性能優(yōu)化、Web安全、Linux常用命令”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比恩平網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式恩平網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋恩平地區(qū)。費(fèi)用合理售后完善，10年實(shí)體公司更值得信賴。
1.性能優(yōu)化
1.1 原則
①多使用內(nèi)存、緩存、或其他方法
②減少CPU計(jì)算量，減少網(wǎng)絡(luò)加載耗時(shí)
③適應(yīng)于所有編程的性能優(yōu)化——空間換時(shí)間
1.2 讓加載更快
①減少資源體積：壓縮代碼
②減少訪問次數(shù)：合并代碼、SSR服務(wù)器端渲染，緩存
③使用更快的網(wǎng)絡(luò)：cdn
1.3 讓渲染更快
①CSS放在head，JS放在body最下面
②盡早開始執(zhí)行JS，用DOMContentLoaded觸發(fā)
③懶加載（圖片懶加載、下滑加載更多、分頁器）
④對(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)頁和數(shù)據(jù)一起加載，一起渲染
②非SSR（前后端分離）：先加載網(wǎng)頁，再加載數(shù)據(jù)，再渲染數(shù)據(jù)
1.6 懶加載
頁面內(nèi)容數(shù)據(jù)過多，可以做分頁器，這樣即可以節(jié)省某個(gè)頁面加載時(shí)間
滑動(dòng)懶加載，當(dāng)滑到底部沒數(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)用場景」（幫助你更好理解防抖）
①登錄、發(fā)短信等按鈕避免用戶點(diǎn)擊太快，以至于發(fā)送了多次請(qǐng)求，需要防抖
②調(diào)整瀏覽器窗口大小時(shí)，resize次數(shù)過于頻繁，造成計(jì)算過多，此時(shí)需要一次到位
③文本編輯器實(shí)時(shí)保存，當(dāng)無任何更改操作1秒后進(jìn)行保存
④用戶輸入結(jié)束或暫停時(shí)，才會(huì)觸發(fā)change事件，類似搜索框中輸入信息停下來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é)流」
顧名思義，控制水的流量。控制事件發(fā)生的頻率，如控制為1秒發(fā)生一次，甚至1分鐘發(fā)生一次。與服務(wù)端及網(wǎng)關(guān)控制的限流類似
「【節(jié)流重在加鎖】」
「應(yīng)用場景」（幫助你更好理解防抖）
①scroll事件，控制每隔一秒計(jì)算一次位置信息
②瀏覽器播放事件，控制每隔一秒計(jì)算一次進(jìn)度信息
③拖拽一個(gè)元素時(shí)，要隨時(shí)拿到該元素的被拖拽的位置，直接用drag事件，會(huì)頻繁觸發(fā)，很容易導(dǎo)致卡頓。此時(shí)采用節(jié)流，無論拖拽速度多快，都控制在每隔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ò)，無法獲得事件源對(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攻擊場景」
一個(gè)博客網(wǎng)站，我發(fā)表一篇博客，其中嵌入
<blockquote id="qtkpi"><ruby id="qtkpi"></ruby></blockquote> <mark id="qtkpi"></mark>