我是大自然的搬運工
1淌铐、w3c標準有哪些
1.結(jié)構(gòu)標準祈搜，代表語言是xHTML
2.表現(xiàn)標準纵朋，代表語言是CSS
3.動作標準乔宿，代表語言是JavaScrip
-
例如
1.同一個頁面當中膳汪，同名的ID會產(chǎn)生沖突唯蝶。所以以ID定義樣式的必須改成類引用。
2.所有的標簽都使用小寫遗嗽。
3.JS和CSS外部引入文件必須加上類型定義粘我。就是type屬性必須填寫
2、移動端不同瀏覽器之間的差異
有點多痹换，詳看參考鏈接 https://blog.csdn.net/zytyxz/article/details/78492428
3征字、react和vue之間的區(qū)別
-
1.監(jiān)聽數(shù)據(jù)變化的實現(xiàn)原理不同
Vue通過 getter/setter以及一些函數(shù)的劫持，能精確知道數(shù)據(jù)變化晴音。React默認是通過比較引用的方式（diff）進行的柔纵，如果不優(yōu)化可能導致大量不必要的VDOM的重新渲染。為什么React不精確監(jiān)聽數(shù)據(jù)變化呢锤躁？這是因為Vue和React設(shè)計理念上的區(qū)別搁料，Vue使用的是可變數(shù)據(jù)，而React更強調(diào)數(shù)據(jù)的不可變系羞，兩者沒有好壞之分郭计，Vue更加簡單，而React構(gòu)建大型應用的時候更加魯棒椒振。
-
2.數(shù)據(jù)流的不同
Vue1.0中可以實現(xiàn)兩種雙向綁定：父子組件之間昭伸，props可以雙向綁定；組件與DOM之間可以通過v-model雙向綁定澎迎。Vue2.x中去掉了第一種庐杨，也就是父子組件之間不能雙向綁定了（但是提供了一個語法糖自動幫你通過事件的方式修改）选调，并且Vue2.x已經(jīng)不鼓勵組件對自己的 props進行任何修改了。React一直不支持雙向綁定灵份，提倡的是單向數(shù)據(jù)流仁堪，稱之為onChange/setState()模式。不過由于我們一般都會用Vuex以及Redux等單向數(shù)據(jù)流的狀態(tài)管理框架填渠，因此很多時候我們感受不到這一點的區(qū)別了弦聂。
-
3.模板渲染方式的不同
模板的語法不同，React是通過JSX渲染模板氛什。而Vue是通過一種拓展的HTML語法進行渲染模板的原理不同莺葫，React是在組件JS代碼中，通過原生JS實現(xiàn)模板中的常見語法枪眉，比如插值捺檬，條件，循環(huán)等瑰谜，都是通過JS語法實現(xiàn)的欺冀，更加純粹更加原生。而Vue是在和組件JS代碼分離的單獨的模板中萨脑，通過指令來實現(xiàn)的隐轩，比如條件語句就需要 v-if 來實現(xiàn)對這一點，這樣的做法顯得有些獨特渤早，會把HTML弄得很亂
-
4职车，渲染過程不同
Vue可以更快地計算出Virtual DOM的差異，這是由于它在渲染過程中鹊杖，會跟蹤每一個組件的依賴關(guān)系悴灵，不需要重新渲染整個組件樹。React在應用的狀態(tài)被改變時骂蓖，全部子組件都會重新渲染积瞒。通過shouldComponentUpdate這個生命周期方法可以進行控制，但Vue將此視為默認的優(yōu)化登下。
-
5.框架本質(zhì)不同
Vue本質(zhì)是MVVM框架茫孔，由MVC發(fā)展而來；React是前端組件化框架被芳，由后端組件化發(fā)展而來缰贝。
————————————————
版權(quán)聲明：本文為CSDN博主「秦罹」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議畔濒，轉(zhuǎn)載請附上原文出處鏈接及本聲明剩晴。
原文鏈接：https://blog.csdn.net/qq_26190177/article/details/93741368
4、es規(guī)范是什么
太多了
請看下面的鏈接
https://yq.aliyun.com/articles/617716?utm_content=m_1000007931
5侵状、http https協(xié)議是什么
基本概念
- HTTP：是互聯(lián)網(wǎng)上應用最為廣泛的一種網(wǎng)絡協(xié)議赞弥，是一個客戶端和服務器端請求和應答的標準（TCP）毅整，用于從WWW服務器傳輸超文本到本地瀏覽器的傳輸協(xié)議，它可以使瀏覽器更加高效绽左，使網(wǎng)絡傳輸減少毛嫉。
- HTTPS：是以安全為目標的HTTP通道，簡單講是HTTP的安全版妇菱，即HTTP下加入SSL層，HTTPS的安全基礎(chǔ)是SSL暴区，因此加密的詳細內(nèi)容就需要SSL闯团。
HTTPS協(xié)議的主要作用可以分為兩種：一種是建立一個信息安全通道，來保證數(shù)據(jù)傳輸?shù)陌踩闪唬涣硪环N就是確認網(wǎng)站的真實性房交。
區(qū)別
1、https協(xié)議需要到ca申請證書伐割，一般免費證書較少候味，因而需要一定費用。
2隔心、http是超文本傳輸協(xié)議白群，信息是明文傳輸，https則是具有安全性的ssl加密傳輸協(xié)議硬霍。
3帜慢、http和https使用的是完全不同的連接方式，用的端口也不一樣唯卖，前者是80粱玲，后者是443。
4拜轨、http的連接很簡單抽减，是無狀態(tài)的；HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進行加密傳輸橄碾、身份認證的網(wǎng)絡協(xié)議卵沉，比http協(xié)議安全。
6堪嫂、區(qū)塊鏈是什么
-
每個記錄偎箫，就是一個區(qū)塊(block)，會蓋上時間戳皆串，每個新產(chǎn)生的區(qū)塊嚴格按照時間線形順序推進淹办，形成不可逆的鏈條(chain)，所以叫做區(qū)塊鏈(Blockchain)恶复。
image - 而且每個區(qū)塊都含有其上一個區(qū)塊的哈希值怜森，確保區(qū)塊按照時間順序連接的同時沒有被篡改速挑。
- 區(qū)塊鏈是一種分布式數(shù)據(jù)庫，是一串使用密碼學方法相關(guān)聯(lián)產(chǎn)生的數(shù)據(jù)塊副硅，每個數(shù)據(jù)塊都包含了一次網(wǎng)絡交易信息姥宝，用于驗證其信息的有效性和生成下一個區(qū)塊。
- 核心內(nèi)容：
1恐疲、去中心化,這是區(qū)塊鏈顛覆性特點腊满，不存在任何中心機構(gòu)和中心服務器，所有交易都發(fā)生在每個人電腦或手機上安裝的客戶端應用程序中培己。實現(xiàn)點對點直接交互碳蛋，既節(jié)約資源，使交易自主化省咨、簡易化肃弟，又排除被中心化代理控制的風險。
2零蓉、開放性,區(qū)塊鏈可以理解為一種公共記賬的技術(shù)方案笤受，系統(tǒng)是完全開放透明的，賬簿對所有人公開敌蜂，實現(xiàn)數(shù)據(jù)共享箩兽，任何人都可以查賬。
3紊册、不可撤銷比肄、不可篡改和加密安全性
7、tcp/ip的工作原理是什么
- 傳輸控制協(xié)議（TCP）是一種網(wǎng)絡通信協(xié)議囊陡，旨在通過Internet發(fā)送數(shù)據(jù)包芳绩。TCP是OSI層中的傳輸層協(xié)議，用于通過傳輸和確保通過支持網(wǎng)絡和Internet傳遞消息來在遠程計算機之間創(chuàng)建連接
- TCP/IP不是一個協(xié)議撞反，而是一個協(xié)議族的統(tǒng)稱妥色。里面包括IP協(xié)議、IMCP協(xié)議遏片、TCP協(xié)議嘹害。
- 不懂看鏈接吧https://blog.csdn.net/xk7298/article/details/80557346
8、前端工程化吮便、模塊化笔呀、組件化的理解和總結(jié)
- :前端工程化就是用做工程的思維看待和開發(fā)自己的項目,而不再是直接擼起袖子一個頁面一個頁面開寫
- 模塊化開發(fā)，一個模塊就是一個實現(xiàn)特定功能的文件髓需，有了模塊我們就可以更方便的使用別人的代碼许师，要用什么功能就加載什么模塊。
- 組件化
①頁面上的每個獨立的、可視/可交互區(qū)域視為一個組件;
②每個組件對應一個工程目錄,組件所需的各種資源都在這個目錄下就近維護;
③由于組件具有獨立性,因此組件與組件之間可以 自由組合;
④頁面只不過是組件的容器,負責組合組件形成功能完整的界面;
⑤當不需要某個組件,或者想要替換組件時,可以整個目錄刪除/替換微渠。
組件化將頁面視為一個容器,頁面上各個獨立部分例如:頭部搭幻、導航、焦點圖逞盆、側(cè)邊欄檀蹋、底部等視為獨立組件,不同的頁面根據(jù)內(nèi)容的需要,去盛放相關(guān)組件即可組成完整的頁面。
模塊化開發(fā)的4點好處：
1 避免變量污染云芦，命名沖突
2 提高代碼復用率
3 提高維護性
4 依賴關(guān)系的管理
加載模塊
這是一個模塊
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俯逾、如何進行webpack打包編譯
10、瀏覽器運行原理
- 3.1渲染引擎
渲染引擎在瀏覽器窗口中顯示所請求的內(nèi)容舅逸，瀏覽器內(nèi)核分成兩部分：渲染引擎和js引擎纱昧，由于js引擎越來越獨立，內(nèi)核就傾向于只指渲染引擎堡赔，所以渲染引擎也稱為瀏覽器內(nèi)核。渲染引擎一開始會從網(wǎng)絡層獲取請求文檔的內(nèi)容设联，通常以8K分塊的方式完成善已。 獲取了文檔內(nèi)容之后，渲染引擎開始正式工作离例，其基本流程如圖所示：
渲染引擎解析HTML文檔换团，并將文檔中的標簽轉(zhuǎn)化為DOM節(jié)點樹，即” 內(nèi)容樹” 宫蛆。 同時艘包，它也會解析外部CSS文件以及style標簽中的樣式數(shù)據(jù)。 這些樣式信息連同HTML中的” 可見內(nèi)容” 一道耀盗，被用于構(gòu)建另一棵樹——” 渲染樹(Render樹)” 想虎。 渲染樹構(gòu)建完畢之后，將會進入” 布局” 處理階段叛拷，即為每一個節(jié)點分配一個屏幕坐標舌厨。 再下一步就是繪制(painting)，即遍歷render樹忿薇，并使用UI后端層繪制每個節(jié)點裙椭。
注意：這個過程是逐步完成的，為了更好的用戶體驗署浩，渲染引擎將會盡可能早的將內(nèi)容呈現(xiàn)到屏幕上揉燃，并不會等到所有的html都解析完成之后再去構(gòu)建和布局渲染樹。 它是解析完一部分內(nèi)容就顯示一部分內(nèi)容筋栋，同時炊汤，可能還在通過網(wǎng)絡下載其余內(nèi)容。
DOM:文檔對象模型（Document Object Model，簡稱DOM）婿崭，是W3C組織推薦的處理可擴展標志語言的標準編程接口拨拓。 在網(wǎng)頁上，組織頁面（或文檔）的對象被組織在一個樹形結(jié)構(gòu)中氓栈，用來表示文檔中對象的標準模型就稱為DOM渣磷。
渲染引擎解析：
解析一個文檔即將其轉(zhuǎn)換為具有一定意義的結(jié)構(gòu)——編碼可以理解和使用的東西。 解析的結(jié)果通常是表達文檔結(jié)構(gòu)的節(jié)點樹授瘦，稱為解析樹或語法樹醋界。
- 3.1.3 CSS解析
css屬于上下文無關(guān)文法，可以用前面所描述的解析器來解析提完。 Css規(guī)范定義了css的詞法及語法文法形纺。 每個符號都由正則表達式定義了詞法（詞匯表），語法用BNF(由 John Backus 和 Peter Naur 首先引入的用來描述計算機語言語法的符號集)進行描述徒欣。
Webkit使用Flex和Bison解析生成器從CSS語法文件中自動生成解析器逐样。 - 3.2 JS引擎
JS引擎是一個專門處理JS腳本的虛擬機，專門設(shè)計來解釋和執(zhí)行的 JavaScript 代碼打肝。 JS引擎會加載你的源代碼脂新，把它分解成字符串，把這些字符串轉(zhuǎn)換成編譯器可以理解的字節(jié)碼粗梭，然后執(zhí)行這些字節(jié)碼争便。不同瀏覽器有不同的JS引擎
- 前端處理流程簡介
這個流程大家可以參考網(wǎng)上很多人總結(jié)的各個版本的從輸入一個url到看到頁面，發(fā)生了什么過程断医。在這里我用自己的話簡單概括為以下幾點（僅供參考滞乙，歡迎指正）：
1、輸入url
2鉴嗤、查看瀏覽器緩存斩启，看是否有緩存，如果有緩存醉锅，繼續(xù)查看緩存是否過期浇垦，如果沒有過期，直接返回緩存頁面荣挨，如果沒有緩存或者緩存過期男韧，發(fā)送一個請求。
3默垄、瀏覽器解析url地址此虑，獲取協(xié)議、主機名口锭、端口號和路徑朦前。
4介杆、獲取主機ip地址過程
（1）瀏覽器緩存
（2）主機緩存
（3）hosts文件
（4）路由器緩存
（5）DNS緩存
（6）DNS遞歸查詢
5、瀏覽器發(fā)起和服務器的TCP連接韭寸，執(zhí)行三次握手（略）
6春哨、三次握手連接后，瀏覽器發(fā)送一個http請求（這部分是重點恩伺，請查詢相關(guān)資料赴背，詳細了解http協(xié)議關(guān)于請求格式和重要的幾個請求頭字段含義）。
7晶渠、服務器收到請求凰荚，轉(zhuǎn)到相關(guān)的服務程序，期間可能需要連接并操作數(shù)據(jù)庫（主要分get和post請求）褒脯。
8便瑟、服務器看是否需要緩存，服務器處理完請求番川，發(fā)出一個響應（這部分也是重點到涂，請查詢資料了解http響應頭各個字段的含義）
9、服務器并根據(jù)請求頭包含信息決定是否需要關(guān)閉TCP連接（如需關(guān)閉颁督，則需要四次揮手過程）
10养盗、瀏覽器對接收到的響應進行解碼
11、瀏覽器解析收到的響應并根據(jù)響應的內(nèi)容（假如是HTML文件）進行構(gòu)建DOM樹适篙，構(gòu)建render樹，渲染render樹等過程
12箫爷、處理嵌入的其他資源如css文件嚷节、js文件、圖片文件虎锚、音視頻等文件硫痰，處理過程類似上面的步驟在此不詳述。
————————————————
版權(quán)聲明：本文為CSDN博主「CoolSummmer」的原創(chuàng)文章窜护，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議效斑，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/u014744118/article/details/80698602
11柱徙、輪播圖原理
- 基本功能
自動無縫滾動
左右按鈕控制滾動
點擊圓點切換圖片 - 思路：
1缓屠、首先要有個盛放圖片的容器，設(shè)置為單幅圖片的寬高护侮，且overflow：hidden敌完，這樣保證每次可以只顯示一個圖片
2、container內(nèi)有個放圖片的list進行position的定位 羊初，其中的圖片采用float的方式滨溉，同時當圖片進行輪播時，改變list的Left值使得其顯示的圖片發(fā)生變化。
3晦攒、圖片的輪播使用定時器闽撤，通過定時器改變list的Left值是的圖片循環(huán)展示
4、當鼠標滑動到圖片上時脯颜，清除定時器哟旗，圖片停止輪播，當鼠標移出時繼續(xù)進行輪播
5伐脖、圖片上有一組小圓點用于與當前顯示的圖片相對應热幔，同時可以通過點擊的方式查看對應的圖片
6、圖片可以通過點擊pre,next進行左右滑動顯示
代碼：
————————————————
版權(quán)聲明：本文為CSDN博主「My-Lady」的原創(chuàng)文章讼庇，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議绎巨，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：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 來自外部屬性
- states 來自內(nèi)部狀態(tài)
- refs 用于表示組件內(nèi)某個元素
新特性
- Context
- ContextType
- lazy
- Suspense
- 錯誤邊界（Error boundaries）
- memo
13场勤、什么是響應式布局
- 響應式布局：一個網(wǎng)站能夠兼容多個終端，實現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁的不同展示方式歼跟。就是一個網(wǎng)站能夠兼容多個終端和媳，而不是為了每一個終端做一個特定的版本。響應式根據(jù)媒體查詢做不同的布局哈街。
- 自適應式布局：能忘了使網(wǎng)頁自適應的顯示在不同大小終端設(shè)備上的新網(wǎng)頁設(shè)計方式及技術(shù)留瞳，它需要開發(fā)多套界面來適應不同的終端。
響應式布局與自適應布局的區(qū)別是什么骚秦？
1.自適應布局通過檢測視口分辨率她倘，來判斷當前訪問的設(shè)備是：pc端、平板作箍、手機硬梁，從而請求服務層，返回不同的頁面胞得；響應式布局通過檢測視口分辨率荧止，針對不同客戶端在客戶端做代碼處理，來展現(xiàn)不同的布局和內(nèi)容阶剑。
2.自適應布局需要開發(fā)多套界面跃巡，而響應式布局只需要開發(fā)一套界面就可以了。
3.自適應對頁面做的屏幕適配是在一定范圍：比如pc端一般要大于1024像素牧愁，手機端要小于768像素瓷炮。而響應式布局是一套頁面全部適應。
4.自適應布局如果屏幕太小會發(fā)生內(nèi)容過于擁擠递宅。而響應式布局正是為了解決這個問題而衍生出的概念娘香，它可以自動識別屏幕寬度并做出相應調(diào)整的網(wǎng)頁設(shè)計苍狰。
總之，響應式布局還是要比自適應布局要好一點烘绽，但是自適應布局更加貼切實際淋昭，因為你只需要考慮幾種狀態(tài)就可以了而不是像響應式布局需要考慮非常多狀態(tài)。所以的說無論哪種設(shè)計都有它們各自的特點安接，我們要根據(jù)項目的需求來選擇適合的布局方式翔忽。
可參考鏈接https://blog.csdn.net/gertyy/article/details/52764527
14、web性能優(yōu)化盏檐、安全有什么見解
- web性能優(yōu)化前端篇 參考鏈接
1).盡可能減少HTTP請求次數(shù)
2).使用CDN
3).避免使用src和href標簽
4).加入Expires或Cache-Control Header
5).使用Gzip壓縮
6).在html文件頂部放置Css樣式表
7).在html文件底部放置JavaScript腳本
8).避免使用CSS表達式
9).使用外部CSS和JavaScript外部文件
10).減少使用DNS查找次數(shù)
11).精簡CSS和JavaScript
12).避免重向定
13).移除重復的腳本
14).配置ETag
15).緩存AJAX
16).使用GET完成AJAX請求
17).減少DOM元素的數(shù)量
18).避免404
19).減少Cookie大小
20).使用無Cookie的域
21).避免使用濾鏡
22).不要在HTML中縮放圖片
23).使用小favicon.icon文件歇式，并讓其可緩存
作者：人總要靠自己_趁年輕去努力
鏈接：http://www.reibang.com/p/abec4f7780e5
15、react-router路由是什么
- 為什么要使用路由胡野？
1：單頁頁面實現(xiàn)頁面的切換
2：可以通過URL對頁面進行定位
3：語義化組織資源 - 一般使用react-router-dom
可參考鏈接 https://blog.csdn.net/weixin_43606158/article/details/90239415
16材失、單頁面應用和多頁面應用的區(qū)別
[圖片上傳失敗...(image-4db1f7-1582195554567)]
- 多頁面 ：
每一次頁面跳轉(zhuǎn)的時候，后臺服務器都會返回一個新的html文檔硫豆，這種類型的網(wǎng)站就是多頁網(wǎng)站龙巨，也叫多頁應用
優(yōu)點是：首屏時間快，seo效果好熊响；缺點是：頁面切換慢旨别； - 單頁面：
第一次進入頁面的時候會請求一個html文件，刷新點擊一下會切換到其他組件汗茄，此時路徑也相應的變化秸弛，但是并沒有新的html文件的請求，頁面內(nèi)容發(fā)生變化洪碳。
原理是：js會感知到url的變化递览，通過這一點，可以用js動態(tài)的將當前的頁面內(nèi)容清除掉偶宫，然后將下一個頁面的內(nèi)容掛載到當前的頁面上。這個時候路由不是后端來做了环鲤，而是前端來做纯趋，判斷頁面到底是顯示那個組件，清楚不需要的冷离，顯示需要的組件吵冒。這種過程就是單頁應用，每次跳轉(zhuǎn)不請求html文件了西剥。{頁面跳轉(zhuǎn)——>js渲染}
優(yōu)點是：頁面切換快痹栖；缺點是：首屏時間稍慢，SEO差瞭空；（請與單頁面應用優(yōu)缺點對比理解）
17揪阿、xss攻擊和防范
- 指惡意攻擊者往web頁面里插入html代碼疗我，當用戶瀏覽該頁時，嵌入其中的html代碼會被執(zhí)行南捂，從而達成惡意用戶的特殊目的吴裤。
- XSS攻擊類型
反射型XSS攻擊:瀏覽器——>后端——>瀏覽器
存儲型XSS攻擊:瀏覽器——>后端——>數(shù)據(jù)庫——>后端——>瀏覽器
DOMBasedXSS（基于dom的跨站點腳本攻擊）:URL-->瀏覽器 - XSS防范
我們經(jīng)常用<script>alert(1)</script>檢測是不是有XSS漏洞，一旦彈出了1就說明有溺健，那么我們該如何防范呢麦牺？
1.對用戶輸入進行檢查，檢查敏感字符鞭缭，替換敏感字符
2.后端對輸入?yún)?shù)進行過濾剖膳，過濾敏感字符，替換敏感字符
可參考https://www.cnblogs.com/meituantech/p/9718677.html
