一剩彬、請(qǐng)說出幾種優(yōu)化前端性能的方法。（加載時(shí)間指感知的時(shí)間或者實(shí)際加載時(shí)間）
1. 減少HTTP請(qǐng)求次數(shù)
盡量合并圖片矿卑、CSS喉恋、JS。比如加載一個(gè)頁(yè)面母廷，如果有5個(gè)css文件的話轻黑，那么會(huì)發(fā)出5次http請(qǐng)求，這樣會(huì)讓用戶第一次訪問你的頁(yè)面的時(shí)候會(huì)長(zhǎng)時(shí)間等待琴昆。而如果把這個(gè)5個(gè)文件合成一個(gè)的話氓鄙，就只需要發(fā)出一次http請(qǐng)求，節(jié)省網(wǎng)絡(luò)請(qǐng)求時(shí)間业舍，加快頁(yè)面的加載抖拦。
2. 使用CDN
網(wǎng)站上靜態(tài)資源即css、js全都使用cdn分發(fā)舷暮，圖片亦然态罪。
3. 避免空的src和href
當(dāng)link標(biāo)簽的href屬性為空、script標(biāo)簽的src屬性為空的時(shí)候下面，瀏覽器渲染的時(shí)候會(huì)把當(dāng)前頁(yè)面的URL作為它們的屬性值复颈，從而把頁(yè)面的內(nèi)容加載進(jìn)來(lái)作為它們的值。所以要避免犯這樣的疏忽诸狭。
4. 為文件頭指定Expires
Exipres是用來(lái)設(shè)置文件的過期時(shí)間的券膀，一般對(duì)css、js驯遇、圖片資源有效芹彬。? 他可以使內(nèi)容具有緩存性，這樣下回再訪問同樣的資源時(shí)就通過瀏覽器緩存區(qū)讀取叉庐，不需要再發(fā)出http請(qǐng)求舒帮。如下例子：
<img src="https://pic1.zhimg.com/bfa4b58630eec8492318aa88cbb23378_b.png" data-rawwidth="1266" data-rawheight="160" class="origin_image zh-lightbox-thumb" width="1266" data-original="https://pic1.zhimg.com/bfa4b58630eec8492318aa88cbb23378_r.png">新浪微博的這個(gè)css文件的Expires時(shí)間是2016-5-04 09:14:14.
新浪微博的這個(gè)css文件的Expires時(shí)間是2016-5-04 09:14:14.
5. 使用gzip壓縮內(nèi)容
gzip能夠壓縮任何一個(gè)文本類型的響應(yīng)，包括html，xml玩郊，json肢执。大大縮小請(qǐng)求返回的數(shù)據(jù)量。
6. 把CSS放到頂部
網(wǎng)頁(yè)上的資源加載時(shí)從上網(wǎng)下順序加載的译红，所以css放在頁(yè)面的頂部能夠優(yōu)先渲染頁(yè)面预茄，讓用戶感覺頁(yè)面加載很快。
7. 把JS放到底部
加載js時(shí)會(huì)對(duì)后續(xù)的資源造成阻塞侦厚，必須得等js加載完才去加載后續(xù)的文件 耻陕，所以就把js放在頁(yè)面底部最后加載。
8. 避免使用CSS表達(dá)式
舉個(gè)css表達(dá)式的例子
font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF" : “#AAAAAA" );
這個(gè)表達(dá)式會(huì)持續(xù)的在頁(yè)面上計(jì)算樣式刨沦，影響頁(yè)面的性能诗宣。并且css表達(dá)式只被IE支持。
9. 將CSS和JS放到外部文件中
目的是緩存文件想诅，可以參考原則4召庞。 但有時(shí)候?yàn)榱藴p少請(qǐng)求，也會(huì)直接寫到頁(yè)面里来破，需根據(jù)PV和IP的比例權(quán)衡篮灼。
10. 權(quán)衡DNS查找次數(shù)
減少主機(jī)名可以節(jié)省響應(yīng)時(shí)間。但同時(shí)讳癌，需要注意穿稳，減少主機(jī)會(huì)減少頁(yè)面中并行下載的數(shù)量存皂。
IE瀏覽器在同一時(shí)刻只能從同一域名下載兩個(gè)文件晌坤。當(dāng)在一個(gè)頁(yè)面顯示多張圖片時(shí)，IE 用戶的圖片下載速度就會(huì)受到影響旦袋。所以新浪會(huì)搞N個(gè)二級(jí)域名來(lái)放圖片骤菠。
下面是新浪微博的圖片域名，我們可以看到他有多個(gè)域名疤孕，這樣可以保證這些不同域名能夠同時(shí)去下載圖片商乎，而不用排隊(duì)。不過如果當(dāng)使用的域名過多時(shí)祭阀，響應(yīng)時(shí)間就會(huì)慢鹉戚，因?yàn)椴挥庙憫?yīng)域名時(shí)間不一致。
<img src="https://pic3.zhimg.com/1b3b00a1c147fc9211b6a90d55788a22_b.png" data-rawwidth="599" data-rawheight="62" class="origin_image zh-lightbox-thumb" width="599" data-original="https://pic3.zhimg.com/1b3b00a1c147fc9211b6a90d55788a22_r.png">
11. 精簡(jiǎn)CSS和JS
這里就涉及到css和js的壓縮了专控。比如下面的新浪的一個(gè)css文件抹凳，把空格回車全部去掉，減少文件的大小÷赘現(xiàn)在的壓縮工具有很多赢底，基本主流的前端構(gòu)建工具都能進(jìn)行css和js文件的壓縮，如grunt，glup等幸冻。
12. 避免跳轉(zhuǎn)
二粹庞、請(qǐng)描述一下cookies，sessionStorage和localStorage的區(qū)別洽损？
sessionStorage和localStorage是HTML5 Web Storage API提供的庞溜，可以方便的在web請(qǐng)求之間保存數(shù)據(jù)。
有了本地?cái)?shù)據(jù)碑定，就可以避免數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來(lái)回傳遞强缘。
sessionStorage、localStorage不傅、cookie都是在瀏覽器端存儲(chǔ)的數(shù)據(jù)旅掂，其中sessionStorage的概念很特別，引入了一個(gè)“瀏覽器窗口”的概念访娶。
sessionStorage是在同源的同窗口（或tab）中商虐，始終存在的數(shù)據(jù)。也就是說只要這個(gè)瀏覽器窗口沒有關(guān)閉崖疤，即使刷新頁(yè)面或進(jìn)入同源另一頁(yè)面秘车，數(shù)據(jù)仍然存在。
關(guān)閉窗口后劫哼，sessionStorage即被銷毀叮趴。同時(shí)“獨(dú)立”打開的不同窗口，即使是同一頁(yè)面权烧，sessionStorage對(duì)象也是不同的cookies會(huì)發(fā)送到服務(wù)器端眯亦。其余兩個(gè)不會(huì)。Microsoft指出InternetExplorer8增加cookie限制為每個(gè)域名50個(gè)般码，但I(xiàn)E7似乎也允許每個(gè)域名50個(gè)cookie妻率。
三、javascript中的MVVM開發(fā)模式?是什么
它是MVC模式的衍生物板祝，MVVM模式的關(guān)注點(diǎn)在能夠支持事件驅(qū)動(dòng)的UI開發(fā)平臺(tái)
大部分都是通過在view層聲明數(shù)據(jù)綁定來(lái)和其他層分離的宫静，這樣就方便了前端開發(fā)人員和后端開發(fā)人員 的分工，前端開發(fā)人員在html標(biāo)簽中寫對(duì)viewmodel的綁定數(shù)據(jù)券时，model和viewmodel是后端開發(fā)人員通過開發(fā)應(yīng)用的邏輯來(lái)維護(hù)這兩層孤里。
優(yōu)點(diǎn)：
MVVM使并行開發(fā)更加容易，使前端開發(fā)和后端開發(fā)人員互不影響橘洞。
抽象化View層捌袜，減少了代碼中的業(yè)務(wù)邏輯
ViewModel比事件驅(qū)動(dòng)更容易測(cè)試
ViewModel的測(cè)試不用關(guān)心uI的自動(dòng)化和交互
