有幸進(jìn)入百度運(yùn)維部進(jìn)行面試，面的是運(yùn)維部的研發(fā)工程師，涉及前端和運(yùn)維。9月29號下午2點(diǎn)面的，一面通過后緊接著二面，現(xiàn)在等結(jié)果，不知道會不會有三面...不管怎么樣，還是要總結(jié)一下之前被忽略的“前端性能優(yōu)化問題”。
問題是：web頁面性能在前端、NA（Native App）端和后端各有哪些優(yōu)化方法？
1.優(yōu)化圖像
圖像在吸引訪客方面起著舉足輕重的作用，但是你添加到頁面上的每一張圖片都需要用戶從你的服務(wù)器下載到他們的電腦上，這無疑增加了頁面的加載時(shí)間，因此若加載時(shí)間過長很可能會讓用戶離開你的網(wǎng)站。所以，優(yōu)化圖像是非常必要的。
優(yōu)化圖像的方法有：
a.使用CSS Sprites（雪碧圖）、CSS3寫的圖、base64位引用小的icon圖；
b.支持WebP圖片格式；
c.支持針對不同的網(wǎng)絡(luò)帶寬下載不同的圖片格式，比如WIFI下載高清圖，4G普通圖，3G低質(zhì)量的圖；
d.png為無損格式，適合精準(zhǔn)的按鈕圖標(biāo)；在網(wǎng)頁中需要瀏覽大圖時(shí)，采用jpg壓縮格式，能夠大大節(jié)省流量；
e.圖片的懶加載、預(yù)加載；
f.減小圖片大小、減少圖片請求。
2.減少文件數(shù)量或壓縮文件
a.許多JS、CSS文件可以合并時(shí)最好合并，減少頁面上的文件數(shù)量可以減少http請求數(shù)；
b.壓縮JS、CSS文件。
3.將CSS文件放在頁面頂部，而JS文件放在底部
a.把 CSS文件放在頁面頂部可以禁止頁面逐步渲染，節(jié)省瀏覽器加載和重繪頁面的資源；
b.把JS文件放在底部可以避免代碼執(zhí)行前的等待時(shí)間，從而提升頁面加載速度（在某些情況下，需要將JS在頁面的頂部加載，如某些第三方跟蹤腳本）。
4.異步加載JS
5.延遲加載和執(zhí)行非必要腳本
網(wǎng)頁中有很多腳本在頁面完全加載完前都是不需要執(zhí)行的，所以可以延遲加載和執(zhí)行非必要腳本。這些腳本可以在onload事件之后執(zhí)行，避免對網(wǎng)頁上重要內(nèi)容的呈現(xiàn)造成影響。這些腳本可以是你自己網(wǎng)頁的腳本，更多的是一些第三方腳本，比如評論、廣告、智能推薦、分享等等，而這些完全可以等主題內(nèi)容加載完后再執(zhí)行。
6.減少DNS查詢
DNS查詢需要很長時(shí)間來返回一個主機(jī)名的IP地址，而瀏覽器在查詢結(jié)束前不會進(jìn)行任何操作。所以應(yīng)該減少外部JS、CSS、圖片等資源的引用，不同域名的使用越少越好。
7.客戶端預(yù)加載（利用瀏覽器緩存）
瀏覽器緩存是允許訪客的瀏覽器緩存你網(wǎng)站頁面副本的一個功能。這可以使訪客再次訪問時(shí)，直接從緩存中讀取內(nèi)容而不必重新加載，這就節(jié)省了向服務(wù)器發(fā)送HTTP請求的時(shí)間。此外優(yōu)化你的網(wǎng)站的緩存系統(tǒng)往往也會降低你的網(wǎng)站的帶寬和托管費(fèi)用。
8.使用CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）
CDN的全稱是Content Dilivery Network，即內(nèi)容分發(fā)網(wǎng)絡(luò)。它可以使用戶就近取得所需內(nèi)容，解決網(wǎng)絡(luò)擁塞的情況（當(dāng)時(shí)有被問到“CDN是如何實(shí)現(xiàn)加速的”，這是答案！）。就好比在某貓超市上買東西，他會根據(jù)你的收貨地址來選擇發(fā)貨的倉庫。CDN網(wǎng)絡(luò)可以將源站的內(nèi)容緩存到分布全球的CDN節(jié)點(diǎn)，根據(jù)用戶訪問的IP，就近連接CDN，提高網(wǎng)站響應(yīng)速度。
9.啟用GZIP壓縮
在服務(wù)器上壓縮網(wǎng)站的頁面是提升網(wǎng)站訪問速度非常有效的一種方法。使用GZIP壓縮可以做到這一點(diǎn)。GZIP是一個減小發(fā)送給訪客的HTML、JS、CSS文件體積的工具。壓縮的文件可以減少HTTP響應(yīng)時(shí)間。據(jù)Yahoo報(bào)道，該方法可以減少70%的下載時(shí)間。而目前90%的通過瀏覽器的流量都支持GZIP壓縮，因此，這是一個提升網(wǎng)站性能有效的選項(xiàng)。
10.靜態(tài)文件放在單獨(dú)域名的服務(wù)器上
a.避免請求靜態(tài)資源文件時(shí)攜帶cookie信息，增加請求損耗；
b.突破瀏覽器并發(fā)限制，像地圖之類的需要大量并發(fā)下載圖片的站點(diǎn)，這一點(diǎn)非常重要。
