前端面試需要知道的知識(shí) 17題（非原創(chuàng)）

我是大自然的搬運(yùn)工

1、w3c標(biāo)準(zhǔn)有哪些

1.結(jié)構(gòu)標(biāo)準(zhǔn)，代表語(yǔ)言是xHTML

2.表現(xiàn)標(biāo)準(zhǔn)，代表語(yǔ)言是CSS

3.動(dòng)作標(biāo)準(zhǔn)，代表語(yǔ)言是JavaScrip

  • 例如

    1.同一個(gè)頁(yè)面當(dāng)中，同名的ID會(huì)產(chǎn)生沖突。所以以ID定義樣式的必須改成類引用。

    2.所有的標(biāo)簽都使用小寫。

    3.JS和CSS外部引入文件必須加上類型定義。就是type屬性必須填寫

2、移動(dòng)端不同瀏覽器之間的差異

有點(diǎn)多，詳看參考鏈接 https://blog.csdn.net/zytyxz/article/details/78492428

3、react和vue之間的區(qū)別

  • 1.監(jiān)聽數(shù)據(jù)變化的實(shí)現(xiàn)原理不同
    Vue通過(guò) getter/setter以及一些函數(shù)的劫持，能精確知道數(shù)據(jù)變化。

    React默認(rèn)是通過(guò)比較引用的方式（diff）進(jìn)行的，如果不優(yōu)化可能導(dǎo)致大量不必要的VDOM的重新渲染。為什么React不精確監(jiān)聽數(shù)據(jù)變化呢？這是因?yàn)閂ue和React設(shè)計(jì)理念上的區(qū)別，Vue使用的是可變數(shù)據(jù)，而React更強(qiáng)調(diào)數(shù)據(jù)的不可變，兩者沒(méi)有好壞之分，Vue更加簡(jiǎn)單，而React構(gòu)建大型應(yīng)用的時(shí)候更加魯棒。

  • 2.數(shù)據(jù)流的不同
    Vue1.0中可以實(shí)現(xiàn)兩種雙向綁定：父子組件之間，props可以雙向綁定；組件與DOM之間可以通過(guò)v-model雙向綁定。Vue2.x中去掉了第一種，也就是父子組件之間不能雙向綁定了（但是提供了一個(gè)語(yǔ)法糖自動(dòng)幫你通過(guò)事件的方式修改），并且Vue2.x已經(jīng)不鼓勵(lì)組件對(duì)自己的 props進(jìn)行任何修改了。

    React一直不支持雙向綁定，提倡的是單向數(shù)據(jù)流，稱之為onChange/setState()模式。不過(guò)由于我們一般都會(huì)用Vuex以及Redux等單向數(shù)據(jù)流的狀態(tài)管理框架，因此很多時(shí)候我們感受不到這一點(diǎn)的區(qū)別了。

  • 3.模板渲染方式的不同
    模板的語(yǔ)法不同，React是通過(guò)JSX渲染模板。而Vue是通過(guò)一種拓展的HTML語(yǔ)法進(jìn)行渲染

    模板的原理不同，React是在組件JS代碼中，通過(guò)原生JS實(shí)現(xiàn)模板中的常見語(yǔ)法，比如插值，條件，循環(huán)等，都是通過(guò)JS語(yǔ)法實(shí)現(xiàn)的，更加純粹更加原生。而Vue是在和組件JS代碼分離的單獨(dú)的模板中，通過(guò)指令來(lái)實(shí)現(xiàn)的，比如條件語(yǔ)句就需要 v-if 來(lái)實(shí)現(xiàn)對(duì)這一點(diǎn)，這樣的做法顯得有些獨(dú)特，會(huì)把HTML弄得很亂

  • 4，渲染過(guò)程不同
    Vue可以更快地計(jì)算出Virtual DOM的差異，這是由于它在渲染過(guò)程中，會(huì)跟蹤每一個(gè)組件的依賴關(guān)系，不需要重新渲染整個(gè)組件樹。

    React在應(yīng)用的狀態(tài)被改變時(shí)，全部子組件都會(huì)重新渲染。通過(guò)shouldComponentUpdate這個(gè)生命周期方法可以進(jìn)行控制，但Vue將此視為默認(rèn)的優(yōu)化。

  • 5.框架本質(zhì)不同
    Vue本質(zhì)是MVVM框架，由MVC發(fā)展而來(lái)；

    React是前端組件化框架，由后端組件化發(fā)展而來(lái)。
    ————————————————
    版權(quán)聲明：本文為CSDN博主「秦罹」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
    原文鏈接：https://blog.csdn.net/qq_26190177/article/details/93741368

4、es規(guī)范是什么

太多了
請(qǐng)看下面的鏈接
https://yq.aliyun.com/articles/617716?utm_content=m_1000007931

5、http https協(xié)議是什么

基本概念
  • HTTP：是互聯(lián)網(wǎng)上應(yīng)用最為廣泛的一種網(wǎng)絡(luò)協(xié)議，是一個(gè)客戶端和服務(wù)器端請(qǐng)求和應(yīng)答的標(biāo)準(zhǔn)（TCP），用于從WWW服務(wù)器傳輸超文本到本地瀏覽器的傳輸協(xié)議，它可以使瀏覽器更加高效，使網(wǎng)絡(luò)傳輸減少。
  • HTTPS：是以安全為目標(biāo)的HTTP通道，簡(jiǎn)單講是HTTP的安全版，即HTTP下加入SSL層，HTTPS的安全基礎(chǔ)是SSL，因此加密的詳細(xì)內(nèi)容就需要SSL。

HTTPS協(xié)議的主要作用可以分為兩種：一種是建立一個(gè)信息安全通道，來(lái)保證數(shù)據(jù)傳輸?shù)陌踩?；另一種就是確認(rèn)網(wǎng)站的真實(shí)性。

區(qū)別

1、https協(xié)議需要到ca申請(qǐng)證書，一般免費(fèi)證書較少，因而需要一定費(fèi)用。

2、http是超文本傳輸協(xié)議，信息是明文傳輸，https則是具有安全性的ssl加密傳輸協(xié)議。

3、http和https使用的是完全不同的連接方式，用的端口也不一樣，前者是80，后者是443。

4、http的連接很簡(jiǎn)單，是無(wú)狀態(tài)的；HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議，比http協(xié)議安全。

6、區(qū)塊鏈?zhǔn)鞘裁?/h2>

  • 每個(gè)記錄，就是一個(gè)區(qū)塊(block)，會(huì)蓋上時(shí)間戳，每個(gè)新產(chǎn)生的區(qū)塊嚴(yán)格按照時(shí)間線形順序推進(jìn)，形成不可逆的鏈條(chain)，所以叫做區(qū)塊鏈(Blockchain)。


    image
  • 而且每個(gè)區(qū)塊都含有其上一個(gè)區(qū)塊的哈希值，確保區(qū)塊按照時(shí)間順序連接的同時(shí)沒(méi)有被篡改。
  • 區(qū)塊鏈?zhǔn)且环N分布式數(shù)據(jù)庫(kù)，是一串使用密碼學(xué)方法相關(guān)聯(lián)產(chǎn)生的數(shù)據(jù)塊，每個(gè)數(shù)據(jù)塊都包含了一次網(wǎng)絡(luò)交易信息，用于驗(yàn)證其信息的有效性和生成下一個(gè)區(qū)塊。
  • 核心內(nèi)容：
    1、去中心化,這是區(qū)塊鏈顛覆性特點(diǎn)，不存在任何中心機(jī)構(gòu)和中心服務(wù)器，所有交易都發(fā)生在每個(gè)人電腦或手機(jī)上安裝的客戶端應(yīng)用程序中。實(shí)現(xiàn)點(diǎn)對(duì)點(diǎn)直接交互，既節(jié)約資源，使交易自主化、簡(jiǎn)易化，又排除被中心化代理控制的風(fēng)險(xiǎn)。
    2、開放性,區(qū)塊鏈可以理解為一種公共記賬的技術(shù)方案，系統(tǒng)是完全開放透明的，賬簿對(duì)所有人公開，實(shí)現(xiàn)數(shù)據(jù)共享，任何人都可以查賬。
    3、不可撤銷、不可篡改和加密安全性

7、tcp/ip的工作原理是什么

  • 傳輸控制協(xié)議（TCP）是一種網(wǎng)絡(luò)通信協(xié)議，旨在通過(guò)Internet發(fā)送數(shù)據(jù)包。TCP是OSI層中的傳輸層協(xié)議，用于通過(guò)傳輸和確保通過(guò)支持網(wǎng)絡(luò)和Internet傳遞消息來(lái)在遠(yuǎn)程計(jì)算機(jī)之間創(chuàng)建連接
  • TCP/IP不是一個(gè)協(xié)議，而是一個(gè)協(xié)議族的統(tǒng)稱。里面包括IP協(xié)議、IMCP協(xié)議、TCP協(xié)議。
  • 不懂看鏈接吧https://blog.csdn.net/xk7298/article/details/80557346

8、前端工程化、模塊化、組件化的理解和總結(jié)

  • :前端工程化就是用做工程的思維看待和開發(fā)自己的項(xiàng)目,而不再是直接擼起袖子一個(gè)頁(yè)面一個(gè)頁(yè)面開寫
  • 模塊化開發(fā)，一個(gè)模塊就是一個(gè)實(shí)現(xiàn)特定功能的文件，有了模塊我們就可以更方便的使用別人的代碼，要用什么功能就加載什么模塊。
  • 組件化
    ①頁(yè)面上的每個(gè)獨(dú)立的、可視/可交互區(qū)域視為一個(gè)組件;
    ②每個(gè)組件對(duì)應(yīng)一個(gè)工程目錄,組件所需的各種資源都在這個(gè)目錄下就近維護(hù);
    ③由于組件具有獨(dú)立性,因此組件與組件之間可以 自由組合;
    ④頁(yè)面只不過(guò)是組件的容器,負(fù)責(zé)組合組件形成功能完整的界面;
    ⑤當(dāng)不需要某個(gè)組件,或者想要替換組件時(shí),可以整個(gè)目錄刪除/替換。

組件化將頁(yè)面視為一個(gè)容器,頁(yè)面上各個(gè)獨(dú)立部分例如:頭部、導(dǎo)航、焦點(diǎn)圖、側(cè)邊欄、底部等視為獨(dú)立組件,不同的頁(yè)面根據(jù)內(nèi)容的需要,去盛放相關(guān)組件即可組成完整的頁(yè)面。

模塊化開發(fā)的4點(diǎn)好處：

1 避免變量污染，命名沖突

2 提高代碼復(fù)用率

3 提高維護(hù)性

4 依賴關(guān)系的管理

加載模塊

這是一個(gè)模塊

var name = 'Byron';  
  
function printName(){  
    console.log(name);  
}  
  
function printFullName(firstName){  
    console.log(firstName + name);  
}  
  
module.exports = {  
    printName: printName,  
    printFullName: printFullName

然后加載模塊

var nameModule = require('./myModel.js');
nameModule.printName();

參考鏈接
https://www.cnblogs.com/angel648/p/11370327.html

9、如何進(jìn)行webpack打包編譯

10、瀏覽器運(yùn)行原理

  • 3.1渲染引擎

渲染引擎在瀏覽器窗口中顯示所請(qǐng)求的內(nèi)容，瀏覽器內(nèi)核分成兩部分：渲染引擎和js引擎，由于js引擎越來(lái)越獨(dú)立，內(nèi)核就傾向于只指渲染引擎，所以渲染引擎也稱為瀏覽器內(nèi)核。渲染引擎一開始會(huì)從網(wǎng)絡(luò)層獲取請(qǐng)求文檔的內(nèi)容，通常以8K分塊的方式完成。 獲取了文檔內(nèi)容之后，渲染引擎開始正式工作，其基本流程如圖所示：
渲染引擎解析HTML文檔，并將文檔中的標(biāo)簽轉(zhuǎn)化為DOM節(jié)點(diǎn)樹，即” 內(nèi)容樹” 。 同時(shí)，它也會(huì)解析外部CSS文件以及style標(biāo)簽中的樣式數(shù)據(jù)。 這些樣式信息連同HTML中的” 可見內(nèi)容” 一道，被用于構(gòu)建另一棵樹——” 渲染樹(Render樹)” 。 渲染樹構(gòu)建完畢之后，將會(huì)進(jìn)入” 布局” 處理階段，即為每一個(gè)節(jié)點(diǎn)分配一個(gè)屏幕坐標(biāo)。 再下一步就是繪制(painting)，即遍歷render樹，并使用UI后端層繪制每個(gè)節(jié)點(diǎn)。

注意：這個(gè)過(guò)程是逐步完成的，為了更好的用戶體驗(yàn)，渲染引擎將會(huì)盡可能早的將內(nèi)容呈現(xiàn)到屏幕上，并不會(huì)等到所有的html都解析完成之后再去構(gòu)建和布局渲染樹。 它是解析完一部分內(nèi)容就顯示一部分內(nèi)容，同時(shí)，可能還在通過(guò)網(wǎng)絡(luò)下載其余內(nèi)容。

DOM:文檔對(duì)象模型（Document Object Model，簡(jiǎn)稱DOM），是W3C組織推薦的處理可擴(kuò)展標(biāo)志語(yǔ)言的標(biāo)準(zhǔn)編程接口。 在網(wǎng)頁(yè)上，組織頁(yè)面（或文檔）的對(duì)象被組織在一個(gè)樹形結(jié)構(gòu)中，用來(lái)表示文檔中對(duì)象的標(biāo)準(zhǔn)模型就稱為DOM。
渲染引擎解析：
解析一個(gè)文檔即將其轉(zhuǎn)換為具有一定意義的結(jié)構(gòu)——編碼可以理解和使用的東西。 解析的結(jié)果通常是表達(dá)文檔結(jié)構(gòu)的節(jié)點(diǎn)樹，稱為解析樹或語(yǔ)法樹。

  • 3.1.3 CSS解析
    css屬于上下文無(wú)關(guān)文法，可以用前面所描述的解析器來(lái)解析。 Css規(guī)范定義了css的詞法及語(yǔ)法文法。 每個(gè)符號(hào)都由正則表達(dá)式定義了詞法（詞匯表），語(yǔ)法用BNF(由 John Backus 和 Peter Naur 首先引入的用來(lái)描述計(jì)算機(jī)語(yǔ)言語(yǔ)法的符號(hào)集)進(jìn)行描述。
    Webkit使用Flex和Bison解析生成器從CSS語(yǔ)法文件中自動(dòng)生成解析器。
  • 3.2 JS引擎

JS引擎是一個(gè)專門處理JS腳本的虛擬機(jī)，專門設(shè)計(jì)來(lái)解釋和執(zhí)行的 JavaScript 代碼。 JS引擎會(huì)加載你的源代碼，把它分解成字符串，把這些字符串轉(zhuǎn)換成編譯器可以理解的字節(jié)碼，然后執(zhí)行這些字節(jié)碼。不同瀏覽器有不同的JS引擎

  • 前端處理流程簡(jiǎn)介

這個(gè)流程大家可以參考網(wǎng)上很多人總結(jié)的各個(gè)版本的從輸入一個(gè)url到看到頁(yè)面，發(fā)生了什么過(guò)程。在這里我用自己的話簡(jiǎn)單概括為以下幾點(diǎn)（僅供參考，歡迎指正）：

1、輸入url

2、查看瀏覽器緩存，看是否有緩存，如果有緩存，繼續(xù)查看緩存是否過(guò)期，如果沒(méi)有過(guò)期，直接返回緩存頁(yè)面，如果沒(méi)有緩存或者緩存過(guò)期，發(fā)送一個(gè)請(qǐng)求。

3、瀏覽器解析url地址，獲取協(xié)議、主機(jī)名、端口號(hào)和路徑。

4、獲取主機(jī)ip地址過(guò)程

（1）瀏覽器緩存

（2）主機(jī)緩存

（3）hosts文件

（4）路由器緩存

（5）DNS緩存

（6）DNS遞歸查詢

5、瀏覽器發(fā)起和服務(wù)器的TCP連接，執(zhí)行三次握手（略）

6、三次握手連接后，瀏覽器發(fā)送一個(gè)http請(qǐng)求（這部分是重點(diǎn)，請(qǐng)查詢相關(guān)資料，詳細(xì)了解http協(xié)議關(guān)于請(qǐng)求格式和重要的幾個(gè)請(qǐng)求頭字段含義）。

7、服務(wù)器收到請(qǐng)求，轉(zhuǎn)到相關(guān)的服務(wù)程序，期間可能需要連接并操作數(shù)據(jù)庫(kù)（主要分get和post請(qǐng)求）。

8、服務(wù)器看是否需要緩存，服務(wù)器處理完請(qǐng)求，發(fā)出一個(gè)響應(yīng)（這部分也是重點(diǎn)，請(qǐng)查詢資料了解http響應(yīng)頭各個(gè)字段的含義）

9、服務(wù)器并根據(jù)請(qǐng)求頭包含信息決定是否需要關(guān)閉TCP連接（如需關(guān)閉，則需要四次揮手過(guò)程）

10、瀏覽器對(duì)接收到的響應(yīng)進(jìn)行解碼

11、瀏覽器解析收到的響應(yīng)并根據(jù)響應(yīng)的內(nèi)容（假如是HTML文件）進(jìn)行構(gòu)建DOM樹，構(gòu)建render樹，渲染render樹等過(guò)程

12、處理嵌入的其他資源如css文件、js文件、圖片文件、音視頻等文件，處理過(guò)程類似上面的步驟在此不詳述。

————————————————
版權(quán)聲明：本文為CSDN博主「CoolSummmer」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/u014744118/article/details/80698602

11、輪播圖原理

  • 基本功能
    自動(dòng)無(wú)縫滾動(dòng)
    左右按鈕控制滾動(dòng)
    點(diǎn)擊圓點(diǎn)切換圖片
  • 思路：
    1、首先要有個(gè)盛放圖片的容器，設(shè)置為單幅圖片的寬高，且overflow：hidden，這樣保證每次可以只顯示一個(gè)圖片
    2、container內(nèi)有個(gè)放圖片的list進(jìn)行position的定位 ，其中的圖片采用float的方式，同時(shí)當(dāng)圖片進(jìn)行輪播時(shí)，改變list的Left值使得其顯示的圖片發(fā)生變化。
    3、圖片的輪播使用定時(shí)器，通過(guò)定時(shí)器改變list的Left值是的圖片循環(huán)展示
    4、當(dāng)鼠標(biāo)滑動(dòng)到圖片上時(shí)，清除定時(shí)器，圖片停止輪播，當(dāng)鼠標(biāo)移出時(shí)繼續(xù)進(jìn)行輪播
    5、圖片上有一組小圓點(diǎn)用于與當(dāng)前顯示的圖片相對(duì)應(yīng)，同時(shí)可以通過(guò)點(diǎn)擊的方式查看對(duì)應(yīng)的圖片
    6、圖片可以通過(guò)點(diǎn)擊pre,next進(jìn)行左右滑動(dòng)顯示
    代碼：
    ————————————————
    版權(quán)聲明：本文為CSDN博主「My-Lady」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
    原文鏈接：https://blog.csdn.net/heshan1992/article/details/77504204
    參考鏈接https://blog.csdn.net/weixin_30314793/article/details/101831477?utm_source=distribute.pc_relevant.none-task

12、知道react的新屬性和新特性嗎

1 react的三大屬性 state props refs
  • props 來(lái)自外部屬性
  • states 來(lái)自內(nèi)部狀態(tài)
  • refs 用于表示組件內(nèi)某個(gè)元素
新特性
  • Context
  • ContextType
  • lazy
  • Suspense
  • 錯(cuò)誤邊界（Error boundaries）
  • memo

13、什么是響應(yīng)式布局

  • 響應(yīng)式布局：一個(gè)網(wǎng)站能夠兼容多個(gè)終端，實(shí)現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁(yè)的不同展示方式。就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端，而不是為了每一個(gè)終端做一個(gè)特定的版本。響應(yīng)式根據(jù)媒體查詢做不同的布局。
  • 自適應(yīng)式布局：能忘了使網(wǎng)頁(yè)自適應(yīng)的顯示在不同大小終端設(shè)備上的新網(wǎng)頁(yè)設(shè)計(jì)方式及技術(shù)，它需要開發(fā)多套界面來(lái)適應(yīng)不同的終端。
響應(yīng)式布局與自適應(yīng)布局的區(qū)別是什么？

1.自適應(yīng)布局通過(guò)檢測(cè)視口分辨率，來(lái)判斷當(dāng)前訪問(wèn)的設(shè)備是：pc端、平板、手機(jī)，從而請(qǐng)求服務(wù)層，返回不同的頁(yè)面；響應(yīng)式布局通過(guò)檢測(cè)視口分辨率，針對(duì)不同客戶端在客戶端做代碼處理，來(lái)展現(xiàn)不同的布局和內(nèi)容。

2.自適應(yīng)布局需要開發(fā)多套界面，而響應(yīng)式布局只需要開發(fā)一套界面就可以了。

3.自適應(yīng)對(duì)頁(yè)面做的屏幕適配是在一定范圍：比如pc端一般要大于1024像素，手機(jī)端要小于768像素。而響應(yīng)式布局是一套頁(yè)面全部適應(yīng)。

4.自適應(yīng)布局如果屏幕太小會(huì)發(fā)生內(nèi)容過(guò)于擁擠。而響應(yīng)式布局正是為了解決這個(gè)問(wèn)題而衍生出的概念，它可以自動(dòng)識(shí)別屏幕寬度并做出相應(yīng)調(diào)整的網(wǎng)頁(yè)設(shè)計(jì)。

總之，響應(yīng)式布局還是要比自適應(yīng)布局要好一點(diǎn)，但是自適應(yīng)布局更加貼切實(shí)際，因?yàn)槟阒恍枰紤]幾種狀態(tài)就可以了而不是像響應(yīng)式布局需要考慮非常多狀態(tài)。所以的說(shuō)無(wú)論哪種設(shè)計(jì)都有它們各自的特點(diǎn)，我們要根據(jù)項(xiàng)目的需求來(lái)選擇適合的布局方式。
可參考鏈接https://blog.csdn.net/gertyy/article/details/52764527

14、web性能優(yōu)化、安全有什么見解

  • web性能優(yōu)化前端篇 參考鏈接
    1).盡可能減少HTTP請(qǐng)求次數(shù)
    2).使用CDN
    3).避免使用src和href標(biāo)簽
    4).加入Expires或Cache-Control Header
    5).使用Gzip壓縮
    6).在html文件頂部放置Css樣式表
    7).在html文件底部放置JavaScript腳本
    8).避免使用CSS表達(dá)式
    9).使用外部CSS和JavaScript外部文件
    10).減少使用DNS查找次數(shù)
    11).精簡(jiǎn)CSS和JavaScript
    12).避免重向定
    13).移除重復(fù)的腳本
    14).配置ETag
    15).緩存AJAX
    16).使用GET完成AJAX請(qǐng)求
    17).減少DOM元素的數(shù)量
    18).避免404
    19).減少Cookie大小
    20).使用無(wú)Cookie的域
    21).避免使用濾鏡
    22).不要在HTML中縮放圖片
    23).使用小favicon.icon文件，并讓其可緩存

作者：人總要靠自己_趁年輕去努力
鏈接：http://www.itdecent.cn/p/abec4f7780e5

15、react-router路由是什么

16、單頁(yè)面應(yīng)用和多頁(yè)面應(yīng)用的區(qū)別

[圖片上傳失敗...(image-4db1f7-1582195554567)]

  • 多頁(yè)面 ：
    每一次頁(yè)面跳轉(zhuǎn)的時(shí)候，后臺(tái)服務(wù)器都會(huì)返回一個(gè)新的html文檔，這種類型的網(wǎng)站就是多頁(yè)網(wǎng)站，也叫多頁(yè)應(yīng)用
    優(yōu)點(diǎn)是：首屏?xí)r間快，seo效果好；缺點(diǎn)是：頁(yè)面切換慢；
  • 單頁(yè)面：
    第一次進(jìn)入頁(yè)面的時(shí)候會(huì)請(qǐng)求一個(gè)html文件，刷新點(diǎn)擊一下會(huì)切換到其他組件，此時(shí)路徑也相應(yīng)的變化，但是并沒(méi)有新的html文件的請(qǐng)求，頁(yè)面內(nèi)容發(fā)生變化。
    原理是：js會(huì)感知到url的變化，通過(guò)這一點(diǎn)，可以用js動(dòng)態(tài)的將當(dāng)前的頁(yè)面內(nèi)容清除掉，然后將下一個(gè)頁(yè)面的內(nèi)容掛載到當(dāng)前的頁(yè)面上。這個(gè)時(shí)候路由不是后端來(lái)做了，而是前端來(lái)做，判斷頁(yè)面到底是顯示那個(gè)組件，清楚不需要的，顯示需要的組件。這種過(guò)程就是單頁(yè)應(yīng)用，每次跳轉(zhuǎn)不請(qǐng)求html文件了。{頁(yè)面跳轉(zhuǎn)——>js渲染}

優(yōu)點(diǎn)是：頁(yè)面切換快；缺點(diǎn)是：首屏?xí)r間稍慢，SEO差；（請(qǐng)與單頁(yè)面應(yīng)用優(yōu)缺點(diǎn)對(duì)比理解）

17、xss攻擊和防范

  • 指惡意攻擊者往web頁(yè)面里插入html代碼，當(dāng)用戶瀏覽該頁(yè)時(shí)，嵌入其中的html代碼會(huì)被執(zhí)行，從而達(dá)成惡意用戶的特殊目的。
  • XSS攻擊類型
    反射型XSS攻擊:瀏覽器——>后端——>瀏覽器
    存儲(chǔ)型XSS攻擊:瀏覽器——>后端——>數(shù)據(jù)庫(kù)——>后端——>瀏覽器
    DOMBasedXSS（基于dom的跨站點(diǎn)腳本攻擊）:URL-->瀏覽器
  • XSS防范
    我們經(jīng)常用<script>alert(1)</script>檢測(cè)是不是有XSS漏洞，一旦彈出了1就說(shuō)明有，那么我們?cè)撊绾畏婪赌兀?br> 1.對(duì)用戶輸入進(jìn)行檢查，檢查敏感字符，替換敏感字符
    2.后端對(duì)輸入?yún)?shù)進(jìn)行過(guò)濾，過(guò)濾敏感字符，替換敏感字符
    可參考https://www.cnblogs.com/meituantech/p/9718677.html
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容