一、從瀏覽器地址欄輸入url到顯示頁(yè)面的步驟
- 輸入U(xiǎn)RL：在瀏覽器的地址欄中輸入要訪問(wèn)的網(wǎng)站的URL（統(tǒng)一資源定位符）。
- DNS解析：瀏覽器會(huì)將URL發(fā)送給DNS服務(wù)器，DNS服務(wù)器負(fù)責(zé)將URL解析為對(duì)應(yīng)的IP地址。
- 建立TCP連接：瀏覽器會(huì)根據(jù)解析得到的IP地址，使用TCP（傳輸控制協(xié)議）與服務(wù)器建立連接。
- 發(fā)起HTTP請(qǐng)求：TCP連接建立后，瀏覽器會(huì)向服務(wù)器發(fā)送HTTP（超文本傳輸協(xié)議）請(qǐng)求，該請(qǐng)求攜帶了瀏覽器想要獲取的資源的信息，如文件路徑、請(qǐng)求方式等。
- 服務(wù)器處理請(qǐng)求：服務(wù)器接收到瀏覽器發(fā)送的HTTP請(qǐng)求后，會(huì)根據(jù)請(qǐng)求的內(nèi)容進(jìn)行相應(yīng)的處理，如查找請(qǐng)求的文件、處理業(yè)務(wù)邏輯等。
- 返回HTTP響應(yīng)：服務(wù)器處理完請(qǐng)求后，會(huì)生成對(duì)應(yīng)的HTTP響應(yīng)，并將響應(yīng)發(fā)送回瀏覽器。
- 接收響應(yīng)內(nèi)容：瀏覽器接收到服務(wù)器返回的HTTP響應(yīng)后，開(kāi)始接收響應(yīng)的內(nèi)容。
- 渲染頁(yè)面：瀏覽器會(huì)根據(jù)接收到的響應(yīng)內(nèi)容，進(jìn)行解析、布局、渲染等操作，將服務(wù)器返回的頁(yè)面內(nèi)容轉(zhuǎn)化為可見(jiàn)的頁(yè)面。
- 顯示頁(yè)面：最后，瀏覽器將渲染完成的頁(yè)面顯示在用戶(hù)的屏幕上，用戶(hù)即可看到訪問(wèn)的網(wǎng)頁(yè)內(nèi)容。
二、window.onload和DOMContentLoaded區(qū)別
"window.onload"和"DOMContentLoaded"都是JavaScript事件，用于在HTML文檔加載完成后執(zhí)行代碼。然而，它們之間有一些不同之處。
- 觸發(fā)時(shí)機(jī)：
- "window.onload"事件在整個(gè)頁(yè)面（包括CSS、圖像和其他資源）加載完成后觸發(fā)。
-
"DOMContentLoaded"事件在DOM樹(shù)構(gòu)建完成后觸發(fā)，即HTML文檔被解析完成后，不包括樣式表、圖片和其他外部資源。
- 執(zhí)行順序：
- "window.onload"事件會(huì)等待所有資源（包括圖片和其他外部資源）加載完畢后才執(zhí)行，因此事件觸發(fā)的時(shí)間可能比"DOMContentLoaded"晚。
- "DOMContentLoaded"事件會(huì)在HTML文檔解析完成后立即觸發(fā)，而不需要等待其他外部資源的加載。
- 適用對(duì)象：
- "window.onload"事件適用于整個(gè)頁(yè)面加載完成后需要執(zhí)行的代碼。
- "DOMContentLoaded"事件適用于只需要操作DOM樹(shù)的腳本，不依賴(lài)于外部資源的加載情況。
綜上所述，"window.onload"事件適用于需要等待所有資源加載完成后執(zhí)行的代碼，而"DOMContentLoaded"事件適用于只需要操作DOM的腳本，在HTML文檔解析完成后立即執(zhí)行。
三、防抖
JS防抖函數(shù)在以下情況下非常有用：
-
當(dāng)用戶(hù)在頁(yè)面上連續(xù)觸發(fā)某個(gè)事件時(shí)，比如連續(xù)點(diǎn)擊按鈕、連續(xù)輸入搜索關(guān)鍵詞等，防抖函數(shù)可以確保只有最后一次觸發(fā)的事件被執(zhí)行。這可以避免不必要的請(qǐng)求發(fā)送或操作執(zhí)行，提高性能和用戶(hù)體驗(yàn)。
-
當(dāng)用戶(hù)在輸入框中連續(xù)輸入內(nèi)容時(shí)，比如搜索框的實(shí)時(shí)搜索功能，防抖函數(shù)可以延遲發(fā)送請(qǐng)求或執(zhí)行搜索操作，直到用戶(hù)停止輸入一段時(shí)間才觸發(fā)，避免多次請(qǐng)求或操作。
下面是一個(gè)使用防抖函數(shù)的例子，以實(shí)現(xiàn)輸入框的實(shí)時(shí)搜索功能：
HTML部分：
<input type="text" id="search-input" placeholder="輸入關(guān)鍵詞進(jìn)行搜索" />
<div id="search-results"></div>
JS部分：
// 定義防抖函數(shù)
function debounce(func, delay) {
let timeoutId = null;
return function() {
// 如果上一次觸發(fā)事件的定時(shí)器還未執(zhí)行完，則取消上一次的定時(shí)器
if (timeoutId) {
clearTimeout(timeoutId);
}
// 設(shè)置新的定時(shí)器
timeoutId = setTimeout(() => {
func.apply(this, arguments);
timeoutId = null
}, delay);
};
}
// 獲取相關(guān)元素
const searchInput = document.getElementById('search-input');
const searchResults = document.getElementById('search-results');
// 定義搜索函數(shù)
function search() {
const keyword = searchInput.value;
// 發(fā)送請(qǐng)求或執(zhí)行搜索操作
// ... (省略實(shí)際邏輯)
// 更新搜索結(jié)果顯示
searchResults.innerText = `正在搜索：${keyword}`;
}
// 使用防抖函數(shù)包裝搜索函數(shù)，并延遲500毫秒觸發(fā)
const debouncedSearch = debounce(search, 500);
// 監(jiān)聽(tīng)輸入框的輸入事件，并使用防抖函數(shù)觸發(fā)搜索
searchInput.addEventListener('input', debouncedSearch);
在上面的示例中，輸入框的輸入事件被防抖函數(shù)包裝起來(lái)，延遲500毫秒觸發(fā)搜索操作。當(dāng)用戶(hù)連續(xù)輸入內(nèi)容時(shí)，防抖函數(shù)會(huì)等待用戶(hù)停止輸入一段時(shí)間后才觸發(fā)搜索，從而避免頻繁的搜索操作。這樣可以減少不必要的請(qǐng)求發(fā)送，提高性能和用戶(hù)體驗(yàn)。
四、節(jié)流
節(jié)流函數(shù)是一種用于控制函數(shù)執(zhí)行頻率的技術(shù)，它可以限制函數(shù)的調(diào)用次數(shù)。通常在高頻率觸發(fā)的事件中使用，例如滾動(dòng)、鼠標(biāo)移動(dòng)和窗口調(diào)整大小等。
以下是一個(gè)使用節(jié)流函數(shù)的例子：
function throttle(func, delay) {
let timeoutId;
return function(...args) {
if (!timeoutId) {
timeoutId = setTimeout(() => {
func.apply(this, args);
timeoutId = null;
}, delay);
}
};
}
// 使用節(jié)流函數(shù)對(duì)滾動(dòng)事件進(jìn)行控制
function handleScroll() {
console.log('Scroll event handled');
}
const throttledScroll = throttle(handleScroll, 200);
window.addEventListener('scroll', throttledScroll);
在上面的例子中，我們定義了一個(gè)名為throttle的節(jié)流函數(shù)。它接受一個(gè)需要進(jìn)行節(jié)流的函數(shù)func和一個(gè)延遲時(shí)間delay作為參數(shù)。當(dāng)調(diào)用throttle返回的函數(shù)時(shí)，它會(huì)在延遲時(shí)間內(nèi)首次觸發(fā)func，然后在延遲時(shí)間內(nèi)的連續(xù)觸發(fā)中忽略掉。
在此例中，我們定義了一個(gè)名為handleScroll的回調(diào)函數(shù)，并將其傳遞給throttle函數(shù)以創(chuàng)建一個(gè)節(jié)流函數(shù)throttledScroll。然后，我們通過(guò)addEventListener將throttledScroll函數(shù)添加為窗口的滾動(dòng)事件處理程序。結(jié)果是，在滾動(dòng)事件觸發(fā)時(shí)，handleScroll函數(shù)最多每200毫秒執(zhí)行一次，從而減少了函數(shù)執(zhí)行的次數(shù)。
五、如何預(yù)防xss攻擊
網(wǎng)站的XSS（跨站腳本攻擊）是指攻擊者利用網(wǎng)站漏洞，將惡意腳本注入到網(wǎng)頁(yè)中，從而在用戶(hù)瀏覽網(wǎng)頁(yè)時(shí)執(zhí)行惡意代碼。這種攻擊可以導(dǎo)致攻擊者竊取用戶(hù)的敏感信息、修改網(wǎng)頁(yè)內(nèi)容、甚至控制用戶(hù)的會(huì)話。
為了預(yù)防XSS攻擊，網(wǎng)站開(kāi)發(fā)者可以采取以下措施:
-
輸入驗(yàn)證和過(guò)濾：對(duì)用戶(hù)輸入的數(shù)據(jù)進(jìn)行過(guò)濾，剔除或轉(zhuǎn)義特殊字符，確保只接收到合法的數(shù)據(jù)。
-
輸出編碼：在將用戶(hù)輸入的數(shù)據(jù)顯示到網(wǎng)頁(yè)上之前，對(duì)其進(jìn)行編碼處理，轉(zhuǎn)義特殊字符，防止惡意代碼執(zhí)行。
-
使用CSP（內(nèi)容安全策略）：CSP是一種網(wǎng)頁(yè)安全機(jī)制，通過(guò)配置HTTP頭部來(lái)限制網(wǎng)頁(yè)中可加載和執(zhí)行的資源。它可以阻止惡意腳本的注入和執(zhí)行。
-
設(shè)置HttpOnly標(biāo)志：將用戶(hù)的敏感信息存儲(chǔ)在帶有HttpOnly標(biāo)志的cookie中，防止XSS攻擊者通過(guò)腳本竊取這些信息。
下面是一個(gè)XSS攻擊的例子：
假設(shè)一個(gè)社交媒體網(wǎng)站允許用戶(hù)發(fā)布評(píng)論，并將這些評(píng)論顯示在其他用戶(hù)的瀏覽器中。攻擊者在評(píng)論中插入了一個(gè)惡意的腳本代碼，如以下JavaScript代碼：
<script>
alert("惡意代碼執(zhí)行");
// 進(jìn)行其他惡意操作
</script>
當(dāng)其他用戶(hù)瀏覽包含該評(píng)論的頁(yè)面時(shí)，惡意腳本會(huì)自動(dòng)執(zhí)行，彈出一個(gè)對(duì)話框。這可以導(dǎo)致用戶(hù)的敏感信息被竊取或進(jìn)行其他惡意操作。
為了預(yù)防這樣的攻擊，網(wǎng)站可以對(duì)用戶(hù)輸入的評(píng)論內(nèi)容進(jìn)行過(guò)濾，將特殊字符進(jìn)行轉(zhuǎn)義，如將 < 替換為 <，將 > 替換為 > 等。這樣即使惡意腳本被注入，也不會(huì)被瀏覽器識(shí)別為可執(zhí)行的代碼。同時(shí)，網(wǎng)站還應(yīng)該采取其他措施，如使用CSP來(lái)限制加載資源和設(shè)置HttpOnly標(biāo)志來(lái)保護(hù)用戶(hù)的敏感信息。
六、如何預(yù)防xsrf攻擊
跨站請(qǐng)求偽造（Cross-Site Request Forgery，CSRF）是一種攻擊方式，攻擊者通過(guò)欺騙用戶(hù)在已登錄的網(wǎng)站上完成一些未經(jīng)用戶(hù)授權(quán)的操作，通常是利用用戶(hù)的身份去執(zhí)行一些針對(duì)該網(wǎng)站的請(qǐng)求。這種攻擊方式可能導(dǎo)致賬戶(hù)信息、密碼、個(gè)人資料泄露，或者進(jìn)行惡意操作。
為了預(yù)防XSRF攻擊，可以使用以下方法：
- 使用CSRF令牌：在表單中添加一個(gè)隱藏字段，該字段包含一個(gè)隨機(jī)產(chǎn)生的令牌。在用戶(hù)提交表單時(shí)，服務(wù)器會(huì)驗(yàn)證令牌的有效性，如果令牌不匹配，則拒絕請(qǐng)求。
示例：
<form action="/deleteUser" method="post">
<input type="hidden" name="csrf_token" value="隨機(jī)生成的令牌" />
<!-- 其他表單字段 -->
<input type="submit" value="刪除用戶(hù)" />
</form>
- SameSite Cookie屬性：使用SameSite屬性可以限制Cookie只能在同一站點(diǎn)內(nèi)進(jìn)行請(qǐng)求，防止攻擊者盜用Cookie進(jìn)行跨站請(qǐng)求。
示例：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-805242.html
// 設(shè)置SameSite屬性為Strict
response.setHeader("Set-Cookie", "sessionId=xxx;SameSite=Strict");
- 增加驗(yàn)證碼：在一些關(guān)鍵操作（如支付、修改密碼等）中，可以添加驗(yàn)證碼驗(yàn)證，確保用戶(hù)是真實(shí)操作。
總之，防范XSRF攻擊的關(guān)鍵是要確保請(qǐng)求的合法性，通過(guò)采取以上措施可以有效預(yù)防這種攻擊。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-805242.html
到了這里，關(guān)于前端常見(jiàn)面試題之防抖、節(jié)流、xss、xsrf的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
