一.單線程和異步的關(guān)系
- 單線程：同一時(shí)間只能做一件事
- 原因：避免DOM渲染的沖突
- 解決方案：異步
- 實(shí)現(xiàn)方式--event loop
1.什么是單線程，和異步的關(guān)系
單線程：同一時(shí)間，只能做一件事，<span style="color:red">正是因?yàn)閖s 是單線程钱豁，才出現(xiàn)了異步解決方案</span>棉钧，
像定時(shí)器瓜喇，如果沒(méi)有異步的話挺益，頁(yè)面就一直卡在那等著,所以說(shuō)，異步是唯一而高效的解決方案2.js為什么是單線程
? <span style="color:red">原因避免DOM渲染沖突</span>:
- 瀏覽器需要渲染DOM
- JS可以修改DOM結(jié)構(gòu)
- js執(zhí)行的時(shí)候欠橘，瀏覽器DOM渲染會(huì)暫停
- 兩段js也不能同時(shí)執(zhí)行（都修改DOM就沖突了）
- webworker支持多線程矩肩，但是不能訪問(wèn)DOM
3.異步帶來(lái)了哪些問(wèn)題
- 問(wèn)題一：沒(méi)有按照書寫方式執(zhí)行，可讀性差
- 問(wèn)題二：callback中不容易模塊化
4. 實(shí)現(xiàn)異步的方式--eventloop
- 事件輪詢肃续，js實(shí)現(xiàn)異步的具體的解決方案
- 同步代碼黍檩，直接執(zhí)行
- 異步函數(shù)先放在異步隊(duì)列中
- 待同步函數(shù)執(zhí)行完畢，輪詢執(zhí)行異步隊(duì)列的函數(shù)
5.Promise的基本使用
- 異常捕獲
//規(guī)定：then只接受一個(gè)參數(shù)始锚，最后統(tǒng)一用catch捕獲異常 resutl.then(function(img){ console.log(img.width) }).then(function(img){ console.log(img.width) }).catch(function(ex){ //最后統(tǒng)一 catch console.log(ex) })
- Promise.all和Promise.race
image.png
- Promise標(biāo)準(zhǔn)
image.png6.async/await
- then只是將callback拆分了
image.png
- async/await 是最直接的同步寫法
[圖片上傳失敗...(image-86d1c6-1595464164685)]
- 用法
[圖片上傳失敗...(image-138a79-1595464164686)]
二.js垃圾回收機(jī)制
1.堆棧溢出
? 當(dāng)存儲(chǔ)的數(shù)據(jù)達(dá)到某一限制就會(huì)造成堆棧溢出
2. 內(nèi)存泄漏
? 當(dāng)不斷向堆中存儲(chǔ)數(shù)據(jù)刽酱，而不進(jìn)行清理，這就是內(nèi)存泄漏
3.垃圾回收
? 語(yǔ)言一般分為兩種瞧捌，一種自動(dòng)清理棵里，一種手動(dòng)清理，js只有自動(dòng)清理
現(xiàn)在各大瀏覽器通常用采用的垃圾回收有兩種方法：標(biāo)記清除姐呐、引用計(jì)數(shù)殿怜。
標(biāo)記清除
js中最常用的垃圾回收方式就是標(biāo)記清楚，當(dāng)變量進(jìn)入環(huán)境時(shí)曙砂，就標(biāo)記這個(gè)變量為“進(jìn)入環(huán)境“头谜，當(dāng)變量離開(kāi)環(huán)境時(shí)，就將其標(biāo)記為”離開(kāi)環(huán)境“鸠澈。 被標(biāo)記離開(kāi)環(huán)境的變量在下一次垃圾回收啟動(dòng)的時(shí)候會(huì)被釋放掉占用的內(nèi)存空間
引用計(jì)數(shù)
引用計(jì)數(shù)的含義是跟蹤記錄每個(gè)值被引用的次數(shù)柱告。當(dāng)聲明了一個(gè)變量并將一個(gè)引用類型賦值給該變量時(shí)，則這個(gè)值的引用次數(shù)就是1笑陈。相反际度，如果包含對(duì)這個(gè)值引用的變量又取得了另外一個(gè)值，則這個(gè)值的引用次數(shù)就減1涵妥。當(dāng)這個(gè)引用次數(shù)變成0時(shí)乖菱，則說(shuō)明沒(méi)有辦法再訪問(wèn)這個(gè)值了，因而就可以將其所占的內(nèi)存空間給收回來(lái)妹笆。這樣块请，垃圾收集器下次再運(yùn)行時(shí)，它就會(huì)釋放那些引用次數(shù)為0的值所占的內(nèi)存拳缠。
- 垃圾回收機(jī)制觸發(fā)條件
IE6的垃圾回收機(jī)制是根據(jù)內(nèi)存分配量允許的，當(dāng)環(huán)境中的256個(gè)變量贸弥，4096個(gè)對(duì)象窟坐，64k的字符串任意一張情況的時(shí)候都會(huì)觸發(fā)垃圾回收器工作，bug！哲鸳！
IE7中做了調(diào)整臣疑，觸發(fā)條件不再是固定的多，而是動(dòng)態(tài)修改的徙菠，初始值和IE6相同讯沈，如果垃圾回收器回收的內(nèi)存分配量低于程序占用內(nèi)存的15%，說(shuō)明大部分內(nèi)存不可被回收婿奔，設(shè)的垃圾回收觸發(fā)條件過(guò)于敏感缺狠，這時(shí)候把臨界條件翻倍，如果回收的內(nèi)存高于85%萍摊，說(shuō)明大部分內(nèi)存早就該清理了挤茄，這時(shí)候就把觸發(fā)條件置回
三 渲染機(jī)制
1.Doctype的作用是什么？
作用是為了告訴瀏覽器該文件的類型冰木。讓瀏覽器解析器知道應(yīng)該用哪個(gè)規(guī)范來(lái)解析文檔 html5 <!Doctype html> HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">2.瀏覽器渲染過(guò)程
image.png?
? HTML渲染大致分為如下幾步：
HTML被HTML解析器解析成DOM Tree, css則被css解析器解析成CSSOM Tree穷劈。
DOM Tree和CSSOM Tree解析完成后，被附加到一起踊沸，形成渲染樹(shù)（Render Tree）歇终。
節(jié)點(diǎn)信息計(jì)算(重排)也叫回流，這個(gè)過(guò)程被叫做Layout(Webkit)或者Reflow(Mozilla)逼龟。即根據(jù)渲染樹(shù)計(jì)算每個(gè)節(jié)點(diǎn)的幾何信息（DOM對(duì)象的位置和尺寸大衅滥），并將其安置在界面中的正確位置
渲染繪制(重繪)审轮，這個(gè)過(guò)程被叫做(Painting 或者 Repaint)肥哎。即根據(jù)計(jì)算好的信息繪制整個(gè)頁(yè)面。
以上4步簡(jiǎn)述瀏覽器的一次渲染過(guò)程疾渣，理論上篡诽，每一次的dom更改或者css幾何屬性更改，都會(huì)引起一次瀏覽器的重排/重繪過(guò)程榴捡，而如果是css的非幾何屬性更改杈女，則只會(huì)引起重繪過(guò)程。所以說(shuō)重排一定會(huì)引起重繪吊圾，而重繪不一定會(huì)引起重排达椰。
觸發(fā)重排的操作有：
? 當(dāng)你增加/刪除/修改DOM節(jié)點(diǎn)時(shí)，會(huì)導(dǎo)致重排/重繪
? 當(dāng)你移動(dòng)DOM的位置
? 當(dāng)你resize窗口的時(shí)候（移動(dòng)端沒(méi)有這個(gè)問(wèn)題）
? 元素尺寸的改變
? 當(dāng)你修改網(wǎng)頁(yè)默認(rèn)字體時(shí)
觸發(fā)重繪的操作有：
? 相比重排项乒，重繪就簡(jiǎn)單多了啰劲，所謂重繪，就是當(dāng)頁(yè)面中元素樣式的改變并不影響
? 它在文檔流中的位置時(shí)檀何，例如更改了字體顏色,瀏覽器會(huì)將新樣式賦予給元素并重新繪制的過(guò)程稱蝇裤。
color border-style visibility background text-decoration background-image background-position background-repeat outline-color outline outline-style border-radius outline-width box-shadow background-size [圖片上傳失敗...(image-491d9d-1595464164686)]
image.png3.為什么操作 DOM 慢
? 因?yàn)?DOM 是屬于渲染引擎中的東西廷支，而 JS 又是 JS 引擎中的東西。當(dāng)我們通過(guò) JS 操作 DOM 的時(shí)候栓辜，其 實(shí)這個(gè)操作涉及到了兩個(gè)線程之間的通信恋拍，那么勢(shì)必會(huì)帶來(lái)一些性能上的損耗。操作 DOM 次數(shù)一多藕甩，也 就等同于一直在進(jìn)行線程之間的通信施敢，并且操作 DOM 可能還會(huì)帶來(lái)重繪回流的情況，所以也就導(dǎo)致了性 能上的問(wèn)題狭莱。
四 頁(yè)面性能類
題目：提升頁(yè)面性能的方法有哪些
資源壓縮合并僵娃，減少HTTP請(qǐng)求
非核心代碼異步加載->異步加載的方式->異步加載的區(qū)別
1.異步加載的方式 1）動(dòng)態(tài)腳本加載 2）defer 3）async 2.異步加載的區(qū)別 1）defer是在html解析完成后才會(huì)執(zhí)行，如果是多個(gè)贩毕，按照加載的順序依次執(zhí)行 2）async是在加載完之后立即執(zhí)行悯许，如果是多個(gè)，執(zhí)行順序和加載順序無(wú)關(guān)
- 利用瀏覽器緩存->緩存的分類->緩存的原理
1.緩存的策略 1）強(qiáng)緩存：就是在緩存有效期內(nèi)直接使用緩存 Expires是HTTP/1.0控制網(wǎng)頁(yè)緩存的字段辉阶，其值為服務(wù)器返回該請(qǐng)求結(jié)果緩存的到期時(shí)間先壕，即在此發(fā)起該請(qǐng) 求 時(shí)，如果客戶端的時(shí)間小于Expires的值時(shí)谆甜，直接使用緩存結(jié)果垃僚。 在HTTP/1.1中，使用Cache-Contro cache-control: max-age=600 expires: Mon, 16 Apr 2018 01:41:50 GMT 2）協(xié)商緩存： 協(xié)商緩存就是強(qiáng)制緩存失效后规辱，瀏覽器攜帶緩存標(biāo)識(shí)想服務(wù)器發(fā)起請(qǐng)求谆棺， 由服務(wù)器根據(jù)緩存標(biāo)識(shí)決定是否使用緩 存的過(guò)程，主要有以下兩種情況： 協(xié)商緩存生效罕袋，返回304改淑，即數(shù)據(jù)未更改可以繼續(xù)使用。 協(xié)商緩存失效浴讯，返回200朵夏，數(shù)據(jù)已發(fā)生更改，并返回客戶端新的數(shù)據(jù)榆纽。 Last-Modified / If-Modified-Since ETag
使用CDN
預(yù)解析DNS
<link rel="dns-prefetch" > 當(dāng)遇到a標(biāo)簽但是為了確保安全性温治，在HTTPS頁(yè)面中不會(huì)自動(dòng)解析 希望在HTTPS頁(yè)面開(kāi)啟自動(dòng)解析功能時(shí)缭召，添加如下標(biāo)記 <meta http-equiv="x-dns-prefetch-control" content="on">
五. vue和react的區(qū)別
相同點(diǎn)
? 1.都支持服務(wù)器端渲染
**2.都有Virtual DOM,組件化開(kāi)發(fā),通過(guò)props參數(shù)進(jìn)行父子組件數(shù)據(jù)的傳遞,**? 都實(shí)現(xiàn)webComponent規(guī)范
? 3.數(shù)據(jù)驅(qū)動(dòng)視圖
? 4.都有支持native的方案,React的React native,Vue的weex
? 5.都有管理狀態(tài)频轿，React有redux,Vue有自己的Vuex（自適應(yīng)vue偷仿，量身定做）
? 6.只有框架的骨架，其他的功能如路由/狀態(tài)管理等是與框架分離的
? 7.都是javascript的UI框架衣屏，數(shù)據(jù)驅(qū)動(dòng)試圖
不同點(diǎn)
**1.React嚴(yán)格上只針對(duì)MVC的view層,Vue則是MVVM模式**? 2.virtual DOM不一樣,vue會(huì)跟蹤每一個(gè)組件的依賴關(guān)系,不需要重新渲染整個(gè)組件樹(shù).
? 而對(duì)于React而言,每當(dāng)應(yīng)用的狀態(tài)被改變時(shí),全部組件都會(huì)重新渲染,
? 所以react中會(huì)需要shouldComponentUpdate這個(gè)生命周期函數(shù)方法來(lái)進(jìn)行控制
**3.組件寫法不一樣, React推薦的做法是 JSX + inline style, **? 也就是把HTML和CSS全都寫進(jìn)JavaScript了,即'all in js';
? 通過(guò)js來(lái)生成html躏升，所以設(shè)計(jì)了jsx，還有通過(guò)js來(lái)操作css狼忱，社區(qū)的styled-component煮甥、jss等
? Vue推薦的做法是
webpack+vue-loader的單文件組件格式,即html,css,jd寫在同一個(gè)文件;**4.數(shù)據(jù)綁定: vue實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定,react數(shù)據(jù)流動(dòng)是單向的** **5.state對(duì)象在react應(yīng)用中不可變的,需要使用setState方法更新?tīng)顟B(tài);**? 在vue中,state對(duì)象不是必須的,數(shù)據(jù)由data屬性在vue對(duì)象中管理盗温；
**6.多了指令系統(tǒng)藕赞，讓模版可以實(shí)現(xiàn)更豐富的功能成肘，而React只能使用JSX語(yǔ)法；**? 7.vue基于數(shù)據(jù)劫持斧蜕，攔截到最新的數(shù)據(jù)双霍，從而渲染視圖，
? react是提供對(duì)應(yīng)的API批销，通過(guò)我們操作API洒闸，讓最新數(shù)據(jù)渲染視圖
? 8.react默認(rèn)只實(shí)現(xiàn)了單向控制（只有數(shù)據(jù)影響視圖）,
? 而vue基于v-model實(shí)現(xiàn)了雙向控制（即也包含了視圖影響數(shù)據(jù)）
? 無(wú)論vue還是react，在實(shí)現(xiàn)視圖影響數(shù)據(jù)的方式上均芽，也都是基于change/input事件丘逸，
? 監(jiān)聽(tīng)表單元素內(nèi)容的改變，從而去修改數(shù)據(jù)掀宋，達(dá)到數(shù)據(jù)的更新
vue和react選擇
- vue：最新文檔和更簡(jiǎn)單的語(yǔ)法深纲，更小，更快劲妙，更靈活湃鹊。豐富的html模版，易于開(kāi)發(fā)
- react：需要構(gòu)建移動(dòng)應(yīng)用程序镣奋，專業(yè)和出色的社區(qū)支持币呵，以解決任何問(wèn)題。需要構(gòu)建大型應(yīng)用程序侨颈，輕量級(jí)余赢，易于版本歉意
6.MVC(后端node)與前端MVVM之間的區(qū)別
MVC 是后端的分層開(kāi)發(fā)概念
MVVM 是前端視圖層的概念，主要關(guān)注于視圖層分離哈垢，也就是說(shuō)：MVVM把前端的視圖層妻柒，分為了三部分Model，View温赔，ViewModel(VM),其中VM是MVVM思想的核心：因?yàn)閂M是M和V之間的調(diào)度者
MVVM的思想蛤奢，主要是為了讓我們開(kāi)發(fā)者更加方便，因?yàn)镸VVM提供了數(shù)據(jù)的雙向綁定陶贼；
注意：數(shù)據(jù)的雙向綁定是由VM提供的啤贩；
image.png<body> <!-- Vue實(shí)例所控制的這個(gè)元素區(qū)域，就是MVVM中的 V --> <div id="app"> <div >{{message}}</div> </div> <script> // new出來(lái)的這個(gè)VM對(duì)象拜秧，就是我們MVVM中的 VM 調(diào)度者 var vm = new Vue({ el: "#app", // 這里的data就是MVVM中的 M痹屹，專門用來(lái)保存每個(gè)頁(yè)面的數(shù)據(jù)的 data: { message: "hello world", } }) </script> </body>
vue
vdom
- vdom是什么？為何會(huì)存在vdom枉氮？
虛擬dom志衍，用js模擬DOM結(jié)構(gòu)暖庄， DOM操作非常”昂貴“楼肪，將DOM對(duì)比操作放在js層培廓，提高效率 由于在瀏覽器中操作DOM是很昂貴的。頻繁的操作DOM春叫，會(huì)產(chǎn)生一定的性能問(wèn)題肩钠。這就是虛擬Dom的產(chǎn)生原因
- key的作用
key得作用主要是為了高效的更新虛擬DOM，其原理是vue在patch過(guò)程中通過(guò)可以精確判斷兩個(gè)節(jié)點(diǎn)是否是同一個(gè)暂殖，從而避免頻繁更新不同元素价匠，使得整個(gè)patch過(guò)程更加高效，減少DOM操作量呛每，提高性能vue 2.0 響應(yīng)式原理
//Vue 2.0 實(shí)現(xiàn)相應(yīng)式原理 //數(shù)據(jù)變化了踩窖，可以更新視圖 let oldArrayPrototype = Array.prototype let proto = Object.create(oldArrayPrototype); ['push','shift','unshift'].forEach(method => { proto[method] = function(){ oldArrayPrototype[method].call(this,...arguments) updateView(); } }); function observer(target){ if(typeof target !== 'object' || target == null){ return target } if(Array.isArray(target)){//攔截?cái)?shù)組，給數(shù)組的方法進(jìn)行了重寫 target.__proto__ = proto } for(let key in target){ defineReactive(target,key,target[key]) } } function defineReactive(target,key,value){ observer(value) //遞歸 Object.defineProperty(target,key,{ get(){ return value }, set(newValue){ if(newValue !== value){ observer(newValue) updateView(); value = newValue } } }) } function updateView(){ console.log('更新視圖'); } let data = {name:'zf',age:{n:200},arr:[0,1,2]} observer(data) data.arr.push(3)VUE3.0 響應(yīng)原理
function trigger() { console.log('觸發(fā)視圖更新'); } function isObject(target) { return typeof target == 'object' && target !== null; } function reactive(target) { if (!isObject(target)) { return target } const handlers = { set(target, key, value) { if (target.hasOwnProperty(key)) { trigger(); } return Reflect.set(target, key, value); }, get(target, key, receiver) { const res = Reflect.get(target, key) if (isObject(target[key])) { return reactive(res) //遞歸 } return res; }, deleteProperty(target, key) { return Reflect.deleteProperty(target, key) } } let observed = new Proxy(target, handlers) return observed } let obj = { name: 'zf', a: [1, 2, 3] } let p = reactive(obj) p.a.push(4)
react
ref
ajax:
異步組件：按需家長(zhǎng)
其他面試題
1.進(jìn)程和線程
https://www.php.cn/faq/418138.html
2.節(jié)流和防抖
http://www.reibang.com/p/757957750792
3.頁(yè)面布局的方式
流式布局晨横，也叫百分比布局
流式布局的特征：
寬度自適應(yīng)洋腮，高度寫死，并不是百分百還原設(shè)計(jì)圖颓遏。
圖標(biāo)都是固定死大小的徐矩，包括字體等也是固定死的。并不是所有的東西都是自適應(yīng)的叁幢。
一些大的圖片滤灯，設(shè)置寬度為百分比自適應(yīng)即可，隨著屏幕大小進(jìn)行變化,對(duì)于小圖標(biāo)或者文本等, 一般都是定死寬高大小曼玩。
等比縮放 rem
響應(yīng)式布局
4.instance of 原理
<script type="text/javascript">
//自定義一個(gè)構(gòu)造函數(shù)
function Fun(){}
//利用上面的構(gòu)造函數(shù)構(gòu)造一個(gè)實(shí)例
var fun1 = new Fun()
console.log(fun1 instanceof Fun) //true
console.log(fun1 instanceof Function) //false
console.log(fun1 instanceof Object) //true
</script>
Instanceof運(yùn)算符的第一個(gè)變量是一個(gè)對(duì)象鳞骤，暫時(shí)稱為A；第二個(gè)變量一般是一個(gè)函數(shù)黍判，暫時(shí)稱為B豫尽。
Instanceof的判斷規(guī)則是：沿著A的__proto__這條線來(lái)找，同時(shí)沿著B(niǎo)的prototype這條線來(lái)找顷帖，如果兩條 線能找到同一個(gè)引用美旧，即同一個(gè)對(duì)象，那么就返回true贬墩。如果找到終點(diǎn)還未重合榴嗅，則返回false。
5.普通函數(shù)中的和箭頭函數(shù)this
箭頭函數(shù)和普通函數(shù)的區(qū)別如下陶舞。
普通函數(shù)：根據(jù)調(diào)用我的人（誰(shuí)調(diào)用我嗽测，我的this就指向誰(shuí)）
箭頭函數(shù)：根據(jù)所在的環(huán)境（我再哪個(gè)環(huán)境中，this就指向誰(shuí)）
一針見(jiàn)血式總結(jié):
普通函數(shù)中的this:
1. this總是代表它的直接調(diào)用者(js的this是執(zhí)行上下文), 例如 obj.func ,那么func中的this就是obj
2.在默認(rèn)情況(非嚴(yán)格模式下,未使用 'use strict'),沒(méi)找到直接調(diào)用者,則this指的是 window （常見(jiàn)的window的屬 性和方法有: alert, location,document,parseInt,setTimeout,setInterval等）(約定俗成)
3.在嚴(yán)格模式下,沒(méi)有直接調(diào)用者的函數(shù)中的this是 undefined
4.使用call,apply,bind(ES5新增)綁定的,this指的是 綁定的對(duì)象
ES6箭頭函數(shù)中this
（1）默認(rèn)指向定義它時(shí)肿孵，所處上下文的對(duì)象的this指向唠粥。即ES6箭頭函數(shù)里this的指向就是上下文里對(duì)象this指向疏魏，偶爾沒(méi)有上下文對(duì)象，this就指向window
（2）即使是call晤愧，apply大莫，bind等方法也不能改變箭頭函數(shù)this的指向
6.http中服務(wù)狀態(tài)碼?303,301,302的區(qū)別？
HTTP狀態(tài)碼301與302有什么區(qū)別2,515次閱讀
301：（永久移動(dòng)）請(qǐng)求的網(wǎng)頁(yè)已被永久移動(dòng)到新位置养涮。服務(wù)器返回此響應(yīng)（作為對(duì)GET或HEAD請(qǐng)求的響應(yīng)）時(shí)葵硕，會(huì)自動(dòng)將請(qǐng)求者轉(zhuǎn)到新位置。
302：（臨時(shí)移動(dòng)）服務(wù)器目前正從不同位置的網(wǎng)頁(yè)響應(yīng)請(qǐng)求贯吓，但請(qǐng)求者應(yīng)繼續(xù)使用原有位置來(lái)進(jìn)行以后的請(qǐng)求。此代碼與響應(yīng)GET和HEAD請(qǐng)求的301代碼類似蜀变，會(huì)自動(dòng)將請(qǐng)求者轉(zhuǎn)到不同的位置悄谐。
HTTP狀態(tài)碼301與302的區(qū)別：
1、它們之間關(guān)鍵區(qū)別在库北，資源是否存在有效性爬舰；
2、301資源還在只是換了一個(gè)位置寒瓦，返回的是新位置的內(nèi)容情屹；
3、302資源暫時(shí)失效杂腰，返回的是一個(gè)臨時(shí)的代替頁(yè)上垃你。
304（未修改）
注意：如果永久失效建議使用404
7.http的緩存機(jī)制
https://www.cnblogs.com/chenqf/p/6386163.html
對(duì)于強(qiáng)制緩存，服務(wù)器通知瀏覽器一個(gè)緩存時(shí)間喂很，在緩存時(shí)間內(nèi)惜颇，下次請(qǐng)求，直接用緩存少辣，不在時(shí)間內(nèi)凌摄，執(zhí)行比較緩存策略。
Expires
Expires的值為服務(wù)端返回的到期時(shí)間漓帅，即下一次請(qǐng)求時(shí)锨亏，請(qǐng)求時(shí)間小于服務(wù)端返回的到期時(shí)間，直接使用緩存數(shù)據(jù)忙干。
不過(guò)Expires 是HTTP 1.0的東西器予，現(xiàn)在默認(rèn)瀏覽器均默認(rèn)使用HTTP 1.1，所以它的作用基本忽略豪直。
另一個(gè)問(wèn)題是劣摇，到期時(shí)間是由服務(wù)端生成的，但是客戶端時(shí)間可能跟服務(wù)端時(shí)間有誤差弓乙，這就會(huì)導(dǎo)致緩存命中的誤差末融。
所以HTTP 1.1 的版本钧惧，使用Cache-Control替代。
Cache-Control:max-age=1000
Cache-Control
Cache-Control 是最重要的規(guī)則勾习。常見(jiàn)的取值有private浓瞪、public、no-cache巧婶、max-age乾颁，no-store，
默認(rèn)為private艺栈。
private: 客戶端可以緩存
public: 客戶端和代理服務(wù)器都可緩存（前端的同學(xué)英岭，可以認(rèn)為public和private是一樣的）
max-age=xxx: 緩存的內(nèi)容將在 xxx 秒后失效
no-cache: 需要使用對(duì)比緩存來(lái)驗(yàn)證緩存數(shù)據(jù)（后面介紹）
no-store: 所有內(nèi)容都不會(huì)緩存，強(qiáng)制緩存湿右，對(duì)比緩存都不會(huì)觸發(fā)（對(duì)于前端開(kāi)發(fā)來(lái)說(shuō)诅妹，緩存越多越好， so...基本上和它說(shuō)886）
對(duì)于協(xié)商緩存毅人，將緩存信息中的Etag/If-None-Match和Last-Modified/If-Modified-Since通過(guò)請(qǐng)求發(fā)送給服務(wù)器吭狡，由服務(wù)器校驗(yàn)，返回304狀態(tài)碼時(shí)丈莺，瀏覽器直接使用緩存划煮。
Cache-Control:no-cache
http緩存控制
1.http緩存能夠幫助服務(wù)器提高并發(fā)性能，很多資源不需要重復(fù)請(qǐng)求直接從瀏覽器中拿緩存
2.http緩存分類：強(qiáng)緩存 協(xié)商緩存
3.強(qiáng)緩存通過(guò)expires和cache-control控制 缔俄，協(xié)商緩存通過(guò)last-Modify 和E-tag控制
補(bǔ)充：
1.為什么有expires 還需要cache-control
因?yàn)閑xpires有個(gè)服務(wù)器和瀏覽器時(shí)間不同步的問(wèn)題
expires是絕對(duì)時(shí)間 cache-control是相對(duì)時(shí)間
2.last-modify 和 etag
last-modify 它是有個(gè)精度問(wèn)題到秒
e-tag沒(méi)有精度問(wèn)題弛秋， 只要文件改變 e-tag值就改變
8.對(duì)原型和作用域鏈的理解
原型：
所有的函數(shù)都天生自帶一個(gè)屬性：prototype(原型)，它是一個(gè)對(duì)象數(shù)據(jù)類型的值牵现，在當(dāng)前prototype對(duì)象中铐懊，存儲(chǔ)了類需要給其實(shí)例使用的公有的屬性和方法
prototype這個(gè)對(duì)象，瀏覽器會(huì)默認(rèn)為其開(kāi)一個(gè)堆內(nèi)存瞎疼，這個(gè)堆內(nèi)存中天生自帶一個(gè)屬性：constructor(構(gòu)造函數(shù))科乎，這個(gè)屬性存儲(chǔ)的的值就是當(dāng)前函數(shù)本身
每一個(gè)類的實(shí)例（每一個(gè)對(duì)象）都天生自帶一個(gè)屬性：proto,屬性值是當(dāng)前對(duì)象所屬類的原型(prototype)
原型鏈：
當(dāng)試圖得到一個(gè)對(duì)象的某個(gè)屬性時(shí)，如果這個(gè)對(duì)象本身沒(méi)有這個(gè)屬性贼急，那么會(huì)去它的proto(即它的構(gòu)造函數(shù)的prototype)中尋找茅茂，即
console.log(obj.__proto__ === Object.prototype);
作用域鏈：（當(dāng)前作用域沒(méi)有定義某個(gè)變量，所以要去它的父級(jí)作用域找太抓，這樣的就是作用域鏈）
當(dāng)前作用域代碼執(zhí)行的時(shí)候遇到一個(gè)變量空闲，首先看一下它是否屬于私有變量，
如果不是私有變量走敌，向其上級(jí)作用域查找碴倾，也不是上級(jí)作用域私有變量，繼續(xù)向上查找，
一直到window全局作用域?yàn)橹梗?
我們把這種向上一級(jí)級(jí)查找機(jī)制叫做作用域鏈
9.redux
1.store通過(guò)reducer創(chuàng)建了初始狀態(tài)跌榔，因?yàn)閯?chuàng)建容器的時(shí)候執(zhí)行一次DISPATCH
3.用戶產(chǎn)生了操作异雁，發(fā)送一個(gè)action對(duì)象到store的dispatch函數(shù)里面
4.然后會(huì)調(diào)用reducer，reducer接收到action并根據(jù)action.type去匹配僧须，執(zhí)行相應(yīng)的邏輯纲刀，返回新的state
5.store.subscribe方法里的回調(diào)函數(shù)會(huì)執(zhí)行，此時(shí)就可以通知view去重新獲取state
（通知事件池中的方法依次執(zhí)行）
2.view通過(guò)store.getState()獲取到了store中保存的state掛載在了自己的狀態(tài)上
redux是如何降state注入到react組件上去
1.首先明確與React產(chǎn)生關(guān)聯(lián)的React-redux這個(gè)庫(kù)
2.Redux的原理就是一個(gè)發(fā)布訂閱器担平，幫我買用一個(gè)變量存儲(chǔ)所有的state示绊，并且提供了發(fā)布功能來(lái)修改數(shù)據(jù)，以及訂閱功能 來(lái)觸發(fā)回調(diào)
3.而React-Redux的作用就是訂閱Store里數(shù)據(jù)的更新暂论，他包含兩個(gè)重要元素面褐，Provider和connect方法
4.Provider的作用就是通過(guò)Context API把 Store對(duì)象注入到React組件上去
5.而Connect方法就是一個(gè)高階組件，在高階組件里通過(guò)訂閱Store中數(shù)據(jù)的更新空另，從而通過(guò)調(diào)用 setState方法來(lái)觸發(fā)
組件更新
redux 最大的弊端是樣板代碼太多盆耽，修改數(shù)據(jù)的鏈路太長(zhǎng)
解決方案：可借助一些工具，幫我嗎減少創(chuàng)建代碼的過(guò)程扼菠，Redux-Actions
10.事件訂閱
訂閱發(fā)布模式定義了一種一對(duì)多的依賴關(guān)系，讓多個(gè)訂閱者對(duì)象同時(shí)監(jiān)聽(tīng)某發(fā)布者對(duì)象坝咐。
這個(gè)發(fā)布者對(duì)象在自身狀態(tài)變化時(shí)循榆，會(huì)通知所有訂閱者對(duì)象，使它們能夠自動(dòng)更新自己的狀態(tài)墨坚。
class Public{
constructor(){
this.handlers = {}
}
on(eventType,handler){
if(!(eventType in this.handlers)){
this.handlers[eventType] = []
}
this.handlers[eventType].push(handler)
}
emit(eventType){
if(!(eventType in this.handlers)){
return
}
let handlers = this.handlers[eventType]
for(let i=0;i<handlers.length;i++){
handlers[i]()
}
}
off(eventType,fn){
if(!(eventType in this.handlers)){
return
}
let currentHandler = this.handlers[eventType]
let length = currentHandler.length
for(let i=length-1;i>=0;i--){
if(fn === currentHandler[i]){
currentHandler.splice(i,1)
}
}
if(currentHandler.length === 0 ){
delete this.handlers[eventType]
}
}
}
let publish = new Public()
let fn = ()=>{
console.log(1);
}
fn1 = ()=>{
console.log(2);
}
fn2 = ()=>{
console.log(3);
}
11.如何檢測(cè)一個(gè)數(shù)組
array.isArray判斷秧饮，返回true，說(shuō)明是數(shù)組
instanceof Array判斷泽篮，返回true盗尸。說(shuō)明是數(shù)組
12 .vue數(shù)據(jù)響應(yīng)式原理
vue.js 則是采用數(shù)據(jù)劫持+發(fā)布訂閱模式的方式，通過(guò)Object.defineProperty()來(lái)劫持各個(gè)屬性的setter帽撑，getter泼各，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽(tīng)回調(diào)
13.前端路由
什么是路由亏拉？
根據(jù)不同的url地址展示不同的頁(yè)面或者數(shù)據(jù)
路由分為前端路由和后端路由
前端路由：
1.前端路由多用于單頁(yè)面開(kāi)發(fā)扣蜻，也就是SPA
2.前端路由不涉及到服務(wù)器的，是前端利用hash或者HTML5的historyApi來(lái)實(shí)現(xiàn)的及塘，一般用于不同的內(nèi)容展示和切換
后端路由：
通過(guò)用戶請(qǐng)求的url導(dǎo)航到具體的html頁(yè)面莽使；每跳轉(zhuǎn)到不同的URL，都是重新訪問(wèn)服務(wù)端笙僚，然后服務(wù)端返回頁(yè)面芳肌，頁(yè)面也可以是服務(wù)端獲取數(shù)據(jù)，然后和模板組合，返回HTML亿笤，也可以是直接返回模板HTML翎迁，然后由前端js再去請(qǐng)求數(shù)據(jù)，使用前端模板和數(shù)據(jù)進(jìn)行組合责嚷，生成想要的HTML
14.用過(guò)哪些的loader和plugins
loader:
style-loader鸳兽、
css-loader、
sass-loader
file-loader 罕拂、
url-loader
babel-loader
vue-loader
plugins:
mini-css-extract-plugin //將css文件提取為獨(dú)立的文件的插件
html-webpack-plugin //將模板文件和js文件整合到一塊
clean-webpack-plugin //清理文件
UglifyJSPlugin
DllPlugin
ParallelUglifyPlugin
15.為什么require是在哪引入都可以揍异，而import必須在文件最前面引入？
require是運(yùn)行時(shí)調(diào)用爆班，所以require理論上可以運(yùn)用在代碼的任何地方
import是編譯時(shí)調(diào)用衷掷，所以必須放在文件開(kāi)頭
16.對(duì)babel的了解
Babel是一個(gè)JavaScript編譯器
Babel是一個(gè)工具鏈，主要用于將ECMAScript 2015+版本的代碼轉(zhuǎn)換為向后兼容的JavaScript語(yǔ)法柿菩，可以使之運(yùn)行在當(dāng)前和舊版本的瀏覽器或其他環(huán)境中戚嗅。
下面列出的是Babel能為你做的事情：
語(yǔ)法轉(zhuǎn)換
通過(guò)Polyfill方式在目標(biāo)環(huán)境中添加缺失的特性（通過(guò)@ babel / polyfill模塊）
原始碼轉(zhuǎn)換（codemods）
17.前端模塊化方案
CommonJS 是服務(wù)器模塊的規(guī)范，Node.js采用了這個(gè)規(guī)范 同步加載
AMD（require.js） 專門用于瀏覽器端枢舶，模塊的加載是異步
CMD（sea.js） 按需加載
ES6 瀏覽器端懦胞，js語(yǔ)言本身的
18.node的核心模塊
http、https凉泄、fs躏尉、qs、path url querystring
19.new操作符干了什么
var Func=function(){
this.name='www'
};
var func=new Func ();
new共經(jīng)過(guò)了4幾個(gè)階段
1后众、創(chuàng)建一個(gè)空對(duì)象
varobj=new Object();
2胀糜、設(shè)置原型鏈
obj.__proto__= Func.prototype;
3、讓Func中的this指向obj蒂誉，并執(zhí)行Func的函數(shù)體教藻。
var result =Func.call(obj);
4、判斷Func的返回值類型：
如果是值類型右锨，返回obj括堤。如果是引用類型，就返回這個(gè)引用類型的對(duì)象陡蝇。
if (typeof(result) == "object"){
func=result;
}
else{
func=obj;;
}
20.內(nèi)存溢出和內(nèi)存泄漏
內(nèi)存溢出：
一種程序運(yùn)行出現(xiàn)的錯(cuò)誤
當(dāng)程序運(yùn)行需要的內(nèi)存超過(guò)了剩余的內(nèi)存時(shí)痊臭，就拋出了內(nèi)存溢出的錯(cuò)誤
內(nèi)存泄漏：
占用的內(nèi)存沒(méi)有及時(shí)釋放
內(nèi)存泄漏積累多了就容易導(dǎo)致內(nèi)存溢出
常見(jiàn)的內(nèi)存泄漏：
意外的全局變量
沒(méi)有及時(shí)清理的定時(shí)器
必包
21.http與https的區(qū)別
1、https協(xié)議需要到CA （Certificate Authority登夫，證書頒發(fā)機(jī)構(gòu)）申請(qǐng)證書广匙，
2、http是超文本傳輸協(xié)議恼策，信息是明文傳輸鸦致，https則是具有安全性的ssl加密傳輸協(xié)議潮剪。
3、http和https使用的端口也不一樣分唾，前者是80抗碰，后者是443。
22.fetch 和 axios區(qū)別
fetch 是一個(gè)底層的api绽乔，瀏覽器原生支持的
axios 是一個(gè)封裝好的框架
axios:axios函數(shù)就是把發(fā)送ajax 用promise封裝了一下
1)支持瀏覽器和nodejs發(fā)請(qǐng)求 前后短發(fā)請(qǐng)求
2）支持promise語(yǔ)法
3）支持自動(dòng)解析json
4）支持請(qǐng)求進(jìn)度檢測(cè)
fetch
優(yōu)點(diǎn)：
1)瀏覽器級(jí)別原生支持的api
2）原生支持的promise api
3）語(yǔ)法簡(jiǎn)潔
缺點(diǎn)：
1）不支持文件上傳進(jìn)度檢測(cè)
2）使用不完美弧蝇，需要封裝
3）默認(rèn)不帶cookie
4）需要手動(dòng)處理返回的數(shù)據(jù)
23.輸入 URL 到頁(yè)面渲染的整個(gè)流程
1.對(duì)域名進(jìn)行解析，得到ip地址
2.根據(jù)ip地址折砸，找到服務(wù)器看疗，發(fā)起TCP的三次握手
3.建立TCP連接后發(fā)起http請(qǐng)求
4.服務(wù)器響應(yīng)HTTP請(qǐng)求，瀏覽器得到html代碼
5.瀏覽器解析html代碼睦授，并請(qǐng)求html代碼中的資源（如：js/css/圖片）
6.瀏覽器對(duì)頁(yè)面進(jìn)行渲染呈現(xiàn)給用戶
7服務(wù)器關(guān)閉連接
1）HTML被HTML解析器解析成DOM Tree, css則被css解析器解析成CSSOM Tree两芳。
如果遇到 script 標(biāo)簽的話，會(huì)判斷是否存在 async 或者 defer 去枷，前者會(huì)并行進(jìn)行下載并執(zhí)行 JS怖辆，后者會(huì)先下載文 件，然后等待 HTML 解析完成后順序執(zhí)行删顶。
如果以上都沒(méi)有竖螃，就會(huì)阻塞住渲染流程直到 JS 執(zhí)行完畢。遇到文件下載的會(huì)去下載文件
2）DOM Tree和CSSOM Tree解析完成后逗余，被附加到一起斑鼻，形成渲染樹(shù)（Render Tree）。
3）節(jié)點(diǎn)信息計(jì)算(重排)也叫回流猎荠，這個(gè)過(guò)程被叫做Layout(Webkit)或者Reflow(Mozilla)。即根據(jù)渲染樹(shù)計(jì)算每個(gè)節(jié)點(diǎn)的 幾何信息（DOM對(duì)象的位置和尺寸大惺癖浮）关摇，并將其安置在界面中的正確位置
4）渲染繪制(重繪)，這個(gè)過(guò)程被叫做(Painting 或者 Repaint)碾阁。即根據(jù)計(jì)算好的信息繪制整個(gè)頁(yè)面输虱。
24.xss 和 csrf
1.xss 跨站腳本攻擊
2.xss 瀏覽器向服務(wù)器請(qǐng)求的時(shí)候被注入腳本攻擊
防范手段：
輸入過(guò)濾
html字符轉(zhuǎn)譯
2. csrf 跨站請(qǐng)求偽造
黑客通過(guò)網(wǎng)站B，誘使用戶去訪問(wèn)已經(jīng)登錄了的網(wǎng)站A脂凶，進(jìn)行一些違背用戶意愿的請(qǐng)求宪睹，造成用戶損失
防范手段：
請(qǐng)求的時(shí)候，加token
25.async/await
async/await使得異步代碼看起來(lái)像同步代碼蚕钦，這正是它的魔力所在
async +await 原理 generate+yield
async 函數(shù)是什么亭病？一句話，它就是 Generator 函數(shù)的語(yǔ)法糖嘶居。
Generator 函數(shù)是 ES6 提供的一種異步編程解決方案罪帖，語(yǔ)法行為與傳統(tǒng)函數(shù)完全不同。本章詳細(xì)介紹 Generator 函數(shù)的語(yǔ)法和 API，它的異步編程應(yīng)用請(qǐng)看《Generator 函數(shù)的異步應(yīng)用》一章整袁。
26.清除浮動(dòng)的方法
1.父級(jí)div定義偽類：after
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
2.在結(jié)尾處添加空div標(biāo)簽clear:both
原理：添加一個(gè)空div菠齿，利用css提高的clear:both清除浮動(dòng)，讓父級(jí)div能自動(dòng)獲取到高度
優(yōu)點(diǎn)：簡(jiǎn)單坐昙，代碼少绳匀，瀏覽器支持好，不容易出現(xiàn)怪問(wèn)題
缺點(diǎn)：不少初學(xué)者不理解原理炸客；如果頁(yè)面浮動(dòng)布局多疾棵，就要增加很多空div，讓人感覺(jué)很不爽
3.父級(jí)div定義height
原理：父級(jí)div手動(dòng)定義height嚷量，就解決了父級(jí)div無(wú)法自動(dòng)獲取到高度的問(wèn)題
優(yōu)點(diǎn)：簡(jiǎn)單陋桂，代碼少，容易掌握
缺點(diǎn)：只適合高度固定的布局蝶溶，要給出精確的高度
4.父級(jí)div定義overflow:hidden/auto
原理：觸發(fā)BFC嗜历，浮動(dòng)元素的高度也參與計(jì)算
27.BFC
BFC 全稱為 塊格式化上下文 (Block Formatting Context) 。
觸發(fā)BFC規(guī)范的元素抖所，可以形成一個(gè)獨(dú)立的容器梨州。不收到外界的影響，從而解決一些布局的問(wèn)題
如何創(chuàng)建BFC
1田轧、float的值不是none暴匠。
2、position的值不是static或者relative傻粘。
3每窖、display的值是inline-block、table-cell弦悉、flex窒典、table-caption或者inline-flex
4、overflow的值不是visible
BFC特性及應(yīng)用
解決margin疊加問(wèn)題
解決margin傳遞問(wèn)題
解決浮動(dòng)問(wèn)題
解決覆蓋問(wèn)題
28.元素水平垂直居中
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.box{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.parent{
display: flex;
justify-content: center;
align-items: center;
}
29.ES6 新特性
（1）新增聲明命令let和const
（2）模板字符串（Template String）
（3）函數(shù)的擴(kuò)展
函數(shù)的默認(rèn)參數(shù)
箭頭函數(shù)
（4）對(duì)象的擴(kuò)展
屬性的簡(jiǎn)寫稽莉。ES6 允許在對(duì)象之中瀑志，直接寫變量。這時(shí)污秆，屬性名為變量名, 屬性值為變量的值
方法的簡(jiǎn)寫劈猪。省略冒號(hào)與function關(guān)鍵字
（6）import和export ES6標(biāo)準(zhǔn)中，JavaScript原生支持模塊(module)了
（7）Promise對(duì)象
（8）解構(gòu)賦值
（10）展開(kāi)運(yùn)算符(...)
30 事件冒泡和事件捕獲
事件冒泡 事件冒泡:事件會(huì)從最內(nèi)層的元素開(kāi)始發(fā)生,一直向上傳播,直到document對(duì)象良拼。
事件捕獲 事件捕獲:與事件冒泡相反,事件會(huì)從最外層開(kāi)始發(fā)生,直到最具體的元素战得。 第一個(gè)參數(shù)是需要綁定的事件,第二個(gè)參數(shù)是觸發(fā)事件后要執(zhí)行的函數(shù)。而第三個(gè)參數(shù)默認(rèn)值是false,表示在事件冒泡的階段調(diào)用..
31.js如何解決異步的
回調(diào)函數(shù)
事件觸發(fā)
發(fā)布/訂閱者模式
promise
generate
32 promise
class MyPromise{
constructor(exec){
this.status = "pending"
this.value = undefined
this.resolveArr = []
this.rejectArr = []
let change = (status,value)=>{
if(this.status !== "pending") return
this.status = status
this.value = value
let fnArr = this.status === 'resolve' ? this.resolveArr : this.resolveArr
fnArr.forEach((item)=>{
if(typeof item !== 'function'){
return
}
item(this.value)
})
}
let resolve = (value)=>{
if(this.rejectArr.length > 0){
change('resolve',value)
}
let timer = setTimeout(()=>{
change('resolve',value)
clearTimeout(timer)
},0)
}
let reject = (value)=>{
if(this.rejectArr.length > 0){
change('reject',value)
}
let timer = setTimeout(()=>{
change('reject',value)
clearTimeout(timer)
},0)
}
try{
exec(resolve,reject)
}catch(err){
reject(err.message)
}
}
then(resolve,reject){
this.resolveArr.push(resolve)
this.rejectArr.push(reject)
}
}
new MyPromise((resolve, reject) => {
setTimeout(_ => {
resolve(100);
//reject('ERROR');
}, 1000);
}).then(result => {
console.log(result);
})
33.深復(fù)制
function cloneObject(target,source){
var names = Object.getOwnPropertyNames(source)
for(let i=0;i<names.length;i++){
var desc = Object.getOwnPropertyDescriptor(source,names[i])
if(typeof desc.value == 'object' && desc.value !==null){
switch(desc.value.constructor){
case RegExp:
obj = new desc.value.constructor(desc.value.source,desc.value.flags)
break;
default:
obj = new desc.value.constructor()
}
cloneObject(obj,desc.value)
Object.defineProperty(target,names[i],{
value:obj,
enumerable:desc.enumerable,
writable:desc.writable,
configurable:desc.configurable
})
}else{
Object.defineProperty(target,names[i],desc)
}
}
return target
}
性能優(yōu)化
初始階段->加載優(yōu)化
- 首頁(yè)加載慢的優(yōu)化
問(wèn)題分析
- 首頁(yè)加載圖片過(guò)多
- 首頁(yè)的請(qǐng)求量過(guò)多
- 首頁(yè)請(qǐng)求的靜態(tài)資源（html/css/js/圖片）過(guò)大
結(jié)論：所有加載慢的問(wèn)題最終都可以歸納成兩個(gè)問(wèn)題 多和大
Q：首頁(yè)加載圖片過(guò)多的問(wèn)題将饺，可以通過(guò)以下幾種方法解決：
1）通過(guò)懶加載的方式處理非首屏的圖片
2）對(duì)于小圖標(biāo)可以采用iconfont的方式解決
3）對(duì)于小圖片可以采用雪碧圖的方式解決
Q：首頁(yè)的請(qǐng)求量過(guò)多怎么解決贡避？
如何分析：
1.先通過(guò)瀏覽器的Network可以確定首頁(yè)加載的資源和請(qǐng)求量
- request：請(qǐng)求數(shù)量
- resources：前端資源總大小
- DOMContentLoaded：瀏覽器已經(jīng)完全加載了HTML痛黎，其他靜態(tài)資源（js，css刮吧，圖片等）
- load：瀏覽器已經(jīng)加載了所有的靜態(tài)資源
2.通過(guò)converge來(lái)查看代碼的使用狀況
- 只針對(duì)js和css
- 可以看出哪些代碼雖然加載了但是沒(méi)有執(zhí)行
- 沒(méi)有執(zhí)行的代碼可以考慮一下是否可以懶加載
A：可以通過(guò)減少資源的請(qǐng)求量
- 通過(guò)nginx服務(wù)器來(lái)做資源文件合并--將多個(gè)js/css文件合并成一個(gè)(nginx 添加nginx-http-concat模塊)
- 通過(guò)打包工具來(lái)做資源文件的物理打包
總結(jié)
? 1）通過(guò)nginx服務(wù)器來(lái)做資源文件的合并或者通過(guò)webpack等打包工具進(jìn)行物理打包
? 2) 在代碼層面,對(duì)于需要引入一些大型第三方庫(kù)的時(shí)候,可以通過(guò)特定的Babel插件來(lái)進(jìn)行按需加載
? 3)還有可以使用react lazy或其他動(dòng)態(tài)導(dǎo)入方案來(lái)進(jìn)行前端路由層面的動(dòng)態(tài)加載湖饱，從而可以減少
? 首頁(yè)的js和css的大小
答題思路
對(duì)于首頁(yè)加載慢的問(wèn)題，一般是由于加載資源過(guò)多杀捻，并且資源過(guò)大導(dǎo)致井厌。 所以應(yīng)對(duì)的策略就減少資源的數(shù)量以及減小資源的大小 1）對(duì)于圖片可以懶加載，減少首屏圖片加載量致讥。小圖片使用雪碧圖來(lái)解決仅仆，最大程度減少首屏圖片數(shù)量，從而提升 首頁(yè)渲染性能 2）對(duì)于其他資源可以通過(guò)打包（nginx-http-concat或者webpack打包）來(lái)合并資源垢袱，并可以通過(guò)懶加載路由的方 式來(lái)減小首頁(yè)js的加載量 3）減小資源的方式可以通過(guò)壓縮和混淆加密來(lái)減小文件體積墓拜，圖片可以使用工具來(lái)壓縮或者使用webp格式 4）同時(shí)可在服務(wù)器開(kāi)始gzip壓縮來(lái)最大化減少所有文件體積
- 優(yōu)化圖片的做法
1）可以通過(guò)懶加載減少圖片的請(qǐng)求，或者通過(guò)雪碧圖來(lái)合并圖片请契，以及將小圖轉(zhuǎn)化成base64的格式咳榜，來(lái)解決請(qǐng)多的 問(wèn)題 2）圖片大的問(wèn)題，可以通過(guò)自動(dòng)化壓縮工具來(lái)壓縮圖片爽锥，或者使用webp格式的圖片
實(shí)現(xiàn)webpack打包優(yōu)化
實(shí)現(xiàn)CDN加速
CDN 服務(wù)器主要是用來(lái)放靜態(tài)資源的服務(wù)器涌韩，可以用來(lái)加速靜態(tài)資源的下載 CDN 之所以能夠加速，是因?yàn)闀?huì)在很多地方都部署 CDN 服務(wù)器氯夷，如果用戶需要下載靜態(tài)資源臣樱，會(huì)自動(dòng)選擇最近的節(jié)點(diǎn)下載 同時(shí)由于 CDN 服務(wù)器的地址一般都跟主服務(wù)器的地址不同，所以可以破除瀏覽器對(duì)同一個(gè)域名發(fā)送請(qǐng)求的限制
函數(shù)的副作用
結(jié)構(gòu)復(fù)制腮考。雇毫。。
hooks
dea
set map
