1.手寫(xiě)promise封裝axios
2.如何解決回調(diào)地獄
3.請(qǐng)?jiān)斀庖苿?dòng)端點(diǎn)透發(fā)生場(chǎng)景、原因及解決方案(最優(yōu))
4.詳述前端性能優(yōu)化的手段
5.瀏覽器輸入網(wǎng)址回車(chē)發(fā)生了什么
6.頁(yè)面的渲染過(guò)程
7.列舉你知道的瀏覽器內(nèi)核
8.如何優(yōu)化SPA首屏加載慢的問(wèn)題
1.手寫(xiě)promise封裝axios
? ?promise 封裝 axios
發(fā)送一個(gè)請(qǐng)求后，客戶(hù)端無(wú)法確定什么時(shí)候會(huì)完成這個(gè)請(qǐng)求，所以需要用事件機(jī)制來(lái)捕獲請(qǐng)求的狀態(tài)，XMLHttpRequest對(duì)象提供了onreadyStateChange事件實(shí)現(xiàn)這一功能。這類(lèi)似于回調(diào)函數(shù)的做法。
簡(jiǎn)單說(shuō)服務(wù)器已經(jīng)收到了請(qǐng)求，但是不知道怎么處理onreadyStateChange事件就是給我們提供了一個(gè)回調(diào)函數(shù)，在這個(gè)回調(diào)函數(shù)里，來(lái)執(zhí)行我們要得到的操作，還有一個(gè)readyState屬性
readyState屬性發(fā)生改變時(shí)觸發(fā)的，readyState的值表示了當(dāng)前請(qǐng)求的狀態(tài)，在事件處理程序中可以根據(jù)這個(gè)值來(lái)進(jìn)行不同的處理。 readyState有五種可取值0：尚未初始化，1：正在加載，2：加載完畢，3：正在處理；4：處理完畢。一旦readyState屬性的值變成了4，就可以從服務(wù)器返回的響應(yīng)數(shù)據(jù)進(jìn)行訪(fǎng)問(wèn)了。
2.如何解決回調(diào)地獄
? ? ? ? 一、拆解function
? ??????二、事件發(fā)布/監(jiān)聽(tīng)模式
? ??????三、Promise
? ??????四、Generator
? ??????五、async/await
3.請(qǐng)?jiān)斀庖苿?dòng)端點(diǎn)透發(fā)生場(chǎng)景、原因及解決方案(最優(yōu))
? ??????點(diǎn)透問(wèn)題出現(xiàn)的場(chǎng)景
????????????當(dāng)A/B兩個(gè)層上下z軸重疊，上層的A點(diǎn)擊后消失或移開(kāi)（這一點(diǎn)很重要），并且B元素本身有默認(rèn)click事件（如a標(biāo)簽）或綁定了click事件。在這種情況下，點(diǎn)擊A/B重疊的部分，就會(huì)出現(xiàn)點(diǎn)透的現(xiàn)象。
????????總結(jié)如下：
????????????A/B兩個(gè)層上下z軸重疊（上下重疊，A蓋著B(niǎo)）。
????????????上層的A點(diǎn)擊后消失或移開(kāi)。（這一點(diǎn)很重要）
????????????B元素本身有默認(rèn)click事件（如a標(biāo)簽） 或 B綁定了click事件。
????????點(diǎn)透問(wèn)題的出現(xiàn)原因
????????????點(diǎn)透問(wèn)題出現(xiàn)的原因就是因?yàn)槲覀兩线呎f(shuō)過(guò)的移動(dòng)端click事件300ms延遲問(wèn)題，當(dāng)點(diǎn)擊上層元素時(shí)，先觸發(fā)touchstart事件，然后在300ms后會(huì)觸發(fā)click事件，而此時(shí)上層元素已經(jīng)消失，所以下邊的元素會(huì)觸發(fā)click事件，這就是點(diǎn)透
????????點(diǎn)透問(wèn)題的解決方案
????????????1、fastclick.js????
????????????????fastclick.js既然可以解決click300ms延遲，那必然可以解決點(diǎn)透問(wèn)題，使用方法如上文所述。
????????????2、對(duì)于B元素本身存在默認(rèn)click事件的情況，使用touchend代替touchstart事件并阻止掉時(shí)A元素touchend的默認(rèn)行為
????????????????preventDefault()，因?yàn)橛|發(fā)touchend需要200ms，從而阻止click事件的產(chǎn)生。
????????????3、使用一個(gè)(透明)遮罩層，屏蔽所有事件，然后400ms(對(duì)于IOS來(lái)說(shuō)是個(gè)理想值)后自動(dòng)隱藏
????????????4、延遲一定的時(shí)間(300ms+)來(lái)處理事件
????????????5、直接使用click事件，不考慮延遲問(wèn)題
????????????6、下層避開(kāi)click事件，如a鏈接改為span等標(biāo)簽，使用js跳轉(zhuǎn)頁(yè)面
4.詳述前端性能優(yōu)化的手段
1.減少http請(qǐng)求數(shù)
常用的減少http請(qǐng)求數(shù)有以下幾種：
1）合并圖片。當(dāng)圖片較多時(shí)，可以合并為一張大圖，從而減少http請(qǐng)求數(shù)。經(jīng)常變化的圖片可能不太合適，變化相對(duì)穩(wěn)定的就可以考慮。合并大圖除了能減少http?請(qǐng)求數(shù)外，還可以充分利用緩存來(lái)提升性能。
2）合并壓縮css樣式表和js腳本，他們的共同目的都是為了減少http連接數(shù)。
3）去掉不必要的請(qǐng)求。開(kāi)發(fā)寫(xiě)代碼或者系統(tǒng)升級(jí)之后殘留的無(wú)效請(qǐng)求連接。
4）充分利用緩存。這里說(shuō)的緩存是客戶(hù)端側(cè)緩存或者說(shuō)瀏覽器緩存。Expires頭信息是客戶(hù)端側(cè)緩存的重要依據(jù)，格式類(lèi)似于Expires:sun ,20 Dec 2017 23:00:00 GMT。 如果當(dāng)前時(shí)間小于Expires指定的時(shí)間，瀏覽器就會(huì)從緩存中直接獲取相關(guān)的數(shù)據(jù)信息或html文件，如果當(dāng)前時(shí)間大于Expires指定的時(shí)間，瀏覽器會(huì)向服務(wù)器發(fā)送請(qǐng)求來(lái)獲取相關(guān)數(shù)據(jù)信息。
以Apache為例，可在Apache的配置文件httpd.conf中設(shè)置Expires。
2.圖片優(yōu)化
優(yōu)化方法：
1）盡可能的使用PNG格式的圖片，它相對(duì)來(lái)說(shuō)體積較小。
2）對(duì)于不同格式的圖片，在上線(xiàn)之前最好進(jìn)行一定的優(yōu)化。
3）圖片的延遲加載，也叫做賴(lài)加載。
3.使用CDN
CDN即內(nèi)容分發(fā)網(wǎng)絡(luò)，可以使用戶(hù)就近取得所需內(nèi)容，解決網(wǎng)絡(luò)擁擠的狀況，提高用戶(hù)訪(fǎng)問(wèn)網(wǎng)站的響應(yīng)速度。
4.開(kāi)啟GZIP
GZIP即數(shù)據(jù)壓縮，用于壓縮使用Internet傳輸?shù)乃形谋举Y源。開(kāi)啟GZIP的方法很簡(jiǎn)單，到對(duì)應(yīng)的web服務(wù)配置文件中設(shè)置一下即可。以Apache為例，在配置文件httpd.conf中添加。
5.樣式表和JS文件的優(yōu)化
一般我們會(huì)把css樣式表文件放到文件的頭部。比如，放到<head>標(biāo)簽中，這樣可以讓CSS樣式表盡早地完成下載。對(duì)應(yīng)js腳本文件，一般我們把他放到頁(yè)面的尾部。
6.使用無(wú)cookie域名
無(wú)cookie域名的概念:當(dāng)發(fā)送一個(gè)請(qǐng)求時(shí)，同時(shí)還要請(qǐng)求一張靜態(tài)的圖片和發(fā)送cookie時(shí)，服務(wù)器對(duì)于這些cookie不會(huì)做任何使用，也就是說(shuō)這些cookie沒(méi)什么用，沒(méi)不要隨請(qǐng)求一同發(fā)送。
7.前端代碼結(jié)構(gòu)的優(yōu)化
5.瀏覽器輸入網(wǎng)址回車(chē)發(fā)生了什么
? ?1.對(duì)www.baidu.com這個(gè)網(wǎng)址進(jìn)行DNS域名解析，得到對(duì)應(yīng)的IP地址
? ?2.根據(jù)這個(gè)IP，找到對(duì)應(yīng)的服務(wù)器，發(fā)起TCP的三次握手
? ?3.建立TCP連接后發(fā)起HTTP請(qǐng)求
? ?4.服務(wù)器響應(yīng)HTTP請(qǐng)求，瀏覽器得到html代碼
? ?5.瀏覽器解析html代碼，并請(qǐng)求html代碼中的資源（如js、css圖片等）（先得到html代碼，才能去找這些資源）
? ?6.瀏覽器對(duì)頁(yè)面進(jìn)行渲染呈現(xiàn)給用戶(hù)
6.頁(yè)面的渲染過(guò)程
1.用戶(hù)的請(qǐng)求數(shù)據(jù)通過(guò)控制器交給模型來(lái)處理（圖中的2）
2.模型根據(jù)用戶(hù)的請(qǐng)求數(shù)據(jù)，在數(shù)據(jù)庫(kù)中查詢(xún)，調(diào)用相應(yīng)的數(shù)據(jù)返回給控制器（圖中的345）
3.控制器得到數(shù)據(jù)庫(kù)返回?cái)?shù)據(jù)后，交給視圖模板填充形成頁(yè)面的模板（頁(yè)面基本的代碼成型）
4.視圖模板填充好后，把數(shù)據(jù)反饋給控制器
5.控制器將數(shù)據(jù)反饋給瀏覽器
6.瀏覽器得到數(shù)據(jù)后，進(jìn)行相應(yīng)的渲染，呈現(xiàn)給用戶(hù)。
7.列舉你知道的瀏覽器內(nèi)核
1、Trident內(nèi)核：IE最先開(kāi)發(fā)或使用的，也稱(chēng)IE內(nèi)核，360瀏覽器使用的也是IE內(nèi)核；
2、blink內(nèi)核(之前是Webkit內(nèi)核)：谷歌chrome瀏覽器最先開(kāi)發(fā)或使用，也叫谷歌內(nèi)核，楓樹(shù)瀏覽器、太陽(yáng)花使用的也是谷歌內(nèi)核；
3、Gecko內(nèi)核： Netscape6開(kāi)始采用的內(nèi)核，后來(lái)的Mozilla FireFox (火狐瀏覽器) 也采用了該內(nèi)核，K-Meleon瀏覽器也是使用這種內(nèi)核；
4、Presto內(nèi)核：目前只有Opera瀏覽器采用該內(nèi)核
此外，由于IE瀏覽器在國(guó)內(nèi)的普及率非常高，所以造成了很多網(wǎng)上銀行和支付系統(tǒng)只支持IE的Trident內(nèi)核，其他瀏覽器訪(fǎng)問(wèn)根本無(wú)法進(jìn)行正常支付和轉(zhuǎn)賬等業(yè)務(wù)。這就造成了經(jīng)常在網(wǎng)上購(gòu)物的人離不開(kāi)Trident內(nèi)核的IE瀏覽器。但是Trident內(nèi)核的速度和兼容性上又是在比不上Chrome瀏覽器的WebKit內(nèi)核和Firefox瀏覽器的Gecko內(nèi)核。于是雙核瀏覽器應(yīng)運(yùn)而生，比如傲游、楓樹(shù)瀏覽器（ChromePlus）、搜狗高速瀏覽器
8.如何優(yōu)化SPA首屏加載慢的問(wèn)題
1、安裝動(dòng)態(tài)懶加載所需插件
2、去掉.extract ()
3、配置 output 輸出形式
4、配置 externals
5、在首頁(yè) HTML 掛載點(diǎn)之前引入靜態(tài)資源 CDN
6、配置 vue 路由
------form? ?小曼很nice
