1.router實(shí)現(xiàn)原理
一句話：實(shí)現(xiàn)URL與UI界面的同步。其中在react-router中侮叮，URL對應(yīng)Location對象，而UI是由react?components來決定的，這樣就轉(zhuǎn)變成location與components之間的同步問題。
老瀏覽器的history: 主要通過hash來實(shí)現(xiàn)乱顾，對應(yīng)createHashHistory
高版本瀏覽器: 通過html5里面的history，對應(yīng)createBrowserHistory
node環(huán)境下: 主要存儲在memeory里面宫静，對應(yīng)createMemoryHistory
2.hash路由和broswer路由的區(qū)別
3.瀏覽器緩存機(jī)制
? ?從緩存位置上來說分為四種走净，并且各自有優(yōu)先級，當(dāng)依次查 找 緩存且都沒有命中的時(shí)候孤里，才會(huì)去請求網(wǎng)絡(luò)伏伯。
? ?Service Worker
? ? Memory Cache
? ? Disk Cache
? ?Push Cache
1.Service Worker
Service Worker 是運(yùn)行在瀏覽器背后的獨(dú)立線程，一般可以用來實(shí)現(xiàn)緩存功能扭粱。使用 Service Worker的話舵鳞，傳輸協(xié)議必須為 HTTPS。因?yàn)?Service Worker 中涉及到請求攔截琢蛤，所以必須使用 HTTPS 協(xié)議來保障安全。Service Worker 的緩存與瀏覽器其他內(nèi)建的緩存機(jī)制不同抛虏，它可以讓我們自由控制緩存哪些文件博其、如何匹配緩存、如何讀取緩存迂猴，并且緩存是持續(xù)性的慕淡。
Service Worker 實(shí)現(xiàn)緩存功能一般分為三個(gè)步驟：首先需要先注冊 Service Worker，然后監(jiān)聽到 install 事件以后就可以緩存需要的文件沸毁，那么在下次用戶訪問的時(shí)候就可以通過攔截請求的方式查詢是否存在緩存峰髓，存在緩存的話就可以直接讀取緩存文件，否則就去請求數(shù)據(jù)息尺。
當(dāng) Service Worker 沒有命中緩存的時(shí)候携兵，我們需要去調(diào)用 fetch 函數(shù)獲取數(shù)據(jù)。也就是說搂誉，如果我們沒有在 Service Worker 命中緩存的話徐紧，會(huì)根據(jù)緩存查找優(yōu)先級去查找數(shù)據(jù)。但是不管我們是從 Memory Cache 中還是從網(wǎng)絡(luò)請求中獲取的數(shù)據(jù)，瀏覽器都會(huì)顯示我們是從 Service Worker 中獲取的內(nèi)容并级。
2.Memory Cache
Memory Cache 也就是內(nèi)存中的緩存拂檩，主要包含的是當(dāng)前中頁面中已經(jīng)抓取到的資源,例如頁面上已經(jīng)下載的樣式、腳本嘲碧、圖片等稻励。讀取內(nèi)存中的數(shù)據(jù)肯定比磁盤快,內(nèi)存緩存雖然讀取高效，可是緩存持續(xù)性很短愈涩，會(huì)隨著進(jìn)程的釋放而釋放钉迷。一旦我們關(guān)閉 Tab 頁面，內(nèi)存中的緩存也就被釋放了钠署。
那么既然內(nèi)存緩存這么高效糠聪，我們是不是能讓數(shù)據(jù)都存放在內(nèi)存中呢？
這是不可能的谐鼎。計(jì)算機(jī)中的內(nèi)存一定比硬盤容量小得多舰蟆，操作系統(tǒng)需要精打細(xì)算內(nèi)存的使用，所以能讓我們使用的內(nèi)存必然不多狸棍。
當(dāng)我們訪問過頁面以后身害，再次刷新頁面，可以發(fā)現(xiàn)很多數(shù)據(jù)都來自于內(nèi)存緩存
內(nèi)存緩存中有一塊重要的緩存資源是preloader相關(guān)指令（例如<link rel="prefetch">）下載的資源草戈∷欤總所周知preloader的相關(guān)指令已經(jīng)是頁面優(yōu)化的常見手段之一，它可以一邊解析js/css文件唐片，一邊網(wǎng)絡(luò)請求下一個(gè)資源丙猬。
3.Disk Cache
Disk Cache 也就是存儲在硬盤中的緩存，讀取速度慢點(diǎn)费韭，但是什么都能存儲到磁盤中茧球，比之 Memory Cache 勝在容量和存儲時(shí)效性上。
在所有瀏覽器緩存中星持，Disk Cache 覆蓋面基本是最大的抢埋。它會(huì)根據(jù) HTTP Herder 中的字段判斷哪些資源需要緩存，哪些資源可以不請求直接使用督暂，哪些資源已經(jīng)過期需要重新請求揪垄。并且即使在跨站點(diǎn)的情況下，相同地址的資源一旦被硬盤緩存下來逻翁，就不會(huì)再次去請求數(shù)據(jù)饥努。絕大部分的緩存都來自 Disk Cache，關(guān)于 HTTP 的協(xié)議頭中的緩存字段卢未，我們會(huì)在下文進(jìn)行詳細(xì)介紹肪凛。
瀏覽器會(huì)把哪些文件丟進(jìn)內(nèi)存中堰汉？哪些丟進(jìn)硬盤中？
關(guān)于這點(diǎn)伟墙，網(wǎng)上說法不一翘鸭，不過以下觀點(diǎn)比較靠得住：
對于大文件來說戳葵，大概率是不存儲在內(nèi)存中的就乓，反之優(yōu)先
當(dāng)前系統(tǒng)內(nèi)存使用率高的話，文件優(yōu)先存儲進(jìn)硬盤
4.Push Cache
Push Cache（推送緩存）是 HTTP/2 中的內(nèi)容拱烁，當(dāng)以上三種緩存都沒有命中時(shí)生蚁，它才會(huì)被使用。它只在會(huì)話（Session）中存在戏自，一旦會(huì)話結(jié)束就被釋放邦投，并且緩存時(shí)間也很短暫，在Chrome瀏覽器中只有5分鐘左右擅笔，同時(shí)它也并非嚴(yán)格執(zhí)行HTTP頭中的緩存指令志衣。
Push Cache 在國內(nèi)能夠查到的資料很少，也是因?yàn)?HTTP/2 在國內(nèi)不夠普及猛们。這里推薦閱讀Jake Archibald的HTTP/2 push is tougher than I thought這篇文章念脯，文章中的幾個(gè)結(jié)論：
所有的資源都能被推送，并且能夠被緩存,但是 Edge 和 Safari 瀏覽器支持相對比較差
可以推送 no-cache 和 no-store 的資源
一旦連接被關(guān)閉弯淘，Push Cache 就被釋放
多個(gè)頁面可以使用同一個(gè)HTTP/2的連接绿店，也就可以使用同一個(gè)Push Cache。這主要還是依賴瀏覽器的實(shí)現(xiàn)而定庐橙，出于對性能的考慮假勿，有的瀏覽器會(huì)對相同域名但不同的tab標(biāo)簽使用同一個(gè)HTTP連接。
Push Cache 中的緩存只能被使用一次
瀏覽器可以拒絕接受已經(jīng)存在的資源推送
你可以給其他域名推送資源
如果以上四種緩存都沒有命中的話怕午，那么只能發(fā)起請求來獲取資源了废登。
那么為了性能上的考慮，大部分的接口都應(yīng)該選擇好緩存策略郁惜，通常瀏覽器緩存策略分為兩種：強(qiáng)緩存和協(xié)商緩存，并且緩存策略都是通過設(shè)置 HTTP Header 來實(shí)現(xiàn)的甲锡。
強(qiáng)緩存：不會(huì)向服務(wù)器發(fā)送請求兆蕉，直接從緩存中讀取資源，在chrome控制臺的Network選項(xiàng)中可以看到該請求返回200的狀態(tài)碼缤沦，并且Size顯示from disk cache或from memory cache虎韵。強(qiáng)緩存可以通過設(shè)置兩種 HTTP Header 實(shí)現(xiàn)：Expires 和 Cache-Control。
1.Expires
緩存過期時(shí)間缸废，用來指定資源到期的時(shí)間包蓝，是服務(wù)器端的具體的時(shí)間點(diǎn)驶社。也就是說，Expires=max-age + 請求時(shí)間测萎，需要和Last-modified結(jié)合使用亡电。Expires是Web服務(wù)器響應(yīng)消息頭字段，在響應(yīng)http請求時(shí)告訴瀏覽器在過期時(shí)間前瀏覽器可以直接從瀏覽器緩存取數(shù)據(jù)硅瞧，而無需再次請求份乒。
Expires 是 HTTP/1 的產(chǎn)物，受限于本地時(shí)間腕唧，如果修改了本地時(shí)間或辖，可能會(huì)造成緩存失效。Expires: Wed, 22 Oct 2018 08:41:00 GMT表示資源會(huì)在 Wed, 22 Oct 2018 08:41:00 GMT 后過期枣接，需要再次請求颂暇。
2.Cache-Control
在HTTP/1.1中，Cache-Control是最重要的規(guī)則但惶，主要用于控制網(wǎng)頁緩存耳鸯。比如當(dāng)Cache-Control:max-age=300時(shí)，則代表在這個(gè)請求正確返回時(shí)間（瀏覽器也會(huì)記錄下來）的5分鐘內(nèi)再次加載資源榆骚，就會(huì)命中強(qiáng)緩存片拍。
3.Expires和Cache-Control兩者對比
其實(shí)這兩者差別不大，區(qū)別就在于 Expires 是http1.0的產(chǎn)物妓肢，Cache-Control是http1.1的產(chǎn)物捌省，兩者同時(shí)存在的話，Cache-Control優(yōu)先級高于Expires碉钠；在某些不支持HTTP1.1的環(huán)境下纲缓，Expires就會(huì)發(fā)揮用處。所以Expires其實(shí)是過時(shí)的產(chǎn)物喊废，現(xiàn)階段它的存在只是一種兼容性的寫法祝高。
強(qiáng)緩存判斷是否緩存的依據(jù)來自于是否超出某個(gè)時(shí)間或者某個(gè)時(shí)間段，而不關(guān)心服務(wù)器端文件是否已經(jīng)更新污筷，這可能會(huì)導(dǎo)致加載文件不是服務(wù)器端最新的內(nèi)容工闺，那我們?nèi)绾潍@知服務(wù)器端內(nèi)容是否已經(jīng)發(fā)生了更新呢？此時(shí)我們需要用到協(xié)商緩存策略瓣蛀。
五陆蟆、協(xié)商緩存
協(xié)商緩存就是強(qiáng)制緩存失效后，瀏覽器攜帶緩存標(biāo)識向服務(wù)器發(fā)起請求惋增，由服務(wù)器根據(jù)緩存標(biāo)識決定是否使用緩存的過程叠殷，主要有以下兩種情況：
協(xié)商緩存生效，返回304和Not Modified
協(xié)商緩存失效诈皿，返回200和請求結(jié)果
協(xié)商緩存可以通過設(shè)置兩種 HTTP Header 實(shí)現(xiàn)：Last-Modified 和 ETag 林束。
緩存機(jī)制
強(qiáng)制緩存優(yōu)先于協(xié)商緩存進(jìn)行像棘，若強(qiáng)制緩存(Expires和Cache-Control)生效則直接使用緩存，若不生效則進(jìn)行協(xié)商緩存(Last-Modified / If-Modified-Since和Etag / If-None-Match)壶冒，協(xié)商緩存由服務(wù)器決定是否使用緩存缕题，若協(xié)商緩存失效，那么代表該請求的緩存失效依痊，返回200避除，重新返回資源和緩存標(biāo)識，再存入瀏覽器緩存中胸嘁；生效則返回304瓶摆，
八、用戶行為對瀏覽器緩存的影響
所謂用戶行為對瀏覽器緩存的影響性宏，指的就是用戶在瀏覽器如何操作時(shí)群井，會(huì)觸發(fā)怎樣的緩存策略。主要有 3 種：
打開網(wǎng)頁毫胜，地址欄輸入地址： 查找 disk cache 中是否有匹配书斜。如有則使用；如沒有則發(fā)送網(wǎng)絡(luò)請求酵使。
普通刷新 (F5)：因?yàn)?TAB 并沒有關(guān)閉荐吉，因此 memory cache 是可用的，會(huì)被優(yōu)先使用(如果匹配的話)口渔。其次才是 disk cache样屠。
強(qiáng)制刷新 (Ctrl + F5)：瀏覽器不使用緩存，因此發(fā)送的請求頭部均帶有Cache-control: no-cache(為了兼容缺脉，還帶了Pragma: no-cache),服務(wù)器直接返回 200 和最新內(nèi)容痪欲。
原地址:http://www.reibang.com/p/54cc04190252
4.函數(shù)回流/重繪
當(dāng)瀏覽器重新渲染文檔中的元素時(shí)需要?重新計(jì)算它們的位置和幾何形狀，我們稱之為回流攻礼∫堤撸回流會(huì)阻塞用戶在瀏覽器中的操作，因此理解提升回流時(shí)間是非常有幫助的礁扮。
你應(yīng)該批量地觸發(fā)回流或重繪知举，但是要節(jié)制地使用這些方法。盡量不處理DOM也很重要太伊「喝洌可以使用DocumentFragment，一個(gè)輕量級的文檔對象倦畅。你可以把它作為一種方法來提取文檔樹的一部分，或創(chuàng)建一個(gè)新的文檔“片段”绣的。與其不斷地添加DOM節(jié)點(diǎn)叠赐，不如使用文檔片段后只執(zhí)行一次DOM插入操作欲账，以避免過多的回流。
例如芭概，我們寫一個(gè)函數(shù)給一個(gè)元素添加20個(gè)div赛不。如果只是簡單地每次append一個(gè)div到元素中，這會(huì)觸發(fā)20次回流罢洲。
function addDivs(element) {
? var div;
? for (var i = 0; i < 20; i ++) {
? ? div = document.createElement('div');
? ? div.innerHTML = 'Heya!';
? ? element.appendChild(div);
? }
}
源地址:http://www.cnblogs.com/Lee-ahao/p/9704482.html
5.冒泡排序
6.js異步加載
1.defer:defer
2.async:async（asynchronous）
3.動(dòng)態(tài)添加script
.functionasyncLoaded(url,callBack){/*url為js的鏈接踢故，callBack為url的js中的函數(shù)（該函數(shù)調(diào)用應(yīng)該寫到匿名函數(shù)中，如function(){console.log(div.getScrollOffset())}）*/varscript = document.createElement('script');
? ? script.type = 'text/javascript';
? ? /*if else 這幾句話必須要寫到這位置處惹苗，不能放最后殿较，因?yàn)閕f中js加載中script.readyState存在好幾種狀態(tài)，
? ? 只有狀態(tài)改變‘readystatechange’事件才會(huì)觸發(fā)桩蓉，但現(xiàn)在瀏覽器加載速度很快淋纲，當(dāng)解析到該事件時(shí)JS有可能已經(jīng)加載完，
? ? 所以事件根本不會(huì)觸發(fā)院究，所以要寫到前面*/if(script.readystate){//兼容IEscript.onreadystatechange =function() {//狀態(tài)改變事件才觸發(fā)if(script.readyState == 'loaded' || script.readyState == 'complete'){? ?
? ? ? ? ? ? ? ? callBack();
? ? ? ? ? ? ? ? script.onreadystatechange =null;? ? ? ?
? ? ? ? ? ? }
? ? ? ? }
? ? }else{
? ? ? ? script.onload =function(e){
? ? ? ? ? ? callBack();
? ? ? ? }
? ? }? ? ? ?
? ? script.src = url;
? ? document.body.appendChild(script);
}
