最近技術(shù)上有沒有做什么學(xué)習(xí)和研究？

分享一個(gè)最近工作中前端解決的問題。

打包優(yōu)化，怎么做的？

----------. flex grid布局的了解？

------CSS選擇符有哪些?優(yōu)先級(jí)
id選擇器（#box），選擇id為box的元素
類選擇器（.one），選擇類名為one的所有元素
標(biāo)簽選擇器（div），選擇標(biāo)簽為div的所有元素
后代選擇器（#box div），選擇id為box元素內(nèi)部所有的div元素
子選擇器（.one>one_1），選擇父元素為.one的所有.one_1的元素
相鄰?fù)x擇器（.one+.two），選擇緊接在.one之后的所有.two元素
群組選擇器（div,p），選擇div、p的所有元素
內(nèi)聯(lián) > ID選擇器 > 類選擇器 > 標(biāo)簽選擇器
-------2.https和http的區(qū)別
http傳輸?shù)臄?shù)據(jù)都是未加密的，也就是明文的，網(wǎng)景公司設(shè)置了SSL協(xié)議來對(duì)http協(xié)議傳輸?shù)臄?shù)據(jù)進(jìn)行加密處理，簡(jiǎn)單來說https協(xié)議是由http和ssl協(xié)議構(gòu)建的可進(jìn)行加密傳輸和身份認(rèn)證的網(wǎng)絡(luò)協(xié)議，比http協(xié)議的安全性更高。主要的區(qū)別如下：

Https協(xié)議需要ca證書，費(fèi)用較高。
http是超文本傳輸協(xié)議，信息是明文傳輸，https則是具有安全性的ssl加密傳輸協(xié)議。
使用不同的鏈接方式，端口也不同，一般而言，http協(xié)議的端口為80，https的端口為443
http的連接很簡(jiǎn)單，是無狀態(tài)的；HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議，比http協(xié)議安全。

3.ES6新特性
--------說說var、let、const之間的區(qū)別

------你是怎么理解ES6新增Set、Map兩種數(shù)據(jù)結(jié)構(gòu)的？
利用ES6 Set去重（ES6中最常用）
如果要用一句來描述，我們可以說

Set是一種叫做集合的數(shù)據(jù)結(jié)構(gòu)，Map是一種叫做字典的數(shù)據(jù)結(jié)構(gòu)

什么是集合？什么又是字典？

集合
是由一堆無序的、相關(guān)聯(lián)的，且不重復(fù)的內(nèi)存結(jié)構(gòu)【數(shù)學(xué)中稱為元素】組成的組合

字典
是一些元素的集合。每個(gè)元素有一個(gè)稱作key 的域，不同元素的key 各不相同

區(qū)別？

共同點(diǎn)：集合、字典都可以存儲(chǔ)不重復(fù)的值
不同點(diǎn)：集合是以[值，值]的形式存儲(chǔ)元素，字典是以[鍵，值]的形式存儲(chǔ)

-----------淺度克隆:

原始類型為值傳遞, 對(duì)象類型仍為引用傳遞

深度克隆:

所有元素或?qū)傩跃耆珡?fù)制, 與原對(duì)象完全脫離, 也就是說所有對(duì)于新對(duì)象的修改都不會(huì)反映到原對(duì)象中

------6、Cookie、sessionStorage、localStorage的區(qū)別

參考答案

共同點(diǎn)：都是保存在瀏覽器端，并且是同源的

Cookie：cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要），即cookie在瀏覽器和服務(wù)器間來回傳遞。而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。cookie數(shù)據(jù)還有路徑（path）的概念，可以限制cookie只屬于某個(gè)路徑下,存儲(chǔ)的大小很小只有4K左右。（key：可以在瀏覽器和服務(wù)器端來回傳遞，存儲(chǔ)容量小，只有大約4K左右）
sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效，自然也就不可能持久保持，localStorage：始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)；cookie只在設(shè)置的cookie過期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉。（key：本身就是一個(gè)回話過程，關(guān)閉瀏覽器后消失，session為一個(gè)回話，當(dāng)頁面不同即使是同一頁面打開兩次，也被視為同一次回話）
localStorage：localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。（key：同源窗口都會(huì)共享，并且不會(huì)失效，不管窗口或者瀏覽器關(guān)閉與否都會(huì)始終生效）

-----10、說幾條web前端優(yōu)化策略

參考答案

(1). 減少HTTP請(qǐng)求數(shù)

這條策略基本上所有前端人都知道，而且也是最重要最有效的。都說要減少HTTP請(qǐng)求，那請(qǐng)求多了到底會(huì)怎么樣呢？首先，每個(gè)請(qǐng)求都是有成本的，既包 含時(shí)間成本也包含資源成本。一個(gè)完整的請(qǐng)求都需要經(jīng)過DNS尋址、與服務(wù)器建立連接、發(fā)送數(shù)據(jù)、等待服務(wù)器響應(yīng)、接收數(shù)據(jù)這樣一個(gè)“漫長”而復(fù)雜的過程。時(shí)間成本就是用戶需要看到或者“感受”到這個(gè)資源是必須要等待這個(gè)過程結(jié)束的，資源上由于每個(gè)請(qǐng)求都需要攜帶數(shù)據(jù)，因此每個(gè)請(qǐng)求都需要占用帶寬。

另外，由于瀏覽器進(jìn)行并發(fā)請(qǐng)求的請(qǐng)求數(shù)是有上限的，因此請(qǐng)求數(shù)多了以后，瀏覽器需要分批進(jìn)行請(qǐng)求，因此會(huì)增加用戶的等待時(shí)間，會(huì)給 用戶造成站點(diǎn)速度慢這樣一個(gè)印象，即使可能用戶能看到的第一屏的資源都已經(jīng)請(qǐng)求完了，但是瀏覽器的進(jìn)度條會(huì)一直存在。減少HTTP請(qǐng)求數(shù)的主要途徑包括：

(2). 從設(shè)計(jì)實(shí)現(xiàn)層面簡(jiǎn)化頁面

如果你的頁面像百度首頁一樣簡(jiǎn)單，那么接下來的規(guī)則基本上都用不著了。保持頁面簡(jiǎn)潔、減少資源的使用時(shí)最直接的。如果不是這樣，你的頁面需要華麗的皮膚，則繼續(xù)閱讀下面的內(nèi)容。

(3). 合理設(shè)置HTTP緩存

緩存的力量是強(qiáng)大的，恰當(dāng)?shù)木彺嬖O(shè)置可以大大的減少HTTP請(qǐng)求。以有啊首頁為例，當(dāng)瀏覽器沒有緩存的時(shí)候訪問一共會(huì)發(fā)出78個(gè)請(qǐng)求，共600多K 數(shù)據(jù)（如圖1.1），而當(dāng)?shù)诙卧L問即瀏覽器已緩存之后訪問則僅有10個(gè)請(qǐng)求，共20多K數(shù)據(jù)（如圖1.2）。（這里需要說明的是，如果直接F5刷新頁面 的話效果是不一樣的，這種情況下請(qǐng)求數(shù)還是一樣，不過被緩存資源的請(qǐng)求服務(wù)器是304響應(yīng)，只有Header沒有Body，可以節(jié)省帶寬）

怎樣才算合理設(shè)置？原則很簡(jiǎn)單，能緩存越多越好，能緩存越久越好。例如，很少變化的圖片資源可以直接通過HTTP Header中的Expires設(shè)置一個(gè)很長的過期頭；變化不頻繁而又可能會(huì)變的資源可以使用Last-Modifed來做請(qǐng)求驗(yàn)證。盡可能的讓資源能夠 在緩存中待得更久。

(4). 資源合并與壓縮

如果可以的話，盡可能的將外部的腳本、樣式進(jìn)行合并，多個(gè)合為一個(gè)。另外，CSS、Javascript、Image都可以用相應(yīng)的工具進(jìn)行壓縮，壓縮后往往能省下不少空間。

(5). CSS Sprites

合并CSS圖片，減少請(qǐng)求數(shù)的又一個(gè)好辦法。

(6). Inline Images

使用data: URL scheme的方式將圖片嵌入到頁面或CSS中，如果不考慮資源管理上的問題的話，不失為一個(gè)好辦法。如果是嵌入頁面的話換來的是增大了頁面的體積，而且無法利用瀏覽器緩存。使用在CSS中的圖片則更為理想一些。

(7). Lazy Load Images

這條策略實(shí)際上并不一定能減少HTTP請(qǐng)求數(shù)，但是卻能在某些條件下或者頁面剛加載時(shí)減少HTTP請(qǐng)求數(shù)。對(duì)于圖片而言，在頁面剛加載的時(shí)候可以只 加載第一屏，當(dāng)用戶繼續(xù)往后滾屏的時(shí)候才加載后續(xù)的圖片。這樣一來，假如用戶只對(duì)第一屏的內(nèi)容感興趣時(shí)，那剩余的圖片請(qǐng)求就都節(jié)省了。有啊首頁曾經(jīng)的做法 是在加載的時(shí)候把第一屏之后的圖片地址緩存在Textarea標(biāo)簽中，待用戶往下滾屏的時(shí)候才“惰性”加載。

3、== 和 ===區(qū)別
相等操作符（==）會(huì)做類型轉(zhuǎn)換，再進(jìn)行值的比較，全等運(yùn)算符(===)不會(huì)做類型轉(zhuǎn)換

------2、Vue組件通信

父組件向子組件傳值
父組件發(fā)送的形式是以屬性的形式綁定值到子組件身上。
然后子組件用屬性props接收
在props中使用駝峰形式，模板中需要使用短橫線的形式字符串形式的模板中沒有這個(gè)限制
子組件向父組件傳值
子組件用emit() 第一個(gè)參數(shù)為 自定義的事件名稱 第二個(gè)參數(shù)為需要傳遞的數(shù)據(jù) $(event)來接收
父組件用v-on 縮寫為@ 監(jiān)聽子組件的事件

5、v-show和v-if的區(qū)別
v-show原理是修改元素的css屬性display:none來決定是顯示還是隱藏

v-if則是通過操作DOM來進(jìn)行切換顯示