有幸進(jìn)入百度運(yùn)維部進(jìn)行面試，面的是運(yùn)維部的研發(fā)工程師蚁滋，涉及前端和運(yùn)維宿接。9月29號(hào)下午2點(diǎn)面的，一面通過(guò)后緊接著二面辕录，現(xiàn)在等結(jié)果睦霎，不知道會(huì)不會(huì)有三面...不管怎么樣，還是要總結(jié)一下之前被忽略的“前端性能優(yōu)化問(wèn)題”走诞。
問(wèn)題是：web頁(yè)面性能在前端副女、NA（Native App）端和后端各有哪些優(yōu)化方法？
1.優(yōu)化圖像
圖像在吸引訪客方面起著舉足輕重的作用蚣旱，但是你添加到頁(yè)面上的每一張圖片都需要用戶(hù)從你的服務(wù)器下載到他們的電腦上碑幅，這無(wú)疑增加了頁(yè)面的加載時(shí)間，因此若加載時(shí)間過(guò)長(zhǎng)很可能會(huì)讓用戶(hù)離開(kāi)你的網(wǎng)站塞绿。所以沟涨，優(yōu)化圖像是非常必要的。
優(yōu)化圖像的方法有：
a.使用CSS Sprites（雪碧圖）异吻、CSS3寫(xiě)的圖裹赴、base64位引用小的icon圖；
b.支持WebP圖片格式诀浪；
c.支持針對(duì)不同的網(wǎng)絡(luò)帶寬下載不同的圖片格式棋返，比如WIFI下載高清圖，4G普通圖雷猪，3G低質(zhì)量的圖睛竣；
d.png為無(wú)損格式，適合精準(zhǔn)的按鈕圖標(biāo)求摇；在網(wǎng)頁(yè)中需要瀏覽大圖時(shí)射沟，采用jpg壓縮格式嫉你，能夠大大節(jié)省流量；
e.圖片的懶加載躏惋、預(yù)加載；
f.減小圖片大小嚷辅、減少圖片請(qǐng)求簿姨。
2.減少文件數(shù)量或壓縮文件
a.許多JS、CSS文件可以合并時(shí)最好合并簸搞，減少頁(yè)面上的文件數(shù)量可以減少http請(qǐng)求數(shù)扁位；
b.壓縮JS、CSS文件趁俊。
3.將CSS文件放在頁(yè)面頂部域仇，而JS文件放在底部
a.把 CSS文件放在頁(yè)面頂部可以禁止頁(yè)面逐步渲染，節(jié)省瀏覽器加載和重繪頁(yè)面的資源寺擂；
b.把JS文件放在底部可以避免代碼執(zhí)行前的等待時(shí)間暇务，從而提升頁(yè)面加載速度（在某些情況下，需要將JS在頁(yè)面的頂部加載怔软，如某些第三方跟蹤腳本）垦细。
4.異步加載JS
5.延遲加載和執(zhí)行非必要腳本
網(wǎng)頁(yè)中有很多腳本在頁(yè)面完全加載完前都是不需要執(zhí)行的，所以可以延遲加載和執(zhí)行非必要腳本挡逼。這些腳本可以在onload事件之后執(zhí)行括改，避免對(duì)網(wǎng)頁(yè)上重要內(nèi)容的呈現(xiàn)造成影響。這些腳本可以是你自己網(wǎng)頁(yè)的腳本家坎，更多的是一些第三方腳本嘱能，比如評(píng)論、廣告虱疏、智能推薦惹骂、分享等等，而這些完全可以等主題內(nèi)容加載完后再執(zhí)行订框。
6.減少DNS查詢(xún)
DNS查詢(xún)需要很長(zhǎng)時(shí)間來(lái)返回一個(gè)主機(jī)名的IP地址析苫，而瀏覽器在查詢(xún)結(jié)束前不會(huì)進(jìn)行任何操作。所以應(yīng)該減少外部JS穿扳、CSS衩侥、圖片等資源的引用，不同域名的使用越少越好矛物。
7.客戶(hù)端預(yù)加載（利用瀏覽器緩存）
瀏覽器緩存是允許訪客的瀏覽器緩存你網(wǎng)站頁(yè)面副本的一個(gè)功能茫死。這可以使訪客再次訪問(wèn)時(shí)，直接從緩存中讀取內(nèi)容而不必重新加載履羞，這就節(jié)省了向服務(wù)器發(fā)送HTTP請(qǐng)求的時(shí)間峦萎。此外優(yōu)化你的網(wǎng)站的緩存系統(tǒng)往往也會(huì)降低你的網(wǎng)站的帶寬和托管費(fèi)用屡久。
8.使用CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）
CDN的全稱(chēng)是Content Dilivery Network，即內(nèi)容分發(fā)網(wǎng)絡(luò)爱榔。它可以使用戶(hù)就近取得所需內(nèi)容被环，解決網(wǎng)絡(luò)擁塞的情況（當(dāng)時(shí)有被問(wèn)到“CDN是如何實(shí)現(xiàn)加速的”，這是答案详幽！）筛欢。就好比在某貓超市上買(mǎi)東西，他會(huì)根據(jù)你的收貨地址來(lái)選擇發(fā)貨的倉(cāng)庫(kù)唇聘。CDN網(wǎng)絡(luò)可以將源站的內(nèi)容緩存到分布全球的CDN節(jié)點(diǎn)版姑，根據(jù)用戶(hù)訪問(wèn)的IP，就近連接CDN迟郎，提高網(wǎng)站響應(yīng)速度剥险。
9.啟用GZIP壓縮
在服務(wù)器上壓縮網(wǎng)站的頁(yè)面是提升網(wǎng)站訪問(wèn)速度非常有效的一種方法。使用GZIP壓縮可以做到這一點(diǎn)宪肖。GZIP是一個(gè)減小發(fā)送給訪客的HTML表制、JS、CSS文件體積的工具控乾。壓縮的文件可以減少HTTP響應(yīng)時(shí)間夫凸。據(jù)Yahoo報(bào)道，該方法可以減少70%的下載時(shí)間阱持。而目前90%的通過(guò)瀏覽器的流量都支持GZIP壓縮夭拌，因此，這是一個(gè)提升網(wǎng)站性能有效的選項(xiàng)衷咽。
10.靜態(tài)文件放在單獨(dú)域名的服務(wù)器上
a.避免請(qǐng)求靜態(tài)資源文件時(shí)攜帶cookie信息鸽扁，增加請(qǐng)求損耗；
b.突破瀏覽器并發(fā)限制镶骗，像地圖之類(lèi)的需要大量并發(fā)下載圖片的站點(diǎn)桶现，這一點(diǎn)非常重要。
