網(wǎng)站建設(shè)一個(gè)很重要的部分就是資源加載優(yōu)化。由于網(wǎng)站建設(shè)中網(wǎng)速低、帶寬低、延遲高、移動(dòng)設(shè)備內(nèi)存小、處理器性能低等問(wèn)題，往往需要優(yōu)化前端頁(yè)面的性能以滿足用戶對(duì)網(wǎng)頁(yè)加載的期望。前段時(shí)間做了相關(guān)方面的網(wǎng)站優(yōu)化，發(fā)現(xiàn)網(wǎng)上的中文教程比較少。我一步步跟著網(wǎng)站找問(wèn)題解決，所以整理翻譯了一些有用的網(wǎng)頁(yè)。網(wǎng)頁(yè)加載時(shí)間受網(wǎng)絡(luò)速度影響。一般都是用瀏覽器模擬一個(gè)特定的網(wǎng)速進(jìn)行測(cè)試，這樣優(yōu)化前的結(jié)果和優(yōu)化后的結(jié)果會(huì)有比較準(zhǔn)確的對(duì)比。

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

文件資源壓縮：去除多余的空格、換行、縮進(jìn)、注釋等不必要的字節(jié)，提高下載、解析、執(zhí)行速度。這種類型的在線工具有很多。合并文件：每個(gè)CSS和JS文件都是一次HTTP請(qǐng)求，將多個(gè)相關(guān)的文件適當(dāng)合并成一個(gè)文件，減少HTTP請(qǐng)求的次數(shù)。解決加載速度問(wèn)題，首先要減少網(wǎng)頁(yè)請(qǐng)求，比如css sprite、js/css壓縮、緩存、按需加載等。另一種方法是將資源放在不同的子域名下。比如將圖片資源與靜態(tài)資源分離，可以大大加快網(wǎng)頁(yè)的加載時(shí)間，但這種方式不適用于HTTP2連接。

2、充分利用緩存

使用緩存可以減少對(duì)服務(wù)器的請(qǐng)求次數(shù)，節(jié)省加載時(shí)間，所以所有的靜態(tài)資源都必須緩存在服務(wù)器端，盡量使用長(zhǎng)緩存。長(zhǎng)緩存資源的更新可以使用不同的時(shí)間戳進(jìn)行更新。合理設(shè)置資源的過(guò)期時(shí)間，尤其是一些不需要改動(dòng)的靜態(tài)資源，將緩存過(guò)期時(shí)間設(shè)置的長(zhǎng)些。

3、壓縮

網(wǎng)站經(jīng)過(guò)壓縮后，將使搜索引擎抓取網(wǎng)站更加順暢，提升用戶體驗(yàn)，更好地瀏覽網(wǎng)站內(nèi)容。 gzip整體網(wǎng)頁(yè)壓縮，目前很多虛擬主機(jī)都支持，不需要站長(zhǎng)操作。網(wǎng)站Gzip壓縮后，網(wǎng)頁(yè)打開(kāi)速度加快；網(wǎng)頁(yè)腳本資源的壓縮可以使用站長(zhǎng)工具的js壓縮工具。壓縮網(wǎng)站上不重要的圖片，可以大大減少虛擬主機(jī)的空間，加快網(wǎng)頁(yè)的加載速度；減少資源大小不僅可以減少存儲(chǔ)空間，還可以在網(wǎng)絡(luò)傳輸文件時(shí)減少傳輸時(shí)間，加快網(wǎng)頁(yè)的顯示速度。因此，需要對(duì)HTML、CSS、JavaScript等資源的代碼進(jìn)行壓縮。

4、優(yōu)化JavaScript加載性能

首屏盡量保持在1秒以內(nèi)。對(duì)于屏幕上不用的資源，應(yīng)該在用戶需要的時(shí)候加載（延遲加載、上拉滾動(dòng)加載）；可感知和不可感知的負(fù)載。隨著越來(lái)越多的應(yīng)用程序使用JavaScript技術(shù)在客戶端進(jìn)行處理，JavaScript在瀏覽器中的性能已經(jīng)成為開(kāi)發(fā)者面臨的最重要的問(wèn)題。 JavaScript 的性能優(yōu)化由于JavaScript 的阻塞特性而變得復(fù)雜，這意味著瀏覽器在執(zhí)行JavaScript 代碼時(shí)，不能同時(shí)做其他事情，也就是其他事情會(huì)被阻塞。不管當(dāng)前的JavaScript代碼是嵌入的還是外部鏈接文件中，頁(yè)面的下載和渲染都必須停下來(lái)等待腳本完成。 JavaScript 執(zhí)行時(shí)間越長(zhǎng)，瀏覽器等待響應(yīng)用戶輸入的時(shí)間就越長(zhǎng)。

5、CDN加速

通過(guò)CDN加速是一種比較昂貴的優(yōu)化方法，所以這些把它放在所有優(yōu)化方法的末尾，但卻是一種非常有效的優(yōu)化方案。 CDN的全稱是Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡(luò)。 CDN加速主要是對(duì)靜態(tài)資源進(jìn)行加速，比如網(wǎng)站上傳的圖片、媒體，以及一些導(dǎo)入的Js、CSS等文件。 CDN加速需要依賴各個(gè)網(wǎng)絡(luò)節(jié)點(diǎn)。例如，100臺(tái)CDN服務(wù)器分布在全國(guó)各地。從上海訪問(wèn)時(shí)，資源會(huì)從最近的節(jié)點(diǎn)返回。這是核心。 CDN服務(wù)器通過(guò)緩存或主動(dòng)抓取主服務(wù)器的內(nèi)容來(lái)實(shí)現(xiàn)資源儲(chǔ)備。

如何優(yōu)化網(wǎng)站的加載，對(duì)于一款移動(dòng)產(chǎn)品來(lái)說(shuō)，功能無(wú)疑是非常重要的，但性能也是用戶體驗(yàn)不可或缺的一部分。當(dāng)用戶能在1-2秒內(nèi)打開(kāi)一個(gè)手機(jī)頁(yè)面，看到信息的展示，或者開(kāi)始下一步的操作時(shí)，用戶會(huì)覺(jué)得速度還是可以接受的；如果2-5秒后頁(yè)面可用，在這種狀態(tài)下，用戶的耐心會(huì)逐漸喪失；如果一個(gè)界面顯示時(shí)間超過(guò)5秒甚至更長(zhǎng)，用戶基本無(wú)法忍受?？赡苡行┯脩魰?huì)注銷(xiāo)重新進(jìn)入，但更多的用戶會(huì)直接放棄。對(duì)于網(wǎng)站開(kāi)發(fā)者來(lái)說(shuō)，提升用戶體驗(yàn)是網(wǎng)站的核心價(jià)值，其中提升網(wǎng)站加載速度是最基本的用戶體驗(yàn)。

我們專注高端建站，小程序開(kāi)發(fā)、軟件系統(tǒng)定制開(kāi)發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開(kāi)發(fā)、各類API接口對(duì)接開(kāi)發(fā)等。十余年開(kāi)發(fā)經(jīng)驗(yàn)，每一個(gè)項(xiàng)目承諾做到滿意為止，多一次對(duì)比，一定讓您多一份收獲！